I thought I'd throw this into the mix and invite responses and discussion. I've been studying responsive design for a while now and moving forwards it's probably going to be a modus operandi for us. We've done some retro-fit mobile versions but I think we really need to put it at the core of our process now.
Here's where I'm at with it at the moment:
- Use 360 grid layouts
- Design for mobile first
- Design in your browser
- Use media queries to make breakpoints when layout starts to look naff (not for specific widths)
- Don't try to target devices (there's too many!)
- Use flexible images using max-width=100%
- Don't set maximum-scale=1" in meta viewport element as it stops people with poor eyesight being able to zoom
- Display: none doesn't stop a huge image being loaded by a handheld device it just stops it being displayed
- Use SASS (or LESS)
- Use Modernizr to support IE7 & 8 (that's more of an HTML 5 requirement tbh which isn't responsive design per se)
- Mobile isn't a device it's a user state
The thing which interests me is the design process and how the recommendation seems to be moving towards designing in the browser. Anyone tried that? The alternative is multiple mockups for a variety of resolutions and if you go down that route where does it end? Also, if you do design in the browser how do you bring the client along with you? Your thoughts, please folks...