This is a guest post by Chris Kinsey – a Digital Designer for Sixth Story / @sixth_story – a UK based Branding & Communications agency based in Birmingham. He is fuelled by tea and charged with driving strategy and innovation to this forward thinking creative agency.

Mobile is certainly the big craze at the moment in the web industry. With the introduction of mobile devices such as the iPhone, iPad, and various other smart phones and tablets, the demand for websites to be ‘mobile friendly’ has never been greater. The purpose of this article is to highlight the impact mobile devices have had on web design in recent years. The article looks at various aspects such as best practices, challenges and design trends as well as taking a look at what may lie ahead for the future of mobile web design.

You may also be interested in these articles:

Mobile Conception

Motorola launched the world’s first commercially available mobile telephone, the DynaTAC 8000X, in 1983. Despite initially being affordable only to a privileged few and, by today’s standards, little about the device actually lending itself to mobility – not least its unwieldy brick-like size and weight – the Motorola 8000X nevertheless represented a major world-changing advance in the way we communicate.

In the 30 years or so since the 8000X went on sale, much has changed. For a start, the definition of the term ‘mobile technology’ has expanded beyond the scope of the telephone to include an evermore-diverse and sophisticated array of devices ranging from tablet PCs to eBook readers to so-called smart phones. Alongside other impressive capabilities such as allowing users to take and share high-definition photographs, read books, ascertain ones location down to a few metre’s, play movies and music and, even access the internet, that of making and receiving calls today seems a somewhat insignificant, easily overlooked feature of what now essentially amount to small, albeit ferociously powerful, personal computers.

The personal computer that has dominated our lives up until now has been, without doubt, the desktop computer, the experience of accessing the Internet on a mobile device having traditionally been fraught with difficulties and, more often than not, one characterised by intense disappointment. Yet with the help of advances in mobile hardware as well as software, the increasing availability of wireless, 3G and even 4G high-speed Internet, not to mention increased awareness and cooperation on behalf of designers and developers themselves, things are beginning to change fast with mobile devices now emerging as serious contenders to the desktop computer.

In 2009, Goldman Sachs economist, Mary Meek, predicted that over the following five years more users would begin to connect to the Internet through a mobile device than on a desktop computer. As of 2012, there are already more smart phones being sold worldwide than desktops with Gartner’s, one of the world’s leading IT research companies, predicting that mobiles will, ahead of schedule, surpass personal computers as the most common means of accessing the web. Meek has argued that the world is currently in the midst of its fifth major technology cycle of the past half century, the Mobile Internet Era – the four prior to it being the mainframe era of the 1950s and 60s, the mini-computer era of the 1970s, the desktop computer era of the 1980s and the desktop internet era of the 1990s and 2000s. If this cycle is as big as its four predecessors – and the sheer numbers involved suggest it will be even bigger – then those able to rise to the challenge of providing what users want, when they want it, will be more than compensated for their efforts.

The problem is that, until recently, few businesses, designers and developers have been able to fully grasp the importance of what is happening, many of them choosing to ignore the medium entirely. Designing for mobile devices presents its own unique challenges separate from those encountered when designing for the desktop, not least of all that of having to contend with a smaller screen.

Nevertheless, in the words of mobile Internet design expert, Luke Wroblewski, “Mobile, if it happened at all, has been a port of the desktop version that was conceived of, designed and built before anyone even considered the mobile experience.” Additional problems arise when considering the sobering fact that the vast majority of users do not yet own devices as feature-rich and technically competent as the iPhone 4S, which, like the 8000X back in the eighties, today still remains predominantly the preserve of the relatively wealthy.

Yet from a business perspective, it is hugely important to try and establish a strategy aimed at satisfying the demands of all elements of this increasingly important, growing target market, not just a privileged few. As many key players in the industry have already said, those involved in coming up with such strategies will, ultimately, have to start to do this by reversing the current trend of focusing on the desktop and begin designing for the mobile first.

The Growth of Mobile Web

