toucan team

Recent Posts

Responsive web design V dedicated mobile sites

1st February 2013 by toucan team

Digital Development User Experience

The digital age is well and truly upon us and evolving at a rate of bytes. It’s no longer just a desktop environment. In recent years there has been a monstrous influx of devices, from desktops to laptops, tablets to smart phones. In 2012 “58% of UK residents owned a smartphone” and “almost a fifth (19%) of UK residents owned a tablet” N.Lomas December 13th, 2012.

With these figures comes a headache for designers and developers alike. It’s no longer the case that we're designing for just desktops, we have to take into account the large selection of ever growing devices that are out there. Luckily, as the web evolves so do the technologies that surround it. As web designers, the two main approaches to work with, are responsive web design (RWD) or a dedicated mobile website.

Responsive web design

A web design approach aimed at crafting sites to provide an optimal viewing experience – easy reading and navigation with a minimum of resizing, panning, and scrolling – across a wide range of devices (courtesy of the well known encyclopedia – Wikipedia).

Dedicated Mobile Website

A dedicated mobile website is when a site uses device detection to route mobile users to a separate mobile friendly website. This mobile site has been crafted to suit the device and tends to lack some of the features and content of the main site:

Each of the two methods above, has their pros and cons. It’s probably easier to compare main features of each.

Navigation

“The foundation of almost all good information architecture is a well-designed hierarchy.”
 - Information Architecture for the World Wide Web

Other than content, navigation is one of the most important aspects of any website, if it’s difficult to navigate through your site then your users will become frustrated, annoyed and will ultimately leave.

As Brad Frost at smashing magazine states, “Navigation, especially on mobile, should be like a good friend: there when you need it, but considerate enough to give you your space. When navigation takes up a ton of real estate, it gets in the way and becomes that annoying friend who won’t leave you alone. When it’s inaccessible, hidden or just hard to reach, it becomes that friend who’s conveniently absent when you’re looking for help to move to your new apartment.”

With RWD, users are still able to navigate the whole site, normally by using a version of the main website’s navigation. No functionality is lost and the user is gaining the same experience he/she would have from using the desktop version.

With a dedicated site, navigation tends to be an extremely scaled down version of the original site, sometimes missing key sections. The functionality differs from the main site which can cause confusion when using the desktop version.

Content

With dynamic websites content, functionality and design are constantly changing to suit the users’ needs and to keep up with trends. This all takes time and ultimately costs money, having a dedicated mobile site means that this content and functionality has to be updated on both the desktop site and the mobile site, chances are the focus sway towards the desktop site which will leave the mobile site neglected. With RWD, updates and design changes occur in one place, keeping the mobile and tablet versions on par with the desktop version.

Performance

Performance matters greatly when it comes to mobile browsing, especially when users are on 3G or less. If the webpage takes ages to load you'll most definitely lose your user.

“ 74% of mobile visitors will abandon a website if it takes more than 5 seconds to load” - Neil Emon.

Dedicated mobile sites are trailered for mobiles, and so will have images and content to suit. Whereas RWD sites still have all the images and content the desktop site has and so will most likely take longer to download. However there are ways around this issue, through the use of some nifty plugins like http://adaptive-images.com/ which switches images at various break points.

Page Length

Websites that use RWD tend to be a lot longer, because most of the content is still there. Sometimes there can be too much content, and the page length can become an issue.

Dedicated sites tend to have much shorter pages, as content has been minimised to make them suitable for mobiles.

Although RWD sites tend to have longer pages, it’s no longer a major issue. With the large number of tablets and smartphones, the general public is now accustomed to “scrolling”. If the content is good, it will keep your audience captivated as they scroll.

If designing for mobile devices upwards, designers are forced to evaluate every aspect of the page from content to layout, which means the overall site will be concise, content rich and easy to navigate, just take a look at the government’s new website https://www.gov.uk/

Cost

Obviously one of the most important factors is cost. Both approaches are going to pull on the purse strings of any client, RWD is likely to cost a lot less in terms of development and maintenance as it’s just one website. Having a number of dedicated sites, means each has to be built, tested, updated and maintained.

So which is better...

As I said at the start, each has their pros and cons, and each point needs to be evaluated before starting any project. At the end of the day, it’s down to the user’s experience, you don't want to limit or restrict your user because of the device they're using.

That said. websites need to evolve, and to do so it takes time and money. RWD allows websites to do so, without costing the earth. Having a number of dedicated sites is not the solution to the problem, it’s expensive, time consuming and restricts your users. Responsive web design is the only real cost effective solution, and will be, for the foreseeable future.

References and further reading:

N.Lomas
December 13th, 2012
http://techcrunch.com/2012/12/13/research-uk-smartphone-penetration-hits-58-tablets-at-19-brits-a-nation-of-online-shoppers-1000-now-spent-online-per-year/

http://en.wikipedia.org/wiki/Responsive_web_design

Brad Frost
August 22nd 2012
Seperate mobile responsive website presidential smackdown
http://mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsive-website-presidential-smackdown/

Kayla Knight
December 1st 2011
Guidelines for responsive webdesign
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Neil Eamon
http://www.digitalmall.us/1150/smartphone-users-frustrated-with-mobile-web-experience/

https://www.gov.uk/

Drew Thomas
Feburary 14th 2013
http://mobile.smashingmagazine.com/2013/02/14/responsive-web-design-planning-future/

no comments

Add your comment...

we would love to hear what you think about this blog (comments will be moderated before publishing)

Hide this message in the future
This is the only thing your email address will ever be used for, we promise.