Shoji Mobile Framework

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.

The other huge benefit of taking this approach to mobile website design is that you now only have to manage a single website. Often sites will create a second "mobile friendly" site that they will direct people to if you are browsing with a mobile device. This leads to two major issues in mobile websites. One, the site administrators now have two sites to manage and two different versions of the same content that they have to maintain. Second, sites often don't have a second "mobile friendly" page for an equivalent page that exists on their main site. This often leads users to a "page not found" error when browsing on their mobile device. This is personally my biggest pet-peeve when it comes to mobile sites. If you're going to have a mobile site, give me everything your "real" site has.

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

Shoji introduces a single navigation menu that is pinned to the bottom of the browser. It tells you your current page and gives you a single button to open the menu.

Mobile site with open Shoji menu

When you click on the menu it opens up over the site and exposes a navigational menu that allows you to traverse the entire site. Because users are on mobile devices, their Internet connections speeds tend to be slower than on a desktop environment. So anything you can do to get a user to their destination without requiring them click through multiple pages will help the user experience tremendously. Shoji allows users to navigate the entire sitemap through the Shoji menu. Meaning a person can get from one page to any other page in the entire site from just from this menu! So very large sites with thousands of pages and multiple tiers of navigation now become manageable to someone browsing from a mobile device. That is Shoji.

To see Shoji in action, just browse to http://www.nationwidechildrens.org on your mobile device.