Google has announced they will start rewarding your site’s page speed. And in their Webmaster Tools they hint that the bar is set at ~1.4 seconds.

That’s a good enough reason to start thinking seriously about web optimisation. Dave Rupert’s work is probably the best place to start. He shows how he managed to reduce a page from 248.96KB to ~36KB!

Using commenting in code is a good way to describe sections of code or giving a visual structure, helping anyone else who sees or has to edit the code. I find that a good way to use commenting is to include a list of all colours used in the CSS at the top of the CSS file. This, combined with a short description of what the colour is and where it is used on the site, is a good way of not only helping others edit a file but also helps yourself during the CSS development stages.

/* ------------------------------------------------------
Colours:
#555 - grey (used on text)
#33281E - very dark grey (used for block headers)
#A64A23 - brown
#9C9A69 - green (used exclusively on the Beneficiation page)
#ECE2DE - light grey (used for third level navigation)
------------------------------------------------------- */

It can be a frustrating experience to edit someone else’s code as everyone does things differently so something as simple as helpful comments will go a long way to reducing that frustrating down the road.

It is common knowledge that this can be done on divs but many designers and developers probably don’t think of using it on input fields. Well, you can! By using the code below you can let the browser do the work while cutting down on the amount of data that the user downloads and also reducing the number of HTTP requests which improves performance.Just use the following segment of code in your CSS, adjusting the border radius as you see fit:

input { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

Browser Support

Currently this is only supported in the following major browsers:

• Firefox 2+
• Safari 3+
• Google Chrome
• Opera

-moz-border-radius is a proposal of mozilla so only works in Firefox and -webkit-border-radius is a proposal of webkit so will work in webkit browsers such as Chrome and Safari. Don’t forget to include the standard border-radius property for future browser support as this is the value that the final CSS3 spec is highly likely to use.

Unfortunately Internet Explorer 8 does not support rounded corners or border-radius of any kind. This was a chance that Microsoft had to gain back a tiny bit of credibility amongst the web design/development community but they couldn’t even implement this simple property.

Examples

You can see an example of this on this very page. Just view the comment form in any supported browser and you’ll see the input fields have rounded corners. This makes them easier on the eye and more friendly to the user, added encouragement for them to comment.

Available on both the Windows and Mac versions of Safari (preferences > advanced) is a tick box ‘Show Develop menu in menu bar’ which enables the development tools.  By default it is unticked but enabling it allows you to right-click on any element on a web page and select Inspect Element and bring up the Web Inspector much like you can do with the Firebug plugin for Firefox.

Above: the Web Inspector.

The Mac version  gives you this menu which as you can see allows you to perform some very handy tasks such as opening the page in another browser and spoofing the browser’s user agent.