5 Key Concepts For Mobile Web Design To Look Out For In 2013
In July 2012, there were already 6 Billion mobile subscribers worldwide. That’s 87% of the entire world’s population. In December 2012, the mobile share of web traffic across the world was 14.55% compared to 8.04% a year before. In the US, 25% of all web traffic comes from mobile-only users, while in developing countries like Egypt these numbers go up to 70%. If the growth rate continues like that, we can expect mobile internet to take over desktop internet usage by 2014.
There is no way around facing this rapid change. More even, we would do good embracing it so we can adapt early and ensure a steady experience for our users — now and in the future. As mobile internet usage increases, so do the expectations users have towards your website. People will have easier access to high quality devices and better mobile networks. They will be more flexible in time and place when visiting your website, and as a consequence their user behaviour will change.
The percentage of mobile Internet usage almost doubled between 2011 to 2012 (Source).
The smaller screen size is only one challenge we face with the shift away from desktop to mobile. There are also other hurdles that we need to overcome. While technical limitations and different interactions might be rather obvious challenges, we also need to think about more specific aspects like the different context of use and different user behaviours. Here are 5 key concepts for mobile web design to look out for in 2013.
1. Variety in screen size & screen resolution
Let’s start off with the most obvious challenge of mobile web design — the limited screen real estate. Over the last couple of years, the industry has developed great web standards for desktop devices. Usability is hardly the issue anymore and designers have what seems like boundless possibilities to create exceptional user experiences. With an increasing focus on mobile devices, some of these possibilities will not be relevant and new standards need to be defined.
Mobile describes any handheld device, such as tablets or mobile phones. Screen sizes and resolutions vary widely, making it an even bigger challenge to meet the requirements for all different devices. To name just a few popular smartphones, the iPhone 5 has a resolution of 1136 by 640 pixels at 326 pixel per inch (ppi), the Samsung Galaxy S3 has a resolution of 1,280 by 720 pixels at 306 ppi and the Nokia Lumina 920 has 1,280 by 768 pixels at 332 ppi. The retina display of the new iPad with a screen resolution of 2,048 × 1,536 pixel at 264 pixel per inch (ppi) even requires special images to avoid a blurry display.
Top 14 mobile screen resolutions in January 2013 (Source).
At this point, there are a couple of different solutions that help you deal with your mobile site. You can:
- Show your desktop version and have users zoom in to see your content
- Build a mobile site with HTML 5
- Build a native app for mobile devices
- Go for a responsive design
There is a big debate going on whether to stick with a native app, or build a mobile site with HTML5, and this debate will continue in 2013. For example, Mark Zuckerberg just recently decided for a new native app for Facebook, because he believes that HTML5 is not ready yet. As a reaction, Sencha built Fastbook, a technology proof of concept that demonstrate that HTML5 provides the tools to write apps that are comparable to native ones in performance. Personally, I think that a responsive website is the most flexible and most convenient way to go about your mobile site.
In any case, less room also means less content — or at least less content at once. So you have to prioritize. A good approach might be to design your content mobile first. Include only the most crucial and time- and location-specific functions and features in your mobile version. Keep it simple and clean try to avoid promotional or other distracting content. It is important that you keep your key features consistent on all devices to help your users find their way and avoid confusion. Mobile users typically look for small pieces of information, and they want them quickly.
2. Technical limitations
Mobile networks become more and more advanced and in some areas even 4G is available, ensuring a smooth and fast mobile connection. 3G has been launched in 159 countries and more than 45% of the world’s population is covered by a 3G mobile network. These numbers sound exciting and, living in countries like the US, you might find it difficult to imagine any other standards. Yet, about 55% of the world’s population has to deal with slower mobile connections.
Wireless internet coverage in the US (Image Source).
Slower connections lead to longer loading times and require us to seriously consider the data load of mobile websites. For example, video and large images can slow down a website tremendously, at the expense of both the usability and the user experience of the site. If you cannot guarantee that your users have access to a fast mobile connection or access your site using wifi, then make sure you strip down your site to what’s most important.
Apart from the connection, mobile devices now and in the near future will always be limited by less powerful hardware and limited software support for multimedia as well as multimodal content. Therefore, it will always stay a challenge to create the same user experience on both mobile and desktop devices.
3. Different context of use
As more people use mobile internet on a regular basis, or even as their only internet connection, we need to think further than just the interface we are designing. For any mobile design, we need to keep in mind that we are not only dealing with different devices, but also with a different context of use. In an article for the Journal on Multimodal User Interfaces, Luca Chittaro of the HCI Lab at the University of Udine discusses different factors that affect the design of efficient user interfaces for mobile users.
To start with, there are different physical parameters that we cannot control, yet that require our attention. Mobile devices are often used in public places that might be noisy, or outside in the sunlight, which affects the screen quality, or in public transport, decreasing our sensations for vibration. All these parameters influence how people perceive and interact with their mobile device.
The context of use for mobile internet can affect our ability to interact with a mobile website (Image Source).
Besides, people on the move can only devote limited attention to interacting with their mobile device. Their attention is occupied by their environment, leaving little time and limited concentration for solving goals on their mobile. Also, user’s fine motor skills can be limited in mobile conditions, affecting their precision of interacting with a mobile device. Any design that people are supposed to use in such mobile context needs to match these limitations.
Next to physical influences and limited user abilities, there are also social norms that need to be taken into account when designing for mobile. Social norms that come with different environments can affect our interaction with mobile devices, such as conferences, movie theaters, or family dinners.
4. Difference in user behaviour
Last but not least, mobile internet users show a different user behaviour than on desktop devices. This does not come as a surprise because of several reasons. First, mobile devices are always “on”, which allows us to access the internet instantly, 24 hours a day, 7 days a week. We have gotten used to access required information immediately, which does not only affect our expectations towards mobile web sites, but also limits our patience when looking for something.
Mobile devices are also more personal than desktop devices. 80% of the smart phone users never leave their home without phone. This adds to the fact that mobile internet users have gotten used to being constantly connected to the internet. On the move, people typically want small pieces of information quickly. For example, mobile search usually includes only one word, while desktop search includes two or more words.
For example, mobile internet users research products and compare prices while on the go. 46% of those, who use their mobile phones to make shopping decisions compare prices online, while purchasing a product in a store.
On the other hand, there are still a lot of things that people prefer to do on desktop devices, such as researching high quality content, writing text, making online payments, or doing any other time consuming activity online as desktop devices still offer more comfort.
5. Mobile design trends
The increase in mobile internet users will affect the way we design and build websites in 2013. Along with this evolution also come new design trends. It’s up to us how serious we take these trends and whether or not we choose to follow them. The year has just began an already there are countless articles out there listing all different kind of web design and development trends for 2013. Here is a selection of the trends that we’d like to see catching on this year:
Mobile design trends:
- Mobile first design approach
- Responsive design
- Minimalism with a focus on usability and functionality
- More (functional) imagery
- Animations for user guidance
General design trends:
- Content first design approach
- Storytelling & Personality
- Interactivity & Gamification
- More video content
- Optimizations for retina displays
For more design trends and opinions of what to expect in 2013, check out these articles:
- 13 App Design Trends For 2013 (published on The Industry)
- 20 Mobile Web Design Inspirations Based On 2013 Predicted Trends (published on PeaceLoveDesign Studios)
- 20 Top Web Design And Development Trends 2013 (published on .net magazine)
- Future Trends In Web Design Predictions For 2013 (published on Webdesigner Depot)
- Web Design Trends 2013 (published on Mashable)
- Web Design Trends 2013 (published on Hongkiat.com)
- Web Design Trends 2013 (published on Smashing Hub)