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… .

But the best way to beat an IE bug is to avoid it. A number of bugs have no behaviors that trigger them. For example, on a project I’m working on I encountered the Doubled Float-Margin Bug. Instead of trying to counter IE’s quirky behavior, I simply rewrote the code to avoid the bug. The trigger is when an element is floated and there is a margin going the same direction as the float. The simple solution for my problem — remove the margin. Or, more precisely, I could place the same amount of padding on the container element and remove the margin from the contained element.

Presto! One bug avoid. Zero hacks involved.

During the past year I’ve become interested in using web standards and semantic markup. The idea is to separate content from presentation. For example, I have followed a variety of holy wars over the use of <i> (italics) and <em> (emphasis) elements. Italics are presentations, emphasis describes the content. The <i> element has been depreciated in favor of <em>, but that leaves a few things hanging. For instance, how should I code a book or movie title?

I follow the convention that book titles should be italicized, eg. The Stars My Destination. But if <i> has been depreciated, that leaves <em>, which isn’t the correct choice — I’m not emphasizing the title, I just want to note that it is a book title.

So far I’ve just been talking about a visual distinction. But, as I mentioned at the beginning, I should be separating content from presentation — as well as adding meaning to that content. So, how is a machine to distinguish a book title from the rest of the content? Presumably the <cite> element, which is vaguely defined as "[c]ontains a citation or a reference to other sources." While I’m not convinced that a passing reference to a book constitutes a citation, it is better than using <em> or hacking up a meaningless <span>.

The next problem is that, by default, <cite> renders it’s content in italics. I prefer following MLA style, which calls for books, movies, plays, etc. to be italicize (or underlined), while articles, short stories, poems, etc. are quoted: The Stars My Destination (a novel), Fences (a play), Close Encounters of the Third Kind (a movie), "The Tyger" (a poem), "Bastille Day" (a song), etc. Clearly a basic <cite> element won’t work for all of these variations.

Additionally, at work I have to use AP style for marking up works. AP has a number of quirks, beginning with no italics. Additionally, books, movies, plays, poems, etc. are capitalized and quoted; reference works are not quoted, nor receive any other distinguishing marks.

So, with different types of works and different style guidelines, the <cite> element as-is simply won’t suffice. We’ll need to add some classes in order to distinguish types of work. This will give us hooks for styling — <cite class="book"> can be italicized or underlined, <cite class="poem"> would be render normal and even have quotes automatically added around it (at least in CSS 2 compliant browsers). Of course, if you need to follow AP or other style, changing just a couple of properties in the style sheet will take care of that. In the end, we’ve managed to visually style elements to our desire and added a bit of meaning.

Enter Microformats

With the advent of microformats, I now see a way to add more meaning to the classes I would have used simply for styling purposes. We can add meaningful values the <cite> (or other) element that indexers and others can make use of, all without adding, changing or otherwise hacking existing (X)HTML.

Dougal Campbell brought up the idea of a microformat for music tracks and other media on the microformats mailing list. I gather that there are others interested in this as well.

His idea goes far beyond what I was thinking (he mentions track name, running time, etc., ala ID3 tags) and that’s a good thing. Mention has been made of coming up with a format that would capture ISBN, author, editor, pages, etc. for books, magazines, et al. I’d like to see this microformat get created, as long as it is done in a modular format.

In other words, Amazon.com could use the full format for marking up books, but in a blog entry, I can use just a minimum of mark up to distinguish that I’m referring to a book; i.e. <cite class="scific novel">The Stars My Destination</cite>.

I’d also like to keep it element independent. In other words, I may implement this using the <cite> element, but if you feel strongly about using <em> or definition lists, you can do that. In fact, a definition list is probably a good way for Amazon.com to mark up titles (a block of title-related information) versus a passing reference (an inline mention).

I think that this is an exciting proposition and am interested to hear from others. What are your thoughts?

Thinking back to Eric Meyer’s article “Really Undoing html.css,” where he talks about modifing the core CSS file for Firefox, I surmised that it would be possible to target one of the IDs found on a web site and modify it’s behavior. I was right. (Of course, you don’t need to modify the html.css file, since the Web Developer Toolbar also lets you load user defined style sheets.)

Take, for example, a site you frequently visit that has a banner across the top. In order to get directly to the content of the page, it’s possible to write a quick rule, such as .banner {display: none;}, and presto, a cleaner page.

Corporate has provided templates and a code base which is old fashion tables in tables in tables with tons of spacer .gifs. I threw all of that out and started with just their dimensions and color palatte and recreated the site from scratch. My efforts have paid off.

We meet via a phone conference last week with the corporate web keepers and they were impressed with my work. At first they couldn’t believe that my pages didn’t use any of their images, since the look is nearly identical. They were further impressed with the numbers: their page – 32 kb, mine – 9 kb. Their total page weight (all images and code): 106 kb; mine: 32 kb. Total image they used: 60+; total images I used: 5.

They were impressed enough to ask if I minded sharing what I did with the vendor who created their original templates. Looks like I’ll be helping them rework the master corporate template that all the companies will be using.

Yes. If it’s gotta be corporate, at might as well be done right.

And, I’ve improved upon my own code. I had a brainstorm today that elliminated two entire styles, replacing them with simple decendent selectors. Smooth it is.

It looks like I may be asked (I’ll see that I am) to have a similar chat with a couple of managers. If all goes well, I’m going to try to create a little niche for myself here – our products could certainly use my help.

I’m planning on using a hybrid layout with a simple table structure to position everything, but all of the styles will be handled via a linked stylesheet.

This is a nice little victory for me as it is the first push to modern mark-up in our company. Plus, I’m not the lead HTML developer. I’m not sure how he’s going to take it, but he does acknowledge that I know CSS a lot better than him. He is learning….

And, while they all look great in Mozilla (I love this browser), I just checked IE 6.0 and it, for some reason is cutting off the blog at the hight of the right-hand box. ::Nevermind. It’s all better now::

If you are looking for information on using stylesheets, try A List Apart. And don’t forget to Upgrade Your Browser.