Tutorials

rounded-corners-imgRounded corners are as popular as ever with web designers and there are a multitude of ways that they can be created. In this tutorial I’m going to show you several methods to add rounded corners using both CSS2 and CSS3.

CSS3 methods require no additional markup or images whilst the CSS2 techniques require additional markup and images.
Whilst growing in popularity and support the CSS3 techniques they should still be used with caution in your websites. The CSS2 methods will give a much more consistent result across all major browsers in use today.

Read Full Article

10 ways to speed up a websiteThere is nothing more frustrating for a user than waiting an age for a web page to load. Even in today’s world of high speed broadband it is imperative that you build your web pages to load as fast as possible. None of your user’s want to sit waiting for a page to load. In this age when people want everything in an instance you can be sure they won’t return to your site if it doesn’t load fast.

Below are 10 ways in which you can dramatically speed up your website and keep user’s with the slowest of internet connections happy and keep them returning for more.

Read Full Article

You might have heard the terms graceful degradation and progressive enhancement whilst developing websites, but what exactly do they mean?

Essentially they are both different sides to the same coin, and are sometimes misunderstood,  but to put things simply the definitions of each term is:

Graceful Degradation

Graceful degradation, at its core, involves creating website functionality that takes advantage of the latest and greatest features in modern browsers. You then provide an alternative version of your functionality to “lesser” browsers and those poor people still unfortunate enough to be using them.

Progressive Enhancement

With progressive enhancement you start with a baseline of usable functionality. The functionality of the website is then built upon so the richness of the user experience is improved for those users that can handle them. With progressive enhancement, at a base level, all users should have a usable website.

Read Full Article

One of the most common questions amongst novice web designers and front end developers is when should an ID be used and when should a class be used.

To the CSS novice it looks like classes and IDs can be used in the same way as it is possible to assign the same CSS properties to both and apply them to change the way XHTML looks.

Read Full Article

As Microsoft have released Internet Explorer 8 you may habe noticed a small button called “compatibility mode” in the browser. By clicking this button it allows users to view your website in IE7 compatability mode within IE8. Now this might be a useful feature when the website owners either can’t be bothered or haven’t had the time to test and fix their site in IE8 but for those who have tested and fixed their site for IE8 it can cause problems.

It turns out that IE8 in compatibility mode isn’t the same as IE7 ( thanks Microsoft) so this effectively leads to another browser to test in, as if testing in IE6, IE7 and IE8 wasn’t already enough browsers from 1 company to test in.

There is a way to switch off this compatibility mode and ensure IE8 renders as IE8

Read Full Article

In this hour and a half presentation Nate Koechley from Yahoo covers professional frontend development from bare basics markup to the finer points of naming conventions. Its a great watch from professional frontend developers, to those who may be under-familiar with frontend development and business managers and owners who still aren’t convinced they need seperate front end developers in their company.

Have you ever been in a situation where you need to vertically centre text within an element? There is a very simple solution – use the “line-height” element of CSS to set the text’s height without distorting the font.

Read Full Article