TJamesWhite.com

Attending An Event Apart Boston and going through the W3C’s Mobile Web Best Practices course has me looking more closely at how I mark up data.

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.