On Wednesday we arrive in Boise Idaho, the capital city of the state of “Famous Potatoes” From there we’re taking in 3000 miles across six states (Idaho, Utah, Wyoming, Montana, Washington, Oregon and back to Idaho) taking in some of the most stunning scenery in the United States, if not the world.

Along the way we’ll be blogging, uploading photos to Flickr, videos to Vimeo and of course checking into Gowalla — all the while, looking for Yogi.

Why Looking for Yogi?

Along route we’ll be spending time in the world famous JellyYellowstone National Park, the home (I’m reliably informed) of the bear I remember so fondly from my childhood. I know we’ll find him somewhere along the route and we’ve packed a pic-a-nic basket for the occasion.

Some words about the site

Looking for Yogi

As you may have read on the internets, I do love me some HTML5 and CSS3 and the site has been made from a ton of it. The HTML is as hardboiled as I could make it, chock full of microformats and WAI-ARIA roles in place of presentational id and class attributes. Dig deep into the source and you’ll be hard-pressed to find something that doesn’t belong.

As for CSS3, what are you looking for?

CSS transitions? Got them. Watch the navigation icons at the top of each page fade between two different states of opacity.

CSS3 animations in Webkit? Got them too on the 404 page.

What about CSS3 transforms? Yup. Click or tap on the globe icon on any of the internal pages and the off-beat navigation is skewed using CSS3 matrix transforms.

Multiple background images? Check.

RGBa? Check.

CSS3 Media Queries for proportional leading and for optimising the design for both portrait and landscape orientations on the iPad? Oh yes! Got those as well. Don’t worry though campers, the site looks just great in Internet Explorer 8 and 9.

Speaking of iPad, while we’re away I’ll be using mine as often as possible and not just to watch cartoons. That’s why it was important to optimise this design as much as possible for that device. More than that though, I designed this site first for the iPad and only checked the design in a desktop browser after my work on the iPad was complete. This was a revelation and how I intend to design every site from now on.

Feed the bears

So here we go, Looking for Yogi. Keep in touch and if you find yourself anywhere close to where you see us popping up, give us a holla @malarkey.

msnbc.com’s article pages are divided into two area types. The first, it’s header navigation and branding feels right with its fixed-width layout. The second — the article content getting most the discussion, and the one redesigned for readability — cries out to be fluid.

msnbc.com’s article page redesign

Browsers that support min-width and max-width the article content could easily be made fluid, for example (using my content element naming).

.content { 
width : 80%;
min-width : 640px;
max-width : 1200px; 
margin : 0 auto; }

Even the site’s fixed-width assets, including floated images, videos and other content could be made flexible using Ethan Marcotte’s solution for fluid images

img,
object {
max-width : 100%; }

Which brings me to my other problem. msnbc.com's leading (line-height) of its body copy is a little too open for my taste and, in a fluid layout should be responsive to the width of the columns of text. This problem, of proportional leading, is what holds many designers back from adopting fluid layouts.

Type tip: As the width of the measure (line width) becomes wider, leading (line-height) should be increased to aid readability.

How can we solve this, and adjust the amount of leading as the width of a browser window changes? With CSS3 Media Queries.

I won’t attempt to sell the case for Media Queries. Ethan’s Responsive Web Design does that better than I ever could, and has already inspired two of the best designers I know, Simon Collison and Jon Hicks to make their designs responsive. Instead I’ll simply add my two-penneth.

Proportional leading

First, the Proportional Leading example.

Next the HTML, nothing more than two sections, .content-main and .content-sub. One’s floated left, the other right.

section.content-main { 
float : left; 
width : 57%; }

section.content-sub { 
float : right; 
width : 38%;  }

Finally the CSS3 Media Query magic. As the measures in the main and sub content areas are different, we’ll set individual line-height units for each.

.content-main {
line-height : 1.8; }

.content-sub {
line-height : 1.6; }

Default line-height values (above)

Next decide on the increments where the leading should shift to a new value. We’ll be resetting line-height values in three steps when the maximum browser width is 1000px, 900px and 800px. (You’ll need to adjust these values to suit your own designs.)

@media all and (max-width : 1000px) {
.content-main {
line-height : 1.6; }

.content-sub {
line-height : 1.5; }
}

(max-width : 1000px)

@media all and (max-width : 900px) {
.content-main {
line-height : 1.5; }

.content-sub {
line-height : 1.4; }
}

(max-width : 900px)

@media all and (max-width : 800px) {
.content-main {
line-height : 1.4; }

.content-sub {
line-height : 1.3; }
}

(max-width : 800px)

Using a contemporary browser, one that supports CSS3 Media Queries, re-size the window and watch the leading change. The wider the measure becomes, the more open the leading.

