Web Design for Developers

One thing that may surprise readers of the book is my choice to use HTML4 Strict for the markup in the book. That may seem strange given that the last decade has been devoted towards pushing “web standards with XHTML.” After all, experts like Jeffrey Zeldman can’t be wrong, can they?

Of course not. At least not then. Zeldman and others took a gamble on XHTML, picked it up and ran with it. Zeldman taught many of us through his articles and books that semantic well-formed markup is right and good. Unfortunately, some technical problems came up in the last few years that most web developers who took Zeldman’s advice haven’t really paid attention to until recently.

XHTML is fundamentally broken thanks in large part to Microsoft Internet Explorer. Allow me to explain.

XHTML documents, in order to be read by Internet Explorer, have to be served as text/html> which causes browsers to treat the page as HTML anyway. All those closing tags you added that you didn’t need to add get stripped out, and worse, self clsoing tags get removed.
The article “Beware of XHTML” shows some great examples of what can happen when you serve completely valid XHTML with the wrong content type. Here’s my favorite one:

Self-closing tags

You can visit the same page served with the correct content type of application/xml+html, unless you’re on Internet Explorer, which will try to download the file instead of displaying it!

Self-closing tags (served properly)

I’ve made the switch away from XHTML, and I urge you to do so as well. But don’t blindly follow anyone’s advice, experiment for yourself. One of the reasons XHTML has stuck around for so long is that developers, including myself, cargo-culted the advice and techniques of others without doing their own research. Stop that right now!

Besides, XHTML isn’t the future – HTML 5 is, and HTML 4.01 Strict documents have a better shot of forward compatibility. That sets you and me up quite nicely to embrace HTML 5 when it’s ready.

• Beware of XHTML

Typography is so important when it comes to communicating written work. Choosing the wrong typeface or not paying attention to column width or line spacing can really put a strain on your readers’ eyes, and they won’t stick around too long to find out what you have to say. In the book, I spend a chapter talking about how to make your text readable, and as a follow-up, I want to share an article I found today that offers some additional advice.

Specifically, I love this idea:

The fibonnaci sequence

the first two Fibonacci numbers are 0 and 1 and each other number is a combination of the previous 2. These numbers are meant to have a natural visual elegance to each other. Since the Renaissance, many artists and architects have proportioned their works to approximate the ‘golden ratio’. Therefore in typography it is a good suggestion to consider using only these numbers to structure your chosen point sizes to. It will give your whole document a natural elegance.

• Simple rules for good typography via Fred Design

Web Design For Developers is now available in print and the Pragmatic Bookshelf is shipping out all of the preorders.

This book aims to teach you the basics of web design and guides you through picking colors, choosing fonts, setting up a grid, and then walks you through planning and implementing a site redesign. It’s aimed at developers who have little to no front-end or graphic design background. By the end of the book, the reader should have a good foundation on which to continue exploring web design.

I hope you enjoy it.

Favicons, or “Favorite icons” are icons associated with your site. The icon appears next to the address bar on most browsers, and is often used as the icn for the bookmark or tab associated with the site.

There are many different ways to create favicons. In the book, you saw how you can use Illustrator to resize your company’s logo. You could also use different tools like ImageMagick to create scaled-down versions of existing images. Sometimes, though, it’s nice to draw an icon by hand.

http://www.favicon.cc/ has a free online icon utility. Simply draw your icon in their grid and click to download. It supports transparency and works extremely well.

More and more browsers are able to handle embedded fonts, but getting the right formats for each browser can be tricky. For example, Internet Explorer requires a proprietary format called EOT, or “Embedded OpenType”, but getting fonts in that format isn’t easy and Microsoft’s tools don’t seem to work all that well for some people.

Thankfully, FontSquirrel has a @font-face generator that gets you exactly what you need. Upload a TrueType or OpenType font and it gives you the CSS files and the EOT file you need for Internet Explorer.

Of course, you must have the right to use and redistribute the font in order to include it on your web site.

• @font-face Generator

Smashing Magazine has a great article that shows you which standard CSS selectors will and will not work on IE 6, 7, and 8. It doesn’t show workarounds, but it’s a very handy cheat sheet if you can’t remember them all.

CSS Differences in Internet Explorer 6, 7 and 8

When you look at something made by people, it’s easy to take for granted all of the steps it took to create it. Look at the monitor you’re reading this on. Think about how many assembly-line workers it took to put it together. Now think about the people who did the CAD designs. Then think of the people who spent time writing an owner’s manual. And what about the tiny components inside of the monitor? People designed and manufactured those too.

Now that the book is almost complete, I’m keenly aware of how many people it takes to bring a book to life. I spent the last week going over the edits from my copy editor. This person, this master of detail, was able to uncover a ton of things that I, my development editor, two rounds of tech reviews, and a public beta had not uncovered. I fixed inaccurate instructions, confusing segues, and even a handful of incomplete thoughts or sentences that I must have read hundreds of times.

Copy editors are awesome. They really know the language, and they understand communication. They don’t have to know anything about your topic, and the less they know, the better they’ll be able to do their job. They’ll be able to tell you if you’re doing things right, and they’ll alert you to places when you made a complete fool out of yourself.

When you’re putting content on your web site for the world to see, run your content by a copy editor. The good ones will suggest ways you can improve it, but the best ones, like mine, will just change it for you and ask you to review it. You’ll be thankful you did, as you watch your hastily-written thoughts get transformed into something your customers will immediately appreciate, and you’ll look a million times better as a result.