Optimizing your mobile website for all devices

When your Web application goes mobile, your users may see some strange results if you’re not careful. In this tip, consultant Judith Myerson discusses four strategies that will help you make sure your Web application is optimized for use on mobile devices. Text, images, video and connection status are all areas that should be examined when creating applications that will be running on mobile devices. This tip will give you some optimization techniques for a better user experience.

Mobility testing is needed for all devices of different sizes to ensure mobile websites are what the users expect to see on any device. A website on a laptop may not work on a mobile website due to memory and space constraints of any mobile devices. A large picture suitable for a laptop will be distorted or not show up on a mobile device. A video that works well on a laptop may not work on a mobile device. Slow connections can be discouraging....

Below are four tips on how to make sure your application is optimized for use on a mobile device.

Keep text simple

Keep your mobile website simple. Design it on your laptop based on user feedback, upload it to a remote server and then connect your device to the server to see what the website looks like on the device. If you are not satisfied, follow these steps.

Step 1. Always type in text from the left. If the line extends the width of your mobile screen, your device will automatically wrap it to the next line. Do not use tables as each mobile operating system has a different way of rending a table.

Step 2. Make a link to carry forward to another page. Create a dropdown list of a few items and a list of radio buttons that a user could choose. Many devices have only the back button, no forward button like on the laptop browser.

Step 3. Create a short style sheet. Link your pages to one style sheet. Keep styles and formatting simple, so the device can process the style sheet in short time. You can combine redundant styles and discard what you don't need.

Keep font size smaller for the body text than you would on the mobile pages, e.g., Arial, Helvetica, sans-serif 10 pt.

To find out how fast your device is processing the style sheet, connect to the website on your mobile device. If the response is slower than usual, go over your style sheet and find the problem.

Optimize images

Optimize images on your laptop when you insert them into the text before you upload website to a remote server. Follow these steps:

Step 1. Keep image small. A large image on your laptop will either be distorted or not show up on the device. The image you make on the laptop will be smaller on a device.

An image with the size of 1 1/2 in by 1 in on your laptop may be shown as the same image with the size of 3/4 in by 1/2 in on your device with a small screen of say 2 in by 1 1/2 in. The larger the mobile screen, the larger the image is.

Step 2. Format image. JPEG is the preferred format because of the reasonable file size. PNG is supported by most mobile browsers. It is not limited to 256 colors like GIF and doesn't lose quality through repeated savings like JPEG.

Step 3. Compress the image. To reduce the size, compress it using a utility -- standalone or part of the software utility.

Step 4. Position the image. Position the image to the left and at the top of screen below the header. You need space for your body text.

Optimize videos

Most devices support video with 3gp as the standard format. Follow these steps for optimizing videos.

Step 1. Verify video dimensions. When you create a video on your laptop, make sure it is the right size that can be viewed at a smaller scale on the device. To find out the dimensions of the mobile video, just email it to yourself.

When you get the email on your laptop, click the attachment and choose a player (e.g., Windows Media Player) to run the video. If the video presented on the device has the dimensions of 1 1/8 in by 7/8 in, the player on your laptop will zoom the dimensions to 4 1/4 in by 4 in.

Step 2. Limit video size. Due to memory and storage limitation on the device, keep the size small -- around 2M. If the size is slightly larger than the memory to run the video and the storage to store it, edit the video to cut out the frames you don't want. 

Check connection status

For many devices, it takes four steps to make the connection. They are negotiation, requesting, processing style sheet and loading.

You should see the connection status at bottom of your device. Negotiation is almost instantaneous when a wireless connection is fully available, so you would not even notice that negotiation has taken place.

If processing style sheet and loading it takes some time, go back to the style sheet to find out what the problem is. The processing and loading time should be short.

Conclusion

Designing websites for all devices requires planning ahead to resolve the issues of mobility optimization. A team of developers, users and business analysts need to work together in keeping the text small, and optimizing images and videos, and checking connection status. The team will find resolving the issues will make their job of optimizing for all mobility devices much easier.

This was first published in January 2011

Dig deeper on Mobile Application Testing Techniques and Tools

Pro+

Features

Enjoy the benefits of Pro+ membership, learn more and join.

0 comments

Oldest 

Forgot Password?

No problem! Submit your e-mail address below. We'll send you an email containing your password.

Your password has been sent to:

-ADS BY GOOGLE

SearchSOA

TheServerSide

SearchCloudApplications

SearchAWS

SearchBusinessAnalytics

SearchFinancialApplications

SearchHealthIT

Close