We can divide mobile devices capable of surfing the web into three categories: feature phones, smart phones and touch phones. As the definition of mobile devices widens, however, this description seems rather limiting. Instead of listing every single feature of every mobile device on the market, it is perhaps best to categorise them as follows.

Smart phones – phones with multitasking OS, full desktop browser, WLAN, 3G, music player and often GPS, digital compass, video-capable camera, and many other features, which could include touch support.

The vast majority of people, however, still refer generically to all but the last as mobile phones.

Since their emergence in the 1980s, the unprecedented speed at which mobile technology has evolved has resulted in an astonishing array of ever smaller, more portable and more powerful devices. Ahonen illustrated this dramatic trend by way of comparison with other key technologies widely considered to have affected seismic social, technological and economic change, such as the automobile, television and desktop computer and, in doing so, showed to what extent the mobile phone has become such a cornerstone of our lives, in such a comparatively short amount of time.

According to a study by the International Telecommunications Union, in 2010 there were some 5 billion active mobile subscriptions worldwide, a figure that equates to 77% of the world’s total population. In just three years since Ahonen made his comparison, the number of subscriptions worldwide had practically doubled and this is a trend that shows every intention of continuing as the market nears total saturation.

In terms of both revenues and subscribers, the United Kingdom is one of Europe’s largest mobile markets. With a total of 76.4m subscribers in 2011, there are now over five million more subscriptions in the country than there are people. An estimated 9 in 10 UK residents now own at least one handset, many owning several.

As the infrastructure required for such devices to function makes its way to some of the world’s more remote and disadvantaged regions (currently around 90% of the world enjoys mobile phone coverage) and mobile technology itself both improves and comes down in price, the developing world is catching up fast with the fastest growth today seen in Africa. There, the number of subscribers is set to hit 735 million by the end of 2012, the market having grown by a steady 20% for each of the past five years.

Of course, as this technology becomes more prevalent, so does the number of people using it to access the Internet. 85% percent of handsets produced in 2011 will be web-enabled according to MobiThinking. From a business perspective, this is by far the most interesting aspect of all.

There is a significant relationship between the surge in mobile Internet and its increasing economic accessibility, but the most important factor relates to the inherent portability and interactivity offered by the medium itself. These are both distinct advantages over desktop computers, a form of technology, which, essentially, tethers its users to a single location.

Worldwide, a total of one billion are set to use mobile devices as their primary means of accessing the web by 2015. In the UK, Research conducted by Tecmark shows that 12.59% of all UK web traffic now comes from mobile devices. This equated to over 4000% growth in the proportion of UK web traffic accounted for by mobile devices, the number having jumped from 00.2% in September 2009 to 12.59% in August 2011.

By analyzing UK mobile web traffic, Tecmark were able to ascertain that Apple devices account for the lion’s share of access, with 58% of mobile visits coming from iPhones and an additional 17% from iPad’s. 14.6% of mobile web visits were visited by Android devices and 3.5% by BlackBerrys, which were noted as declining.

What are mobile devices being used for?

Given the qualities distinct to mobile devices, such as their small size, portability and increasingly sophisticated features like high-end cameras and GPS, it would be a mistake to regard them merely as substitutes for desktop computers. As well as for regular browsing, the following summarises some of the most popular uses for mobile devices to date.

Geolocation Services

As well as assisting with navigation, built-in Global Positioning System (GPS) receivers allow users to receive targeted, timely and location-relevant services to their devices such as news, weather, information from local businesses and even the whereabouts of nearby friends.

Social Networking and Instant Messaging

Access to social networking sites such as Facebook is proving increasingly popular. By allowing users to report on life as it happens (uploading photographs to Flickr or Facebook, for example, literally seconds after they are taken), social networking is, in many ways, finally being unleashed to achieve its full potential. Users accessing Facebook via a mobile browser grew 112 % in 2009 and access to Twitter via a mobile browser grew by 347%. There are more than 100 million active users currently accessing Facebook through mobile devices. These users are twice as active as non-mobile users.

