responsive-workflow.md

1. What is responsive design? 2 choices:

   • responsive design (one client)
     • mobile first - Foundation
     • desktop first
   • adaptive design (multiple clients)
     • phone app - ratchet  

2. Choose grid

   • Depends on design - should it be element/style agnostic or coupled to HTML (css class based grid)

3. Use tools

   • moderniser .no-opacity .no-transition
   • frameworks

4. Set up media queries + meta viewport  

5. UI

   • grid
   • text
     • ems, px ? different stylesheets?
   • layout
   • images
     • avoid image maps
     • fluid images
   • tables
     • tricky
     • Zurb have a good js plugin
   • input
     • html5 types  

6. Manage device specific HTML

   • 'off-canvas' navigation

Other Tips

• link to call: Call us free!

Tools

• Image Resizer Bookmarklet

Steps: @stephenHay

1. Media Queries / (meta) viewport 2 - Fluid Layouts 3 - Device / Browser Support Profiles 4 - Content Reference Wireframing 5 - Layout Breakpoint Graphs 6 - New Layout Mechanisms - js?

JS if (document.documentElement.clientWidth > 600) { }