HTML CSS JavaScript

Well, I leaked it earlier this week, so I might as well get started.

Welcome to How to Make a Web Site the Modern Way, a blog series outlining, to the best of my ability. how to build an HTML page using today's best practices. The focus won't be on specific coding techniques, although there will be some of that, it will be on how the pieces fit together. Without experience, it's tough to know how the pieces of a web page fit together in the best way. I've got some of that experience and I'd like to share it with people. So at the end of all of this, I'm hoping this series will serve as a one stop shop for people looking to understand the big picture.

First up: The Anatomy of an HTML Page .

Some basic principles:

• Fast: I want pages to be as fast as possible by default.
• Findable: This isn't really the same as SEO, but it's kind of like a cousin to it. I want to make pages spiderable, human scannable, computer readable and generally information rich.
• Standards compliant: I'm not a standards zealot, but I try my best to follow web standards wherever possible.
• Accessible: I try to make pages as accessible as possible.
• Usable: Usability is a deep topic, but there are things you can do, by default that will enhance the usability of your site.
• Intuitive: I want developers to look at the stuff I do and say "hey, that makes sense." I also want it to make sense to me when I return to it in six months
• Breakable: Which is a funny way of saying "graceful degradation," a concept that colors a lot of what I try to do. The idea being- if something's going to break, or not work as expected, make sure that it's not totally screwed up

The Rest of the Series

• How To Make a Web Site the Modern Way. Part 0: Introduction
• How To Make a Web Site the Modern Way. Part 1: The Anatomy of an HTML Page
• How To Make a Web Site the Modern Way. Part 2: The Head
• How To Make a Web Site the Modern Way. Part 3: A Quick Aside on Organizing Files
• How To Make a Web Site the Modern Way. Part 4: The Body
• How To Make a Web Site the Modern Way. Part 5: The Body - How To Structure Your Markup

You use Webmaster Tools, right? If you rely on Google traffic in any way shape or form you really should be using it.

It's an invaluable service and it just got better with the addition of a new, performance specific feature. From the Google Webmaster Central blog:
Read the rest of this entry »

The following is what we use to lay down the most common text styles. This is honestly more than we usually need, but it helps ensure we don't miss anything when real content is flowed into a design. I thought it might be useful for folks to use in their own projects.

I've got a live version here on the site.
Read the rest of this entry »

I got a new machine at work yesterday and in the process of building the thing out and getting it ready to actually work with, I came up with a list of the tools and utilities I use on a regular basis. Not the big stuff (Dreamweaver, Fireworks, Photoshop, etc.) The stuff that fills in the cracks that the big tools don't cover. Thinking such a list might be useful for other folks, I added a couple of online services that I can't live without and am now sharing the highlights of the list with the world.

Read the rest of this entry »

I saw it yesterday in some code I was debugging and I realized I've become hyper sensitive to this common pattern:

var anchors = document.getElementsByTagName('a');
if (anchors.length > 0){
    for (var i=0; i < anchors.length; i++) {
        addEvent( anchors[i], 'click',  trackLinks );
    };
};

Why am I sensitive to it? Well, what are some of the things we know about JavaScript performance?
Read the rest of this entry »