Try Proportional Leading on your own fluid, responsive designs and let me know what you think. Oh, and don’t forget, there’ll be plenty more like this in Hardboiled Web Design.

Update

See also Ethan Marcote’s responsive typesetting example from his A List Apart article where he changes font sizes in response to changes in the measure (but doesn’t also adjust line-height.)

By any measure, the progress that the IE team have made with Internet Explorer 9 is impressive. Hardware accelerated graphics, upgraded support for CSS3 selectors and properties, Web Fonts and HTML5.

Running Internet Explorer 9 through FindmebyIP

Run Internet Explorer 9 through FindmebyIP's testing tools and it performs well, really well, compared to IE8.

FindmebyIP HTML5 test results

Hardware accelerated Canvas and Canvas Text support are only the start (Run the Fish Tank Canvas demonstration in IE9 and the frame rates are staggering, even compared to Safari 5 on my iMac.)

The big news of course is Microsoft’s support for native HTML5 video (using the H.264 codec) and audio. Surely now the writing is on the wall for Flash as a video delivery format. I think that Microsoft’s decision to support HTML5 video is a far bigger deal than Apple's position on Flash.

Internet Explorer 9’s CSS3 support is none to shabby either. RGBa and opacity are there, as supposedly is box-shadow (although that isn’t working in any of my tests.)

FindmebyIP HTML5 test results

border-radius was an obvious, but welcome addition. Now we can finally put away those image and JavaScript hacks. Currently it gets applied only to display:block or display:inline-block elements (not inline) and I’ve submitted a bug report. I’m sure this will be fixed in time for the next release.

Every site needs rounded corners. Don’t they?

@font-face is given a huge boost with the addition of WOFF (Web Open Font Format) in Internet Explorer 9 in addition to the traditional EOT. This will be great news to anyone who has had trouble with creating EOT files.

“It’s Hardboiled” 404 page using WOFF in Internet Explorer 9

Most pleasing to me is Microsoft's decision to support all CSS3 box-sizing properties in Internet Explorer 9. content-box, padding-box and border-box all work splendidly.

Internet Explorer 9 has (almost) full CSS3 selector support as well as box-sizing

Add CSS3 background properties, multiple background images, background-sizing and background-clipping and I am very happy indeed.

Multiple background images (finally) in Internet Explorer

Not content with a partial implementation, Internet Explorer 9 supports two amazingly useful CSS3 background properties for liquid, flexible designs. They are contain and cover and I make heavy use of them in “It’s Hardboiled”.

Scaling background images with contain (top) and cover (bottom)

While we’re on the subject of graphics, Internet Explorer 9 has superb rendering of both type and images, even those that have been rotated and scaled using JavaScript.

CSS3 transform (rotated) elements in Google Chrome (Windows 7). Jagged edges

CSS3 transform (rotated) elements in Firefox 3.6 (Windows 7). No jagged edges

Compared to Google Chrome’s handling of some CSS3 properties, Internet Explorer 9 is impressive. Of course there are HTML5 elements and CSS3 properties that I wish were included.

• text-shadow is missing but I can live with that.
• border-image would have been nice.
• CSS3 columns are missing too and I find it harder to live with that.

Although Internet Explorer 9 hasn’t support for these or CSS3 transforms or transitions, personally I’ m glad they have made what they have implemented very solid.

Overall Internet Explorer 9 handles my Hardboiled Web Design example files very well indeed. Colour me impressed. You should be too.

• Read the announcement
• Download Platform Preview 3

— Pragmatic as ever, Rachel Andrew challenges some of my hardboiled approaches. A very good read.

Really good stuff from Nicolas Gallagher.

— Smashing Magazine deserve a pat on the back for publishing this.

TypeFolly is probably the first web typography tool that allows designers to easily create beautiful “type follies”. The result is a fully html & css3 compliant code. TypeFolly gives designers the freedom to create beautiful type compositions, test new font combinations and fully enjoy the power of CSS3.

An amazing piece of work.

If I was doing this in Flash it would take me ten minutes, and it would work consistently. But I want to learn new things and have it visible on the iPad and iPhone. It’s taken me about two days of work to get it to where it is now. As a designer these kind of things are a distraction.

Which historical beard inspires yours most?

Ryan Brunsvold

Jim Henson

Pete Eveleigh

The one I had in October 2007. That was some beard I can tell you.

Wez Maynard

Ansel Adams had a sweet beard and a wonky nose.

Christopher Meyers

I guess I’d have to say the caveman’s, or an old-timey prospector’s.

Chris Mills

