Web Design Efficiency

A buzzword I’ve see being thrown around a lot is PSD 2 DWT(Dreamweaver) or PSD 2 HTML. Technically this means creating a web design from a photoshop document but it is used generally enough to imply the act of forming a website from a static image template. Regardless of whether you decide to use DIV’s or Tables, (I cover that topic in “Tables for Web Design”) however you wish to layout your designs you need to plan ahead for the most optimal way for a web design’s code to flow with the least number of images and the smallest file size possible.

While the general public’s Internet speed is on the rise the allowable overall file size of your website increases. We don’t have to worry anymore about dial-up users accessing our websites so what’s there to worry about right? Actually, this has an counter reaction as well which is as user’s Internet speeds increase, their patience decreases. Therefore your website must load fast if you want people to wait for your website to load. Mind you, we’re talking about a matter of seconds but that’s all that it takes to lose visitors in today’s web.

HTTP Requests are a primary concern today as your browser spends about as much time performing a request as it does actually downloading a file. The name of the game is not only file size, it’s also the number of files you use. This gives you all the more reason to carefully plan out your PSD 2 HTML methodology; just because something works doesn’t mean that’s the best way it can be done. In fact I was surprised when I got into the web dev field that in general the person who designs the website PSD doesn’t code the final design.

Let us use my writing blog’s theme as an example.(Click to zoom)

Some elements of my theme were done really well and efficiently.

• The design elements add up to only about 30kb total.
• I’m only using 6 design images total. Not including approximately 1 image per content entry.
• I use image tiling for the main theme, and background colors to make up the background. This allows for images with a small width to be used in conjunction with html rendering to make a simple and elegant lightweight design solution.

There were other things which could have been improved upon.

• My header image “Skew Your Mind” has no good reason to be an image, html could have rendered that just fine with only a little aliasing concern. This would reduce the image count to 5.
• Using image sprites I could have combined my list sprites into one image, reducing the total image count to 4. In fact I could have done that with my background tiling as well, reducing the total image count to 3. I may have even been able to replace my list sprites with colored text characters to reduce my total image count to just 2! Don’t believe me? Even google does it in just two images using sprites.

As you can see even the simplest of themes always have room for improvement. There are many solutions you should look into when coding your next web design theme and more emerge as the web evolves. Web Sprites are a huge help in reducing the number of http requests needed. Use less stylesheets, consider combining your stylesheets into one for less HTTP requests. With CSS3 we are beginning to see custom fonts being used to render icons instead of using image sprites. Play with file size as you export images, there are many formats and compression types to experiment with for the best results. Sometimes, using no images at all and using CSS is the best solution.

The rest is just logic, I can’t lay out a ground foundation for how every web design should be coded. Just remember the web is a two dimensional grid and you need to treat it like one. Think about the most efficient way to create a design while keeping your code elegant and simple.

Posted by Joe L. Wroten on July 29, 2010 at 02:56 pm EST

Copyright © Antharia. All rights reserved.
No part of this blog may be reproduced without prior written permission.