With the rising popularity of mobile devices, it's only natural that your website's mobile viewership will also increase, but is your website ready to adapt? Unfortunately you have no control over what platform your viewers will be using. No worry, gone are the days of pinch to zoom, welcome our new pal, Responsive Design.
A responsive website design will automatically adjust and adapt to your device's screen. Your goal should be to have your content as accessible as possible. If that means hiding your giant banner so it doesn't fill up your iPhone® screen, resulting in your viewers being able to read your articles and click on links? That's a sacrifice worth living with.
Here are a few things to keep in mind that every responsive website redesign should consider:
- Grid-based layout. There are many grid-based frameworks available for you to use, with the most notable two being Foundation and Bootstrap. A fluid grid will "flow" your content nicely beneath each other as the resolution of your page changes. There are a bunch of other perks included with these frameworks and definitely worth checking out, if not for the grids alone. There's even a Drupal theme for each of these frameworks (as of this blog post, unless you use the dev release, only Foundation v3 is supported).
- Mobile first. Consider focusing on the smallest display first. Scaling up is always easier than scaling down when it comes to content presentation. Legibility is key. Don't forget how your users will be viewing your site, don't skimp on the font sizing. Once you've killed it on the smartphone, the next logical step would be to scale to the tablet and then to your beloved desktop. Here's where QA testing can have some fun.
- Fluid Images. With responsive design, you want your images to be adaptive. By relying on the grid, your images will always snap to the constraints of your grid. You never have to worry about images overlapping on text and vice versa; the fluid grid takes care of this. Don't worry about your images getting squished either, your image dimension ratios stay intact.
- Font icons. Font icons are becoming more popular these days. With the likes of Fontello and the Icomoon Online App, you can now create your own icon sets. Unlike a typical png sprite, these can scale to infinite. Great for scaling up (or down) with your responsive website and looks great on retina displays. Efficient, easy to use and free! There's even IE6+ support for you dinosaurs out there.
There will always be new things to consider when designing with responsive in mind, but this is a good start if you're in the market for a new website.