Here are some notes and thoughts I gathered during the 3-day Responsive Design Summit, which concluded today. Link to the live document.
- Design principals
- Atomic design
- 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
- Test and develop locally
- 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
- Performance
- Test your site performance
- 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
- Use Compression (whitespace)
- Good syntax
- Keep presentation in CSS (which is cached for the entire site)
- Small as possible
- Responsive
- 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)
- Scaffolding: yeoman
- 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
- Know your text editor: Sublime Text 2 is popular
- Versioning: git (github has a friendly client app and is on the cloud)
- Preprocessors (see below)
- Deployment: beanstalk (versioning plus deployment)
- Preprocessors
- Notes
- 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/
- HTML
- 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.
- CSS:
- 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
- Breakpoint: for responsive, multiple screensizes
- Toolkit … responsive stuff?
- Singularity … layouts!
- 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.
- Javascript
- Coffeescript
