Why good HTML is important HTML

Because there are many ways that a web page can be built up then it is important to ensure that what you are paying for is done to the highest possible standard.



We are currently seeing a lot of people looking for HTML rewrites of their pages because of the following reasons:

· When originally written it was made to look good in Internet Explorer 6 only, but the website no longer lines up correctly or looks like it was originally intended. This is because the newer browsers (like IE7, IE8, FireFox, Safari, and Google Chrome) use higher standards of HTML validation. So invalid code will now become far more obvious when people upgrade to the newer browsers. It used to be a case of Internet Explorer was the only widely used browser so other flavours didn’t need to be considered because the time taken to tailor the HTML for them was too expensive for the market share they owned.

· Search Engine Optimisation (SEO) works best on a website that separates out its content from its styling using properly formatted <div> layouts referencing .css style sheets. Using this method it is then possible to tailor content to an SEO strategy and give the website the best ongoing chance of climbing up the search results.



For this reason I wanted to take the opportunity to show how our engineers can take a design from Photoshop and use that to get a pixel perfect site template across all browsers that will validate for worldwide W3C (XHTML and CSS) standards correctly.

For this case study we had a flat Photoshop template of an internal system for Age Concern supplied to us from a design agency. Following is the steps taken to ensure that the template is given the best possible start in the project life cycle.


Step 1.

Initial screens are tied down in Photoshop or Image Ready. The page has been designed and the left hand space has been reserved for the site navigation. The style of the navigation buttons is yet undecided so the design has come to us with that area blank.









Step 2.

We use photoshop to set up the guide slice lines. You can at this point get Photoshop to chop up the image and generate an HTML table from it which can be used but is not good practice. We use the pixel perfect positioning coordinates for the DIV positioning and slice and save off the image areas as JPEGs.






Step 3.

Using Visual Studio to edit the .aspx and .css pages. Put in the main DIV sections for the page (headers, icons and content). I personally set the DIV backgrounds to contrasting colours to show the line-ups of it and the text alignments it contains.



Step 4.

The screen is then displayed in Safari, Internet Explorer 6, 7 and 8, Chrome, and FireFox. The style sheet is tweaked for the differences between them until they all match. As an example the first try of the above screen is shown below in Firefox and Internet Explorer 7.



The way FireFox shows it:


The way Internet Explorer 7 shows it:







Step 5.

The above 2 browsers show that there are major differences for instance the footer is in a different position. But the subtle differences like the gap between the maroon and dark blue sections in the header also need addressing before we have a template to move on with.
Once they are all lined up the same, we can put in the imagery and place holders. We can also set up the text colour, size and font.



Step 6.

Reset the DIV areas back to white.




When we get to this stage we can split up the page into an ASP.NET MasterPage, and enter the content placeholders that we are confident will work flawlessly across the browsers. This should also ensure that future browsers that conform to the W3C standards should not have problems with the site.