Instant messaging, already an established favourite on desktop computers, is also naturally suited for mobiles. Unlike traditional text messages, users can send messages as part of their data plan to anywhere in the world, regardless of mobile carrier. The same, of course, applies to e-mail.

Shopping

According to Adobe’s Mobile Shopper Insights for 2011, 46% of users shop online for an hour, on average, a week. It is becoming common for shoppers to research a product at the point of decision “transforming the way consumers shop and interact with brands”.

On-the-Go Uses

In addition to the above, mobile devices are especially good at performing a number of on-the-go activities such as checking transport times, news, restaurant reviews, price comparisons, online banking, watching video, playing games and a great deal more.

Bridging the Gap

Essentially the biggest advancement in mobile devices has been bridging the gap between the mobile and desktop web experience. Google, Amazon, Wikipedia, eBay, YouTube, and Facebook are a few main representatives of Web 2.0, whereby the smart phone and mobile device revolution has eventually moved the web, from our desks, to our pockets. As Web 3.0 accelerates the convergence of the web with our daily lives, mobile devices will lead the way.

Overcoming the Challenges of the Mobile Web

Challenges

Owing to a number of factors, not least the hugely reduced size of the screens on mobile devices and stark software and hardware compatibility issues, designing for this medium presents an entirely different set of challenges for designers compared to those commonly encountered when designing for the desktop. The following are some of the most common issues.

Screen Size and Resolution

By their very nature, mobile devices have small screens. The iPhone 4S, for example, has a screen size of 960 x 640 pixels and that of its main rival, the Galaxy Nexus, is larger still at 720 x 1280. More basic devices, however, possess screens as small as 240 x 240. Typically, websites are not optimised for small screens.

Operating Systems

According to Infosec Island, the most commonly used operating systems on mobile devices can be narrowed down to five: Symbian (33%), Windows Mobile 7 (-5%), Blackberry Rim (15%), Apple iOS (16%) and Google Android (33%). In addition, a number of proprietary operating systems exist. Such variety creates a constant challenge for designers and developers respectively.

Devices and Navigation

Referred to earlier, there are literally thousands of different makes and models of mobile devices on the market today, all with distinct features, advantages and disadvantages. At the high end of the market are multitouch devices that allow people to use either fingers or styluses to navigate the interface. Such devices may or may not also feature a traditional, physical QWERTY-style keyboard. Not all mobile devices have touch screen interfaces. Many feature trackballs, joysticks or directional keys. For this reason user navigation can often become more of a hindrance than help to the end user if a particular website is setup for certain devices in mind.

Browsers

The overwhelming challenge with mobile web design is the lack of standardisation across web browsers. The desktop browser world is relatively simple with the leading browsers being Internet Explorer, Firefox, Safari, Opera, and Chrome (in no particular order). There are currently around 25 mobile browsers in common usage. It can be confusing for web developers to decide which standards to obey and which users to serve. Safari on iOS was and maybe still is currently the only mobile browser to support a range of new features, including those that allow us to create animations, transitions, 3D, and Flash-like experiences using HTML5, JavaScript, CSS3 and jQuery, but without the use of Flash.

The Importance of User Experience

Writers in the field of Human-Computer Interaction (HCI) have written extensively on the topic of User Experience, a concept that lies at the heart of mobile web development. According to Cameron Moll, this experience is “context, content and component sensitive,” meaning that it is predominantly influenced by a user’s environment (context), the relevance of information accessed to the task at hand (content) and the feature capabilities of the device being used. These are the factors that businesses and designers alike must take into account.

‘Mobile’ should refer to the user, and not the device or the application. All too often designers and developers have treated the mobile environment and technology as a subset of the desktop environment and fail to consider the strengths and weaknesses of a mobile device. Cameron Moll described this mindset as “PC nearsightedness”. For the mobile Internet to flourish and truly come into its own, the UX must become the central element around which all others revolve. Put simply, designers must start to “mobilize not miniaturize,” thereby precisely targeting mobile user needs, making the best possible use of technology.

