Describing Mobile and Responsive Technologies on the Web

Overview

The figures vary on how much Web traffic occurs through mobile devices. I have seen percentages ranging from 10-25%¹. I feel the lower figure may be slightly more realistic at this stage but according to StatCounter global statistics, mobile traffic jumped from about 4% of all Web traffic at the end of 2010 to over 10.5% now therefore I have no doubt that it will continue to rise very quickly especially as the screens on phones and tablets get bigger and resolution continues to improve. This rise raises the question of how clients and web designers need to consider this new platform. How much budget should a client allocate to designing two websites, one for desktops and a separate one for mobiles, or whether a redesign using a responsive template should be adopted. Either way a website needs to work and look good wherever it is viewed. This is an area where the statistics end up do the talking; for example, a recent Google survey of mobile users found that 72% of mobile users say that it’s important to them that websites are mobile-friendly, yet, unsurprisingly at this relatively early stage in the growth of mobile browsing, 96% have visited a site that doesn’t work well on their device. Almost three-quarters of respondents said they are more likely to revisit a mobile-friendly site. Users are five times more likely to abandon the task they are trying to complete if the site isn’t optimized for mobile use, with 79% saying they will abandon an unoptimized site and resume their search for a site that does work within their browser.²

I will return to current considerations with designing for mobile devices later in this essay but I wanted to take a more general look at the mobile web. The rise of smartphones really took hold in 2007 and then tablets started making an impact in 2010. In the early days of the Internet  access was provided by fixed-line services but mobile and wireless networks have became the predominant means of accessing browser-based Internet services. When a tablet doesn’t have 3G or 4G capabilities, the process of tethering is now commonplace enabling a tablet to connect to the Web via one’s smartphone, often with just a single click.

The Mobile Web Initiative (MWI) was set up by the W3C to develop best practices and technologies relevant to the Mobile Web. The goal of the initiative is to make browsing the Web from mobile devices more reliable and accessible. Evolving standards of data formats from Internet providers that are tailored to the specifications of particular mobile devices has been one of the main aims. The W3C has published guidelines for mobile content, and is addressing the problem of device diversity by establishing a technology to support a repository of device descriptions. Designing a site for mobile use can seem  daunting as the number of different devices you are catering for is so large (suddenly, making sure a website works on one of the 5 main web browsers doesn’t look like such an arduous task) – the MWI, however, is helping to document and explore.

Registries and alternative domain names have been explored since 2004 for optimizing the web experience with questionable results. Some solutions have led to mobile sites having different URLs which, in this new age of multi-platform device interconnectivity, does not play the game at all. The most common implementation is for the desktop website to redirect to a subdomain for the mobile version, e.g., mobile.website.com for website.com. If I bookmark a website on my home computer, tablet or phone I want to be able to view it on any of my devices and not get used to a new view but expect the same experience. This may not happen with renaming a mobile site. The .mobi sponsored top-level domain, for example, was launched specifically for the mobile Internet by a consortium of companies including Google, Microsoft, Nokia, Samsung and Vodafone. By forcing sites to comply with mobile web standards, .mobi tries to ensure visitors a consistent and optimized experience on their mobile device. This completely misses the fact that most users will not just be looking at a site on their phone and want to see it on other devices. The most influential voice against this is Tim Berners-Lee who eloquently explained the impracticality of this approach back in 2004:

It is fundamentally useful to be able to quote the URI for some information and then look up that URI in an entirely different context. For example, I may want to look up a restaurant on my laptop, bookmark it, and then, when I only have my phone, check the bookmark to have a look at the evening menu. Or, my travel agent may send me a pointer to my itinerary for a business trip. I may view the itinerary from my office on a large screen and want to see the map, or I may view it at the airport from my phone when all I want is the gate number. Dividing the Web into information destined for different devices, or different classes of user, or different classes of information, breaks the Web in a fundamental way. I urge ICANN not to create the “.mobi” top level domain.³

