Tip

Optimizing your mobile website for all devices

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

    Requires Free Membership to View

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

There are Comments. Add yours.

 
TIP: Want to include a code block in your comment? Use <pre> or <code> tags around the desired text. Ex: <code>insert code</code>

REGISTER or login:

Forgot Password?
By submitting you agree to receive email from TechTarget and its partners. If you reside outside of the United States, you consent to having your personal data transferred to and processed in the United States. Privacy
Sort by: OldestNewest

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:

Disclaimer: Our Tips Exchange is a forum for you to share technical advice and expertise with your peers and to learn from other enterprise IT professionals. TechTarget provides the infrastructure to facilitate this sharing of information. However, we cannot guarantee the accuracy or validity of the material submitted. You agree that your use of the Ask The Expert services and your reliance on any questions, answers, information or other materials received through this Web site is at your own risk.