Mobilizing Web Sites Strategies for Mobile Web Implementation by Kristofer Layon Peachpit Press, 2011 Mobile devices like smartphones and tablets are likely to surpass PCs as the most common sources of web access in the near future. Anyone with a web site, consequently, has to consider the impact this will have on visitor traffic, user experience, accessibility and e-commerce.

This book describes design and coding techniques for making web sites initially created for desktop PCs accessible and user-friendly on small screen devices. It includes lessons and case studies on mobilizing layout, navigation, images, text and forms.

Writing and Editing Content Best practices for web writing tend to work for mobile writing, with a few exceptions. "Avoid referencing the screen layout or format," Kristofer Layon advises. (For example: Look at the image on the right.) "Because the design of a screen will vary depending on whether a user views it from a computer or a mobile device. You cannot write as if you know  the user's display."

The writing process is also different.

"Creating content for your main website and a mobile version without losing your mind means you have to plan writing and editing for both... such as writing alternative versions of descriptions and gathering alternative versions of photos."

Mobile HTML

"As we begin, a small caveat: it's not possible to do this without any rewriting of your HTML. You have two small changes to make to the top of your HTML pages and, because these are in the head of the page, they should be one-time changes in your site's page template.

"Tip: Uh, you did template your site when you built it right? If you didn't, a find-and-replace across all of your site's pages will accomplish the same thing.

"The first tiny change involves exerting some additional control on your user's browsers by instructing these browsers to make the width of the viewport (that is, the area within the frame or "chrome" of a browser window that displays content) the same as the width of the devise screen and to make this a 1:1 relationship for the units and measures that are specified in a new mobile CSS file."

Prepare Your Site for Mobile Visitors

.