2013_01_04_featured_mobile Design

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:

38 comments

  1. Michael

    Thanks for the tips, Sabina! I especially like the stats that show mobile growing. I give it 2-3 years to really start taking over.

  2. Yehuda

    Yes, no surprise that 46 percents do compare prices while in stores. It was allready been said that smart phones are for shopping and tablet are for buying.
    BTW what is content first design trend?

  3. Johan

    Great article, Sabina. I especially liked #4 “difference in user behaviour” – web designers need to reprioritize website tasks based on the device. For example, mobile users are much more likely to want location and phone information, so this type of information should be available at the top of mobile sites. For #2, download speed is important, but the bottleneck for mobiles is processing power. Most of the time downloading a site isn’t the bandwidth, it’s the mobile device rendering the information.

  4. Premium Logo Design Services

    I truly appreciate the content of your blog.. Keep going.

  5. Sabina Idler

    I understand a mobile first design approach as one that focusses on content first and aims at providing users with relevant information according to specific situations in which they visit a site. The design then comes in to present the information in a logical and accessible way.

  6. Sabina Idler

    Great to hear, thanks! :)

  7. Typo3 Internetagentur

    Love your awesome tips. Very nice blog.. Appreciate your effort to post this article. Thanks a lot for sharing this wonderful post.

  8. Andrew

    This was such a great article on mobile. I have been looking for a regular blog I can follow in terms of mobile and user interface. I appreciate the stats provided as mobile is a must going forward in 2013.

    Sabina, why do you think responsive is the way to go in mobile website design?

    Look forward to future articles!

    Cheers.

  9. Piet

    “we can expect mobile internet to take over desktop internet usage by 2014.”

    In China, where I currently reside, mobile internet took over desktop internet usage in June 2012 and by December 2012 it already accounted for 74.5% of total internet traffic with 420 million users.

  10. William Wilkinson

    I really appreciate this blog for sharing such a great information. For a mobile web design you need a application developer who is able to design a website which is compatible on a mobile.
    web designers atlanta

  11. Testing-whiz

    Yes totally agreed.In this generation the mobile phone users are increasing considerably as well as using internet through high multimedia systems.So developing app that has UI almost similar to desktop version would be an important aspect.Thanks for the post.

  12. rethinkmobile

    Glad to see this post. Such a nice article. Thanks for sharing us 5 important tips.It clear all doubts about mobile web design

  13. Anna

    Thanks for the mobile design tips! For those interested in mobile web design, check out the new responsive design prototyping tool Froont we are working on. We want to make it as great as possible, so feedback is very welcome! To get an invite code to test it, sign up here: http://www.froont.com.

  14. Gordon

    Personally, I believe that you need to have a separate site for your desktop and mobile. Setting up a responsive design is not as great as it appears on the surface. First off you need to consider how your navigation, and also header tags are going to lay out. Then you need to trim everything way down so it loads fast for mobile devices, and how that is going to affect your desktop viewers. Also, do you use any flash animation? How is that going to affect you? For me, it’s best that you put what you feel you need to on your desktop site and in the way you want, and have a seperate site for mobile viewers to go to. Mobile viewers are different from desktop viewers in the sense that they don’t have a mouse, and don’t want to do more than they have to with their finger. Click to call and a very simple way to get around the site with a tap of the finger. That’s it. Remember, you also have to do a lot of scrolling with responsive design, ugggh. I prefer something more simple.

  15. John Murphy

    To attract any person to a site it is important to make it look attractive and unique. Good design always attract eyeballs. And hence it is important to make sure that the site looks good. This blog does a great job in providing crucial info about mobile web development.

    With more and more people using mobile devices these days, it is important to develop good quality mobile site that can provide smooth mobile experience for users.

  16. Gary Bryant

    This is a fantastic page of information on mobile web design. If you want to understand why you need a mobile website – watch this video http://youtu.be/edCvfNl02vo

  17. Åsa Rosenberg

    For most websites responsive is the way to go. Apps can be useful but if you develop one as an alternative to your website the user should be able to choose for themselves.

    Responsive design demands more of developers but in the end it’s going to be cheaper for the client to buy one flexible product than two separate solutions. Plan your website well and you won’t have to make two versions of it.

  18. carl

    Hello to every one, the contents present at this website
    are actually awesome for people knowledge, well,
    keep up the nice work fellows.

  19. Sabina Idler

    Thanks Carl, we have all intention to keep it up. :)

  20. Seshu

    An interesting read with topics covering various aspects of mobility. One comment I would like to make even though I completely agree on the third point about context sensitivity – most of the times mobile phones are being used while at home and work (from businesses perspective this is when customers are looking for products or services). This is not to say that mobile phone services on the go is not there but as per my opinion most of the usage during this phase is for news or for directions rather than for making any shopping decisions.
    Given this the context of environmental factors might not be a big issue when it comes to businesses (again I am not saying this is not relevant)

  21. Sabina Idler

    Thanks for sharing your thoughts on this. I agree, there are different interests in different situations of mobile use which need to be considered.

  22. Mobile Web Site Converter

    you have point out the good key concepts of mobile website. After reading the article every business should must have their mobile website.

  23. Sabina Idler

    I’m sure it will not take much longer before that’s the case. Thank’s for your thoughts.

  24. visioncloud

    This is my first time i visit here. I found so many entertaining stuff in your blog, especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all the enjoyment here! Keep up the good work.

  25. Sabina Idler

    Thanks for your kind words! We are very happy to hear that you enjoy our content!

  26. IT Support Melbourne

    Good stuff. It is interesting to read comments.

  27. Nyle Seabright

    Sabrina,

    Many thanks! One other point about behavior with mobile devices. We find that they encourage a form of “social shopping”, especially for women. We find that women often shop together and use mobile devices, especially tablets, as as part of a discussion about a purchase decision. This is a first person use, often in-store, where the tablet display inadvertently becomes part of the store merchandising, for better or worse. We are working on site redesign to integrate our online and offline stores. For the most part desktop shopping is solitary, but we see mobile shopping as shared — fun and conversational. So it is doubly important to tell visual stories simply for mobile shopping — stunning pro photography that sustains a compelling narrative. This requires a budget but there is no way around it.

  28. AndyG

    Responsive design is complete overvalued! Modern smartphone browsers render desktop sites reasonably well and a user prefers scanning and zooming.

    As you listed in your great article, the new mobile generation all offer DESKTOP resolution.

    A 960px Layout will fit on most devices in one or two years (DESKTOP AND MOBILE).. older mobiles will be replaced till then.

    More important is to use LARGER fonts.

  29. Bailey

    Fabulous, what a blog it is! This blog provides helpful data to us, keep
    it up.

  30. Hqtips

    much informative article!

  31. chris turner

    well written article on how to convert to mobile! Definitely a must for all businesses…thanks again! I used NowMobileME to create my full mobile site…check them out http://www.nowmobile.me

  32. Emmanuel Hemmings

    I have used this article to demonstrate the meaning of real estate when it comes to mobile website design. What is demonstrated on a large PC screen has to be reprioritised to adhere to the limited screen size of a mobile device (and lack of mouse).

  33. Black Slate Studios

    Creating a separate mobile website along with a regular site is quite antiquated. It is far more advisable to utilize Responsive web design coding.

  34. websitez.biz

    My cousin encouraged I would possibly this way web site. They ended up being entirely correct. This specific distribute absolutely built my personal day. You simply can’t consider the amount period I needed used in this information! Thanks a lot!

  35. website design in bangalore

    I really appreciate this blog. In our future mobile website will play important role. Thanks for sharing nice thought.

  36. contoh resensi buku

    fastidious piece of writing and good urging commented here, I am in fact enjoying by these.

  37. london web designer

    This post is amazing for me to work out and also i like reading your post.

  38. guru

    http://phponwebsites.com is my site. I want to make my site mobile friendly. Can you tell me the exact width and height for the mobile devices

Leave a Reply

Your email address will not be published. Required fields are marked *