In this project I will be taking apart the website HeidiWoodhead.com and I shall rebuild it using valid HTML and CSS. At each stage the code will be checked to make sure it conforms to modern standards.
The site as it stands contains far too much redundant code and that has implications such as
- files sizes can be unnecessarily large taking up much space, important if you have limited storage on your hosting account
- can and will fail validation, valid code makes it easier for browsers to display as it was intended.
This is not the fault of the author of the site, it was built using software called Mr Site and like many other authoring programs, the code can be too complicated.
So before we start on the coding of the web pages, we need some statistics so we have some thing to compare to after we complete the project.
Page 1 total size: 19.69Kb
Page 2 total size: 37.22Kb
Page 3 total size: 18.39Kb
Page 4 total size: 94.85Kb
Page 5 total size: 14.54Kb
There are several directories containing CSS files, images and javascript. I am sure we can slim them down as well.
There are 3 CSS files that are used and one that depends on which browser is currently looking at the site, with properly coded CSS this is not really required. Also, CSS is coded directly in the HTML code, for example in SPAN and DIV commands. For example...
<p><span style="font-family: Book Antiqua;"><font size="6"><span style="font-family: Book Antiqua;"><span style="color: rgb(15, 16, 24);"><br />H</span></span></font><font size="6"><span style="font-family: Book Antiqua;">eidi Woodhead<br /><font size="3"><br />Traductions et interprétations sérieuses en anglais<br /><br /><font size="4">This page tells you about the services I offer, my fields of expertise, my qualifications, my experience and how I work.<br /></font></font><br /></span></font> </span> </p>
The SPAN command is used to select font, then FONT command, then SPAN command again and again. All to produce a capital 'H' in a different style to the text that follows it. What we need to aim for is a single HTML command such as 'H2' to simplify things, it's good for search engine optimization as well.
The current CSS standard allows embedded CSS but is to be phased out. The preferred method is that all CSS commands are contained in an external file.
There are 12 images in total of which 5 are banners, one for each page. We can use a single header by layering text on top using CSS and HTML thus reducing the count to just 1. The 5 images in total account for 215.2Kb. Even with out optomizing the image we can reduce that to 41.9Kb. We can save storage space but also the browser will remember the banner image and therefore will load it quicker on each page.
These are some of the issues we will be addressing in the next stage of the project. Not just cutting down on file size and unrequired code but to ensure a standard look and feel across all pages.
Permanant Link | Tag with Del.icio.us | Category : Projects
Comments for this posting have now been closed.
if you liked this article then subscribe to the RSS feed to keep up to date automaticly.
More recent articles in this category
Subscribe to the RSS feedkeep up to date with your RSS reader
My name is Bob Toovey, a UK expat living in south west France. I have worked in IT for over 20 years. I hope to give you helpful advice about using your computer and more whether you run a business or just enjoying expat life.
