Ben Mearns: RWD Summit 2014

Here are some notes and thoughts I gathered during the 3-day Responsive Design Summit, which concluded today. Link to the live document.

Stop thinking about websites as collections of pages. They are collections of elements that, through a browser-based, collaborative, design process, that are mixed together into larger and larger collections. This new paradigm is helpful when doing responsive design, since “a page” is different across different screen sizes. You can start at the level of meaningful/reused DOM elements, disregarding content and style in conceptions, but adding the style and sometimes content (images?), when creating style tiles, style guides, and pattern libraries (public-facing example)
Pattern lab is a tool created for doing atomic design. It emphasizes browser-based design/decisions, going to the browser first instead of wireframing etc., producing the style tile/guide/and pattern libraries, producing clear annotation from code comments, and allowing naaive (non-programmer) changes within a template-like structure through JSON, using mustache

Design/decide on the browser. Avoid other deliverables and get the discussion immediately to the browser

Test with content (not lorem ipsum)
Wireframes can be bad … if you need to use wireframe, make it a part of your iterative, browser-based design process
Your own collection of “templates”, “starter kits”, etc. also help with this

Many elements of the workflow below are tuned to this (e.g., scaffolder, package/dependency manager, task runner, versioning, etc.)
Vagrant can be useful for reproducing lower level environments (OS, etc.) although it’s not clear if this should be used over the scaffolder, etc. … or if these complementary
Supports browser-based design
Workflow supports collaborative coding

Wireless network experience will not be improving anytime soon. This is due to the effect of latency (not bandwidth). International visitors will also be much more sensitive to site site. Some things to help

Can no longer use a limited set of breakpoints, use em’s and use additional self-set breakpoints … breakpoints relative to font size?
These other principals support responsive design … for example: browser based! Overlap in Designer/UX/Dev process and roles.
Frameworks: the two frameworks below responsive user interface elements. Both come as standard web browser syntax files (html, javascript, css)

Foundation: seems to provide a richer set of elements, which can be selected (or not) via the web interface when first downloading the code to add to the project.
Bootstrap:

Workflow (video which was mentioned: https://www.youtube.com/watch?v=vsTrAfJFLXI)

Produces the initial code for particular kinds of projects
Integrates a Package manager (bower) and a task runner: grunt (good “why grunt”). Many “generators” provided to scaffold various projects. Installs and runs through node package manager/nodejs

it is important to consider how you will run these. Many run through Ruby or Node by default, but have other options (Python, PHP, PHP, etc.). Ruby is installed by default on Mac and is trivial to install on Windows. Node seems trivial to install on either platform, as well.
A simper way to run these preprocessors, as well as some other workflow tools, would be through the standalones: codekit (Mac) or prepros (Windows)
Cloud-based tool here, with many different preprocessors http://codepen.io/pen/

HAML: runs on ruby. Sparse syntax which generates complete, well formed, xhtml
Mustache: use for html includes, fed through JSON. Preprocessor available on many platforms.

SASS: CSS preprocessor syntax adding mixins (css snippets), media queries, indents, variables, functions,

Many github repos offer useful mixins. For example: Team-Saas, but these sometimes rely on ruby
Team Sass provides a few prominent projects/tools … rely on ruby … not supported directly on codekit or prepros

SCSS: A more CSS-like version of the SASS syntax, does not require indents … actually this is now the default in SASS at version 3
Compass: a tool which provides many common mixins, some of which provide cross browser support. Run for free on ruby or install as a standalone compass.app .. scout is a free standalone version.

Ben Mearns