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.


7 comments:

  1. Generally Are generally Diet ‘s an very affordable and flexible food regimen product suitable for induced the boycott . endeavouring to fast and as a result subsequently conserve a vibrant lifespan. lose weight apple tablet mockup

    ReplyDelete
  2. I haven’t checked in here for some time because I thought it was getting boring, but the last few posts are really good quality so I guess I’ll add you back to my daily bloglist. You deserve it my friend. insurance guides ipad template

    ReplyDelete
  3. Hello… DropshipDragon provides dropping for quality, affordable products direct from China to your customers. Perfect for eBay sellers and website owners alike!… phone mockup psd

    ReplyDelete
  4. I'm not against the agree with the things you suggested. android phone template

    ReplyDelete
  5. I am glad to be one of many visitors on this outstanding web site (:, thanks for posting . iphone screenshot template

    ReplyDelete
  6. Some really superb info , Sword lily I found this. mac desktop mockup

    ReplyDelete
  7. You made some good points there. I did a search on the topic and found most people will agree with your blog. front end developer

    ReplyDelete