This article follows on from my Why have a CSS & XHTML compliant online store? article. In that article I discussed reasons why your store should be built using CSS and XHTML, in this article I am going to give some advice on actually building it and putting that advice into practice.
Tools for the Job
First off, some handy tools that will help you achieve your goals, free of course.
Text Editor
You'll need a text editor. I prefer to use one that has code highlighting abilities, and my personal favourite is AceHTML. Nice little editor with toolbars to do lots of different things. I don't use any of them myself, but you may find that they useful shortcuts sometimes.
FTP Client
Next up, an FTP client. My suggestion, again from the makers of AceHTML - AceFTP. Again it's freeware and can also integrate with ActHTML to speed things up.
Browsers
I would suggest using Firefox for development work, as there are a few add ons (see below) that will help you a lot. It is sensible to have different browsers for testing too, so go ahead and get Netscape and Opera too, and if you have a mac to hand grab Firefox for mac as well (and of course Safari).
As for add ons, there are a lot of extensions for Firefox, and I suggest installing the following;
The Web Developer Toolbar This is invaluable. It will do so many jobs and helpful things for you, like putting boxes around elements, turning css and things off, showing ids and classes, providing information on forms and page sizes. The list is almost endless.
Firebug This great little tool allows you to examine the DOM at a glance, and also helps with Javascript debugging.
Adsense Notifier This one is only if you have Adsense on your site really, it just sits at the bottom of your screen telling you todays earnings/impressions/clicks etc. Great to check at a glance.
Clean Code
OK on to the actual code. Here are a few tips for you to keep in mind.
Keeping the code as clean as possible - only using what you need is essential. Rather than having tables or transparent spacer gifs positioning things you should use CSS to give elements padding and margins instead. A good tip is to place the following code at the top of your CSS file:
* {
padding: 0;
margin: 0;
}
This will set everything to have no padding or margin before you begin. This gives you a level playing field as some browsers have different defaults as standard.
When writing the code, imagine you are writing a word document. So obviously the title of the page will be in a <h1> tag, and paragraphs will be in <p> tags. You want to give your content this kind of hierarchy so it reads properly on unstyled pages and text only browsers (Mobile Phones too). It will also help with Search Engine Optimisation (see below).
Try and keep all your styles separate from your HTML. You want to have a master CSS file with everything in, and not cluttered in with the HTML or at the top of the file.
This kind of thing could go on for a while, so I feel a more detailed article on coding an example page would suffice - watch this space!
Accessibility
The point above about using the proper tags where they should be used applies here to. This allows the pages to be accessible to unstyled browsers (and search engine spiders) plus makes it easier on screen readers.
A good tip on font sizes, you should not be using exact sizes for text (for example, pt or px). Doing so means some browsers (IE) cannot enlarge the text for anyone who wishes to do so. If you use the unit 'em' they will be able to. When working with ems you will want to set the default to the same as 10px:
body {
font-size: 62.5%;
}
This will set 1em to be equal to 10px, and so 1.1em will be equal to 11px and so on.
Search Engine Friendliness
Take care with your text, especially on product detail pages. A few extra minutes spent getting the right keywords in place without it sounding like you're spamming will pay off in the long run. You also want to be giving each page (expecially product detail pages) unique page titles in the <title> tags and <h1> tags.
Optimising Images
This can make a difference too. Good quality product photos give a better impression for users. If you get them from the manufacturer you may be blessed with profession photography, but good results can be achieved with a digital camera, a daylight bulb (available from hardware stores or hobby shops) and a plain white backdrop. Simple and cheap to set up and you'll have decent looking photography. Furthermore you can play around with the levels, contrast and colours in photo packages such as Photoshop.
When saving images for use on your site there are some things you should consider too. You want your image to be set at 72dpi and usually no larger than 500-600 pixels wide (maybe around 100-200 pixels for thumbnails). If you have Photoshop you can use the "Save for Web" facility and play around with the compression with JPEGs and GIFs. The smaller you can get a file without losing quality the better.
Well there we have some tips for building a XHTML/CSS compliant store. If you have any of your own please do share them below.
discuss this topic to forum