‘One Web’

Since 2005, the World Wide Web Consortium(W3C) has promoted the idea of ‘One Web’ as a means to make the web available to everyone, regardless of his or her device. Initially, the mission statement of ‘One Web’ was defined as follows. “One Web means making the same information and services available to users, irrespective of the device they are using” which was later revised to include the lines, “as far as reasonable” and “does not mean that exactly the same information is available in exactly the same representation across all devices.”

It is a noble goal but ‘One Web’ is based on a number of flawed assumptions, namely that content for multi contexts will always be the same, cost per kilobyte per user will be minimal or non-existent, an always-on, high-speed data network will always be available, mobile browsers will always support the same standards consistently and technology-based principles should always come before the needs of the user. The first four will eventually be outdated, but the last will always remain questionable.

Flawed assumptions or not, the general underlying sentiment is that designers should avoid making assumptions about their users and instead labour to minimise the differences and maximise the similarities across mobile devices.

Best Practices

Last updated in July 2008, W3C’s Mobile Web Best Practices, a list of 60 best practices, has been referred to frequently. According to the MWBP, the top ten such practices (still largely relevant today and as much a case of common sense than anything else) are as follows.

Design for ‘One Web’

Rely on Web Standards

Stay Away from Known Hazards

Be Cautious of Device Limitations

Optimise Navigation

Check Graphics and Colours

Keep it Small

Use the Network Sparingly

Help and Guide User Input

Think of Users on the Go

Current Practices

Though a truly vast subject area that would have you reading for hours upon end, the following provides the briefest of overviews with regard to current practices and design trends.

‘Mobile Friendly’ or ‘Mobile Responsive’ Websites

The terms “Mobile Friendly” or “Mobile Responsive” refer to websites, which adapt to the user no matter the screen size or device they are using. Before looking at design trends, it is important to first mention that there are different directions a designer and developer can take when constructing a mobile website: the most common being touch optimised frameworks and responsive web design.

Responsive Web Design

Responsive Web Design conforms very much to the ‘One Web’ principle where the end user is only ever dealing with one website, unlike with a Touch Optimised Framework which may be setup to forward users on mobile devices to a particular domain, sub domain or directory. Responsive web design works through setting percentages and media queries within the websites CSS. When an end user visits the website on a smaller mobile device, the website will automatically determine what screen size they are using (media queries) and adjust accordingly. The page elements can be set using percentages rather than fixed width and height pixel dimensions. Therefore, the elements scale in size dependant upon the device viewing it. Many mobile devices are also able to switch the orientation from portrait to landscape. A mobile website will need to allow for this and scale/adjust accordingly. Touch optimised websites and responsive web design generally both cater for this type of functionality. The latter, however, is essentially the most logical and cost effective approach to mobile web design (in my opinion).

Touch Optimised Frameworks

Touch optimised frameworks such as jQueryMobile and Sencha Touch enable developers to work from a framework that is specifically compatible with a multitude of mobile devices, mobile operating systems and mobile browsers. The framework utilises the latest HTML5 and jQuery technology but it is also backwards compatible with HTML4 meaning mobile operating systems with browsers that do not support HTML5 will still work, appealing to a larger target audience. Most importantly it offers ‘app’ like transitions (such as slide, fade, pop and flip) that give the impression the user is operating something similar to a native ‘app’ from within a mobile browser.

There are clear advantages to touch optimised frameworks, including: quicker turn around, they are significantly cheaper than a native ‘app’, the website runs through a browser meaning it’s easier to make multi-platform, you can direct users to a specific web address and so cut out the ‘middle man’ of having to download an app from an app-store, and you can make the framework content-managed enabling the content to be changed without having to pay a company to recompile an ‘app’ equivalent. Touch-optimised frameworks are also usually compatible with non-touch optimised mobile devices.

Design Trends

