Website design 101: Learning techniques from other websites

Designing a website can be difficult - especially if it's your first time. In this, the first in a series of website design tips and tricks, we're going to look at how to steal the best features of any website and incorporate them into your own design.

When I say "steal", I don't mean hotlinking (linking to images or media directly from another server) or anything else quite so nefarious; I mean we're going to learn a method to see how other designers achieved a certain look and feel, so you can make use of it on your own website - even if you don't know much about CSS or HTML...

In order to pull of this stunt, you're going to need the Firefox browser and the Firebug add-on. Both are completely free to download and use - there is also a chromebug available for the chrome browser if your prefer to use that.

Once Firebug has been installed onto your Firefox browser you will see a tiny bug icon in the bottom right of the browser window. Click on this to bring up the Firebug console. This console can be used for all sorts of juicy development and design goodness, but for now what we are interested in is it's ability to inspect and reveal all the HTML and CSS information that has gone into any webpage element of any website.

Here's where the learning part comes in. If there's a website you really like the look of you can browse to it in Firefox, with the Firebug console activated. Once on the page, click the inspect element icon shown at the top left of the console (it's a blue arrow above a blue rectangle), and then click your mouse/pointer onto the element in question.

Firebug will display the HTML that's responsible for that element in the main window below the tab menu, but, more importantly, it also displays all the style and CSS information in a seperate window on the right of the console. This is pure gold for you because you can see exactly how they achieved their effect. Perhaps they used a background image, or some fancy CSS trick, perhaps you wanted to see which font they used, or how the button outline changed color when a mouse hovered over it. Whatever you want to know you can find out by using this method.

The point of the above exercise is more to learn new techniques and reveal design secrets. Don't use it as a means to isolate and copy images or download entire code files as this could be in breach of certain laws and is generally considered bad form. However, there's nothing stopping you using the same CSS tricks or techniques to imitate what they've done. In this way you can take the best design and make it your own - without having to pay thousands of dollars or become an HTML or CSS guru.