Best Approach to Mobile Website Design

Posted in Tips, Web Design • Posted on 4 Comments

We’ve heard 2011 being many times named as the year of the mobile web, although the last couple of years we heard this association many times. As technology advanced, so did the mobile phones, which we call smartphones today. The internet usage increases every month and the tablets and smartphones start being adopted by every family. 53.6 million people in Japan access the internet from a mobile phone per month, which is almost as much as the users who access the internet from a PC. In the United States around 20 million users use Facebook to check-in every month, so the number of people who access the internet has to be somewhat bigger. According to different sources, the number tends to get past 100 million users monthly. Nobody expected this to happen 10 years ago, but here it is. Therefore the developers have more work to do now with so many companies asking for their own mobile website.

In this article we will focus on a user-centered approach of the mobile webdesign which became popular in the last couple of years. With smartphones having a narrow screen, limited space and less keys, the mobile webdesign is quite different compared to the classic one, for computer screens.

On-going cycle

There are many steps from the idea of a mobile website to actually having one. The user-centered mobile design cycle has five different phases, which we will take a look at soon. The phases are: Analyze the situation, Understand the users and their needs, Prioritize the features, Design the website, Review, testing and refining. This cycle is ongoing on a long-term basis and never ends. Several months after the official launch you might find yourself in the situation that you need to start the process again. As a matter of fact, this happens in web design as well, with companies redesigning their websites/portfolios very often due to analyzing the situation again and realizing things need to be improved.

Let’s take a more in-depth look at each phase and see why each one of them is important in its own way.

1. Analyze the situation

Analyzing the situation starts with the following question: “Do I really need a mobile website now?“. It sounds silly and for most of you might not be relevant, but companies have to ask themselves this question. Not only is a mobile website going to cost several hundreds of dollars, but it requires research and, as we mentioned earlier, a lot of ongoing work. If the company does not have a design department to maintain it, a mobile website might become useless or ineffective in a few months. What you have to do is to find out if your website is accessed from many mobile platforms. You can simply do this by checking your stats in Google Analytics or any other tracker.

Do you need a mobile website?

Image Source: mobilewebsite.com.sg

It is not a bad idea to see how the competition is doing in the field. Don’t forget you are not alone in the market and these small details might make the difference at some point in time.

When you created a desktop website, you had some clear ideas in mind: you wanted to raise awareness, to increase the sales and get your company beyond the borders of your town, region or country. Think about whether the mobile website would do good for you and your company. Otherwise why bother to design one if you don’t get anything in return?

If you don’t see any reason for creating a separate mobile site, then just optimize your site for mobile devices (e.g. images size) or install a plugin if you run WordPress. Banks and online shops need a mobile website, there is no doubt about this, but I doubt you need a mobile website if you own a clothing manufacturing company. Big companies like IKEA, Burger King or Mercedes do not have mobile websites, because they consider there’s no need for one right now. So think twice about it, if these huge companies do not have a mobile website (and it’s not because they have money issues), would one bring you some advantages?

Now if you still think you want to go through with this, then let’s go to the second phase and get closer to the user and how should we please him.

2. Understand the users and their needs

The whole web design process is user-centered, because the user is the one whom we create a website for. Mobile web design is the same. To achieve the best results you have to understand the needs of your users. This is one of the difficult parts, because everything starts from here. If you get this wrong, the whole solution will fail. The research can be concluded through observation (how the user interacts with your page, what are the main things he is interested in), interviews (quizzes) and focus groups (form of research in which the interviewed is represented by a group).

Understand user's needs

Image source: BBC UK

Some of the main questions you need an answer to are:

  • Why do they (want to) access your webpage from a mobile phone?
  • What features are they mainly using?
  • What is important for them when browsing on the go?
  • What is it they do not like when browsing from mobile?
  • What devices, browsers or applications they use to access the web from a mobile device?

After having the answer to these questions, what you still have to do is to research the market. Now you have a good understanding of your users, but you need to know how to design in order to maintain your solution within the popular trends. Opera’s State of the Mobile Web, comScore, Forrester, eMarketer and others are good places to do your research.

3. Prioritize the features

After you conclude the research, you’ll probably have found out what features your users are accessing the most. This and the other answers gave you an insight of what is it you have to feature in your mobile solution. The reason why you can’t just insert all the features from launch is because you might not be able to handle maintaining all of them. Don’t forget, it all requires effort, money and time. Try not to build everything from the beginning and stick to the most important features, then if everything works well there’s always more place on the web for the rest of your ideas.

