Adapting Traditional Content for Mobile

Mobile SEO: Adapting Traditional Content for Mobile Display and Conversion

In most cases, when you endeavor to create a mobile website, you are planning on adapting content from your traditional website. This adaption of content can be done to varying degrees, but the minimum goal of your mobile site should be to provide a usable experience for ‘conversion.’ ‘Conversion’ is the end business reason for having a website in the first place – Whatever the goal of the site is, either to drive sales, downloads, signups or awareness, the conversion should be possible on a mobile handset without frustration. If there are other mobile offerings that you need to promote from your site, like mobile application downloads or SMS alert sign-ups, your mobile site should do that too.

One of the best ways to eliminate frustration and improve the potential for conversion from your mobile site is to prevent left-to-right scrolling. There are hundreds of different possible mobile screen sizes and resolutions, and many of the mobile browsers now display sites in both landscape and portrait mode, adding to the complexity. There are really too many options to accurately plan for, so the best option is to build your mobile content with relative positioning and percents in the code, rather than absolute positioning and sizing. This will allow it to re-size and re-arrange itself as necessary to fit any number of phone screen sizes.

(Great image from: http://sender11.typepad.com/photos/img3/
screensizesgrsmall.png)

You can use relative positioning and percents in external CSS for all aspects of your site, including the columns, images, and fonts. A word of caution though, because so many websites are build in a three-column design; multiple columns rarely will fit across a mobile screen. You should generally plan on using your ‘handheld’ stylesheet to have the columns stack when they are displayed on a mobile phone. This will automatically make the site easier to read, and easier to use, and will prevent the site from displaying zoomed out at full width, in a way that is impossible to read (postage stamp size). Just be sure that you understand how stacking the columns will impact the site experience. Pay special attention to which columns hold the functionality on the site, like the log-on and the site search. These many be in the far right column, so you might be tempted to stack on the bottom, but it is better for your users if they are kept towards the top of the page.

(Thanks to http://www.developria.com/2010/08/detecting-screen-orientation-i.html for the image. Check out the article to learn how to detect landscape and portrait orientation.)

Load-time is quite important for mobile SEO and mobile usability. Remember that if you are scaling things using percents, the entire file must load before it is re-sized. Rather than using percents to scale down the larger images used on your traditional site, use CSS image replacement to send images that have a smaller file size and footprint. Starting with a smaller file size will allow you to fine-tune it later if necessary without putting such a strain on the load time of the page.