30 / 01 / 2013

Responsive Web Design

Author

Simon Owen

Category

Blogs

Share

Years ago, at the dawn of the Internet there were desktop computers, then came a variety of different sized monitors, laptops, mobiles, tablets, game consoles, TVs, the list goes on.

Timeline

Over the past few years, the number of devices has increased significantly. In 2014 it's predicted that more people will browse the web via a mobile device than desktop computers.

Responsive web design is an approach that conveys a user rich experience taking into account the abundance of devices that are available today for browsing the web.

As well as different devices, there's also other requirements to take into consideration. Different screen resolutions, Internet browsers, connection speeds and accessibility are all major factors that can greatly impact a website.

None Responsive - Specific Mobile Site

One approach to tackle the mobile world is to detect the device that's accessing a site, then re-direct the user to a site on a sub domain. JD Sports use this approach.

If you access their site on a mobile device:

http://www.jdsports.co.uk/

JD Desktop

You're re-directed to:

http://m.jdsports.co.uk/

Although this is now a better experience for viewing on a mobile device, there are drawbacks using this method. If you were to now share a link from the mobile site:

http://m.jdsports.co.uk/mt/www.jdsports.co.uk/product/nike-air-force-1-foamposite-max---30th-anniversary/33553/

JD Mobile

If someone now accesses this link on a desktop computer, they will be forced to view the mobile site. There is a 'VIEW FULL HTML SITE' link at the bottom of the mobile site page, but this then takes you back to the homepage.

If you're web savvy, you'll be able to get back to the product, but for the general consumer, I'd imagine being thrown back to the homepage and away from the product you're interested in would be confusing and frustrating.

Enter Responsive Web Design

Let's look at another site:

http://eu.suitsupply.com/

Viewing this site on a desktop or a mobile device returns the same link. Meaning, in this scenario, if you were to share the link from a mobile device or desktop, everyone is served the same site URL, but there's more, let's take a closer look.

Desktop:

Suit Supply Desktop

Mobile:

Suit Supply Mobile

Although the site's URL is the same, the site has also been optimised for mobile devices. Luckily developers have some handy assets to help us out. Media queries allow developers to write code specific for different media.

Ever printed out a web page and noticed that not everything printed out? This is because a developer has thought about what would be the best experience to view that page in print.

For example, you might have noticed that a web page with a black background and white text actually printed out with a white background and black text, saving you a lot of ink, pretty nifty eh?

In a similar way, what's happened on the Suit Supply site, is they've took advantage of media queries ability to detect screen width:

  
@media only screen and (max-width: 550px) {
#product-detail article.tabs section .size1of3,
#product-detail article.tabs section .size2of3 {
float: none;
width: 100%;
padding-top: 0;
margin-bottom: 30px;
border-top: 1px solid #fff;
}
#product-detail article.tabs section .size1of3:first-child,
#product-detail article.tabs section .size2of3:first-child {
border-top: none;
}
}

The above code only applies styles if the max width of the screen is 550px.

We used the same approach for our latest client project Rowton Hall:

http://www.rowtonhallhotel.co.uk/

Rowton Hall Hotel

The site Responsivator is a great way to get a quick overview of how sites look at different screen sizes:

http://dfcb.github.com/Responsivator/?site=rowtonhallhotel.co.uk

Here you can see with http://www.rowtonhallhotel.co.uk/ on smaller screen devices rather than have the navigation take up most of the screen, we opted to add in a less intrusive navigation similar to that seen in native iPhone apps.

As more people use mobile devices, more people are intuitively becoming familiar with common UI patterns. Take a look at this image showing an overview for the iPhone UI.

iPhone UI

Buttons, sliders, favourite, play, search and when to use gestures and swipes are becoming second nature.

YouTube Video

None Responsive - None Specific Mobile Site

Interestingly Apple don't have a responsive or mobile specific site:

http://dfcb.github.com/Responsivator/?site=apple.com

It's possible to navigate their site via zooming in to read the content, but this soon gets tedious navigating the site. It would be interesting to see some statistics if they did implement a responsive site, especially in conversion of sales via mobile devices.

Conclusion

Hopefully this article has given you an insight and better understanding into the world of responsive web design. So the question you're probably asking yourself if you are thinking of setting up a new site, or looking at what you currently have in place... "Should I have responsive site?".

My advice, would be yes.

However, in doing so is going to take more time. There are plenty of great resources and frameworks available to use such as;

Respond.js

Not all browsers understand media queries, Respond.js is a 'polyfill' that can help browsers such as Internet Explorer 8 and below take advantage of them.

Enquire.js

JavaScript is a common language used on the web that allows user interaction. Here, Enquire.js allows JavaScript to be used with media queries.

Modernizr

Modernizr detects and outputs the native features that are available in the current browser. For example 'no-touch' allows developers to write code that will only be applied to devices that don't have touch gestures enabled.

Bootstrap

Originally built at Twitter, it's a front-end framework, that gives you a great start on building a site that will work cross browser and is fully responsive.

But even with these great resources thorough testing is always required, meaning plenty of this:

 

RWD