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 »

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 »

As you could probably guess since Performance is one of the six site categories around here, I'm a fan of WebPageTest. You can imagine my reaction to the news that page load videos are now available from the service.

From Recording video with WebPagetest:

One of the things we like to look at is what a page looks like when it is loading, particularly if you are comparing a before and after or multiple sites to each other. This is particularly helpful when talking to the business about performance and sometimes the raw load times don't adequately represent the user experience.

Up until now this has been a pretty manual process where we screen record a video while loading a site then load it up into Premiere and stitch it together.

Starting today, you can have WebPagetest record a video of a page load directly. It's still in a pretty rough form and it's going to be a while before it'll be ready for the masses but what is there is already pretty powerful and extremely flexible.

read the rest of this article…

Very cool. I can think of two or three presentations where video of page load would have been super useful and will definitely find a use for the feature in the near future.