Make a site i* capable

By Michael Baxter on 4 February 2012 with tags Bespoke programming

« Back to blog CMS Site E-commerce Design into CMS Utopia Upgrade Bespoke programming Innovation Security Hosting and domain names SEO and marketing Other Web news

If you were a good developer through the past year, perhaps Santa brought you a shiny new iPhone, iPad or Android device. If he did, you’ve certainly spent hours playing with it – browsing, downloading apps, microblogging, and all in all having lots of fun. Now, being the web developer that you are, you’re probably wondering where to find “View Source,” and how you can create sites and apps that look and work great on mobile devices. Here are some tips and tricks to start you off:

Documentation and Technology

Apple has a great website with some documentation on CSS recommendations. Flash is also being discontinued by Adobe so don’t rely on it for navigation.

Layout

You will need to use CSS and DIVs to properly control this. Start by having your main content in a single DIV and use client-side coding to use a different stylesheet for mobile devices. This can be based on the device type and screen resolution it is capable of.

Design

Sometimes a new interface is needed to cater to big fingers and small screens. You may also have to look at all the navigation over the site. More thumb size icons and previous and next buttons will help.

Content

Use a CMS so you can deliver the main content without duplication. Your clients can then update the content once and not have to worry about a mobile friendly version.

With these simple techniques your websites will be seen and operate on more mobile devices. However, sometimes the term “there’s an APP for that” does apply. Or perhaps there’s a greater opportunity to make a mobile site with special design, like [link http://m.twitter.com] Mobile Twitter, rather than just i* friendly links.