4 Web Design Considerations When Converting Your Site to a Mobile Version

Design is an essential element of any website. In today’s competitive environment, where most people can offer similar things, design can become a big differentiator. People love beautiful pages and they may have better confidence in the product and service if the site is well designed. How many consumers buy an iPhone or an iPad just for its interface design? Lots of them! Many competing smartphones and tablets offer similar or better features, but they buy Apple products solely due to attractive physical and user interface design. Web design has progressed significantly. Web 2.0 sites have fresher colors, CSS designs, large types, rounded corners and gradients. This web design style has worked well and some desktop applications even borrow some elements of Web 2.0 for their interface.

Often site owners are not sure what to do. They have seen how mobile Opera browser can fold and scale website neatly or love the way iPhone’s Safari scales a website down. Users can now tap, drag and pinch on the browser; but one question still remains, do you need a mobile version for your site?

Mobiles are getting more powerful and data speed is faster. Although surveys show that smartphone sales are skyrocketing, they do not consider the fact that many millions users, especially low-income people in third world countries, are still using $100 or less feature phones. The browsers used are usually outdated and limited in features. So try to keep things very simple and just focusing on getting all the tasks done.

With the more pervasive use of smartphone, it’s increasingly important to create a mobile version of your site. These are a few web design considerations when converting a site into a mobile version.

Mobile Screen Sizes:

Unfortunately, mobile phones screen resolutions are not uniform. A while ago, 176×208 was the norm, but today 240×320 is more common. Apple’s iPhone 4’s is 640x 960, while the Motorola Xoom’s is 800×1280. So it seems, mobile devices are now touching the desktop resolution. Although the resolution is growing steadily, these devices still have smaller absolute screen size. While the pixels are getting dense, you may still need to deal with 3” to 5” screens. Mobile devices are meant to be used at the hand’s distance and very small website elements may not be usable. Mobile devices are usually taller than they are wide, although many models can use both landscape and portrait orientations equally well. So if your site is quite wide than it may not be rendered well on some mobile devices, especially on lower-end models. 240 pixels is a safe width for today’s standard, but you need to check it on popular mobile devices and make some adjustments if necessary.

Optimizing Web Navigation on Mobile Site:

Perhaps, only high-end tablets that can support standard websites well. But given there are no keyboard and mouse; and the smaller screen on most mobile devices, you should make sure that the layout allows a smooth flow. A website header usually has branding graphics and navigation links. Many feature phones still use arrow keys for the navigation, which means unlike on iOS or Android devices, you need to keep clicking until you reach the desired link. It would be unwise to ask users to skip through 20 links to reach the main body of the webpage. A good mobile webpage should be able to flow well vertically with separate blocks for each page element.

A header link may not be needed on touch smartphone, but it is still important for users of feature phone, especially if the page is long and contains many links. It means shortcut links to reach certain webpage elements may be needed. You should simulate the clicking sequence a user needs to go through to reach certain webpage elements. One good solution is to place textual navigation links near the header link. You should prioritize frequently accessed web elements such as main body and comment box. Even the main content may need to be well organized into easy-to-understand sections.

Using CSS on Mobile Site:

Many web developers use tables extensively for layout on mobile websites. Tables are well-supported by many mobile browsers, but on some devices they won’t work well. CSS is still the preferred method for designing mobile webpage. You can effectively control the mobile site layout using WCSS and it can be used to control the flow of page elements and blocks. If your standard site uses CSS, then migrating to WCSS won’t be a big problem.

Your standard site can be rendered perfectly on mobile browsers that support CSS. However, you may need to hide certain elements of webpage so they can fit well on the mobile device. There is one thing you should you should consider when using CSS on mobile devices, some browsers render the webpage in two passes. First, they download the content and then apply the style sheet. It means users need to pay more on bandwidth charges and wait longer for the page to render completely. It is more likely to happen if you use an eternal style sheet. So, you may see the original HTML format displayed very briefly on the screen before the style sheet is downloaded and applied.

Many mobile browsers today render CSS well, but on some feature phones the font sizes, margin and other elements may not be consistent. Overall, you can use CSS safely to simplify your web design.

Colors, Images, Page Sizes, and Others:

16M colors are now common on mobile devices. Most of them support universal image formats such as JPG and GOF. As processors are getting more powerful and RAM amount is getting larger, it may be safe to retain most if not all web elements from your standard version site. However, you shouldn’t expect that all mobile users have 1.2 GHz Snapdragon CPU or 512 MB of RAM in their devices. Many users around the world are still using low-end feature phones with limited hardware specifications. It’s best to keep the page size less than 100 kB. Some users may also disable images to minimize bandwidth costs, so it is inadvisable to use images as an integral part of your mobile site navigation, which means alternative texts are a must.

Different mobile device may use different default fonts and many mobile devices won’t support your non-generic fonts. Hence, it is important to stick with popular ones.

You should also consider the navigation and input methods used by users. Will they use arrow keys or fingertips with multi-touch capability. It’s important to understand your visitor more and design your site accordingly. You should be aware that mobile sites aren’t purely about design, mobile users want usability and functionality; and you should give them just that! Remove all unnecessary XHTML codes, CSS and images. Keep your design lean.