Responsive Design Best Practices

Fluid Grids

When you’re developing your responsive website, you need to account for a variety of devices and screen sizes that aren’t going to scale exactly right. Having fluid grid layouts for your website allows information to display in a way that makes the most sense for the individual device. Take Food Sense as an example; on a full computer screen, they have a fairly traditional, left-sided blog-style layout. Once you move to mobile, or tablet, however, the left side navigation rotates to the top and middle depending on what makes sense for the device and to prevent visual overload for the reader.

Flexible Images

Images should be flexible and sized in relevant units so that they won’t display outside their containing elements. In other words, they should be “context aware.” Make sure that scaling up or down doesn’t impact resolution. Note how images displayed on the Boston Globe’s website are detailed and non-pixelated no matter which device you view them on. Though you could store multiple images sizes as an alternative to different screen resolutions, it’s going to require more bandwidth from your users, which isn’t ideal.

What Will You Need for Your Website?

Obviously, every website will be different: the needs of an eCommerce website like Target’s are going to be dissimilar to what a small, local restaurant might need. The basics of any site, though, should be a masthead, image gallery, product description, auxiliary information, and a footer. The masthead is arguably the most important introductory section, since it needs to contain your header, logo, primary navigation tools, and the logo. Viewing your website in “sections” will help you understand the way this information can be moved around depending on the viewing device.

Consistency Matters

As Design Modo points out, you want information to display consistently across platforms. This is important both for ensuring a smooth branding message, as well as making sure that mobile users aren’t getting irritated with the multiple steps they need to go through just to find your open hours.

Eliminate Content You Don’t Need

The reality is, not everything displays well on mobile even if they work well for a computer viewing. You can either choose to scrap this element entirely, or as Web Design Ledger suggests, you can add a .not_mobile class to the element to remove it from the mobile context alone.

Creating a responsive design website

Whether you're converting your existing website to responsive or you're starting with a responsive website, having an experienced responsive Web Designer who can help you create a consistently amazing mobile experience for yoru customers is key. View our list of the Top 10 Responsive Web Design agencies to find the best responsive designers.