September 10, 2002, 12:50 PM ET
Tips for designing bare-bones pages
At ajc.com, I've been designing a bare-bones home page in case something terrible happens tomorrow (on the one-year anniversary of the Sept. 11, 2001, U.S. terror attacks) and our site is flooded with traffic. If there were ever a perfect case for using a CSS-based layout, this'd be it. A few pointers on making such a page:
- Separate all content from presentation using a style sheet. When millions of people are hitting your home page frequently, you don't want them to have to download lousy
FONTtags andTABLEs over and over again. Don't embed formatting in the page. Rather, design it so users only have to download straight content. My opinion is: When it comes down to it, pretty background colors and fonts don't matter when there's a huge breaking news story -- but if you're intent on formatting content, use an external style sheet. That way, users will only have to download it once, saving bandwidth for your site and your users. (Subsequent page views will use the cached style sheet.) - Use correct structural markup. For example, use HTML tags that give meaning to your document structure -- like
H1/H2/H3for headlines,ULfor lists,Pfor paragraphs, etc. If you do this, your page will be accessible to PDAs and alternate Internet devices. And I'm betting that in the time of an emergency, many people will use whatever means they can (cellphones, PDAs, etc.) to get news from your Web site. Make it accessible to them. (More information on correct structure is available at Dan's Web tips, Web Design Group and HTMLSource.) - Keep the page size low as possible. This tip goes without saying, but last Sept. 11 when I viewed the source of many news sites' stripped-down, supposedly "fast-loading" home pages, I wasn't too impressed. There's a difference between keeping the size of visible content low and keeping the size of code low. A few tips: Delete all newline characters (i.e., line breaks). Do this right before you upload, and save a local copy of the file for yourself with readable code. Trim unnecessary quotes from HTML attributes (unless you're using XHTML, in which case they're required). Don't close tags that don't need to be closed. (I hesitate to say this, because it goes completely against proper coding technique, but desperate times call for desperate measures if your site gets lots of traffic...) And strip out all unnecessary gunk, like META tags and JavaScript calls.
Any other tips? Leave a comment.