Now the direction a designer and developer may take when constructing a ‘Mobile Friendly’ website has been highlighted, it is imperative to look at the current trends and best practices which craft the website into a finalised design. The following approach will take into account the challenges, which have been previously listed.

Minimalism & Navigation

A simplistic and minimalistic approach is vital when designing for the mobile web. This can often be achieved by stripping out the content to what is, essentially, key information. Page Progressive suggests streamlining the information and choices available so that today’s busy consumers don’t have to spend a lot of time sorting through excessive info. Choose function over extra features for a scaled down mobile website.

It’s important to keep it quick and minimal, provide only key information, optimise any images and break up long pages into bite-sized chunks. Ensure the navigation is simple, easy to get to and from pages, and buttons are easily clickable.

Some may argue a website should not have information removed when viewing on a mobile device, but in my own opinion, low priority content should be removed – creating an easier to read and move around experience, as well as quicker loading on devices, which sometimes suffer from slow Internet connection speeds. The same simplistic and easy to use approach should also be applied into the navigation with touch optimised and non-touch optimised devices in mind. Positioning the navigation will not be exactly the same compared to a desktop equivalent. If the navigation is positioned at the top, the key content will be pushed further down the page. This can be avoided by placing content before the navigation or using drop down links.

Organisation should also be applied with minimalism. Grid systems are a great way to keep everything organised within a web page. Users often like content in columns, navigation by horizontal bar and vertical link lists. On screen element proportion is crucial. Users who have to zoom excessively, hiding the rest of the page, are not receiving the best overall user experience.

Optimised Pages & Prioritised Content

Page load times and images should be correctly optimised when designing for the mobile web. Reducing the overall load time of a website will help avoid high bounce rates. Mobile websites have to bare in mind the end users varying Internet speeds. Therefore minimal use of imagery is essential. Imagery, which is required, should be optimised accordingly and reduced in file size to improve loading times.

An alternative method of reducing page load time is with Ajax. Ajax increases the responsiveness of a web application, and these benefits warrant merit for the mobile web, as the traditional click-refresh, click-refresh browsing experience can be painfully slow on a mobile device. Designing for the smaller screen device requires further attention to what is actually displayed. Whilst minimalism and simplistic methods have been mentioned, it is important to ensure there is enough prioritised content on the screen, which interests and is relevant to the end user.

Social Media Integration

Social media integration is something which cannot be avoided if any business or individual wants their website to be found. Seamlessly integrating social networks such as Facebook, Twitter, Google+ will enable visiting users to share content, potentially advertise a product/service to their followers/friends, whilst increasing brand awareness at the same time.

Native App Design Inspiration

A vast majority of recent mobile website designs seem to take heavy inspiration from native app user interfaces. Mobile website designers are creating pages that adapt menu items into button or icon systems similar to those used in apps for a clean icon driven design.

Textures are also commonly used within native app design and these are starting to surface within mobile websites. Texture is often used as a design device to add dimension, depth, or simply to inject life into a bland design.
Texture play’s a key role in how users interact with mobile websites. As the standard display of a mobile device is relatively small compared to a desktop equivalent the user most often than not has to touch the screen to navigate and interact. Therefore, there is no mouse or hover states that informs users whether an element can be clicked. With touch screen devices you can do more than just touch, you can move, scroll, expand and pinch elements on screen. As users of real life, physical objects, we interact with textures everyday. Creating textures for on screen elements that can be manipulated by the user is becoming more important and goes one step further in merging the gap between real life and technology.

The Future of the Mobile Web?

As mobile devices become more and more popular as a means of accessing the Internet, designers and developers can no longer ignore the fact that mobile design is a field in its own right, quite separate from that geared mainly towards the desktop. Designing for mobile devices presents its own unique challenges that necessitate their own specific solutions.

The most obvious challenges emanate from the small size of mobile devices compared to their larger desktop rivals. Designing for the idiosyncratically small screens found on mobile devices, for example, requires a completely different approach to that of designing for a desktop due to the far greater constraints on space. Mobile website layouts must, therefore, be minimalist and content should be concise and, most important of all, mindful of the oft-cited concept of context.

