Mobile sites are a totally different beast than websites meant to be viewed on a personal computer. An ideal mobile site is lean in content and file size. Stripped of superfluous information, ads and text, it’s designed for small screens, quick access to key information and minimum page loads. The design techniques for mobile-optimized sites often require a completely different layout than your typical website.

If you want to have a website that is truly optimized for web browsing on both personal computers AND mobile devices, you need multiple versions of your site. Just the idea of maintaining multiple versions of a website may be a non-starter for many companies. But wait! Did you know you can update multiple versions of your site at the same time?
Content is Water, Templates are Vases
A Content Management System (CMS) is key to easily managing multiple versions of your site. To understand how this works, let’s look at your site content – the text, images, pdfs, etc. – as being separate from the template it is wrapped in. This is the essential principle behind any CMS (check out my article on how a CMS works). Web pages consist of a template with a header, footer, and sidebars that surround the content. For example:

Think of your content as water that will fill the shape and size of the template you pour it into…

You can make your mobile template a completely different shape, size and layout from your original site, but, if built correctly, the exact same content that is populating your original site will “pour” in and fill your mobile site perfectly. When you make a change to your content in the CMS, that edit will “pour” simultaneously to both your website and your mobile site. In other words, you make a change in one place, your CMS, and it updates both sites.
Of course, like a small vase, your mobile site cannot handle as much content as your larger site. You will need to carefully select what content is available through your mobile site. Once that decision has been made, the template for your mobile site can be designed and built to only request certain kinds of information from your Content Management System. For example, perhaps your mobile site will only show upcoming events, contact information and an about page and will not show newsletter archives, board minutes or other less visited content.
Example: Fandango
Let’s look at one of the progressive, early adopters of mobile technology, Fandango, and how they “pour” their content into their regular website and a completely different mobile version of their site.
Here is a screenshot showing the content you’ll find on their regular Website under “In Theatres”/“Opening This Week”:

Here is the same content on the iPhone App:

You can see instantly that the App runs from the same central Fandango CMS as the website but the iPhone App uses templates that pull limited types of content and format that content in a way that is most easily browsable for mobile users. Notice how much more information about each film is given to the iPhone user upfront? This reduces the need for them to load multiple pages to gain that information. You can also see how the Fandango App has limited ads.
Can I Do That?
As Fandango shows, the same content can be “poured” into very different templates to give the user the impression they are having a completely customized experience. This idea can be applied to any website, (even yours!) If your site runs off of a CMS, like Astek’s Webany, then you can pour your existing content into a mobile template. All you have to do is choose the content you want to feature and build a few additional templates!
What are you waiting for? Create your mobile site today!