Responsive Web Design

by admin on August 21, 2012

in Website Design

If you consider the wealth of technology that accesses the internet every day, from PCs to macs, laptops to tablets, mobile phones to televisions, it’s hard to imagine a sane web designer or developer. When attempting to create a website for the masses, the variety of devices that will be used to browse the site is usually the first thing that’s considered, however this process is rarely plain sailing; last year there were over 500 million smartphones shipped worldwide, and over 70 million tablets.

Bridging the Gap

Responsive web design, a relatively new technique, has been slowly building up speed, promising to bridge the gap between website coding and user interaction on all internet-enabled devices. Previously, web designers and developers would have created specific sites for specific mobile platforms, however this new technique means that site content will respond to the device it’s being rendered on. For example, if you’re accessing the web through a mobile phone or tablet, the size of the copy and the resolution of the screen will also be taken into account; images will be shrunk and navigation will be simplified.

Tablets, mobiles & desktops in responsive web design

Simultaneous Implementation

Ethan Marcotte, the man who brought the idea forward on the website design blog ‘A List Apart’ in 2010, commented on the growing trend of mobile experiences moving away from the typical desktop sites. “What’s next?” he asked, “An iPad website? A Nokia N90 website? Can we really continue to commit to supporting each new user agent with its own bespoke experience?”

Marcotte raised a good point, especially for small or medium-sized businesses that are unable to cope with multi-site accessibility, mainly due to resource shortages. Having the ability to implement a change across a number of devices simultaneously instead of re-writing code for each individual device could prove extremely useful for a business, allowing them to reach a wider audience. Furthermore, development of mobile device accessibility will instantly become a fundamental part of the design process.

Who Will Benefit From Responsive Design?

With Google beginning to embrace responsive web design, you need look no further than some of the web’s biggest creative players to see the effect it’s having, for example The Boston Globe’s website, designed in collaboration with Marcotte himself. Puzzlingly, people have been left wondering why responsive web design hasn’t taken over the web. This is due to the fact that it simply doesn’t suit all businesses and their websites. There are differences in how ads are served on mobile sites to desktop sites also in the case of some mobile websites some of the functionality or features do not translate well with responsive web design.

Although responsive web design has had a wave of positive reviews from designers and developers alike, that doesn’t mean it necessitates everyone. Desktop sites, for example, may have trouble embracing responsive web design if they’re content/editorial-driven. Similarly, some developers feel that mobile sites fail to translate well with responsive design – every internet enabled device poses a different complexity.

Google may be taking its first steps towards responsive design for static sites, but when it comes to Gmail, Reader or Docs, it’s unlikely that they’ll roll out the optimisation any further. Responsive design won’t make multi-device development easier, but it will provide consistency for the user experience – an important trait in ever-evolving mobile technology.

If you want to see responsive web design in action, have a look at some of the sites listed below:

 Smashing Magazine

http://www.smashingmagazine.com/

 Trent Walton (below)

http://trentwalton.com/

trent walton website

 Andersson-Wise Architects

http://www.anderssonwise.com/

 Spigot Design

http://spigotdesign.com/

The Baker Street Inquirer (below)

http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html

Baker street Inquirer website

Teixido

http://teixido.co/

 Naomi Atkinson

http://naomiatkinson.com/

Do you have any great websites to add to our list that use responsive web design? Or do you have any questions about responsive web design? If so please do not hesitate to add your comments below.

Bitly: http://bit.ly/TRXnfL

Leave a Comment

Previous post:

Next post: