A 5-Step Checklist for Mobile Website Design

Posted in Tips, Web Design3 years ago • Written by 8 Comments

As the number of people browsing the web from mobile devices increases, the demand for websites that respond to those devices surges. And still there are websites that aren’t equipped with the tools necessary to respond to those changes, whether it be lack of information or just not having the time or money to upgrade. The process of optimizing your website for a mobile device isn’t actually as hard as it seems, but knowing the steps in creating an effective mobile website can be the difference between success and failure. In this article I will walk you through five fundamental checkpoints to keep in mind in the creation of your mobile website. Feel free to leave comments if you feel I’ve missed important steps, or wish to touch upon any of them.

Choose the Right Markup

In short, markup will make the content readable by mobile browsers. In the creation of your mobile website, it’s important to choose one markup language and stick to it. Explore your customer’s needs in choosing the right one that best fits their demands. How do you go about choosing the right language for your user? Here are the basic languages below, along with their key benefits/limitations.

WML

  • WML (wireless markup language) is one language used to make sites mobile-ready.
  • Sites providing email service, sports scores, and a calendar service are the one’s that can benefit the most from having WML
  • WML is used by legacy systems or sites targeting users with low-end phones such as the Nokia.
  • If your customer uses a basic, affordable phone such as the Nokia, WML is the best markup language for you.

XHTML

  • XHTML is the computer language designed specifically for mobile phones.
  • Most phone-browsers  support this language, and has become the predominate language of the web.
  • XHTML-MP is a modularization of XHTML, and is basically indistinguishable from it.
  • If you’re designing for an advanced device such as the iPhone, XHTML is preferred over XHTML-MP.

In deciding between the two, access your site’s analytics to see which devices your visitors are using.

Knowing Your Device

Aside from markup languages, mobile phones differ greatly in rendering capabilities across browsers. Just as with IE6, Safari, and Firefox have extreme differences, mobile phones are a whole different device you have to account for. And since there’s so many shapes and sizes on the market, it makes the task even more cumbersome.

  • Common screen sizes are 128 x 160, 320 x 480, 176 x 220, 240 x 320
  • Although many people have their website adjust automatically for hand-held devices, others create a mobile website from scratch. Web services such as Mobify make this possible.
  • This is usually the best method, as you can create a customized site geared specifically towards mobile users, while allowing traditional web visitors to access your full site.
  • To avoid user frustration, include links in your website’s footer to the mobile version of your site, and vice-versa. This way visitors know both are available, easing the stress of the unknown.

Scaling Down Your Website

A common tactic for those designing for the mobile web is to simply scale down their existing site to fit the parameters of a mobile device. This practice is counterproductive, as the mobile user is visiting your site to access specific information as quickly as possible. Also remember that many mobile devices use touch-screen technology so designing your UI around it is worthwhile. In determining what to include on your mobile website, consider the following:

  • Remove any copy that is not important for the mobile visitor
  • Reduce the amount of navigation items to only those your mobile visitor needs to access on the go.
  • Increase the size of your text to a readable level, links are recommended to be 32 pixels to account for the human fingertip.
  • Design UI elements large. Mobile users tab and drag so you must accommodate to their fingertips.
  • Optimize blog posts using pagination to make skimming and reading more natural.
  • Remove unnecessary animations or images as they will load down the loading time of the website.
  • When applicable, Media Queries can be used to scale an image properly across all browsing devices.

Usability

Enhance your mobile websites usability by including only pertinent information that a mobile user needs while on the go. You have to keep in mind that browsing a website through a mobile device presents its own challenges. And while phones such as the iPhone and Android have made great strides in enhancing the web usability for its customers, not all phones make the task easy. Here are some tips to keep in mind regarding usability for mobile websites:

  • Older phones aren’t able to scroll left and right, leaving the user unable to browse a full website.
  • If your website requires a lot of tabbing and clicking, navigating it on a mobile phone becomes a challenge.
  • In creating your mobile website, focus on the primary features that mobile users are likely looking for. Such features could be contact information and store locators.
  • As mentioned previously, links should be around 32 pixels to account for the human fingertip. Contact forms should also fit the viewport.
  • Test your Website. Your layout may look great in one device, but slightly different in another. Online emulators allow you to see what your site will look like on different devices.

Adding Your Mobile Website

There are few different ways for adding a mobile version of your site to your domain. For instance you can create a subdomain from your primary domain that houses your mobile site. For instance, mobile.yoursite.com and yoursite.mobi. In any case many viewers still reach the primary domain when typing in your url. In this case you can:

  • Route traffic to your site depending on the viewer’s browsing agent. If they visit yoursitename.com, they can automatically be redirected to mobile.yoursite.com, for instance.

