Kukuicup Responsive UI - Part I

For the past few months I've been working on developing a mobile layout for the Kukuicup, an energy conservation project at the University of Hawaii at Manoa.  The mobile version of the site sported a series of list-like menus (similar to the Yelp application), but user comments at the end of the competition said the mobile site was too different from the desktop site, and therefore confusing. 

Enter Responsive UI (RUI). 

Essentially, RUIs are webpages that re-arrange (or replace) content based on screen size.  The canonical example our group has been throwing around is the BostonGlobe's website (try re-sizing your browser window from wide to skinny).  The goal of creating a RUI is to have one dynamic webpage for any screen size, and hopefully giving users a sense of continuity and uniformity.

You're probably thinking to yourself "this sounds like black-magic".  Well, you're right.  But you don't have to deal with it (much).  There are a slew of prepackaged frameworks out there designed to do just such sorcery.  There seem to be two schools of thought on RUI frameworks - grids and magic hot-swappable CSS.  Grids are pretty much what they sound like, predefined grids that either scale or have a few fixed layouts.  With grids, content gets pinned to a row/column, and flows around as the screen re-sizes.  With CSS magic, media queries are used and load various CSS files based on screen size.  Essentially you build several CSS files and the media query figures out the screen size and points to the right file (in real time).   These methods are completely integrable, but frameworks usually swing one way or the other.

I've chosen Skeleton.js for this project, and so far it's working pretty well.  Skeleton favors the grid-system, rocking class tags for up to sixteen columns.  Skeleton also features a nice in-line labeling system:

<div id="a" class="two columns alpha">A</div> 
<div id="b" class="four columns omega">B</div>

The above divs will try to render on the same line if possible, with A preceding B. When space becomes limited, B will pop under A.  This is a nice feature that I didn't see in most other frameworks, and was a motivating factor in my decision.

I've been toying around with it, and find simply relying on the framework to do ALL the re-arranging isn't going to cut it.  So I've integrated some media queries to make things run more smoothly.  Media queries are part of HTML5 and part of the CSS3 standard.  They work in both HTML and CSS files, although each has its own syntax.  For example, in HTML:

<link rel="stylesheet" type="text/css" href="a.css" media="screen and (min-width:975px)">

 The above code loads the file a.css if the screen size is at least 975px.  However, placement is still important, as CSS files loaded farther down in code have priority.

In CSS, a media query looks like this:

 @media only screen and (max-width: 924px) and (min-width: 438px){
    #className {
        //new CSS definition
   }
}

This snippet will provide an alternate CSS definition for className IF the screen size is between 924 and 483 pixels.
Again, placement within the code matters as later definitions take priority.

Hopefully Skeleton, paired with media queries, will be enough to produce an elegant webpage. 
Details as they unfold.