Optimizing for Mobile Devices

by Frieda Smason 3. February 2011 07:16

Page Size: Size and visibility must be carefully considered when launching mobile layout. Mobile devices use capacitive touchscreens which allow fingers to "click" the screen; therefore interactive elements must be large enough to accommodate the area facilitated by the average size of a finger.  Additionally, visibility consideration is key in mobile web design. Layouts are usually designed for a computer screen, where the user is a foot away and the browser allows for scaling a page up or down. Mobile browsers, on the other hand, are limited by the dimensions of the phone itself. If a block of text is "normal size" on the computer, it may appear "too small" on a mobile browser due to the increased pixel density.

File Size: Deciding when and when not to include images on a mobile website deserves careful consideration. Images are usually the largest files to be downloaded with a page, and unless a user has "unlimited data" on their mobile plan, every byte is counted. If an image is being utilized to convey stylized text (e.g., a heading with a visual effect not achievable through CSS), that image can be replaced by plain text in a mobile version, causing the user to download a few hundred KB less per page load.  Images of photographs can be embedded as "thumbnail" versions that link to the original large file, and animated GIFs can be replaced with non-animated images or removed entirely. If you don't need images to animate, PNG (8-bit palette flavor) will always result in smaller file sizes than GIF.

Download Optimization: Document order is crucial when considering the erratic download speed of mobile browsing due to the speed of the device, the signal strength of the network, and the size of the content being downloaded. Therefore, optimization of content order is vital when organizing website content. The bulk of the text should be placed above the fold so as to minimize scrolling the page, and non-content elements like navigation and advertisements should ideally be placed after the main content.

Don't just format your website as a DotMobi in an attempt to increase your page's mobile readiness! Small changes made in the hopes of optimizing your web page to better serve mobile web users can help you create a highly trafficked website, better engaging your target audience and increasing your ROI.

To learn more about web optimization you can join Tom at the next NY Technology Council event or send him an email at Tpenichter@tgpassociates.com.