One side affect of everyone having phones and tablets is that now most websites have to react accordingly. Failure to account for this leads to many of the poor user experiences that each of us have encountered when you end up scrolling back and forth or up and down just to follow the content due to highly constrained or over-stylized layouts.

The first step is not fixing the viewing size of the web site and allowing for the screen to be scrunched down to the smallest possible side. Easy test, make you browser window the size of a typical phone and see how well your site does, it is obviously easier for some sites that others, but be realistic this is the first and most often last time a mobile user will come to your site if it looks like a pile of crap.

Next would be to make it usable at this size, problem is your font sizes are likely fixed to px, the hardcoded enums, or em units. Take a look at a helpful article Viewport Sized Typography by Chris Coyier. The important take away is the new units that have been introduced by CSS3 to account for this, this was possible before but done via Javascript magic.

I’m trying them out here on this site with some amount of success, but this is still hit or miss on how this is supported. Here I am just setting a default size in pixels and a variable width size attribute. I started with something like this:

div#content p, li
{
  font-size: 18px;
  font-size: 3.0vw;
}

But ultimately the text just keeps getting too small when I scale the size of my browser window down, and although there is a vmwax and vmin attribute are not useful since it can not be controlled independently by width and height, which would seem to make sense, but only as which ever is smaller. If you are not confused yet, check the (draft spec)[http://www.w3.org/TR/css3-values/#viewport-relative-lengths] for this excerpt:

vmin unit
    Equal to the smaller of ‘vw’ or ‘vh’. 
vmax unit
    Equal to the larger of ‘vw’ or ‘vh’.

For me this really means the vmin and vmax attributes are a lot less useful for textual content, as the Chris Mills noted in the Opera Dev blog. A preferrable option to actually use these for text would be they sound until they get them working more like the more desirable vwmin and vhmin. Then I found that this is where @media queries kick in

body
{
  font-size: 16px;;
}
div#content h2
{
   font-size: 4vw; 
}
div#content p, li
{
  font-size: 2vw;
}

/* Fall backs for small screens */
@media screen and (max-width: 800px){
  div#content h2
  {
    font-size: 1rem 
  }
  div#content p, li
  {
    font-size: 1rem;
  }
}

And automagically it starts working as expected, that is where this is actually supported. So it is just a matter of using a CSS framework that can do this automatically for you, or making sure you have a scaling version and a fall-back version. For now it has a nice feel epecially for mostly textual formatted blogs and articles like this blog. So I will keep playing with it and see how I can make this work for me. The next cool thing will be to look at img scaling that will work in conjuntion with the form factor.

Reference:

• Mozilla Viewport Basics
• Chris Coyier - Viewport Sized Typography
• Trent Walton - Fit to Scale
• Chris Mills - CSS Viewport Units: vw, vh, vmin and vmax