I’m particularly impressed with ZZ Top’s beards and any particularly impressive Viking beards, (eg: Swedish band Amon Amarth.

John Oxton

That guy off Record Breakers with the world’s longest moustache. Do moustaches count? Other than that Sir Walter Raleigh. And Black beard, because he was bad-ass.

Jake Smith

Brian Blessed and any beards from the Viking era.

Has your beard ever lead to an embarrassing identity mix-up?

Ryan Brunsvold

Out shopping a little girl screamed “Daddy!”, ran to me and grabbed my legs. Her Mother ran over, paused when she made eye contact and then after an uncomfortably long silence, apologised as she peeled her daughter off my legs. She explained that I could easily be a twin to her husband who was currently deployed to Iraq. She went on to explain that “we haven’t heard from him for some time now.”

Pete Eveleigh

Yes! I was once mistaken for someone without a beard! Oh how we laughed when it was revealed that I actually did have a beard.

Wez Maynard

Someone actually thought I was Steve Brookstein. Oh well she thinks she pulled someone famous and I got drunk for free.

Christopher Meyers

People often tell me I remind them of comedian Zach Galifianakis. I hate that as I’m often caught reciting his jokes.

Chris Mills

Because of my height, hairiness and general crusty demeanour, I am often mistaken for an Ent (Treebeard) from Lord Of The Rings.

John Oxton

I was once mistaken for Brian Blessed at Shanghai International. That’s not true, mostly people just point and stare.

Jake Smith

Combined with the long hair, I get many “you look like Justin Lee Collins” moments.

What's the strangest thing you've found in your beard?

Ryan Brunsvold

A frozen bit of Yellow Fin Tuna. I was packing deep freezers in Alaska 15 years ago and everyone's facial hair quickly formed a mask of ice and frost. When I went back to the galley, the condensation in my beard began thawing and a small piece of fish hit the table in front of me.

Pete Eveleigh

The lost treasure of the Sierra Madre. It’s still in there somewhere. Also, a bug. I discovered that in IE6 my beard was about 30cm to the left of where it should be.

Wez Maynard

I found my chin the other week - thought I’d lost that bad boy years ago.

Christopher Meyers

When my beard is longer, my dog likes to put her head under my beard.

Chris Mills

A perfectly-formed miniature universe, populated by talking dogs. The leaders were all smoking Beagles. The scientists were cute Chihuahuas in lab coats and the police were Hyenas with truncheons. Around about then, the trip ended.

John Oxton

A traveling man with a banjo. Obviously most Saturday mornings start with a severe hangover and the standard shopping trolley and traffic cone in beard problem.

Jake Smith

Nothing really weird, but egg yolk can be persistent, and show up days later.

What's your favourite scratching implement or utensil?

Ryan Brunsvold

Usually the blunt end of a Derwent 2B pencil.

Pete Eveleigh

My daughter. In fact I originally grew my beard for a fancy dress party. My daughter loved it so much I kept it.

Wez Maynard

I find a toothbrush is a fine aid for beard care and grooming.

Christopher Meyers

My girlfriend’s fingers. That said, my beard doesn’t really get too itchy, so I usually get scratched elsewhere.

Chris Mills

Heh heh heh...

John Oxton

An attractive young woman and/or cake fork.

Jake Smith

I don’t have one, but the Wacom pen puts a good shift in.

What advice would you give a man (or woman) who wants to grow a beard?

Ryan Brunsvold

People who are freaked out by unique facial hair aren’t worth knowing.

Pete Eveleigh

Push really hard (doubly so if you’re a woman). Don’t worry about the itching it will pass. What is more, one of the undocumented features of having a beard is the sheer joy you can experience shaving it off. But the fun doesn't end there either! You can enjoy regrowing it again. And so the cycle of hairy life begins anew.

Wez Maynard

Beards hate bright light so keep it in darker rooms as sunlight will actually kill it. Never get it wet. Don’t give it water to drink, and definitely do not give it a bath.

Christopher Meyers

Try harder.

Chris Mills

Sit there and strain for a good few minutes a day, willing the growth to erupt from your chin. You need to get this just right - keep going until you start to feel a certain energy welling up inside, but stop before you actually shit your pants. The window is pretty slim here - a few seconds for some people.

John Oxton

Remember, a beard is for life, not just for Christmas.

Jake Smith

Getting past the itchy stage is hard work, but from then on, it's all glorious growth. Oh, and invest in some good trimmers.

Soup?

Ryan Brunsvold

Duck, as in The Marx Brothers’ Duck Soup.

Pete Eveleigh

Never been a big fan of soup. It gives me terrible wind.

Wez Maynard

For maximum beard splendidness - only with a straw.

Christopher Meyers

I just go for it. If some gets in my ’stache, I try to suck it out. Otherwise, that’s what sleeves are for.

Chris Mills

Only for foreplay.

John Oxton

Is there anything better than sucking the luke warm mulligatawny soup from your moustache? I think not sir!

Jake Smith

Yes, but still not mastered.