Taking the top 5 website’s from Alexa:

 
Approximate byte size per 2 characters.

For every element that would be converted to a <d>, on average 5.93 bytes are saved. Considering that a typically website has 127 <div> elements, taking from the average of the top 5 website’s, this will create a saving of 0.753Kb per web page. That might not seem like a lot but added together across all the website’s imagine how much time it would save.

Of course this is just pie in the sky, but if the W3C thought of shrinking the HTML tags we use, website’s would load faster, and every millisecond counts. Hopefully this will cause some debate on why HTML elements are longer than they need to be.

I am only suggesting the HTML tags div and span since they convey no semantical meaning, unlike elements like p.

This will be a multi-part tutorial over the next couple of weeks, if you haven’t already please subscribe to my feed to make sure you stay up to date. If you don’t use a feed reader you could always get the updates delivered to you via email.

Stage 1 – The Subject

Before your start to create a website you need to have a reason or a subject for the site. There are many reasons to create a website, typically it is to make money or to advertise your business. However lots of people just like to share information with the web.

Once you have decided on the subject, you need to decide on what form your site is going to be in. These typically consist of 3main types an online diary (blog), a site to advertise a given product or company and finally a web application (Gmail). Each can vary enormously with complexity, especially a web application.

Stage 2 – Design

When you have an idea of the subject and the form, it would be a good idea to mock up what sort of content you want to show. I generally do this through brainstorming ideas and layouts on a piece of paper, see opposite. Take a while to think about this stage it is a lot easier to think of an idea and successfully implement it now, rather than when the website it finished. Make sure you are covering everything you want to say, and everything you want your user to see. Don’t forget to think about whether you want to advertise on your site.

The next part of designing the site is to come up with a wireframe of your site’s layout.

Wireframes are a basic visual guide used in web design to suggest the layout of fundamental elements in the interface. Because of this they must be completed before any artwork is developed. When completed correctly they will provide a visual reference upon which to structure each page.
Wikipedia – Website wireframe

On top of the wireframe you can now start the design process. Using a suitable graphical program like Adobe Photoshop,  Microsoft Expression or a range of open source alternatives that I have listed. You can slowly start applying your design over your wireframe, making sure you have designed all the suitable components that you listed at the sketching stage.

If you get stuck there are lots of design inspiration available to you. You can check out my scrapbook which provides sites which are interesting and designed well. Or you can browse website’s such as CSS beauty and Smashing Magazine for lots of inspiration.

Designing your website this way will minimise problems further down the line. Just like the Waterfall method successful planning leads to an easy implementation.

For the next tutorial I will cover converting your  designing into a layout through the use of CSS and HTML. I will be going over the most efficient way to take blocks of images and arrange them in CSS, and provide guidelines on stopping HTML bloat.

If you thought that this first tutorial was too simple, then please stay tuned for further tutorials where I will talk more about the difficulties in server side languages, like PHP and ASP, client side interaction through JavaScript and common shortcuts.

I have had a lot of feedback over one of my first ever posts, Wordpress: Sliding Doors details how you can convert wp_list_categories into a subtle HTML markup so that we can use the sliding doors principle. However the method I described in my original post no longer works. After a lot of thinking and head scratching I have discovered a new, if not better, way to achieve the same results.

By correctly formatting the wp_list_categories output, we can explode the output into an array of the categories. We can then split each string and add our HTML code in before and after the category name.

   1: <ul class="menu">

   2:     <li <?php if(is_home()) echo ‘class="selected"’; ?>><a href="/"><span>Home</span></a></li>

   3:     <?php

   4:         // get all the categories

   5:         $cats = explode(‘<br />’, wp_list_categories(‘echo=0&show_count=0&title_li=&style=none&exclude=1′));

   6:         // remove the last value

   7:         array_pop($cats);

   8:         foreach ($cats as $cat)

   9:         {

  10:             // what it comes through as

  11:             // <a href="http://dtsn.co.uk/category/uncategorized/" title="View all posts filed under Uncategorized">Uncategorized</a><li>

  12:             // get the position of the first >

  13:             $beforeName = strpos($cat, ‘>’)+1;

  14:             $afterName = strpos($cat, ‘</a>’);

  15:             $length = $afterName - $beforeName;

  16:             $name = substr($cat, $beforeName, $length);

  17:  

  18:             if ($beforeName > 0) {

  19:                 $class =”;

  20:                 // are we on this page?

  21:                 if (is_category($name)) {

  22:                     $class=‘ class="selected"’;

  23:                 }

  24:                 

  25:                 // add the opening span tag behind the opening anchor tag

  26:                 echo ‘<li’ . $class . ‘>’ . substr($cat, 0, $beforeName) . ‘<span>’ . $name . ‘</span></a></li>’;

  27:             }

  28:         }

  29:     ?>

  30: </ul>

If you have any problems implementing this please leave a comment below.

Sorry for my absence over the past two weeks, this website ground to a halt while we got fav.or.it up and running. Including designing the fav.or.it blog, with a customised Wordpress theme with full author support, if you haven’t checked it out you should.

Over the past couple of weeks we have been working hard getting all the bugs in fav.or.it fixed ready for our launch yesterday evening (17:00 GMT). fav.or.it is really coming together and shaping up to what the original aim was. It’s full of lots of random items and articles which you wouldn’t find elsewhere. As for the fav.or.it blog, the team at fav.or.it are going to be much more actively engaged with the site. Which will include me regularly splitting my posting between fav.or.it and dtsn. Hopefully I might be able to explain how some of the more interesting features of fav.or.it work.

I know your itching to go and download Firefox 3 with all it’s new fantastic features such as improved CSS compatibility and more efficient memory handling. However the readiness of the key extensions is a serious point to think about. Let alone the fact that over the coming months the majority of visitors to your website will still be using Firefox 2. So what can we do about this. Luckily Firebug and Web Developer both have beta version out which are compatible with Firefox 3. However the idle solution is to still develop using Firefox 2, but to install Firefox 3 portable edition. Which will run side by side with Firefox 2.

What are you going to do? Go the whole hog and ditch Firefox 2, or maybe meet it halfway with Firefox portable edition.

Specifically Thierry has performed some profiling tests on some of the most commonly used prototype functions and has come up with a basic set of rules:

• Beware of $$ and event binding
• Beware of other Prototype methods (reports a 40 times speed different between innerHTML and element.update)
• Write to innerHTML instead of using document.createElement
• Use for loops instead of for in loops
• Use Array.join instead of += on a string
• Cache variables and functions
• Limit the usage of eval
• Limit the usage of Try Catch statements
• When manipulating the DOM copy the element out of DOM change it and stick it back in

Taken from the Ajaxian interpretation.

However these all look good but practically one of prototypes main aims is to reduce the amount of cross browser support a lot of JavaScript functions have. A method such as element.update() may takes 40 times long than element.innerHTML but it doesn’t have all the bugs associated with innerHTML.