The good web-code guide
CSS Layouts
Now you know how CSS works and how to write some, go over the CSS reference to see the various properties and their values. Listed below are some example layouts; some are my own, some have been contributed, and some are links to external websites.
- Really simple 2-column layout (this tutorial uses a variation on this)
- Blue Robot's alternative 2-column layout
- Glish.com's "holy grail" three column layout
- Bob's Bits example layout (single column with navigation bar)
Good Coding
Here's a reminder of all the tips listed before-hand with some new ones thrown in for good measure:
Writing HTML
- Remember: HTML for content, CSS for layout.
- Filenames and URLs in images and links are case-sensitive on most web servers. Choose a convention and stick to it to avoid hassle when you upload. Don't use spaces in file-names. Either stick completely to lowercase or use upper-case initials, e.g., tableOfContents.html
- Use
<and>to show the < and > symbols in HTML. - Use the
<p>..</p>tag to mark paragraphs. Don't just use<br><br>to start a new paragraph. - Write your HTML in a logical order so that it makes sense without style-sheets. First the title, then an internal link to the navigation, then the content, and finally the navigation. (Or a link to the content, then the navigation, and finally the content, but some search engines rank text at the start of a page with more importance than that at the end).
- Use header tags and divisions (
<h1>,<h2>,<div id="..">, etc.) to mark the structure of your pages. - Use the right tag, not because it looks a certain way. You can change how tags look with CSS later.
- Always include a
<!DOCTYPE ...> tag at the start of each page, and a<META http-equiv="Content-Type"...>tag in the header so that browsers know how which display rules to apply to your pages. - If it's a list (menus are lists too), use
<ol>or<ul>to make it a list. You can always remove the bullet-points/numbers with CSS later. - Good web pages have a
<head>section with a<title>tag, and a<body>section. - The content of the
<title>tag names your page and shows up in search-engines, so include the name of the site and the subject of the page itself. <!--HTML comments-->can help you figure out your page when you return to maintain it.<p>Paragraphs</p>cannot contain other block tags (like<ol>or<dl>).- Use the
<hr>tag to mark logical breaks in your document. You can use CSS later to hide them from browsers that show those breaks in other ways (i.e., with columns etc). - HTML entity names are case sensitive:
é(é) isn't the same asÉ(É) - If you use special characters instead of their entity names (as shown in the previous tip) then you make sure you set the right character-set so these special characters appear properly on other computers.
- Check that your HTML is valid.
A missing closing tag, or a handful of other more minor problems can prevent
your site from showing properly on some browsers, and can often lead to
rather obscure bugs rearing their ugly heads when you try to add a style-sheet.
For the validator to work, your pages must have a DOCTYPE and a character-set
defined (in a meta-tag in the
<head>section).
Images and Links
- When creating a link, make sure that the link text adequately describes the page it is linking to and makes sense when read out of context. "CSS Reference" makes sense as link text, whereas "click here" does not. You can use the title="" attribute as an alternative to a long link name.
- Always include the three required attributes in any image: width="", height="" and alt="".
- The alt="" attribute shows when the image cannot be displayed (i.e., to the blind, or when the image is broken or inaccessible). Make sure that the alternate text makes sense in the flow of your document. The longdesc="" attribute is designed to hold a URL that points to a long description of the image, so make the alt="" attribute short.
- If an image is purely for show and has no meaning as part of the document, then you can use an empty alt="" (exactly as shown here). Remember though, avoid including layout imagery in your HTML; that's what style-sheets are for.
- Use the right compression type for each image. Flat-coloured and un-shaded images like graphs, charts and cartoons compress best as GIF or PNG. Photographs, or images with "continuous tone" (varying shades of colour) compress better as JPG, but be sure to keep your original handy because JPG is "lossy": it loses image quality each time you edit it.
- Because JPG compresses areas of similar hue, you can often make an image compress better by blurring it slightly. For the same reason, make sure you don't use small text on a JPG - it will often appear blurred and unreadable.
- Don't make images too large. If the image you want to show is larger than about 400x300 pixels, create a "thumbnail" image and link it to the larger image. Aim to keep the total size of a web page (including HTML and all its images) below 100k in size. Not everyone has a broadband-speed internet connection, and even this little amount can take about 20 seconds to download.
Planning your site & writing your content
- Who is your audience? Your audience dictates the kind of language you use, the style of navigation, the length of each page, the colours and appearance of your site... everything.
- What will your site be about? Is there a better tool or way to manage the content you want to put online? If you're writing a journal, look at tools like Blogger, or Gallery if you're creating a photo album, etc.
- Start by figuring out what content you want on your site. What is its focus? Design your navigation around the content, and put the most important content on the front page. Many visitors never go further than the front page.
- Try to keep your site navigation "shallow" but without too many navigation links. If your site has more than a dozen pages, start to think about grouping them together in a second layer of navigation and make each page on the site link to all the first layer pages, and then additionally link each page to its "layer-mates". This allows people to move easily between pages in the same logical group of pages, without being too many clicks from any of the other pages.
- Avoid "splash-screens" and interstitials. Making users click just to get into your site is a sure-fire way to annoy and/or confuse them. Do they have the Flash or Java plugins? Chances are they have no idea! Write your site to deal with that without making your visitors work to get to your content.
Design & layout
- Write a template to create your site. Clear, consistent layout and navigation is reassuring. Your visitors don't want to get lost or have to poke around your site to find what they want.
- Don't over-design! Visually rich sites take a long time to load, and can restrict your visitors. If they have different sized or styled fonts than you design for, this can break your layout. Avoid "pixel perfect" designs and favour flexible columns using relative sizes (such as ems and percent of the browser window width & height).
- Avoid using fixed font-sizes (many people are hard of sight use the "Text Size" controls in their browser to make the text bigger and Internet Explorer is broken in this regard. If you set a font size, it will stay that size even when the visitor tries to enlarge the text. Use relative sizes in your style-sheets: ems and percent.
- Extra line-spacing can make on-screen text easier to read, but if you have a lot of content it might annoy people who print your page. Consider adding media-specific rules for line-spacing and colours to make print-outs better.
- A good line-length is between 10 and 13 words. Longer lines are harder to follow for people with reading-related disabilities (such as poor eye-sight or certain forms of dyslexia).
- Serif fonts are more visually appealing and easier to read on paper compared to sans-serif fonts. Computer screen pixels aren't small enough to show good, clean serifs on small font sizes, however. Use sans-serif fonts for small and normal-sized text, and serif fonts for larger text. The reverse is true when printing. You can use media-specific CSS rules to switch font styles for printers.
- When choosing a colour-scheme, think of your audience and think of your content. If they're old, they probably don't like the irrational exuberance of garish colours unless they're oriental where garish bright colours are considered good fortune. Contrast text against its background, and choose two or three additional colours. Most professional websites only have 4-6 colours. Use VisCheck on a screenshot of your design to make sure it's readable to the 10% of men with some form of colour-blindness. VisCheck also offer a downloadable photoshop plugin (for Windows) which also works on many other graphics packages such as Paint-Shop Pro.
- A good background image or two can turn a dull-looking site into an amazing-looking
site. A bad background image will make your site unreadable and will turn
people away faster than a puddle of puke at the entrance to a restaurant.
Remember that backgrounds should stay in the background - don't contrast
too wildly, or distract too much from the content. You can also surround
your content with a
<div>tag and use CSS to give the column a plain or alternative background to the rest of the page. - Err on the side of caution. An amateur clean, simple design is less likely to go wrong than a visually rich, complex design. An ugly and poorly-designed website gives your company a bad image.
That's it really. Read on if you need to know how to upload your site using FTP, or want to see some more advanced techniques and tips.