Prioritize features

Image Source: paperthin.com

While we have this figured it out, let’s move to the most interesting part.

4. Design the website

This next phase can be considered a short guide to mobile web design. When you design a site for the desktop, you use some basic rules you’ve learned when you first arrived in this business. Well, it is exactly the same with the mobile websites, only there are some other rules. There are lots of mobile design considerations you need to think of and we take a look at the most important right now.

One of the most important differences is the context the user is accessing a website from. When he uses the desktop version, a user most probably sits in his own chair at home, with maybe a cup of coffee, listening to music and chatting at the same time. This is comfort. When a user browses from a mobile phone, the context is different. He is probably on a bus or train, maybe even at work in a meeting or on their lunch break, probably trying to multitask while viewing your site on a small device that has a narrow screen with a small font. Now that’s a big difference.

After using different considerations, we can come up with three main reasons why people browse with smartphones: microtasking (Twitter, Facebook, LinkedIn), boredom (playing games, listening to radio) and activities related to the social, offline life (finding shops or restaurants nearby, checking reviews). Besides these, the basic things that need to be taken into consideration are the following:

Design for smaller screen

Remember that the mobile web design is designed on a big screen. It is definitely not easy to make everything perfect when working like this. There are so many screen sizes out there for computers, but there are even more for mobile phones. Almost every smartphone manufacturer has its own preferred screen sizes or resolutions. Even the iPhone 4, one of the smartphones with a big screen, is tiny in comparison with a default setting of 1024 x 768 for a desktop screen. Moreover, some phones are able to change orientation and the website has to change accordingly. No computer screen changes orientation, so this is actually something new for developers.

Image Source: techwench.com

The best solution is to opt for flexible layouts that will adapt for smaller and larger screens. The easiest way of doing this is having a wrapper with sizes given in percents, not in pixels. Furthermore, every little detail in the HTML has to be given in percentages and not in pixels to make sure the layout is flexible. This way the website will look the same on screens of 150px width or 200px width. Also, depending on the mobile platform, there are different groups of users sorted by the browser they have. It can be Safari, Opera Mini, Nokia WebKit (only for Europe), Android WebKit or BlackBerry WebKit. All these browsers have their own problems and do not support different kind of languages, although all of them support CSS 2 and soon CSS 3 as well.

Simplify the navigation

There is no mouse on phones, therefore the developers have to focus on the navigation a bit more. Upon the small screen, users also rely on touch, trackballs and keypads to click and navigate, so the experience is very different compared to the one on a PC. Information and main features are usually presented on several lines (as you will be able to see at the end of this article), because most of the mobile screens have a larger height than width, therefore it is also more vertical space to work with. The most important features usually come first, because the user might have to scroll down to see the last ones. The numbers of categories, links and levels of navigation have to be reduced as much as possible.

Although not many websites do this, providing key shortcuts (0-9) to access different links might be very useful as well. CNN did this a while ago, although we do not know how well it worked out. Because people have to navigate by touching most of the time, make sure the height and width of the buttons are proper. If you have three buttons in row with a width and height of 15px it might be difficult to tap the one in the middle. Do not use pixels, but percentages! There is a big difference between a button with a width of 30px on a 250px wide screen and one with the same width on a 150px wide screen.

Your mobile website needs to make an immediate impact, therefore try to make the links as visible as possible (see CBS News’ website). Always offer a link to the full-sized webpage, because if a user is on a wireless connection he should be able to visit the main website if he wants. I usually use the footer for this link. Because navigation isn’t as deep and difficult, there is no need for breadcrumbs to use space.

CBS News Mobile Website
CBS News Mobile Website

Prioritize information

Because there is not much space, you have to be concise and only type in the important information. The reason behind you linking to the master webpage is for users who are interested in finding more information about you and your company. There is no reason for you to fill paragraphs with useless information, because the mobile webpage is for presentation only. You don’t sell from there and the main reason behind it is to bring in more clients. You gave them a “teaser”, a chance for finding more (the full-sized webpage), now it is their move.

Minimize user input

Because the user is not in front of his keyboard, it is also a good idea to help him a bit. Keep the URL as everybody else does (mobile.site.com or m.site.com). If the user requires registration, narrow the fields as much as possible. Instead of asking for city and state, ask for the ZIP and there you go, one field less to type in! Also, make use of the geolocation if you can feature it. Use smart features, such as remembering the latest data input. Applications related to transport usually remember the last stations the users typed in. It is a bit different with the websites, but try it. Moreover, offer the possibility to stay signed in.

