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

I’ve also cleaned up some things behind the scenes (not that you care, but hey, I did it). There is more cleaning to do, but it shouldn’t affect you in a negative way.

So, that’s it for now. Welcome to my new(ish) home. As always, I’m hoping to use it more…. Time will tell.

First Glance

From the outside the car looks OK. Its tall waistline/short windows give it a muscular, aggressive line seen throughout most of Chrysler’s lineup. The 300 is not the most attractive car, but it certainly isn’t an Aztek. If I was to put it to a 5 star rating, the 300 rolls in around a 3 ½ on purely exterior aesthetics.

The interior fairs about the same. The seats were comfortable and the dash was laid out fine. Given my height (6′ and a bit) and seating / steering position, part of the gauge cluster was hard to read. On the plus side, the fit and finish was nice and, with 32,000 miles on the car, it was free of squeaks and rattles. It wasn’t full-size car plush and fancy, just nice.

One word of caution about the seats: do not drop anything between the seats and the center console. The seat bracket mount is in an uncovered hole that, despite conventional physics, is far deeper than the floor pan should allow. I had the misfortune of dropping a small Barbie accessory (hey, I was traveling with my 4 year old) into the 3″ deep void. Happily I managed to retrieve the princess crown.

Driving Impressions

Ride was big-car cushy. A little bit more wallow than I car for, but very similar to Cadillacs and Lexuses that I have ridden in. Riding in the back seat was less comfortable. While there was enough room for me (on a 2 hour jaunt to Anaheim), the ride was much more jouncy than up front.

From the driver’s seat, however, the 300 has more blind spots that a macular degeneration conference. The short windows combined with overly thick pillars made changing lanes a crap shoot at best. After a couple of days of double-checking mirrors and craning my head around looking for traffic, I simply started to throw on a blinker, count to three and moved lanes. Sorry to those of you in San Diego that I cut off.

Getting around tight spots and parking was also a challenge. The short trunk is completely invisible from inside the car, and the hood only barely visible. After a couple of days I did begin to develop a feel for where the ends of the car were, but I was never supremely comfortable. (Nor, I should say, did I actually hit anything. Always good.) Rating: 2 ½ out of 5.

Drive Line

Here the 300 really fails to impress. The 6-cylinder engine sort of maybe felt powerful, but that didn’t actually translate into being powerful. Mashing the accelerator made noise and you wanted to believe that you were muscling away, but the not-vanishing landscape outside the windows told a different story.

But the real problem was the transmission. While cruising The 5 and The 15 (as they seem to say in San Diego) the 300’s transmission couldn’t decide which gear to use — it was forever hunting between 3rd and overdrive. The slightest elevation change caused it to drop out of OD. It would then decide no, it didn’t really need to and shift back up. Upon further reflection, maybe 3rd gear was better after all. And down again it would go.

If there is one continual knock on American cars (and by that I mean The Big Three) is quality. The transmission on the 300 we rented had a rather worrisome “ka-slump” that we could feel and hear when it changed from 1st to 2nd gear. And it got worse as the week wore on.

Yes, this was a rental car so we can expect some abuse. I’ll cut Chrysler some slack and I’ll call the 32,000 actual miles equivalent to 64,000 miles. And yet my Mazda has 147,000 miles of abusive driving and the transmission is still pretty slick. Likewise my wife’s 2005 Accord (American-made) with 50,000 miles has zero hiccups. (Full disclosure: her Accord does have a nagging tail light problem and a continually out dome light.)

Drive line rating: 1 out of 5.

Overall

The Chrysler 300 failed to impress any of the three people who drove it. Two of us (mother-in-law and myself) are in the market for a new car, and a week with the 300 did not put Chrysler to the top of either list.

Overall rating: 2 out of 5.

Setup:

1. Before set up: Check under and around Wigglin’ Waterpillar™ for sharp objects, rocks, sticks, lawn sprinklers or any other object that can cause injury or damage to the product. Set up on flat lawn surface, free of depressions or high spots.
2. The product should be at least 10 feet (305 cm) away on all slides from trees, walls holes, garden equipment, pools and other objects.
3. Connect a standard water hose (not included) to the attachment on the base of base.

[...]

After Use:

1. Turn off water hose when product is not in use.
2. Detach garden hose.
3. Do not store Wigglin’ Waterpillar™ until all parts are completely dry, away from children, to prevent suffocation.

This is exactly how the instructions appeared. Any and all typos have been faithfully reproduced. I have only left out the “Use” section as it wasn’t very funny.