Wikipedia has been at the forefront of this investigation. Access to Wikipedia from mobile phones was possible as early as 2004, through the Wireless Application Protocol (WAP), via the Wapedia service. Wikipedia launched its official website for wireless devices, en.mobile.wikipedia.org, in June 2007 then two years later a newer mobile service was officially released, located at en.m.wikipedia.org, catering to more advanced mobile devices such as the iPhone, Android-based devices, or the Palm Pre. Several other methods of mobile access to Wikipedia have also emerged. Many devices and applications optimise or enhance the display of Wikipedia content for mobile devices, while some also incorporate additional features such as use of Wikipedia metadata such as geoinformation.

For web designers, therefore, more than ever, the environment which we are designing for is constantly changing. It is important to keep up to date with new standards and practices and keep reading the latest research and learning from others as new code is constantly being developed, beta-phased and launched. The one thing to remember though is that we are all users and we have very simple needs – we need to open a site quickly and need to get to the information on offer quickly and clearly.

Mobile Websites

There are numerous platforms for creating a mobile website, with more companies seemingly popping up every day. It is important not to confuse mobile websites, which are sites optimized to be viewed primarily on phones, with mobile apps which are normally bought or acquired for free from app distribution platforms such as Apple’s App Store and Google’s Play Store for Android devices. To explore mobile app platforms Six Revisions produced a very useful starting point in August 2012 listing 10 solutions for building cross-platform mobile apps.

For designing mobile websites there is a huge amount of debate over the best platform to use. Mobile websites can be created using online platforms or frameworks like jQuery Mobile or hand-coded but with special consideration to the mobile application with the help of CSS3. In 2011 Google launched Google sites offering a free online service to create a mobile landing page. It’s easy to use, optimized to use the phone’s real estate efficiently and, of course most importantly, is free. In doing a quick search I also found, among others sites such as, Zoho, Wix and YoMobi. Whichever platform is used the following issues are most important to address when designing for mobile:

i.) Small screen size – keep information compact – use lots of white space

ii.) Lack of navbar – make site easy to use without the need of a navbar

iii.) Lack of windows (generally only one window can be open at a time although Samsung’s Galaxy 3 can show two windows at the same time, so this may become a more common feature)

iv.) Lack of javascript (a good thing for some) – you don’t want to slow up the site

v.) Speed – content needs to be optimized for the fact that some mobile networks can be very slow so delivery of data can hobble a site before it has even arrived on your device.

Below is a handy image to show the lifecycle of a mobile design:

As I have touched upon already there are pros and cons to using a dedicated mobile website. These have been summed up nicely by Six Revisions:

Advantages of a Dedicated Mobile Site:

• Easier to make separate changes to the mobile and desktop sites:Changes can be limited to the mobile version only or desktop version only.
• Faster load time: Since you’re developing only for mobile sites, you can streamline and optimize your mobile site specifically for the mobile user experience.
• Easier to navigate: The navigation structure and content is customized for the tasks performed by mobile users.

Disadvantages of a Dedicated Mobile Site:

• Multiple URLs for each page: Sharing a web page on social media becomes an issue, because mobile users will share the mobile URL, but desktop users may click the link and get the mobile version. To prevent duplicate content SEO issues, you’ll need to use the rel="alternative" and rel="canonical" meta tags. Also, when a mobile user searches on Google and clicks a desktop URL in the search engine’s results, they’ll either see the desktop version or be redirected to the mobile version of the page. If the mobile version of this page doesn’t exist, they’ll get an error.
• Different content and functionality: The purpose of creating a dedicated mobile website is to tailor the site specifically for mobile users. This can mean cutting out content and functionality, resulting in a different experience.
• Content forking: You have two different sets of content, which could create a content strategy nightmare.
• Requires redirection: Mobile users will need to be redirected to the optimized view, and vice versa. Redirection adds to a page’s load time. It can also have implications on your site’s SEO.

The BBC News website is a good example of a mobile website. When you search for BBC News you are taken straight to the mobile version of the site with the URL: m.bbc.co.uk/news. If you type this in to a browser on your desktop you are taken directly to the normal version of the site. The mobile version contains a lot of information but by delivering it in clickable blocks  of text stacked vertically it is very easy to see the information quickly. You have the logo at the top left and a Menu button at the top right. You can click on ‘Sections’ or you could scroll to the bottom to see ‘More from the BBC’ if you want to enter the site more deeply. Underneath this section you have a footer which, as well as the usual Copyright info, privacy policy, FAQ, Terms, Cookie info and Contact info, includes a link to the Desktop site.

