Optimizing your mobile website for all devices

by Judith M. Myerson

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.

By submitting my Email address I confirm that I have read and accepted the Terms of Use and Declaration of Consent.

By submitting your personal information, you agree that TechTarget and its partners may contact you regarding relevant content, products and special offers.

You also agree that your personal information may be transferred and processed in the United States, and that you have read and agree to the Terms of Use and the Privacy Policy.

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.

0 comments

Register

Login

Forgot your password?

Your password has been sent to:

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