As of 2012, there are now more smartphone sales than there are traditional PC sales (desktops and laptops). This trend looks set to continue, meaning in the next few years, mobile devices will be the primary platform for the consumption of content, media, and social interaction. The two most dominant platforms in this new mobile market are Android and iPhone devices.

In order to support these types of devices, the core optimizations to a web page involve fixing the zoom to something logical, and then rearranging and resizing page components to ensure quality layout on mobile. The first item, fixing the zoom level, is achieved by adding a single meta tag to the web page.  The latter optimizations can be much more complicated, but are sometimes handled automatically by templating systems.

The first decision to make when making a mobile optimization of a website is to decide how to trigger or detect mobile websites. One of the most effective ways to do this is to perform server side user agent detection.  You can also perform user agent detection client-side. I find this to be less reliable because you end up mixing a lot of presentation information in with logic when you have to deliver the page, and then rearrange or modify it after rendering has begun.  The final way to trigger mobile optimization is with media selectors, detecting screen sizes. This technique allows users of traditional web browsers to see the benefits of mobile optimization.

For MortalPowers, I went with performing server-side detection of moibile devices. I identified Android and iPhone specifically to provide mobile optimized website. For the mobile-optimized site, I disabled the navigation bar, swapped out the advertisements in desktop size for advertisements in mobile size. Fortunately the way the site is laid out, all of the pages rap the same HTML template. I was able to tie mobile detection into the branch of the code that reads and leverages the template, and use an alternative template.  This template includes alternative standard items, including the HTML5 mobile meta tag for view control.  Finally, it includes a mobile customized css in addition to the stanard css. This allows me to hide page components, and to resize things like image that can break the fixed size metaphore.

Lastly, its important to give your users the option to opt out of a mobile optimized site. You can do this by providing a link to disable mobile, but make sure you don't lose the page the user was looking at, and make sure you keep the user on the full site, rather than forwarding them back to the mobile site with each page load.