Over 2 billion mobile phone users have access to the web on a global scale. About 700 million of these users have or continue to use their mobile browsers to search the web on a consistent basis. As these numbers increase, the need for crisp, clean, and usable mobile websites are in high demand.

Website owners with a large audience have already seen the benefits of having a mobile platform service their users. Just as many advancements in web development have become the standard, in the near future it’s predicted mobile websites will be at the forefront, and will also become more of a necessity rather than a commodity or luxury.

In order to design a simple, effective, and attractive mobile website, there are a few ingredients that we need to add into the mix. This article should satisfy all of your basic needs for a mobile platform on your site.

Mobile Markup

mobile-01

When designing your mobile site, there are a few different types of markup languages available for you to use. The most widely used markup throughout the infancy of mobile devices was WML or Wireless Markup Language. This was because the only way to surf the web through a wireless device was to browse WAP (Wireless Application Protocol) sites. These where sites that used WML as their only source of markup language.

Since the web is an ever-evolving organism, it is only logical that such an advancement would only be superseded by a new solution. This is where XHTML steps into the picture. A majority of the phones made today fully support XHTML. A mobile phone recognizes two aspects of HTML; XHTML and XHTML-MP. XHTMLP-MP stands for “Mobile Profile”. The difference between the two lies in the ability for you to use fewer elements that give way to tighter restrictions. This makes it easier for a mobile device to parse and render a web document when using XHTML-MP.

Minimalist Designs

A huge misconception a great deal of web developers make when designing for the mobile web is thinking that they can cram all of the usual sites content and overall design effectively into the screen of a mobile user’s device. Simply said, there are features on your site that just won’t work on a mobile platform. Once you take this into account, then you will be able to respectively design a much more usable site for mobile users.

You have to learn to make good use of simple features and minimalist standards. A good example would be Best Buy’s mobile version of their site. The only two functions found on their site is to search for a product or find a store. This mobile site can’t even be compared to the original site, however it gets that job done.

mobile-02

You’re looking to design a mobile site that satisfies the basic needs of your visitors, rather than one made for comfort.

Knowing Your Target Audience

mobile-03

When you’re designing a website, you have in mind the likely users. And being able to design for your specific audience will make all the difference in the success of your site. Developing a mobile site shouldn’t be any different. As the designer you need to take into account the type of visitor that is more likely to be attracted to the content on your site. Apart from that, you will need to know what sort of functions they would like your site to shelf out.

Try not to force visitors to have to log-in or have to click items several times before reaching any vital content. This can easily discourage a visitor and turn them away from your site. This is simply because data entry on a mobile device is much more difficult then on a desktop or laptop. Overall, you need to take all aspects of your design into consideration.

Mobile Usability

mobile-04

By now, you’ve probably figured out that designing for mobile is hard. And although many times difficult, not impossible. More recent then anything a manufacturer that produces the average mobile device seldom worries about usability when it comes to the web. They leave it up to the consumer and their search dominant devices. In times when WAP was mainly used for mobile browsing you could reach different applications and sites a bit quicker. This was of course due to a mobile devices restriction to using the web for whatever the manufacturer chose, in example, games, downloading apps, weather services, and more.

In today’s market we find mobile phones that are capable of virtually scaling through every “inch” of the web. This means that it will more than likely take a you a longer time to reach your destination if your always have to type in where you need to go. This is excluding mobile phones heavily reliant on apps, such as the iPhone or Blackberries.

With this being said, simplicity is the best way to go when considering your mobile sites level of usability. Here you will find a great article on mobile usability.

Choosing a Good Domain Name

mobile-05.1

One of the most important steps is choosing a good URL for the mobile version of your site. Several options include creating a sub-folder (mobile) in the root of your site allowing you to publish your site using the following URL: “http://www.yoursite.com/mobile”. You can also use a completely separate domain altogether such as “www.domain-mobile.com” or a .mobi domain: “www.yoursite.mobi”.

Whichever way you choose, when identifying your mobile sites domain, you should note that users are likely to mistake your domain name with others and this should motivate you to use a few different names as mentioned above to be sure.

Validating Your Code

mobile-06

Whether you choose to code your mobile site in XHTML or XHTML-MP you must check, validate, and revise your markup, over and over again. Most of the time you can use a normal desktop browser in order to check your markup, that’s if you’re mostly developing in XHTML. Here are a few links and tools that will help you validate your code:

