In Tips Nov 20, 200913

How To: Designing A Mobile Website

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

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.

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

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

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

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

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:

• W3C Validator: Mobile Specific
• Ready.mobi site: Specific Mobile Checks

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.