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.