10 signs of the professional HTML

February 9, 2009
Categories: Web Design

Boston web design geekTill this day we find new websites sliced by the rules of the end of the previous century. Table slicing, picture-backgrounds placed using IMG tag, using FONT tag, fixed font size and so on.

Hey web design gurus, you really need to drop this kind of archaisms….

The material I placed here is written in a really easy format so even a non-professional will understand this.

DIV style document structure

Once upon a time it was really easy to use tables for slicing HTML documents – block style just did not allow using some mocks. But once the CSS came to life table slicing became a symbol of retrogress.

Major disadvantages of table slicing:

1. Tons of repetitive code
2. Bad terrible code readability
3. Serious problems displaying the page on the mobile devices
4. Highly restricted page-load order

Tables are included in HTML only for displaying table data, the document structure has to be displayed using DIV blocks. No exceptions.

Simple example of table slicing :

<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td class="header" colspan="2">HEADER!</td></tr><tr><td class="content">CONTENT!</td><td class="sidebar">SIDEBAR!</td></tr><tr><td class="footer" colspan="2">FOOTER!</td></tr>

The same example sliced with DIV blocks:

<div id="header">HEADER!</div><div id="wrapper"><div id="content">CONTENT!</div><div id="sidebar">SIDEBAR!</div></div>

<div id="footer">FOOTER!</div></table>

It is easy to see the difference in the amount of code and It’s readability.

In the last example it doesn’t matter where the sidebar is located (right or left): one way or the other the content part will load first.

Semantics of the pages

This is important for any HTML document in general and especially for the content part. Using the correct tags, titles, paragraphs, (check)lists is equally importaing for search engine indexation and in case if the page is looked at from a mobile device of non CSS browser.
Most of the professional web design firms will make sure your content is accurate and linked correctly as well. For example if you crate special landing pages for different destinations make sure they respond to the correct values:

Boston Web Design or  Washington Conversational Photographers

Minimalistic coding

Simpler code is a sign of professionalism. (Please be aware: I’m talking about code functionality and code flexibility). I can write a whole article on this topic but here I will only demonstrate a simple example :

<div id="category"><h1 class=”category-header”>Topics</h1><p class=”left”>Topic cloud</p><ul class=”category-list”><li><a class=”category-link”  href=”#”>construction</a></li><li><a class=”category-link” href=”#”>plumbing</a></li><li><a class=”category-link” href=”#”>oil pumping</a></li></ul></div>

Things in bold are redundant. <h1>, <p>, <ul> and <a> in this block are used for look and feel customization using CSS. But this is a bad code, it was written by someone who is not very familiar with CSS.

You can specify the style like this:

.category-link {properties}

And here is the better HTML version:

[sourcecode language='html']


>Topics
>Topic cloud




[/sourcecode] The style will look like this:
#category li a {properties}</div>

The change does not seem very important but it will boost you page load speed and optimize the code for future changes.

Clear names of structural blocks

Some people think of this as a good practice but I believe that giving proper and clead names to structure blocks is essential in modern coding. Most of the sites have these four parts :

1. Header
2. Content
3. Sidebar
4. Footer

These Parts respond to four parts of the website page. Since this kind of layout was so common HTML v5 officially announced implementation of the following tags: <header>, <footer> and many others. Now since we have some tibe befor HTML v5 will be required the following structure is considered to be professional:

<div id="header“>Head</div><div id=”wrapper“><div id=”content”>Text</div><div id=”sidebar”>Side_content</div></div><div id=”footer“>foot_note</div>

Comments after closing block tags

Sometimes you can see the following elements of the page code:

</div></div></div>

Even if there are spaces in between it’s really hard to tell which div is closing and where. Even the smallest changes (especially editing the CMS settings or design slicing) require this kind of knowledge.

The simple solution: place a text comment near each div notifying of closing of a certain block:

</div></div> <!-- /sidebar --></div> <!-- /wrapper -->

Correct use of float-blocks

Block-style of slicing has many advantages, but there are a few disadvantages as well.The main disadvantage is about the floating of the elements around them. Such blocks usually have a preference (float: left or float: right). If blocks like that are different in the height then the following element in the HTML starts to float around one of the blocks. For the correct anti-floating this logic is the most common:

<div id="content"> <!-- parent block -->[...]<div style=”float:left”>some content</div><div style=”float:left”>another content</div><div style=”clear:both”></div> <!– «reset block –>[...]</div> <!– /content –>

In the other words we place another ‘resetting’ block-style element that does not allow moving the following blocks (marked with bold).

This approach has only one chance for existence:in case if it is not possible to set width of the parent block.

In case if it is possible to set the width of the parent’s block then it is more correct to skip the resetting block but for the parent block set the following CSS-parameter:

#content {width:[width]; overflow:hidden}

There are other techniques such as using pseudo-class :after or height:0 but they are much less convenient and much uglier in my opinion.

Use of background pictures

You need to use background bpictures instead of regular pictures for the correct display of images in the mobile devices. Example: Pictures that exist in the header are the background of the header blocks .

No background picture – show background color

Sometimes the website assumes the background color. Let’s assume there is a blue block on the page and lets assume that there are links that are going over the block. If the links are in the white color. If the image is not going to lad then the links will not be visible.

Simplifying intereactive element

Using the mouseover effect became very common use of making the website more interactive. Here is a hint. You can use one image instead of four by implementing thre following logic. Please see the image below:

pic

So on ‘mouseover’ you can move the picture 50% down to animate the folder. Using this techique allows you to unload sthe server and make the page load faster.

Use of CSS hacks

This is a controvercial subject. Sometimes you cant do it without hacks… Especialluy in Internet Explorer 6 (god_send) but I’m convinced that you can just keep connecting separate CSS files.

Use this as a reference:

<!--[if lte IE 6]><link rel=”stylesheet” type=”text/css” href=”[адрес]/style_for_ie6.css”/><![endif]–><!–[if lte IE 7]><link rel=”stylesheet” type=”text/css” href=”[адрес]/style_for_ie7.css”/><![endif]–>

I’m sure this list is far from being complete. In my opinion these are the most important elements.

Comments

Contact Us