Infographic showing 600 Hanna-Barbera Characters. The characters are shown in chronological order, with their respective names in english and spanish (of the TV series and the characters).

Published in External links.

A PSD is a painting of a website. We don’t spend weeks or months understanding a client’s complex needs and issues to make them paintings.

Don't say I never told you so.

Published in External links.

I gave a presentation at entitled Highly Maintainable, Efficient, and Optimized CSS. I tried to squeeze as many tips as I could in to cover how to create CSS that is well organized and readable while still keeping efficiency in mind.

Contains some fantastic resources.

Published in External links.

Published in External links.

Published in External links.

Published in External links.

Published in External links.

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.

Published in Design.

Published in External links.

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

Published in Cascading Style Sheets.