I chose that name because it encapsulates everything that matters to me about the web — beautiful visual design as well as the beauty I see in well-crafted code. The name also works well with the topics I speak about; accessibility (for a beautiful web), CSS (for a beautiful web), microformats (for a beautiful web) and more.

I registered the domain names forabeautifulweb.com and forabeautifulweb.co.uk on 31st July 2007 via Media Temple after researching that there were no other companies using that name or something similar. I didn’t officially register the trademark, which in hindsight might prove to have been naive. I launched the website on 1st September 2008.

Over the last three years, For A Beautiful Web has become a respected brand and is also highly identifiable as mine. @beautifulweb has 1,701 followers on Twitter and my own 10,572 followers also undoubtably associate For A Beautiful Web with me. We’ve hosted successful events in 2008, 2009, 2010 and have plans to expand further in 2011. After I presented at pilot workshops, we quickly began to host workshops presented by others. Not only have these events made good business, most importantly our attendees love them.

For A Beautiful Web has developed into a brand that houses all my training content, including a highly successful series of DVDs and online video tutorials that were published by New Riders. I’m sure that the thousands of designers and developers who have bought or downloaded those titles also identify the For A Beautiful Web brand with me.

• Designing Web Accessibility For A Beautiful Web
• Designing with CSS
• Designing with Microformats

Today I learned that Microsoft have launched a beautyoftheweb.com site to promote Internet Explorer 9. The site’s tagline asks visitors to “Get ready for a more beautiful web”. Microsoft registered their domain name on 28th July 2010 and the URL and tagline are too close to mine to be mere coincidences.

Update: Microsoft also registered abeautifulweb.com on July 13th 2010. Hat-tip to @hellogeri.

Of all the voices in my head, the nice one (I call him Bill) says that this must be either a coincidence or a lack of research by Microsoft. I’d love to believe Bill, but a Google search quickly says otherwise. No wait, this is Microsoft we’re talking about, let’s try searching on Bing.

My other, more balrmery, chair throwing voice shouts “Don't be naive Andy. Microsoft knew exactly what they were doing and have no problem screwing over the little guy. Anyone with a web connection and a few spare minutes can see that For A Beautiful Web is an already established brand, trademarked or not.”

Common sense and gut instinct tells me to do something, but what?

I don’t want an energy sapping legal battle (that I would likely lose), nor do have a legal department with billions at their disposal. What I do have is a faith in the better judgement and consciences of my many friends who work at Microsoft — I’ve been a fierce critic and an advisor right up to and including Internet Explorer 9 —. I also have a platform to tell this story.

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

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.

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.

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