Conclusion

In this article I’ve discussed key checkpoints to keep in mind in the creation of your mobile website. As the web expands, so does the devices and technology used to access it. Gone are the days where we had to worry about how our site renders in Internet Explorer. These new advances in technology presents more opportunities to appreciate and gain the most from the web. It’s our job to make this as easy as possible for those who wish to get on board.

14 Written Articles

8 Comments Best Comments First
  • Ben

    Saturday, August 27th, 2011 13:37

    1

    Very handy technique… helped me a lot recently. Good idea to post it ;)

    0
  • Tony Marshall

    Saturday, August 27th, 2011 15:20

    3

    Hi Stephanie,

    Nice article – mobile website design is such a hot topic at the moment.

    0
  • Sheryll

    Saturday, August 27th, 2011 20:17

    2

    Great article! I do have to comment on the scaling down of website part though. I use my iPhone to browse websites a lot and when I access facebook or mailchimp I always have to revert to the full version of the website because there are functions that are not accessible with the mobile version which is frustrating at times. Researching and understanding users needs are very important when deciding which functions to keep on mobile versions.

    0
  • Ahmed Bolica

    Sunday, August 28th, 2011 13:09

    4

    i will try :)

    0
  • Jorge Amaya

    Tuesday, August 30th, 2011 23:03

    5

    Excellent overview of mobile web design, I’m just starting with this and I sure found your article very useful.
    Thanks for posting.

    0
  • Kattie

    Wednesday, December 21st, 2011 13:52

    8

    Thanks for sharing your great tips and advice on mobile web design, some really interesting stuff. It’s irritating using your mobile device to check out someones website… to find you have to keep zooming in and out. It simply doesn’t work! We love creating mobile websites for our clients alongside their web design. Usability is key and very important! You don’t want to put people off as soon as they click on your mobile site, you want to wow them!

    0
  • Chris

    Friday, November 11th, 2011 21:53

    7

    Great points! You need to know what you want and more importantly know your audience. Here is a tool that allows you to create a free mobile site with a QR code attached and you can see how it looks on a mobile phone with an awesome emulator.

    0
  • Gavin

    Wednesday, August 31st, 2011 15:35

    6

    Thanks for the post guys. I’ve been looking into mob web design for a little while now and have always wondered what the do’s and don’ts of the coding is. Removing tabs from the menu and content is one thing I was unsure of cause surely this is taking away from the users experience? Of course if your website is super long on a normal browser, you would have to look at shortening it, but anything else, surely it restricts the users experience?

    0
  • Kattie

    Wednesday, December 21st, 2011 13:52

    8

    Thanks for sharing your great tips and advice on mobile web design, some really interesting stuff. It’s irritating using your mobile device to check out someones website… to find you have to keep zooming in and out. It simply doesn’t work! We love creating mobile websites for our clients alongside their web design. Usability is key and very important! You don’t want to put people off as soon as they click on your mobile site, you want to wow them!

    0
  • Chris

    Friday, November 11th, 2011 21:53

    7

    Great points! You need to know what you want and more importantly know your audience. Here is a tool that allows you to create a free mobile site with a QR code attached and you can see how it looks on a mobile phone with an awesome emulator.

    0
  • Gavin

    Wednesday, August 31st, 2011 15:35

    6

    Thanks for the post guys. I’ve been looking into mob web design for a little while now and have always wondered what the do’s and don’ts of the coding is. Removing tabs from the menu and content is one thing I was unsure of cause surely this is taking away from the users experience? Of course if your website is super long on a normal browser, you would have to look at shortening it, but anything else, surely it restricts the users experience?

    0
  • Jorge Amaya

    Tuesday, August 30th, 2011 23:03

    5

    Excellent overview of mobile web design, I’m just starting with this and I sure found your article very useful.
    Thanks for posting.

    0
  • Ahmed Bolica

    Sunday, August 28th, 2011 13:09

    4

    i will try :)

    0
  • Tony Marshall

    Saturday, August 27th, 2011 15:20

    3

    Hi Stephanie,

    Nice article – mobile website design is such a hot topic at the moment.

    0
  • Sheryll

    Saturday, August 27th, 2011 20:17

    2

    Great article! I do have to comment on the scaling down of website part though. I use my iPhone to browse websites a lot and when I access facebook or mailchimp I always have to revert to the full version of the website because there are functions that are not accessible with the mobile version which is frustrating at times. Researching and understanding users needs are very important when deciding which functions to keep on mobile versions.

    0
  • Ben

    Saturday, August 27th, 2011 13:37

    1

    Very handy technique… helped me a lot recently. Good idea to post it ;)

    0

Comments are closed.

54.89.10.19 - unknown - unknown - US