3 Key Considerations for Responsive Web Design

What does it mean to have a responsive site?

Responsive Web Design (RWD) is all about creating an optimal viewing experience on multiple devices. It involves designing a common website to be viewed on devices such as desktop computers, cell phones or tablets. These websites are designed to be easy to read and navigate, no matter which device they are viewed on.

Mobile optimization is becoming the next standard in eCommerce, but how is this happening? According to a post on CNET, mobile internet traffic is gaining on desktop internet traffic and in some places already surpassing it. Since more people are using mobile devices for work and play, it just makes sense (and is becoming common practice) for websites to be designed to handle multiple devices. Below are some simple best practices to follow when it comes to Responsive Design:

1. Build a Site with Mobile Optimization from the Start

Have your site built with mobile in mind – start with presenting content suitable for the small screen and then enhance it for the desktop. Mobile users want fast-loading websites to be able to research products quickly, write a review or make an online purchase with their device. There are a couple of options to consider when building a site:

1. Create a dedicated mobile/tablet site with CSS media queries
(determines which type of device is being used)

– or –

2. Build separate sites

Keep in mind: mobile devices are constantly changing and thus the scripts will have to be maintained in order to keep up and creating and maintaining separate sites like this increases your development costs.

2. Get Your Images Right

While you’re building the content of your site (working with speed in mind), you should also have different sizes of your graphics. Creating different images will allow you to customize the sizing and cropping your images for different screen sizes. An image that looks great on a large desktop display might not look great on a smaller screen size so having different dimensions is important when trying to design a site for multiple devices using different resolutions.

Keep in mind: Websites that rely on a heavy use of images can greatly slow down the performance of a site, which eats up a lot of bandwidth. There are some solutions out there for optimizing your images for all screen sizes and resolutions.

3. Navigation

Mobile users always want the best experience possible, and keeping the navigation of your site simple will prevent them from going elsewhere. There are many different types of navigation patterns for smaller screens to consider, what works best for your site will probably be determined by the type of content, products and services being offered.

Part of the responsive design challenge is that navigation menus will need to be displayed on multiple browsers and mobile devices. For example :

Desktop: A comprehensive navigation bar is preferable.
Tablet: A bar with 4 to 5 tabs is a good idea here.
Mobile: A navigation bar can be ignored in this case.

What To Watch Out For

Responsive design is still quite new, so new ideas, tools and mobile devices will continue to evolve overtime. Just make sure you’re not missing the point for what responsive design really is:

Watch out for content meant only for large-screen devices is not hidden away from your target audience. Remember to optimize the layout of your content with different devices in mind.  Speed is extremely important as responsive design sites need a large amount of Javascript and CSS to work so they can take up a lot of bandwidth and therefore can effect your SEO as Google looks at load times as part of it’s ranking criteria.  The more content and images you have, the slower your mobile site will be!

Are there other considerations or best practices for Responsive Web Design that you’d like to share? Leave your comments below!

Happy designing!