Does anyone have a good resource for mobile CSS templates that work on most phones/devices?

Question

More and more mobile devices are consuming content on my eCommerce sites. IPhones, Blackberries, PSPs, Windows Mobile, etc and I need some ideas how to handle repurposing my data using CSS templates for these devices. Any ideas would be great.

Solution 1

I recommend you look at what Delta Airlines does with CSS at http://mobile.delta.com. They get help from a company called MShift who does a bunch of mobile banking (which, obviously, has to work on many different devices).

You can get some inspiration from the stylesheet used by the Delta site with https://my.mshift.com/deltacss.css.

Finally, there are a long list of demo mobile sites from MShift at http://www.mshift.com/demo.html.

FWIW, I don't have any association with either Delta or MShift, I have just admired their mobile UI.

Solution 2

I've got a PSP, it has a browser that's based on WebKit (also Google Chrome and Safari use WebKit engine), so pretty any site that works fine on Safari/Chrome will work fine on PSP. However, PSP has a 480×272 resolution so if you want to target PSP platform, you have to keep this small resolution in mind.

You will probably find these resources interesting:

1. IEMobile Blog - http://www.microsoft.com/windowsmobile/en-us/downloads/microsoft/internet-explorer-mobile.mspx
2. Web design for the Sony PSP - http://www.brothercake.com/site/resources/reference/psp/
3. Web-development for iPhone - http://www.evotech.net/blog/2007/07/web-development-for-the-iphone/

So generally if you want to target mobile devices, you will have to make sure your eCommerce website works fine in small resolutions, it doesn't use activeX (since it won't work on iPhone Safari, Opera Mini and PSP browser) etc. Just keep it simple :)

Solution 3

WURFL is the best open resource for handling device-specific browser properties, including CSS.