In investigating approaches to responsive design, I came across some excellent ideas by bloggers on the topic. Two bloggers in particular stand out. They both analyze, albeit in different ways, the different ways in which you can approach design for multiple devices.
Not all multi-platform approaches can really be called as “responsive design, incidentally.) The various approaches run the gamut from “barely responsive” to highly dynamic.
The first is Brad Frost, who writes on Responsive Navigation Patterns.
I like Brad’s thinking because he starts with the far end of the scale – the “Do Nothing Approach (where, surprisingly, the designer “does nothing), and then looks at other approaches to adapting design elements for mobile, including what he calls:
- The Select Menu
- The Toggle
- The Footer Anchor
- Left Nav Flyout
Brad’s focus is on how navigation elements get moved around, modified or added when you go from desktop to mobile. He discusses the pros and cons of each approach and provides examples of working sites using each. If you want to really learn about these approaches, you can try accessing each website on a number of different devices in turn (desktop, tablet, mobile phone).
This is an older article, but it feels very germane to today’s responsive website focus, and I love the way he’s illustrated his concepts – by showing the content areas on and off the screen.
Luke’s categories are about the visual expression of content areas. His discussion includes such categories as:
- Mostly Fluid
- Column Drop
- Layout Shifter
- Tiny Tweaks
Luke does a great job of showing how content areas are moved around on the screen, by using different color rectangles to show different sections of content.
Both of these articles are worth reading to help you form your own philosophy and approach to designing for mobile devices, especially if you’re just starting out in thinking about responsive design, or how to update an existing site to accommodate different devices.
Thanks, Brad and Luke – for helping us think out the box.