The main cord that was struck, most directly in Luke Wroblewski’s Mobile First! talk, but echoed by most every speaker in Boston, is to design from the mobile version of your site first. This theme occurs in the Mobile Web course as well.

For exercises in the Mobile Web course we have to consider mark up that is mobile friendly. Consider, if you will, a simple data table. In a desktop browser, a table is easy enough to render. See, a simple data table.

However, on a mobile device with its much narrower screen, a table simply won’t fit. Instead, the data may be better presented in an alternate form, such as a definition list. (Please note, this is but one example and does not mean that all tables can be equated to a definition list.)

Call me Marie, but I want to have my cake and eat it to.

Enter the Media Query

So what is a media query? There are lots of resources out there. Let me sum it up: media queries allow you to specify CSS rules base not on a device, but on a set of circumstances.

The following block of code applies to any device that claims to be a screen. It will simply make level 1 headers blue:

@media screen {
  h1 {color: blue;}
}

Let’s through a query into the mix:

@media screen and (max-width: 500px)  {
  h1 {color: red;}
}

Now the style applies to any device that claims to be a screen and has a width of 500px or less. There are several other properties that can be queried, but this works for our demo.

Let’s put a query into play on this simple demo page. You should see a green masthead across the top of the page and two gray boxes sitting next to each other. Now narrow your browser.

When your browser gets to 500px wide you should see the green masthead change to gray and the gray boxes become blue and stack on top of each other. The code is quite simple:

@media all and (max-width: 500px)  {
	#header {background: #ddd;} /* little color change */
	.column {
		float: none; /* linearize */
		width: 95%; /* reset width */
		background: #6374AB;
		color: #FFF;
		}
}

The Trouble with Tables

Let’s take the same page and add our simple table to it. Looks fine so far, right? Now narrow your browser.

Once again at the threshold of 500px you should see the boxes stack and the colors change. But this time there is a horizontal scroll because the table needs to be wide enough for it’s content.

The problem: we came at this from the desktop first. What if we reversed that and thought about the small screen first, then adapted it for the desktop?

Ce n’est pas une table

For our little demo, it isn’t too difficult to re-imaging that tabular data as a definition list (or series of list in this case), which should work nicely on most any mobile device. The code looks something like this:

<dl>
	<dt>Ekström</dt>
	<dd><span class="label">Points: </span>44</dd>
	<dd><span class="race">Race 1: </span>10</dd>
	<dd><span class="race">Race 2: </span>2</dd>
	<dd><span class="race">Race 3: </span>-</dd>
</dl>

So we’ve got our cake. Now to eat it too.

Definition lists are just fine in a desktop browser, but I really want this to be more table-like.

You’ll notice that there are already some class attributes. We just need to add a little more markup to create what will become the table headers:

<div class="head">
  <div class="row">
	<div class="dataHead"><abbr title="position">Pos.</abbr></div>
	<div class="dataHead">Driver</div>
	<div class="dataHead"><abbr title="points">Pt.</abbr></div>
	<div class="dataHead">Hockenheim</div>
	<div class="dataHead">Oscherslebe</div>
	<div class="dataHead">EuroSpeedway</div>
  </div>
</div>

and style with display: table and related properties. For example:

dl, .row {display: table-row;}
.dataHead, dd, dt {display: table-cell;}

(View the complete CSS)

We now have markup that is mobile friendly styled in a desktop friendly way. All that is left is to undo those desktop styles for small screen display using our media query. Mostly this involves display: block to counteract the table display properties.

The end result: a desktop and mobile friendly web page. Once again, with a device wider than 500px you should see green color and a basic table. Narrow your browser to less than 500px … presto! our definition list re-emerges.

I’ve used a similar media query on this site. Narrow your browser and it should revert to one column.

Caveat

No, this is not a perfect solution. It is a solution. If you look at the full code you will see some markup that may be questionable (the first dd in the lists). I merely present this to get us all thinking about they way we think about and markup data.

Your mileage may vary; use at your own risk; objects in mirror may be close than they appear; etc.

I decided to take it one step beyond and utilize CSS 3’s transform properties, resulting in my own Fisheye demo.

I cut out much of Gabriele’s code that handled the zooming and replaced it with Folgers Crystals transition and transform. (Although I kept pretty much everything else she built, including her icons. Thank you Gabriele for the inspiration.)

Specifically, on the navigation anchors we have transition: all .1s ease-in-out. In a nutshell, this says, “All transitions should take .1 seconds to complete and they should do it smoothly.” We also have transform-origin: 50% 0 which moves the center of action to the center top of the anchor box.

It isn’t until we get to the hover/active/focus states that things happen. Here we have transform: scale(1.5), which you’ve no doubt already concluded causes the element to grow by a factor of 1.5. An important thing to note about this, the transform is applied to the anchor element and therefore affect everything inside that anchor, be it a background image, text or foreground image.

Of course it isn’t quite that simple. Because this part of CSS 3 is under development, we need to utilize various vender prefixes. So to see it actually work you’ll need to add -moz-, -webkit- and -o- to the front of all the transform properties. Not surprising there is not support for Internet Explorer, but that’s OK, it doesn’t matter. Anyone using IE won’t know what they are missing. Go see for yourself.

And look for the Easter Egg… .

For example, a simple search for “Tilley hats” yields two Flickr photos on page 1 in Yahoo and more on every subsequent results page. Missing from the results (at least the first 5 pages) are any images from Picasa Web Albums.

The same search on Google doesn’t yeild a Flickr photo until page 3. The surprising thing is that the first Flickr photo is only two spots behind the first Picasa photo.

(Perhaps the most surprising result of all is the photo in the second row on the first page of Yahoo!s results.)

(Search results are based on a search conducted May 7, 2008.)

I’ve grabbed accounts though partly to claim my online ID, party to see what all the fuss is about. In fact, I set up a Twitter account just so I can SMS to My Mile Marker.

Here’s were I’m located:

• LinkedIn
• Facebook
• Twitter
• Flickr
• LibraryThing

I’ll probably try to set something up in the sidebar. I’d really like to integrate everything together. Facebook, for example, lists the other networks; I’ve got a LibraryThing plug in on this site already, and I’ll probably do the same with Twitter.

And now Askimet has just proven its mettle — it has stopped 5,000 6,000 comment spam this week. For the record, since I installed the latest version of WordPress several months ago I have had a total of only about 5,000 spam comments. It just doubled in a couple of days.

Way to go Askimet!

* Sources:

• Optimal width for 1024px resolution?
• 800 x 600, should I really care?
• Varying layout according to broswer width

I’ve been using a collegues lecture notes to get me going and this week marks the first time I’ve started to not lecture from them, but rather to use them as talking points. I’ve got a lot of progress to make, but at least it started.

As for the old job, surprisingly I don’t miss it like I thought I would. Maybe I’ve just been too busy to notice, or maybe it’s because I have dinner every week with one of my former collegues (who’s stories remind me why I didn’t mind leaving).

So, here’s to looking up and out finally, and to hopefully posting more often. I’ve got some discussion ideas in my head and I am going to try to write them out here. I need to talk about semantics and I’ve got some ideas about every day design I’ve been meaning to write up.

After 9 1/2 years at Gale, it was somewhat difficult to take the leap; but, on the other hand, it was also time for a change. And the opportunity at WCC was too good to pass up.

I am joining the Internet Professionals department and will be teaching XHTML, CSS and all the standards goodness that goes along with it. (Which means I really need to get this site in shape.) I’m really looking forward to getting back in the classroom and helping spread the standards movement to a new generation of coders.

If only I could spare a few hours. Damn work always getting in the way.