Starting off as a trend, Responsive Web Design has become the hottest topic of Internet industry.
Here are five areas in which designers are required to step up in order to adapt to the responsive web:
1. Design with The Real Content in Mind
Ever designed a module within a website using the trusty Lorem Ipsum, only for the copywriter/client to write twice as much content, or not enough, and your beautiful design is tarnished? And it’s too late. Imagine how much easier our lives would be if we had the site’s content up front.
Before a pencil has been picked up, or Photoshop has been opened, there needs to be a content strategy in place. Whether the output of that is the final content which will be used in the live site or not, you need a good idea of the content which will be used in the final site. What is the point in designing something when you don’t know what content will be used?
Once you have the content, you can start to build content reference wireframes. This technique is ideal for showing the basic layout of your main templates. You can show where the navigation, sub-navigation, footer and secondary modules will sit around the main body of the page. Without getting into any level of detail, you are designing the framework into which you will layer detail later down the line.
This is the time in the process that you should start to think about your responsive breakpoints. Taking the content which you have received from the content strategy, you can build a simple one-column layout for mobile devices. This is best done in the browser, using basic HTML, but more on that later. By restricting your design to one column, you can begin to think about the hierarchy of the content on the page.
Adjust the layout of your page to suit this new width, by adding a column for the sidebar for example, and repeat.
2. Do an “In-Browser” Design
Another key consideration for Responsive Web Design is to ditch the flat visuals and Photoshop comps. They confuse the process too much by creating this idealistic view of how the site would look at multiple specific browser widths. However, they rarely end up that way. The final build nearly always looks different. Whether its the padding or spacing around elements, the way in which the type is rendered or the quality of the imagery, the final output rarely looks as good as the visuals the client signed off earlier in the project.
The problem with the visuals is that they look too good. The images are crisp, the typography is aliased and smooth, the use of drop shadows and blend modes make the design look like a work of art. We need to lower the client’s expectations before they sign the designs off.
The trick to doing this is to build a responsive prototype, using HTML & CSS values. Design in the medium in which the final product will be built. And present it in the browser. Show the client how it looks at various widths and on different devices.
You will also be able to test your devices at various screen sizes. Most of the tools mentioned above come with preset viewports built in, but if you can export your designs out and get them into an actual browser, then you can really get a better feel of the mobile experience you are designing.
3. Develop a pattern library
One of the key outputs to nearly all of the Responsive Web Design projects is a style guide. These would include key styles for the project and interactive states of all modules. It would even include a bit in there about the responsive framework. However, there’s a new breed of beast evolving here, that of the pattern library. For a responsive design you would need to illustrate how each module would adapt between the breakpoints you have defined. This takes quite some time to do in Fireworks. Since we are designing a prototype in HTML & CSS, it would be a shame not to build the pattern library in the same way.
The pattern library is fast becoming a vital output for responsive web designs, as we make the shift from designing pages to designing a system of components.
4. Make It Universal
The thing about designing a responsive website is that you cannot predict each user’s experience, especially when it comes to the mobile experience. There are literally hundreds of different possible scenarios of how a user could be using your website. This comes down to the number of smartphones and tablets out there with their varying screen sizes, resolutions and input types. They could even be using their televisions.
Your design is going to have to totally universal and adapt to whatever surroundings it is placed. A good way to achieve this is through a careful content strategy and thinking of the top area of the screen as an app. Think about what the user is there to do and surface the relevant links within the initial view.
5. Keep Web Performance in Mind
We can never predict who the next user of our website will be, what device they will be using and on what connection. That is why we need to design our responsive websites with performance in mind. Nobody likes to wait around, especially on the web. If your website doesn’t load within a few seconds, you’ve just lost your user. They’ve already moved on.
Improving the performance and reliability of your site helps build the user’s trust. If they have a good experience and your site looks good, they’re bound to return. The key here is to keep your web pages as lightweight as possible. Over 60% of the file size of most web pages are down to images alone. The rest of the file size is made up of scripts, style sheets and other media types.