These days, aspiring Web site creators like you pick up a lot of Web-design theory before you start working on your pages. But as deadlines loom and the value of "do it right" falls victim to the imperative to "do it right now," even the best of us sometimes toss good practice out the window.
That's perfectly understandable and no cause for panic--after all, if Web weavers waited until their pages were perfect before uploading them, the Internet would be a very lonely place indeed. However, sometimes innocent-seeming shortcuts can cause triple-Tylenol headaches later on. Here are a few pieces of Web advice that site creators ignore at their own risk:
1. Always include a doctype.
Even if you develop your site pages with classic HTML (with its less rigorous standards) rather than up-to-date XHTML, you can use the same structuring and formatting features in your pages, and browsers will process them effortlessly.
But if you forget to include the doctype--the short instruction at the beginning of a page that tells a browser what type of markup (HTML code) you're using (see the figure)--your pages will appear annoyingly inconsistent. That's because some browsers, including Internet Explorer, switch into a backward-compatibility state known as quirks mode when they encounter unidentified markup; in essence, they attempt to act like an outdated browser from the 1990s. Common problems that result include text that appears at different sizes in different browsers and layouts that wind up in different configurations depending on your browser. To read up on doctypes and make sure you're using the right one, check out Fix Your Site With the Right Doctype!
2. Keep formatting instructions out of your markup.
In a rush, it's easy to get lazy and apply inline styles (or even worse, formatting tags like ) to a page's XHTML or HTML. But it's a rare Web site that uses a particular format just once. Most often, you'll use a design--say for a column, heading, or note box--elsewhere on the same page or on another of your site pages.
To ensure consistency across your site and to make it easier to fine-tune the look and feel of your pages, move all your formatting instructions to a central location: an external style sheet. That way, when a browser processes a page, it grabs this central set of instructions and applies them to the page (see the illustration for the sequence of events).
At their best, style sheets let you create a site you can effortlessly restyle in a thousand ways, as you can see in the super-flexible pages impressively demonstrated at CSS Zen Garden.
3. Be under renovation, not under construction.
Think of your favorite store. Now imagine shopping there if you had to wander around half-lit floors, dodging ladders, pylons, and heavy-duty construction equipment to find the aisles that still have products on the shelf.
It's a similar story on the Web, where a site with empty pages, "under construction" messages, and vague promises of upcoming content will send visitors away in droves. Yes, it's true that your Web site won't be complete when you first upload it. But make sure that what's there is genuinely useful on its own, and don't draw attention to gaps and shortcomings. Instead, keep improving what you've got.
4. Think twice before you adopt copy-and-paste design.
Typically, Web sites use the same page design across all their pages. For example, noodle around Amazon.com and you'll always see a menu header at the top of the page and a sidebar on the left.
There's a very special circle in Dante's Inferno reserved for Web developers who try to achieve consistent design by copying and pasting their XHTML (say, a set of <div> elements or a <table> element) from one page to another. It's almost impossible to manage or modify this mess across all your pages without making a mistake, even if you have a small Web site.
If you need a repeating page design, pick a suitable solution from the available options, each of which comes with its own caveat. Your can use server-side includes (which require Web host support), page templates (provided you have a Web design tool like Adobe Dreamweaver or Microsoft Expression Web), frames (which can exhibit quirks), or a Web development platform (if you're willing to take a crash course in programming).
5. Keep an eye on your visitors.
Is anyone here? There's no point in having a Web site if you're not willing to pay attention to what content draws and keeps visitors and what falls flat on its face. Remarkably, the best way to do that is with a free yet industrial-strength service called Google Analytics (see the screen shot). You simply copy a small bit of tracking code to each of your pages and within hours you'll be able to answer questions like "Where do my visitors live?", "How long is a typical visit?", and "What pages are their favorites?"
About Creating a Web Site: The Missing Manual
Whether you want to keep a simple online diary or sell products e-commerce-style, Creating a Web Site: The Missing Manual takes you from writing your first Web page to building a complete, cross-linked, professional-looking site using nothing more than an ordinary PC and raw ambition. Expert Web developer Matthew MacDonald provides all the hands-on, take-it-to-the-keyboard guidance, advice, and techniques you need.
Creating a Web Site: The Missing Manual is full of valuable tips and guidance like that above. In it, you'll learn how to:
- Build a site from start to finish with hands-on, guided instructions
- Create dazzling pages using the formatting and layout capabilities of style sheets
- Bring in some cash with Google ads, affiliate programs, and a PayPal shopping cart.
- Get your site noticed by Web search engines like Google and Yahoo!
- Track site visitors and identify the pages they're checking out most often
- Host videos and music right within your pages
- Foster a sense of community by adding online discussions and forums
- Create your own blog using a free blog-hosting service
- Find the right Web host for your needs and get a personalized Web site address