Keep the usage low

Even if today we have 3G speeds and wireless connections, users in some countries still pay for each bit of data they use. Therefore don’t insert too many images (or at least not high-quality ones), keep the page small, cut unnecessary code, comments and optional tags.

Furthermore, you can use a script to detect if users visit your homepage from a mobile device. If this is the case, simply redirect them to the mobile website. Flash, JavaScript, cookies, HTML5, frames and pop-ups do not work on mobile phones yet, so do not rely on them. You will probably need to make your users scroll, but only do it one way. Most websites scroll vertically, do not make the users scroll in both ways.

5. Review, testing and refining

After you are done with these four phases, you still have a small step until the official launch: you need to test your solution. This does not take too much time, but it is another important step, because releasing a product with bugs might make you lose clients or visitors, in our case. Double check the code (it would be a good idea to do it by W3C’s standards) and try to use your mobile website on a smartphone, because mobile phone emulators are good, but not entirely precise. Ask your friends to offer you their smartphones for short 10 minutes tests and make sure everything is in place. Otherwise go back to phase 4 and refine the website until it works perfectly.

Improvements

As discussed earlier, this is an ongoing cycle, so you will have to make improvements all the time. They can be updates, new features or a whole, from scratch, redesign, but always try to offer something new to the users. Try to track your mobile website visitors and observe their behavior. If they spend way too much time on your site, it is probably because it is too heavy and it loads slow. If they spend next to no time, it is because you can’t catch their attention immediately. Track your users and determine your website’s strong and weak points and refine them.

Conclusion and examples

There are so many things to talk about on this topic, but we will stop here. I think we’ve covered enough for one day and, as all the basic information has been given out, I am sure now you know more about how to approach the design process of a mobile website. Here you can see a showcase of several mobile websites designed very intelligently and featured the way they should be.

1. Yellow Pages

Yellow Pages

2. Walmart

Walmart

3. Vimeo

Vimeo

4. Trip Advisor

Trip Advisor

5. Flickr

Flickr

6. Digg

Digg

7. DeviantART

DeviantART

8. CW TV

CW TV

9. Amazon

Amazon

Further sources on this topic

Tips to design iPhone apps and webpages

Mobile webdesign trends of year 2009 (this may be a bit old, but many elements still apply today)

Tips and best practices for mobile webdesign

Is there something else you would like to add? Do you have other opinions about this process or is it maybe something you do not agree with?

69 Written ArticlesWebsite

Christian Vasile is an enthuziastic Romanian web designer currently living in Denmark. He is passionate for the industry and writes about design, usability, coding and freelancing and is a regular publisher here at 1WD. You can follow him on Twitter at @christianvasile or visit his web portfolio by clicking on the link above.

4 Comments
  • Maicon Sobczak

    Saturday, September 17th, 2011 15:20

    1

    Very good study case. A lot of website will need to be redesigned to fit the small screens. Even today many developers don’t adjust the new layouts.

    0
  • Michael Francis

    Monday, September 19th, 2011 03:53

    2

    Great informative article!

    0
  • Daquan Wright

    Wednesday, September 21st, 2011 01:48

    3

    Very good. So mobile sites should be teasers and we should keep user input/scrolling to a minimum. Sounds good to me.
    I wonder, can we just use our regular URL if we do a responsive design?

    or should mobile site be used regardless of whether we do responsive design/a separate mobile site?

    0
  • David

    Sunday, October 16th, 2011 11:48

    4

    Great article. It has really helped me with my first mobile development I have also found jquery mobile a good framework which takes care of alot of the design aspects.

    0
  • David

    Sunday, October 16th, 2011 11:48

    4

    Great article. It has really helped me with my first mobile development I have also found jquery mobile a good framework which takes care of alot of the design aspects.

    0
  • Daquan Wright

    Wednesday, September 21st, 2011 01:48

    3

    Very good. So mobile sites should be teasers and we should keep user input/scrolling to a minimum. Sounds good to me.
    I wonder, can we just use our regular URL if we do a responsive design?

    or should mobile site be used regardless of whether we do responsive design/a separate mobile site?

    0
  • Michael Francis

    Monday, September 19th, 2011 03:53

    2

    Great informative article!

    0
  • Maicon Sobczak

    Saturday, September 17th, 2011 15:20

    1

    Very good study case. A lot of website will need to be redesigned to fit the small screens. Even today many developers don’t adjust the new layouts.

    0

Comments are closed.

54.204.249.184 - unknown - unknown - US