Mobile Website Design Principles: Part 2 – Cross-Platform Browsing

With web browsing on mobile devices on the rise, many web developers are creating mobile versions of their sites. Creating a mobile website can be difficult, especially since there are many platforms available on phones. By taking the following information into consideration, creating a mobile website shouldn’t be such a difficult task.

Let’s start with your markup language. A few different types are available for those building a mobile website. WML, or Wireless Markup Language, has been around since the early days of mobile web devices. It is an XML markup language. While it is available on every phone with web capabilities, it has been superseded by XHTML. XHTML is available in the standard XHTML rendered by desktop browsers, and XHTML-MP, the MP standing for Mobile Profile. The only difference between the two is that XHTML-MP has a few less elements and tighter restrictions to make it easier for a mobile device to render the website.

The next thing to keep in mind is the many screen resolutions available in the mobile world. The most common ones are 128 x 160 pixels, 176 x 220 pixels, 240 x 320 pixels and 320 x 480 pixels. By keeping these dimensions in mind, you will be able to optimize some of your content. However, it’s best to keep your site as minimal as possible, especially since there’s no mouse on a mobile phone and they are only able to move up and down a page. While there are a few exceptions in the market, such as the iPhone and the Nokia Internet Tablet, but these phones should be able to browse your regular page easily.

The goal for any web site should be to know your customers in order to deliver to them the best available content. This goal is even more important with mobile sites since you need to target the use of your site. Regular web users are most likely sitting at a desk facing a large monitor that has a high resolution. Visitors who are browsing your mobile site, however, view it through a tiny screen that’s usually less than 1/4 of your desktop’s resolution.

The final step in mobile website design is to test your design. While desktop browsers can be forgiving with code, mobile browsers don’t have the processing power available to automatically fix errors. This can possibly render your website completely useless. Luckily, there are some tools to help in this process. This W3C validator is designed specifically for mobile websites. The next step is to test the site on a mobile platform. While there are emulators available to see your website’s general layout as it would be on a mobile device, these tools won’t be 100% accurate. They can help in the design process, though. The only sure-fire way to test your site is to view it on a mobile phone. Try to test it on phones with different resolutions to ensure that it’s working correctly.

Mobile website design, while similar to standard design, can be difficult if you don’t have the proper tools available. There are many services available that can do it for you, thankfully. Even if you’ve designed your website without the help of others, mobile website design may be difficult.