Please note that after your code has been validated and everything seems to be fine, then you will need to access your mobile site through several different phones in order to properly test your actual site. This will allow you to experience your mobile sites strengths and vulnerabilities first hand

  • http://www.designfollow.com/ designfollow

    very useful

    thank you

  • http://blogsolute.com Blogsolute

    Nice tips but I still prefer mobify because labour work is reduced as it captures CSS and stylings of our website on the go.

  • Pingback: How To: Designing A Mobile Website | Lively Design Tuts

  • http://www.webhostdesignpost.com/webdesign/greatwebdesignexamples.html Cody

    Interesting, I have never tried to created a mobile website. But this article makes me think.

  • http://www.mplswebguy.com/website-design.php Minneapolis Web Guy

    Great tips, but I have a suggestion for the domain name – use a subdomain instead. For example: http://m.yourdomain.com. This way it’s faster for anyone to type, plus if anyone searches google for your domain, this subdomain should appear with your normal .Com. That way, you’ll push competition down the page of search results.

  • http://www.atakinteractive.com/ Website Design

    Fabulous post! I agree with you on most of the points. The points that you’ve brought up and discussed about are great and presentably put forward. Good job!

  • http://nokiaphones.ws/ Administrator

    does your comment pass the test? If you can answer positively to each of the above questions, chances are you have a good comment.

  • jon spooner

    wow this is very very helpful in trying to dip a toe in the mobile pool with current web site code. Does anyone know of a good method for detecting whether a user is on a computer or a mobile device? I know with css you can specify but it looks like the code of the page should be different as well so I was hoping there was a good mobile sniffer script or something like that out there.

    thanks

  • Pingback: dot Blog. The week in links 23/11/09

  • http://blog.mobi Vance Hedderel, Director of PR & Communications, dotMobi

    In regards to mobile site naming, keep in mind that not only is .mobi the only standard approved by ICANN, it is the only one that will give your mobile site a zone file entry. The zone file is the document where search engines start their indexing, so your site will be found more quickly and likely rank higher when using a .mobi domain (there’s a reason that both Microsoft and Google are supporters of dotMobi.)

    There’s a slew of other reasons why .mobi should be the primary naming choice for a mobile Web site; you can read more about that at http://mtld.mobi/resource/top-5-reasons-why-you-need-a-mobi-name.

  • http://www.iphonessuck.com Kimble

    Most importantly do not design just for the iphone. As noted at the beginning of the article there are 2 billion handsets in the world and only 1% or so are iphones.

  • http://tripleodeon.com James Pearce

    To Jon Spooner. The ins and outs of a fairly comprehensive approach to identifying mobile users, their intent, and routing to the right site:

    http://mobiforge.com/designing/story/a-very-modern-mobile-switching-algorithm-part-i

    The code I use to do mobile detection for WordPress is:

    http://plugins.svn.wordpress.org/wordpress-mobile-pack/tags/1.1.3/plugins/wpmp_switcher/lite_detection.php

  • http://www.websmithsolution.com S S Gandhi

    I agree with Minneapolis Web Guy m.yoursite.com is great way. Is there a website to test / see how website will look on different / popular models of mobile phone

  • Pingback: website design – Latest website design news – How To: Designing A Mobile Website | Design Reviver

  • http://www.popmemories.org James Addams

    Good article. I am planning an upcoming mobi site & will probably use both domain approaches – have the main content at .mobi but also use & promote a m.domain.com because it’s easy to remember.

  • http://www.web2mobi.com/lp/all/fdbk Web2mobi

    Great point about minimalist design. Because there didn’t seem to be any good tools around to build mobile pages without clutter, we built our own at web2mobi mobile websites. Let us know what you think

  • http://www.webdesignkc.co.uk/ Adrian Grossett

    Great information – its was only yesterday I read another article describing how many of the big companies – now provide a mobile website – it is vital for any serious business in my opinion. And with Jquery displaying Flash like elements on mobile phones there no limits! Bookmarking this page for sure thanks for sharing.

  • http://www.jamesmehorter.com James

    To S S Gandhi: Yea, if you have dreamweaver / photoshop installed you may also have Adobe Device Central. Great little app to test how sites will look on a ton of different handsets.

  • http://www.youtube.com/watch?v=_65NTdjQukg James-MobileWebsiteDesign

    Great post!Thanks for sharing!

  • AntonB

    This article is a How To… without any of the actual How.

    For example: You did a great job telling me about XHTMLP-MP and why I might need it, but completely failed to tell me how to use it or at the very least point me to an article or tutorial that actually tells me how.

    A for effort. Useless article.

  • http://www.marianhurducas.ro Marian

    Very well structured your article. hope to be helpful for me cause else ill use this (new service i guess) http://www.convertwebsite.com . after i did some research, i can say this site is more promising that others and whats more important to me is that it lets me costomize my mobile view version of the website that i own. :)

  • Pingback: Risorse, tutorial, tool, framework e Wordpress per Mobile | Flashmotus