Join James Williamson for an in-depth discussion in this video Designing for the appropriate context, part of Responsive Design Fundamentals.
I want to discuss some of the strategies that you'll need to consider when approaching responsive design. To build a successful responsive site, you need to go beyond simply repositioning elements within a layout. You need to make designing for multiple user contexts an important part of your planning process and carefully consider how your site should function within those contexts. At the outset of this chapter, I need to carefully state that responsive design is not the right solution for every situation, and that I'm not advocating it as the only solution for designing across multiple devices.
There are going to be times when a separate mobile site or application is the better choice. As a designer or developer, it's your job to assess the goals of the project and then determine the appropriate approach. By learning more about responsive design and its relative strengths and weaknesses, you'll be able to make better decisions about when and where it's appropriate. I can state with relative certainty, however, that our days of just designing for the desktop are over. You can no longer ignore the mobile context, and not designing for it means that a significant percentage of your site's visitors will have a less-than-ideal experience.
If you've decided that your project doesn't warrant a separate mobile site or application, you still need to invest some time into thinking about how your site is going to work across different devices. Currently, many designers work like this. They develop a site with a client, test it across multiple browsers on a desktop, and then, as the project nears completion, spend some time thinking about how the content should look on mobile devices. Even worse, this stage is often device-specific, as the client will ask for an iPhone or iPad version of the site.
The end result is often a mess, driven at this late stage by budget concerns or a site structure that doesn't lend itself to mobile devices. In my opinion, this is why so many designers tell me that they hate designing for mobile screens, or that the process of designing across devices is simply too hard. I always compare this to an engineering team designing a flashy sports car and then, late in the game, being asked to make sure it has four-wheel drive, can seat a family of five, and gets good gas mileage.
At that stage of the process, it'd simply be too hard to go back and satisfy all of these requirements. That's why it's critical to understand the context in which you are now designing. You have to ensure that your design is targeting the appropriate context in which the site will be used, and that you understand those contexts well enough to make decisions when they conflict with each other. For example, if you are designing a site for a company that sells jellybeans, they might express the desire to show as much product on the browsing page as possible.
On the desktop, that's fairly simple. That format lends itself to being able to visually display a large number of items. But how is that page going to translate to a mobile device? Well, you could create a slideshow, but for a large number of items, users would likely find that a tedious way to browse for what they were looking for. You could create a search feature that allows users to target just the flavor they're looking for, but how does that translate to allowing customers to discover new flavors? A better approach would be to consider each of these contexts as the initial design is planned so a solution can be found that satisfies the user's needs regardless of the device they're accessing the content on.
This means of course that if you haven't spent much time focusing on designing for the mobile context, it's time to start. The mobile space is still relatively new and evolving, so it's only natural that designers haven't focused on it as much as other contexts. The reality we find ourselves in now, however, is one where the mobile device has become an equal partner to desktop devices and in many ways has surpassed them. That's the main reason that I feel that responsive design is more than just a trend, it's the proper approach to ensuring that your sites work across as many different devices and contexts as possible.
- What is responsive design?
- Controlling viewports
- Designing for multiple screen densities
- Working with media queries
- Using fluid grids
- Building responsive forms
- Optimizing site performance
- Building responsive mockups
- Developing a content strategy
- Designing for mobile capabilities
- Creating flexible HTML
- Testing responsive designs