Responsive Web or Mobile Sites?

 

It is reported that about 10% of Internet traffic was caused by mobile web browsing in 2012 while there was only 4% in 2011. With the Smartphone penetration rising globally, “not designing for mobile is an inexcusable and cardinal web design sin.”

 

To meet customer needs and develop new web technology, designers have developed different kinds of web technology and concepts. Ethan Marcotte raised the concept of Responsive Web Design in 2010 which has become the most popular trends in web design nowadays. This design concept has not only solved the problem of web browsing by phone but also provided the root technologies to view web using arrays of different kinds of devices. However, there’s another situation that designers make a web which is specially tailored for mobile phones. BBC sites are a major example.

On March 27th, 2012, Chris Russell released the news on BBC Internet Blog that they adopted a new approach to creating web applications – called responsive design.

Is this site really “Responsive”? With this question in my mind I opened the BBC news on laptop and lessened the size of my browser, all the content in this page stayed the same. Then I used my Ipad and Iphone to open it. The Ipad page mostly mirrored the page on laptop but the iphone page was definitely different from the one on laptop. Then I found the URL on my mobile was actually “m.bbc.co.uk/news”. “Creation of the mobile site was driven by consumer demand, as in an average week 13.3m users worldwide use their mobile or tablet to visit the BBC News site and apps-around one-third of total visitors to BBC News Online.”(img1&2)

I can not stop thinking whether this is a responsive design or not. There are quite a lot debates about this topic online as well. In Ethan’s article of Responsive Web Design, he put forward media queries to define how the layout should be when screen is within a certain width. This means that when people browse websites on their phones the content they see is the same as what they can see from laptop sites. Here is an  example: the following codes of Media Queries define that this stylesheet should be used when the screen width is maximumly 480px.

<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 480px)"
  href="shetland.css" />

However, the definition of RWD is quite vague. Even << .net>> magazine reported BBC News as Top 4 of the Top 25 responsive sites in 2012. “Designed with a mobile-first mentality, it scales to meet different device characteristics beautifully.”

I don’t deny that this mobile site is well designed. Firstly, it looks quite neat and clear since there is only one vertical division and different pieces of news are in order including images and videos. Secondly, designers are considerate to put two separate tabs on top. They are “Top Stories” and”Most Read” which help readers save a lot of time in finding popular pieces of news. Thirdly, there is a “Section” icon which links users to different part of the website including worldwide region, different areas such as business or education, and magazine area. Fourthly, if you enter a specific news page, the characters are just fine to read and the layout is simple. It took me around 2 seconds to play the embedded video. (I’m using keysurf wifi and it’s 100.0 mbps).(img3&4)

On the other hand people argue that BBC News site is actually not a responsive web design. “The site is ‘responsive’ in that it responds to being viewed on different devices, displaying content in a way that’s appropriate to that screen, but it doesn’t look like it’s been coded as one ‘responsive design’ site.”

I stand in a neutral position in this argument since from Ethan’s article of Responsive Web Design he said that “That’s not to say there isn’t a business case for separate sites geared toward specific devices; for example, if the user goals for your mobile site are more limited in scope than its desktop equivalent, then serving different content to each might be the best approach”, “we’re designing work meant to be viewed along a gradient of different experiences. Responsive web design offers us a way forward, finally allowing us to ‘design for the ebb and flow of things. ” However I personally see more flaws of this mobile site. First of all, there is much information which has been deleted on mobile sites. For example, on the laptop version, we can see many sub-tabs under Home tab including “special reports” and to the right there is watch/listen“section and “Features” section. All of this guides are deleted on mobile sites. Secondly, from the page I just mentioned above of the mobile page when entering a specific piece of news, we cannot find analyst’s comment on this incident or event, we can not see the related news’ link from other sites, neither. Moreover, as for the news “Chris Huhne admits perverting the course of justice”, there is a “Chris Huhne’s timeline” which can help readers understand his characteristics more on the laptop version. But there’s nothing on the mobile page. Thirdly, even though the simple and fast design can save people’s time when they are holding a phone, but there is a great chance that people are using phone to kill time. The more information the website can provide, the longer the readers stay on it. The more the website functions, the more satisfied are the users. Fourthly, it would take more time to design a mobile site rather than to only design a website with fluid grids since the mobile page is actually another new page with totally different codes. Thus responsive design is more effective.(img5&6&7&8)

All in all mobile sites have their benefits since it is easier to serve a dramatically limited experience through a separate site. The responsive ones have their limitation too, you can take a look at Barack Obama’s official election campaign site, it contains too massive amount of content that the result on phone is extremely long pages.

But I personally prefer the web with fluid grids, flexible images and media queries in the code.

References:

uxmag.com/articles/combining-responsive-and-adaptive-strategies-to-solve-mobile-design-challenges

www.bbc.co.uk/blogs/bbcinternet/2012/03/news_mobile_responsive_design.html

econsultancy.com/uk/blog/10956-bbc-news-embraces-responsive-design-for-new-mobile-site

alistapart.com/article/responsive-web-design

www.netmagazine.com/features/top-25-responsive-sites-2012

econsultancy.com/uk/blog/10977-what-is-responsive-design-and-do-you-really-need-it

www.netmagazine.com/features/ethan-marcottes-20-favourite-responsive-sites

en.wikipedia.org/wiki/Responsive_web_design#History

mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsive-website-presidential-smackdown/