"What's the best approach to responsive web?"
This isn't just a loaded question, this is a question loaded with sniper rounds. The reason why I say this is because we are all at this juncture in history where we all must get up to speed on what this Response Web Design (RWD) concept is, and how we need to plan and prepare for adapting to it's concepts, and practices.
Claiming to have the exact correct answer to that 'live round' question is simply foolish for even the mosts senior UX practitioner. But, we should at least kick you in the right direction.
Before we get to deep, it's important to have some foundation knowledge. We define the term Responsive Web Design as being a term used to describe a way of planning and designing for the possibility of a user interacting with your web page or user interface on more than one platform and through more than one screen resolution. It is also a good idea to have the term Multi-channel Experience in mind as well when considering the best way to approach (or plan for) the responsive web experience.
Let's talk about the 'who' of this topic of discussion; the user. The more usability studies I conduct, the more I realize that there are no two users alike. We are all so different. We all do things different. We are all smart in different ways. There are however some commonalities in behavior, but as technology moves towards our inner personalities, our technology needs become more and more robust in difference. Maybe it started that screens were all generally a couple sizes, but customization is the name of the game now, or as Burger King used to say "Your Way, Right Away!"...
Maybe they still say that (I'll have to check).
|Image 1: Android Fragmentation |
Visualized (2012), OpenSignal.com
lastly, a rough 'how'. Remember that there isn't one right answer (that's my way of reminding you that we all do things differently and that I'd welcome your comments or questions).
One approach to RWD
1. Identify your features:Identify your UI's existing or future features (i.e. main menu, categories, link lists, sharing options, etc...), and then expand them out so that they are as micro as necessary.
2. Identify your appropriate channels:Identify the top 3-5 channels that you are hoping to plan for. This will be highly based on competitive analysis and market research. You must first go and learn who your competition is (if any) and find out where the bar is set. What channels are they offering their ui through? This will take some effort on your part as well.
3. Identify your screen resolutions:Identify the top 3-5 screen resolutions per channel based on demographic information for the geographic area in which you will be targeting. The reason why this answer is vague is simply that there is no guarantee that the area you are targeting will reflect the same devices as your area. Consider this... There are a number of emerging countries out there that have completely skipped the desktop computer experience and have jumped right to the mobile phone. This will take a bit of determined research to identify the resolution ranges per channel that you want to target.
4. Create a Multi-channel Experience Map:This is simply a spreadsheet that has all the features you hope to offer in the first column, then a row at the top that lists the various channels. Once you have that, use that spreadsheet layout to keep track of what features will appear in what channels. It is likely that some features will appear in all channels. It is also very likely that you will identify features that will be out of place for all channels. Don't be afraid to cut some loose in the name of the user experience.
5. Put it all together:It's time to start sketching. The screen resolutions and the Multi-channel Experience Map will both feed into this phase of your effort. Roll your sleeves up, and begin sketching the high level layouts for your various channels while keeping in mind the hierarchical priorities on the various features being offered. You may find the UCD Process described in our article titled What is User Centered Design helpful.
Good luck friend. You are going to do fine. Also, one last rule of thumb...
When your design breaks, that's a break point.
- Android Fragmentation Visualization, OpenSignal.com
- Emerging Nations Embrace Internet, Mobile Technology, PEWGlobal.org