According to a police report, a tree was stolen from the backyard of a home ….
The tree may have been chopped down and taken away, the report states.

May have been chopped down? They aren’t sure? Who chops down a tree to steal it?

Because we are looking for the cartilage, my first stop was for an injection of contrast dye (gadolinium). A fairly simple procedure, we started with a couple of x-rays to get an overview of my shoulder, then a flouroscope to help the physician insert a needle into the joint into which he then injected the dye.

Probably the most interesting parts of the day were feeling the fluid balloon, at least what felt like ballooning, out the back of my shoulder; and then seeing the remaining image on the fluoroscope screen of the needle in the midst of my shoulder with the dye coming out. Very interesting that. The downside is that as the Lidocaine wears off and the fluid begins to be absorbed, my shoulder aches.

Next up: the MRI. I have been told the machines can be a bit claustrophobic and noisy. That is an understatement.

I’m not terribly claustrophobic, so the small confined space wasn’t a bother. Frankly the inside of the machine reminded me of standing up in an airplane with my face inches from the bottom of the overhead bin. It looks exactly like that.

The good news: I was lying down and not standing with my neck craned over to avoid hitting the bin. The bad news: I had to remain motionless for the next half hour.

Having removed only essential items — eye glasses, wallet and belt (I didn’t bother wearing my ring and watch) — I was fully dressed. When the machine was turned on I got to experience what mostly felt like slight tugging and small static shocks dancing around the rivets on my Levis. That was pretty cool.

Then the noise started. The best way I can describe it is a bad haunted house. You’ve been to those, yes? The ones where they try to scare you with intermittent loud noises — someone banging on the walls with hammers, klaxons sounding periodically. Except in this case they hadn’t quite worked out that it is scary only when intermittent. If you bang continuously and leave the klaxon running its not scary, just really annoying. In fact, as the tones changed and moved about, I had to keep myself from laughing at the absurdity of it.

And loud. I can’t begin to tell you how loud. Over-the-top loud. Have you had fire drills in your building? With the really annoying electric beeping? Its like that. With someone hammer on metal. And occasionally sounding an air horn 2 feet away. I mean, forget waterboarding, just put detainees in an MRI for a really comprehensive exams. I guarantee, whom ever invents an MRI that is half as loud will make millions. And the current models will ensure National Security.

After a half hour of torturous, silly noise, I was free. A small headache and a large cache of images in hand I was headed home. I must say that flipping through the films is pretty cool. (Yes, film, not CD. My doctor apparently prefers the films.) And while I’m not expert, in looking at the back portion of my shoulder joint there seems to be a bit of something poking out the back that doesn’t look quite right.

We’ll see what the expert says in a couple of weeks.

Update

(3/13/2009)
The doctor’s review of the MRI concludes that there is a minor anterior tear or two. For now he has proscribed physical therapy. In a couple of months we’ll re-evalutate.

How does a pickle live on the Earth?
How does an eyeball go for a walk?
How does a lightbulb eat?

We then spent the next ½ hour on YouTube looking at volcano eruptions.

Having instant internet access and rich media sites helped her understand a volcano better than I was able to describe it, and we had a great bonding experience watching lava flow.

Thank you 21st century.

Should they get a bail-out? Yes.

Ford, Chrysler and GM have had plenty of time to retool and change their product line ups. They have refused to do so and now they are paying the price. Simply put, they don’t produce cars that many of us want. Trucks? Yes, they produce plenty of those and the rising gas prices have squashed sales. Since it takes the automakers years (on the order of 5) to develop a new car, they are stuck and in trouble.

This is the path they have chosen and should pay the price — Chapter 11.

However, the financial industry also created their own problems by funding, buying and selling bad mortgages. The housing bubble was not something that happened out of the blue, those in the mortgage industry knew what they were doing.

That is the path they chose and they were given $700 billion to fix it.

The precedent has been set: we are bailing out bad decisions by the banks; we should then bail out the bad decisions of the auto industry.

When we look at the possibility of nearly 3 million people out of work, we have to do something. Congress is right to demand a solid plan from the auto makers before any money is handed to over.

As for the CEOs, I have no sympathy for them. They shall not hurt no matter what happens. I only respect one of them: Mr. Mullaly at Ford. His salary is an obscene $22 million per year, however, this year he has waived that and is only being paid $1. When asked by Congress if they would do the same, Mr. Nardelli (Chrysler) and Mr. Wagoner (GM) said no. Gentlemen, that is the wrong message to send to those from whom you seek money.

In the end I think the auto industry will be much leaner, more efficient and cost-effective in the future. I just don’t know when that future will arrive.