Designing for mobile devices is prickly.  Just think of all the devices that fall under that category: BlackBerry, iPhone, Android, Windows Mobile (suddenly), iPad (maybe?!).  It becomes a real hassle to make sure your pages render properly (or at least legibly) in all of these environments.  My goal was to make a dead simple mobile friendly display.

Motivation

I'm sure there are plenty of design platforms/frameworks that can accomplish this stuff automatically.  I tried once to develop using Sencha Touch but for what I needed it turned out to be overkill. Like bazooka versus fly type of overkill.  Take for example my good old standby (and forever used example) of Ezproxy.  I wanted to make a mobile appropriate login page, so if our technologically advanced users try to connect to a resource they wouldn't see an out of focus login page.  Here is a series with the before and afters:

Original login page - Nice and simple but geographically spacious

Original login page on Android emulator.  Notice the gross out of focus everything.

Login page on emulator with modified CSS. <Goldiocks>It is just Right</Goldilocks>

UserAgent Detection

Researching how to do this led me to JavaScript and UserAgent Detection.  Basically every web browser identifies itself ('I'm Firefox on a Ubuntu Machine' or 'I'm Explorer 8 on  Windows 7 box' ) when it asks for a website (well mostly anyway) and you can grab that string and check for values in it.  Many web services make use of useragent detection to stop/allow users to get at content.  You can modify your UserAgent as well if you want to appear as something else when browsing. In all there is lots of fun JavaScript DOM manipulation you can do by checking UserAgents.  Here's a bit of HTML from my login page:

• Line 6 - You include the js file with the function (more details in a minute)
• Line 7 - Invoke the function that does the check. You pass the UserAgent of the device currently loading the page, the CSS file for the mobile interface, and finally the CSS file for the standard interface.
• Line 8 - In case the user doesn't have Javascript enabled it will automatically draw in the generic CSS file 

Redesigning with multiple displays but one CSS

The real skill comes in with designing your page and how it works with the CSS.  Basically you want the html to be generic enough that it has no styling information in it, just content, and some div tags.  Originally I made use of tables to fudge the formating (horrible. design choice. I know.) but I stripped it all out to just leave the basics. There isn't all that much on an EZproxy login page (all you need is one form really) so the rest is all decoration.

The code

This is the contents of the JavaScript file that was included in the HTML.

• Line 3 - Does a few grep style search to see if the UserAgent detected has the word iPhone or Android in it (dead simple) 
• Line 5 - To get that nice pinch to zoom multi touch stuff you need to define a view port.
• Line 9, 15, 24 - This is the fun DOM manipulation.  You add a meta tag to the calling document with the viewport and the css items as appropriate
• You could easily extend this to cover other types of UserAgents

Final shots

Mobile is just going to be a bigger part of our business as time goes on.  What makes it extra fun is that the market is supremely fractured. Just think how a few years ago it was designing for Internet Explorer and then doing it the standards way.  Now it's Webkit, Blackberry mobile.. who knows what else.  Let's hope HTML5 saves us all.