At this point, responsive web design (RWD) has become a well-known implementation of web creation. As a quick recap, responsive web design offers businesses the means to offer a single site that is both mobile and desktop friendly. Responsive web design goes into much more detail than what was just stated, but at its core RWD means to serve an optimal experience, regardless of the device you are using. However, there are challenges to consider before deciding that a responsive site is right for you.

How Does Responsive Design Work?

Responsive websites work with media queries to determine the screen size of every visitor and then display the correct layout. Media queries are an excellent way to deliver different styles to different devices, providing the best experience for each type of user. A part of the CSS3 specification, media queries expand the role of the 'media' attribute that controls how your styles are applied.

A sample media query:

@media all and (min-width: 35em) { img { width: 100%; height: auto; } }

This example, images will scale their width to the full width of their parent container and keep their original aspect ratio only when the width of the browser is greater than 35em.

Responsive Design Support

The lack of support for media queries in IE 6 through IE 8 is not a problem. Simply create a basic set of styles that are served to all browsers without using media queries, and use the media queries to provide an enhanced experience for visitors using more advanced browsers.

Alternatively, use an Internet Explorer conditional comment to serve a special set of rules to older versions of IE like this:

<!--[if lt IE 9 & !IEMobile]>
<link href="iestyles.css" rel="stylesheet" type="text/css">
<![endif]-->

Alternatively, you can use scripts that allow older versions of IE to have limited support of HTML5 and media queries.

HTML5shiv.js

HTML5shiv is a JavaScript workaround, discovered by Sjoerd Visscher. This script enables styling of HTML5 elements in versions of Internet Explorer prior to version 9 that won't allow unknown elements to be styled without JavaScript. While some people refer to it as "HTML5shim" with respect to shim (computing), there is no real difference between the names.

Respond.js

The goal of the respond.js script is to provide a fast and lightweight script to enable responsive web designs in browsers that don't support CSS3 Media Queries - in particular, Internet Explorer 8 and under. It's written in such a way that it will probably patch support for other non-supporting browsers as well.

Testing Media Queries

Testing your code is always extremely important. RWD requires a further step, though. Testing for smartphones, tablets, laptops, televisions, refrigerator doors, (and more!) complicates this process. Ideally you would have an array of devices at your disposal. Luckily, you can test most queries without possessing the actual device. It's always better to have the real thing in front of you, but for the purposes of this article, using a simple browser will help you understand how queries work. Resizing your browser can work, but using the Opera Mobile Emulator is the next best thing to the actual device.

Preparation Is Important

Thorough responsive web design starts long before your first design iterations, be it PhotoShop or in-browser design. Also long before your first wireframe. Good preparation is the key to successful design and development. The better you are prepared, the more time and money you will save in the end. 

Since your website layout and structure will vary on different devices, you need to have a clear understanding of how you want to arrange your content for each of these devices. The smaller the device is, the more consideration you will have to make regarding the priority of your content. Start small, and work your way up.

The important thing to take away from responsive web design is accessibility. We cannot control how people will view our websites, therefore it is our duty to supply a excellent experience at all time. This will come with challenges, but by starting on flexible infrastructures will allow us adaptability down the road.

Filed in // Mobile Website Development