Observing such basic criteria also has the knock-on effect of anticipating for mobile Internet connections. Although vastly improved in recent years, certain parts of the world remain expensive and have a greater propensity for inconsistencies in performance.

From the perspective of interactivity, in the absence of a (full-sized) keyboard and a mouse, forms of navigation suited to the desktop are less useful for mobile users. The different forms of input found on small devices require designers and developers to think differently about the optimal way for users to navigate a given site. In short, navigation on a mobile device needs to be intuitive and consistent with providing an optimum user experience.

Whilst issues surrounding device and software incompatibilities will gradually become less and less relevant over time, the challenges cited, however, are inherent to the technology. Where as it might have been at one time acceptable to take a relaxed attitude to mobile, perhaps taking the easy route of either simply doing nothing or making a few tweaks to a website designed for the desktop in order for it to be viewable on a mobile, this no longer makes sense, not least of all from a business perspective. Businesses that continue to bury their heads in the sand when it comes to the importance of mobile users do so at their own peril. In essence, the web design industry is being forced finally, to “mobilize, not miniaturize”.

Whilst the future is difficult to predict, it is clear to see which areas within the mobile web field will continue to develop further.

First of all, a lot of the groundwork has already been done over the past few years. Advances in HTML5, CSS3, Javascript and jQuery, for example, together with a move towards standardisation in the browser industry, will make the job of the web developer and designer much easier when it comes to making the transition from desktop to mobile. As the process becomes simplified, developers will find it quicker to write and implement code. The industry itself will grow and the once steep learning curve will gradually fall away. All of this will, in turn, result in greater functionality and a much-improved experience for the end user. Web design agencies may incorporate mobile responsive design as standard (some probably already do) into projects meaning that, as websites get deleted from the Internet and others re-designed, near enough all websites will be mobile friendly.

Where websites have traditionally failed to deliver, native apps have become a reliable fallback option or a first choice in their own right. For many people, such apps have taken preference over websites even when available. As websites become closer in terms of features and functionality to such apps, it is possible that they will become less relevant, though it is unlikely that they will die out entirely. A number of apps such as games, dictionaries and other reference materials, for example, are popular precisely because they do not require an Internet connection and can be used offline. A bustling market worth millions currently exists for apps from which thousands of developers are earning a living. Developers could maybe one day earn the same from websites with the same in-built features.

Geolocation services will hold greater significance whilst search engine optimisation will become less important in response to the growth of search engines pushing more location-appropriate information to the end user.

Augmented reality may also finally be utilised to its full potential to give new relevance to our surroundings, perhaps allowing the user to transpose information from the web onto whatever is placed within the device’s camera viewfinder. As the kind of voice technology seen with the iPhone’s Siri application picks up and becomes more and more refined, perhaps users will be able to actually converse with websites with meaningful dialogue, an advance which would make many of the current challenges relating to navigation a thing of the past.

In terms of hardware, emerging technology such as screens with revolutionary new properties such as the ability to be rolled up like a newspaper and display 3D are already on the horizon. When this technology finally matures, maybe web and mobile design may render the printing press almost obsolete as the benefits of a reusable screen become fully apparent? This will prompt a huge shift to web typography as designers attempt to replicate the nostalgic look of traditional, dead-tree magazines and newspapers on screen. Devices and browsers will, in turn, pack far greater support for typography than what they currently do.

As we move into Web 3.0 – the so-called ‘Semantic Web’ – we will see a more intelligent and intuitive Internet, the evolution of which will result in seamless integration with our daily lives. At the forefront of these developments will be mobile devices.

About The Author

Chris Kinsey @nympfo is a Digital Designer for Sixth Story / @sixth_story - a UK based Branding & Communications agency based in Birmingham. He is fuelled by tea and charged with driving strategy and innovation to this forward thinking creative agency.