StylizedWeb

Subscribe to our updates:

A Design, WordPress and Tutorials Blog.

Dedicated to helping you learn the art and science of the web.

Mobile Website Tutorial – Mobile 101

We've been saying it for years... "Mobile is going to be big." Well now it is, only a year or two later than expected. Smart phones are ubiquitous, app developers are making millions and every day more people surf the web using a mobile browser. In fact, Verizon, AT&T, and T-Mobile smartphones are now so popular and so advanced, they are replacing the every day use of computers. Unfortunately most websites have a lackluster mobile experience. Sure, mobile browsers can handle a normal website but they don't do-so particularly well.

A year ago I would have said mobile can be an afterthought, now this isn't the case. In fact, some authors stress you should design for the mobile web first. I can't say I disagree, it's a solid strategy. Mobile web design sounds easy, you're "just" designing a simplified website right? If only it were so easy.

The first consideration many overlook is the method of delivering a mobile website. The second is that the user experience of mobile interfaces are inherently different. As this is a mobile 101 post, we will first look at the approach to designing and delivering a mobile version of a site. Mobile UX will be examined in a later post.

Even before we discuss design methods, we must first clarify the difference between a mobile website and a mobile app.

Website vs Application

While seemingly basic, many still confuse mobile applications with mobile websites. The distinction is different because users interact with an app differently than they do a website. An application is a program which is downloaded onto the users phone. The program resides on the users device and can (but doesn't necessarily) connect to an online server. A mobile website isn't downloaded nor is it stored on a users device. It is accessed by visiting the site URL through a browser.

This can be confusing (especially for users) because some designers choose to style their mobile websites to look like mobile applications. There are some circumstances where this makes sense as the user is likely familiar with the interface and conventions, but often times they are just as familiar with web browsing (even in a smaller, more basic form.) Unless you are specifically trying to emulate a mobile application through a website it's best to avoid the "application style."

Mobile Application Usage

The use of mobile applications is very intentional. A user must search for the application (or a type of application), decide to download and install it and then learn how to use it. There is little chance of them "stumbling" onto it. Many mobile apps remain unfound because no one would think to try and find them. A shopping application for a local designer shoe store for example, will get very little usage for this reason.

Mobile Website Usage

Mobile websites are much more accessible. A user doesn't need to search, download or install anything. They just visit your website. Any marketing targeting your website also promotes the mobile version. It requires less effort for the user and the company/organization. The only drawback is lack of persistency. An app remains on the users device until they decide to remove it. A website is gone until the user decides to access it again.

Once you understand the distinction between application and website, you can consider your approach to mobile design.

Approaches to Mobile Website Design

There are four primary approaches to mobile website design, each with strengths and weaknesses. They are:

  1. Do nothing
  2. Modifying the existing design for mobile (using css)
  3. Designing a separate mobile site
  4. Design a responsive website
Let's examine them one by one.

Modern smart phone browsers provide an acceptable (but lack luster) mobile web experience.

1. Do Nothing

As stated earlier, modern mobile browsers are capable of handling most websites "as is." Most mobile browser allow users to zoom in for reading and out for navigating a page. While clunky, users are getting acclimated to the workflow. Doing nothing is the cheapest of all the options because you literally "do nothing." It's also the least effective method. Sure mobile browsers are greatly improved, but as a whole mobile users are less experienced than before. It won't detour all mobile users from browsing your site but it will detour some.

This site has a mobile specific stylesheet which simplifies the layout but uses the same markup.

2. Modify the Existing Design

Maintaining the original markup but tweaking the design for mobile devices is a long standing method of improving the mobile experience. Typically this is done by giving mobile browsers a different stylesheet which simplifies the layout, hides large graphics/animation and makes the navigation easier to use.

Pros:

  • Low cost to maintain and implement since you are only modifying presentation
  • Capable of producing an improved experience over the "do nothing" approach

Cons:

  • Limited in the amount of changes that can be made
  • Content is still downloaded causing speed and bandwidth issues (for the user)
  • No ability to change content based on the context of the site
  • Difficult to design for multiple mobile devices or screen resolutions

BestBuy.com has a mobile specific site with a different design and contextually relevant content.

3. Design a Separate Mobile Site

For those with flush budgets, the most desirable approach is a separate mobile specific site. The mobile site is designed, organized and populated from the ground up with focus mobile users needs. Because the site is completely independent of a companies primary website it can be completely different. Even the content can be changed (and often should). This provides the best experience for the user, when they access the primary website they are identified as a mobile user and forwarded onto the mobile specific version. They can then browse a site design specifically for their mobile needs and tasks.

Pros:

  • Completely customizable for the best mobile experience

Cons:

  • Expensive to build and maintain
  • Some users are accustom to the desktop version of the site and would prefer to browse normally
  • Difficult to design for multiple mobile devices or screen resolutions

Web Designer Wall has a responsive design which expands / collapses based on the users screen resolution.

4. Design a Responsive Website

Responsive design is the new kid on the block (and his parents bought him a BMW.) Responsive design is useful and practical hence it's rise in popularity. The concept behind it is simple, rather than having one stylesheet which (hopefully) works for all resolutions, you use different stylesheets for different resolutions. The result is a site that expands and collapses based on the size of the browser window. Responsive design allows you to maintain the best presentation regardless if the user is on a mobile phone, tablet or desktop with a large monitor.

Pros:

  • Capability to design a good visual experience for multiple resolutions
  • Less expensive than a mobile specific site

Cons:

  • More expensive to design / build than a mobile specific stylesheet
  • There is little capability to modify the content/context of the site based on mobile usage
  • Layout is constrained by source order

Summary

The first step in designing any mobile site is selecting your approach. The approach reveals design constraints and capabilities. Currently, their are four conventional methods each with strengths and weaknesses. The oldest, most customizable and expensive method is designing a mobile specific site. The lower cost long standing method is using a mobile specific stylesheet and the new (sexy) approach is to create a design which responds to different screen resolutions. If budgets are tight and mobile visitors infrequent, you can always do nothing. Modern mobile browsers offer an acceptable experience on their own.

Leave a comment on Stylized Web Have some feedback? Leave a comment

71 Comments So Far

  1. Hi,

    I represent iHubbub, a new social networking site for the home working community, including home
    businesses, freelancers and consultants (www.ihubbub.com).

    I’ve been following your blog and I wanted to let you know about iHubbub which you and your
    readers might be interested in.

    We would like to explore options of working together with you to reach your readers and mailing list
    and would be happy to do a reciprocal joint mailing campaign with you or a banner exchange. Is this
    something that could be of interest?

    Thank you so much for your time and we look forward to hearing from you.

    Sincerely,

    Lisa Ventura
    iHubbub.com

  2. Another great post! Thank you for sharing! :)

  3. Designing different site for mobile costs you more, modifying the existing site is a better approach. First option is quite funny to just do nothing; browsers will handle your site…

  4. The new items will begin with a long-term warranty and this will likely be an opportunity to install cheaper and simpler to utilize items.

  5. Nice post. I want these free tickets as well. I would love to attend this conference.
    Thanks

  6. Thank you for including the pros and cons of each option. Leaving the site as is for mobile will become a better option as time goes on and it will be interesting to see the changes to websites overall as mobile technology improves. website design CT

  7. Since everyone around is using mobile to browse web, this tutorial is going to help us build a robust platform to meet their requirements and to make our web presence more prominent.

  8. I have read so many content regarding the blogger lovers except
    this post is truly a fastidious post, keep it up.

  9. good tutorial

  10. By Son Hurst posted on July 10, 2013 at 11:36 pm

    A standard website very seldom translates well to your mobile platform. The mobile version of your website must be much simpler than much of your website-your menu structure may wish to be redone completely, and you might want to eliminate many of the graphics that this main site contains. Still, depending on the mobile device getting used, the visitor may choose to see your standard site, so give them the possibility if their smartphone can easily accommodate it. Provide a simple and readily-accessible toggle change so visitors can simply select the version they prefer.,-*^

    Most up-to-date short article from our own web blog <http://caramoanpackage.com

  11. nice post and informative tutorial. thanks a lot for sharing such ideas.

  12. really good post thank you !

  13. Ukash is a virtual card that is used quite often by many countries around the world. However for use in some countries may vary. This completely depends on the implementation of the procedures of that country Ukash card. http://www.ucuzukashal.net For example, in some countries, Ukash card can be used as a credit card number in our country consists of only the card. Therefore, Ukash is used by many countries vary in terms of usage. As used in our country, which is much more secure Ukash card is a card security, and facilitate the use of the biggest advantage.

  14. Nice post. I want these free tickets as well. I would love to attend this conference.
    Thanks

  15. For example, in some countries, Ukash card can be used as a credit card number in our country consists of only the card. Therefore, Ukash is used by many countries vary in terms of usage. As used in our country, which is much more secure Ukash card is a card security, and facilitate the use of the biggest advantage.
    http://ucuzukash.haberegel.info/

  16. Hey, thanks for the guide, :). I like your tips a lot -> basically the goal is to “keep it clean and simple” overall. This article of yours would truly take my mobile website a bit further.

  17. Thank you for this theoritical tutorial, Informative

  18. For example, in some countries, Ukash card can be used as a credit card number in our country consists of only the card. Therefore,ligtv is used by many countries vary in terms of usage.
    http://canlimacizlemek.blogspot.com/

  19. canlı bedava ligtv, canli mac izle, canli yayin mac, d-smart izle, justin tv, justin tv izle, lig tv 2, ligtv, ligtv canli, ligtv izle, mac izle, p2p, trt spor izle, freedocast, eurosport izle bedava
    http://canlimacizlelinkler.blogspot.com/

  20. Great post and very useful for me. Thanks for this post.

  21. While forcefully redirecting or changing the layout for your end-users may seem like a good idea, it can lead to frustrations, so there should be ways in which a mobile device user can view the normal site design, and vice versa.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>