Responsive Web Design

Many responsive templates are now available and CSS3 is your best friend when it comes to creating responsive sites from scratch. Responsive sites will adapt depending on the device on which they are being viewed. The key advantage of these sites is that only one site is required, whereas, as explained above, going the mobile site route involves having two separate sites. A responsive site contains the same HTML code, but it will have CSS attached that dictates rules of appearance when the site is being viewing on different platforms.

A responsive site should offer a similar experience to the desktop version but the information is simply arranged slightly differently. The responsive site needs to make changes due to the different nature of the phone. Normally if a website has three images adjacent to each on the desktop version, if designed as a responsive site, these image blocks will normally be rearranged underneath each other when viewed on a smaller screen.

I have been reviewing a number of websites and assessing their responsiveness. .Net magazine recently produced a survey of what it considered the 25 best responsive sites of 2012. From .Net’s shortlist I am particularly impressed by Lotte Nieminen’s site. It conveys confidence in that there is so much white space, no logo or branding, just a very simple interface. You have three buttons under the designer’s name. Clicking on one of these takes you left or right and the content follows down the page in blocks of images with explanatory text beneath.

The mobile version simply stacks the three main navigation buttons on top of each other and the content sits beneath.

The advantage of the site is that there is a lot of space for the site to breathe on the desktop, this space is then used effectively when viewed on a smaller device. I would like to see the site branded a bit more with perhaps a bit more colour to bring a more immediacy to the site.

The second site I enjoyed was the site for music software developer – Ableton. Unlike Lotte’s site, Ableton use a lot of colour and also, interestingly, a large image on its homepage. The use of images in mobile and responsive sites still remains an open and ongoing line of investigation. You don’t want large images on your site as they will slow it up when looked at on a smaller device, however, any images you use should be good quality for viewing on large monitors and they do add flavour to a site which it is a shame to have to lose when opened on a different device. There are groups like the Responsive Images Community Group (RICG) who are looking for long-term, standards-based solutions, and there are workarounds such as Adaptive Images which allows the designer to swap images out at breakpoints. There’s also jQuery Picture and Picturefill that simulate the functionality of the proposed picture element. For now I would use a key image at a good resolution and not too many images.

The Ableton site is slower than Lotte’s and so perhaps not such a fluid experience but you have to weigh that against the colour and content which add interest and excitement. The site contains a number of pages easily accessible through the Menu on the phone and through a traditional navbar on the desktop. As usual the info stacks vertically on the mobile.

 

What I enjoy about these responsive sites is how they don’t require a browser window to be a certain size and so directly address the user’s busy desktop environment (I regularly have a dozen or more windows open as I flit between projects, email, web and social media). At the same time the sites are just as workable on tablets and phones.

Of course the responsive approach isn’t perfect, at least for now. The responsive mode means only one website but, as I mentioned, images haven’t been specifically optimized for mobile web. SEO is linked to the main site which is great whereas the mobile is a different site and so SEO may suffer, however, responsive sites can be slower to load than mobile sites. This speed is relative though, for doing a quick comparison, the BBC mobile site loads about 2 seconds quicker than Lotte’s.

Conclusion

I have chosen to take a wider look at mobile web design as it is an area that can’t be ignored. While more and more people are viewing sites on mobile devices a huge percentage of sites remain unoptimized. For many the budget just isn’t there to rework or redesign your site for this new age. For some just having a web presence is enough. With e-commerce destroying the traditional high street and smartphones becoming so prevalent, companies need to start considering mobile web and realise how important it is for their company their brand and their customer’s experience.

Footnotes:

1. Macmanus, Richard. “Top Trends of 2012: The Continuing Rapid Growth of Mobile”. ReadWriteWeb. Retrieved 15 February 2013.

2. Miller, Miranda. “72% of Consumers Want Mobile-Friendly Sites: Google Research”. Search Engine Watch. Retrieved 15 February 2013.

3. Berners-Lee, Tim. New Top Level Domains .mobi and .xxx Considered Harmful. Viewed 15 February 2013.