Deep Sarcasm

Welcome, fellow designers and designers-to-be. Now, although you may already be very good at web design and development, I will attempt to give you some information to make you faster and maybe better.

I myself don’t claim to be an excellent web designer, but I’ve done my share of designing as a freelancer and I wish I’d found these tips somewhere when I began my web design career. To that end, I have made this list for anyone who will read it.

Below you will find the list containing these tips, ranked in the order of usefulness - last being worst, though not all that bad by itself.

1. Tame the Firebug

It’s quite time consuming and pretty wasteful to check on your changes after making a modification or two in your source code - yet, most of you do it. Do you think you have to? If you do, you’d be wrong. There is a user-friendly, simple extension for Firefox called Firebug that can make your life much easier.

So, what exactly does Firebug do? It allows you to modify your HTML/CSS dynamically, watching the changes appear on your page as you type. It’s very intuitive a la Dreamweaver, albeit browser based and somewhat better.

2. Do Things Differently

Very often, I’m tempted to take inspiration to a whole new level and copy the layout of a website div for div. While is neither unethical nor illegal (unless you are copy-pasting or stealing images), it won’t be doing much for you as a designer, or for your website as a service. Let’s put it this way: how often will you buy a can of juice from a new brand, that looks almost exactly like the can of a well-known brand? Unless you confuse the two, chances are you’ll think of the new one as a cheap imitation of the original that lacks quality.

Although it is unlikely that this will happen on the web, though it depends on the popularity of the website that inspired you, chances are your website will not stand out from the crowd and end up being utterly average in terms of design. With web design, creativity and usability never go unrewarded.

3. Choose The Right Colors

Some color combinations don’t look good on certain operating systems due to differences in the gamma correction, others are just a pain for users to look at. If you want your website to be popular and considered well-designed, the colors you choose for it are crucial. The text should be very readable, and the colors shouldn’t hurt your eyes if you look at them too long. The example to the top left is an extreme case, which would probably never occur in reality, but some beginners do come quite close.

Thankfully, there are many resources out there to make taking care of this aspect a cinch for us designers, such as ColorSchemer and this collection.

4. Style Separately

Although it is fine for small snippets of CSS to appear within an HTML document, larger style sheets that are required on more than one page should be linked to as an external file. This enables the browser to cache it, and therefore save both your bandwidth and your visitors’ time. Similarly, most javascript code should also be linked to this way, using functions to enable usage within the HTML.

Creating and linking to such files is extremely easy, and explained very nicely in these CSS and JS tutorials.

5. Simplify For Size

Yes, this is the age of T1 and T3 lines, but there are still people out there with prehistoric 56kbps connections. Some webmasters actually choose to ignore this entire sector and go for huge pages, but no one ever calls them good webmasters. If you want to make a good design, make it good for all speeds and resolutions. That’s right, size here refers both to the size of your files and the resolution of your page.

If you want get the most out of your byte, run some tests first (Incidentally, Firebug also allows you to see how much time files take to download). If the results are not satisfactory, you can try the tips the analyzer gives you, or try some of these performance boosting methods.

As far as the resolution is concerned - you can either fix your width to something under 640 pixels or 800 pixels (depending on your target audience), or just cut all the bother and go with a fluid width page. The latter is usually preferred by designers due to its compatibility and the fact that it doesn’t appear to be a wafer thin page on higher resolutions.

6. Validation Is Valuable

Gone are the days when we had to check what our website looked like in every single browser. All we have to do nowadays is make sure that our pages validate, then go check them out in IE6, just to make sure. There are millions of websites on the internet that don’t even come close to validating, but still look fine to most people - however, web standards and browsers are continually changing and it pays to keep up with the times.

The W3C has two great tools at its disposal for web designers - The Markup (HTML, XML…) validator and the CSS validator. Both are highly recommended and you should try them out on your website ASAP, lest it may be broken for one of your coveted visitors. You can also check out their link checker, but it has more bearing on development than on design.