I've created a mobile website framework based on responsive display technologies called, Shoji. The premise of responsive displays is that the site will dynamically adjust the flow of the site based on the browser dimensions and not based on the browser's user agent. So instead of trying to customize the site for every possible device and screen resolution, you simply provide general rules based on the screen real estate. For example, instead of making custom CSS for an iPhone 3g phone, you simply create CSS that is sized for screens that are less than 320px. This will then cover every smartphone browser with a screen resolution less than 320px.
Well that's all well and good but how is Shoji a framework? All I've really talked about so far can be accomplished by just using a little CSS. What is Shoji actually doing? To explain that I'll need to go back to our mobile device with its small screen and the issues this causes. The obvious difference between desktop and mobile browsers is the smaller amount of real estate on a mobile device. The most logical thing to do is to reflow the content into a single vertical column that can then be scrolled on a mobile device. This works great for the user since this is a natural behavior on a smartphone. But let's say you have a really large site with multiple levels of navigation. Do you put all the links at the top and push down your content? Or do you put all your links at the bottom and force a user to scroll all the way to the bottom to find any type of navigation? Or perhaps you pin some important links on the page thus reducing real estate on an already small form factor. I think it would be easy to argue that none of these solutions is optimal. And that is where Shoji comes in.
|Mobile site with closed Shoji menu|
|Mobile site with open Shoji menu|
To see Shoji in action, just browse to http://www.nationwidechildrens.org on your mobile device.