The solution would be to use a server-side language, like PHP, to make it possible to create dynamic CSS files without having to resort to using JavaScript. Finally you can use dynamic CSS that works in all browser configurations.

First we will take a look at how this will work, and then we will go straight into two examples. We'll put together a simple grid-based generated by certain variables, and then we will create a script to modify the CSS based on the time of day.

How It Works

There are two crucial parts to ensuring that your dynamic CSS file works correctly.

• Make sure that your dynamic CSS filename ends with a .php extension.
• Insert the following line at the top of your CSS file, right after <?php

  header('content-type: text/css');

  This tells the browser to use the output of the script like if it was CSS, instead of the default HTML.

For this example we will call our dynamic CSS file css.php. Let's start out with something simple. In the file referencing our dynamic stylesheet, add the following line of HTML in the head section, like you would do with a normal CSS file.

<link rel="stylesheet" href="css.php" type="text/css" media="screen" />

Now let's get started with some simple PHP!

<?php
header('content-type: text/css');
 
$contentWidth = 500;
$bgColour = '#C0FFEE';
$textColour = '#DECAFF';
?>

Here we've set some variables that will hold the values for the width of our content section, the background colour, and the text colour. That's great, but how do we integrate that with our CSS?

body {
    background: <?php echo $bgColor; ?>;
    color: <?php echo $textColour; ?>;
}
 
#content {
    width: <?php echo $contentWidth; ?>px;
}

As you can see, we simply echo out the values where we need them, appending any units if needed. Let's look at slightly more advanced example.

#content {
    width: <?php echo $contentWidth * $contentHeight + 2; ?>px;
    height: <?php echo $contentHeight; ?>px;
}

Here you can see that we can do things such as making the width of the content box the value of $contentWidth times the height of the box plus two.

Now let's take a look at some more examples.

Your Own Grid Layout

You can use these techniques for dynamic CSS to make an easy-to-manage grid-based layout, with each column automatically resizing with the change of one value. Let's get started, shall we?

<?php
// Tell the browser that this is supposed to be CSS
header('content-type: text/css');
 
$mainWidth = 1000;
$spacing = 20;
 
$mainBg = '#FF0000';
$sidebar1bg = '#0000FF';
$contentBg = '#00FF00';
$sidebar2bg = '#C0FFEE';
 
$sidebar1width = ($mainWidth - ($spacing * 2)) * 0.2;
$sidebar2width = ($mainWidth - ($spacing * 2)) * 0.2;
$contentWidth  = ($mainWidth - ($spacing * 2)) * 0.6;
 
?>

These are the variables for a simple three-column layout. The content area takes up 60% of the width, and each sidebar 20%. The spacing in between each column is set and included in each calculation.

And now for the CSS part:

#wrapper {
	width: <?php echo $mainWidth; ?>px;
	background: <?php echo $mainBg; ?>;
	overflow: hidden;
}
 
#sidebar1 {
	width: <?php echo $sidebar2width; ?>px;
	margin-right: <?php echo $spacing; ?>px;
	float: left;
	background: <?php echo $sidebar1bg; ?>;
}
 
#content {
	width: <?php echo $contentWidth; ?>px;
	margin-right: <?php echo $spacing; ?>px;
	float: left;
	border: 1px solid #000 inside;
	background: <?php echo $contentBg; ?>;
}
 
#sidebar2 {
	width: <?php echo $sidebar2width; ?>px;
	float: left;
	background: <?php echo $sidebar1bg; ?>;
}

So try that out, and try changing the values of $mainWidth and $spacing, to see what happens, and to make sure that there are no bugs.

Time-Sensitive CSS

And now for a completely different example? How about having different styles for different times of day? That is made easy using PHP with CSS, and with PHP's built-in date/time functions.

<?php
header('content-type: text/css');
 
date_default_timezone_set("America/Vancouver");
$now = date('G');
 
if ($now < 12) {
    $bg = '#FFFFFF';
} else {
    $bg = '#000000';
}
?>
 
body {
    background: <?php echo $bg; ?>;
}

In this very simple example, we first set the default timezone. And then we use the date() function to return the current hour, in a 24-hour format.

If it is before 12:00, the background colour is set to white. If it is currently 12:00 or later in the day, a black background is displayed.

Couldn't get any simpler than that!

There are so many different possible applications for dynamic CSS. Can you think of any other ways to use this?

If you're developing your own non-WordPress site, you might want to take a look at an older post here at FWebDe called Hack Your Own Site, which will teach you how to test certain exploits on your site, and how to fix them.

Protect Your Database Login Details

If an attacker gets the login details to access to your WordPress database, they can add, delete or modify anything they want.

How will they get that information? Probably through the file that contains it, the wp-config.php file. If for any reason PHP fails on your server and someone accesses wp-config.php, the entire contents of the file will be displayed, including your MySQL database login details.

Fortunately, WordPress allows you to move your wp-config.php one directory level above your WordPress install directory. So if you have WordPress installed at the root of your website, you can move your wp-config.php outside of public_html, where it cannot be accessed by anyone.

Get Your File Permissions Right

I'm not going to get into a huge explanation of how file permissions work, but it is pretty much to say who is allowed to access certain files, and what they can do with them.

Generally, you want all of your directories' permissions set to 755. Permissions for files should be set to 644. If you want to edit certain files with the WordPress theme editor, set those to 666. You should avoid using 777 because that gives access to read, write and execute the file, which means that anyone can do whatever they want with them.

Disable New User Registration

Unless you are building a large community site, you should make sure that visitors cannot create their own accounts at your WordPress blog. The WordPress user registration system has been exploited before, with an attacker registering at your blog, exploiting a vulnerability to elevate their role to "Administrator", while using some JavaScript in your WordPress administration area to hide the fact that that user even exists.

Preventing this is simple. From your WordPress dashboard, click on "settings". Make sure that "Anyone can register" is left unchecked.

Prevent the Public From Browsing Your Directories

You know how if you browse to a directory without an index.html (or similar) file, you'll see a list of all the files contained in that directory? Well, an attacker could browse through your directories, and get a lot of information. For example, they could find out what plugins you have installed, and exploit any vulnerabilities in those plugins.

Fixing this vulnerability is quite simple, actually. Simply insert a blank index.html file into your wp-content/plugins directory, and any other directory you want to protect the public from accessing.

Do Not Use the Default Admin Account

You probably know that by default, when you install WordPress, the default administrator's username is "admin". This gives an advantage to attackers because they will already know your username, and will only need to find out your password.

You can fix this vulnerability by going to the "Users" section of your WordPress admin and creating a new user for yourself. Make sure you set your role to "Administrator". Log out of WordPress and log back in with your new username. Now you can simply delete the previous default admin account. If you already have posts written, you can choose to attribute all posts to your new user.

Update WordPress Regularly

WordPress developers are working constantly to improve the security of the blogging platform, and the latest security updates will always be in the newest release. Security vulnerabilities are often found in older versions of WordPress, and if you don't upgrade to a newer version of WordPress that has been secured, that vulnerability will probably be exploited on your blog.

Use a Strong Password

I'm sure you've heard this many times before, but it is crucial to have a strong password, that cannot simply be guessed by somebody trying to access your site. You may already know this, so I'll keep it short:

Have a long password mixed types of characters (letters, numbers, symbols, etc.), but that is still memorable by you and by you only. Don't make it anything that an attacker could find about you with a quick Google search, such as your phone number or your date of birth.

And finally, if you can't seem to remember your password, do not write it down or store it in a plain text file called passwords.txt. Instead, use an encrypted password manager such as KeePass, or KeePassX.

Make Backups Frequently

Okay, none of the security tips listed above are 100% foolproof, and someone determined to crack into your site will eventually find a way to get in. So if or when that happens, you need to be prepared for that situation.

If you care about the content on your site, you should make sure that you make backups often. That way if your site is compromised, you can return back to normal with minimal loss of content. Another advantage of keeping backups is that after your site is compromised, you can look over a previous version to determine how they got in, and how you can prevent that from happening again.

Make sure that you backup the files and the database of your WordPress installation, and always keep multiple copies in separate places. An excellent guide to backing up your WordPress database can be found at the WordPress Codex.

So do you follow any of these security practices? Do you have any other good WordPress security tips that you'd like to share? And do you feel like you backup your WordPress installation as often as you preobably should?

Be sure to leave your answers in the comments.

One very common complaint from new users to Ubuntu is the ugly brown default theme. It seems to give them a bad first impression of the operating system, based on how it looks at first. But now they've come up with a completely new design, which makes the brown look like a beautiful photo of autumn foliage.

Okay, I shouldn't be so harsh, as it is really not bad at all. In fact I think it's quite nice, and might just need a bit of customization and some time to get used to it to have a truly superb theme.

Let's start out with a screenshot, to get an idea of what we're dealing with.

There is also a lighter version of this theme, which you'll find a screenshot for on the Ubuntu Wiki page. I personally prefer the darker theme, and will focus on that one for today. Not that it matters, though.

First Impressions

At a first glance, the first thing that I notice is how the overall design has some noticeable influence from Mac OS X. The default wallpaper somewhat resembles the Mac Aurora Borealis wallpaper, the icons on the top panel look almost exactly like the OS X ones. And I think you can tell what the placement of the window buttons looks like.

Overall, the look and style of this is not bad. Here are some general things that I noticed when I first saw the theme.

Colours

I think that the new colour scheme of Ubuntu is a great improvement of the old one, with the lighter brown and nice purple instead of the old, ugly brown and orange.

I really prefer the lighter brown used in this version over the darker browns used in previous default themes for Ubuntu. It gives sort of a "dust" look for the windows,

If I were to change one thing about the colours of this new design for Ubuntu, it would be to make the purple in the default wallpaper a bit more subtle. Right now the purple is a bit overwhelming, and might take some time to get used to. Of course, I, and most people, would probably change to a different wallpaper soon after installing Ubuntu.

Position of Window Buttons

Probably the biggest change in the redesign of Ubuntu is the placement of the window buttons. Previously they were on the right side of the window and, as you can see, they have now been moved to the left.

Here's the strange part: The buttons are on the left side of the title bar, but they are still in the same order as the previous default theme. The order of the buttons is the same as in Windows, but they are on the same side of the window as in Mac OS X.

Maybe it's just to be fair, so that new users coming from both operating systems will both have a little surprise.

Tooltips

A truly fantastic little detail that is often overlooked in the design of most operating systems is the way that tooltips are styled. They are often quite boring, mainly because they are only ever seen by the user when they are hovering over an object that has a tooltip. After all, design is really in the details.

The tooltip in this design shows good use of transparency, rounded corners, and a nice border, to top it all off. It is the little details like these that make a design really stand out from the rest. I just hope that all tooltips will look like this, and not only the ones for the "Places" menu.

The Idea of "Light"

One of the aims of the new design is to give the idea of lightness. It is "lightware" which is meant to be the opposite of bloated software, and it is trying to be reflected in the design of the operating system.

From the Ubuntu Wiki:

We're drawn to Light because it denotes both warmth and clarity, and intrigued by the idea that "light" is a good value in software. Good software is "light" in the sense that it uses your resources efficiently, runs quickly, and can easily be reshaped as needed. Ubuntu represents a break with the bloatware of proprietary operating systems and an opportunity to delight to those who use computers for work and play. More and more of our communications are powered by light, and in future, our processing power will depend on our ability to work with light, too.

The New Logo

Not only is the default theme of Ubuntu updated with a new look, so is the Ubuntu logo. It seems that just about everything related to Ubuntu is being rebranded.

The logo redesign is supposed to reflect the precision and engineering of Ubuntu. It is great to see that the "circle of friends" part of the logo hasn't been removed, as I have always thought that it looked very nice, and conveyed the meaning of Ubuntu and open source software very well.

Is It Really That Important?

The rebranding of Ubuntu has included many changes in the look of the operating system. Without worrying about whether the changes are good are bad, are they really necessary?

On one hand, the user's first impression of the brand of Ubuntu can be very important. The first thing that the user sees when booting up their system can really be the deciding factor in whether they like it or not, and can have a big effect on the overall experience of Ubuntu.

On the other hand, the effort and resources involved in this change of branding could be better spent in other areas. For example, many users have complained about hardware compatibility issues. The time and effort put into a rebranding might be better placed into improving hardware compatibility, improving performance, fixing bugs, and just generally improving other aspects of Ubuntu.

Also, many users will know that it is not the look of the operating system that matters, but everything that is going on underneath. Most users will also probably change to a custom theme anyway, to personalize the look of their computer.

Conclusion

Overall, I think that this redesign is a huge step for Ubuntu, but in the wrong direction. However, people's opinions differ greatly. You'll find that the opinion of the people at Slashdot to be very different from that of the Ubuntu Forums.

What do you think of the new design? Do you love it, or do you hate it? Would this alone put you off of installing Ubuntu? And if not, would you changing the theme be the first thing that you would do?

SVG is a vector graphics format, which means that instead of images being created with individual pixels as in raster graphics (PNG, JPEG, etc.), the images are made up of individual shapes and lines, put together to make the complete image.

Why Use SVG?

Why is SVG so great? Here are a few of the advantages of using Scalable Vector Graphics.

• SVG images can be resized infinitely without loss of quality.
• SVG files can be read (and written) using many different tools, from advanced vector graphics editors to simple text editors.
• SVG can be styled with CSS, allowing easy changes to an image.
• You can use scripts to modify SVG images in the browser, to create dynamic and interactive applications.
• SVG is an open standard. That means that you can create your own application using it, without having to pay any licensing fees.

The only disadvantage I see with SVG is the lack of support in Internet Explorer. But we won't worry about that for today, we'll just look at the great things that SVG can do!

How Can I Use SVG?

Probably the easiest way to create awesome SVG graphics is using a vector graphics editor. I personally like Inkscape.

Another way to get started with SVG is to try hand-coding it. The syntax is based on XML, so if you know HTML, it won't be that hard to figure it out. Let's take a look at a very simple example.

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
 
    <rect width="300" height="250" x="20" y="20" fill="#FF0000" stroke-width="1" stroke="#000" />
 
</svg>

At the top, you'll see a document type declaration, like what you would find in an HTML file. This is to tell the browser that this is displaying SVG.

Next there's the svg opening tag. Just like the html tag in HTML files, the svg tag tells the browser where the SVG code starts and ends. You can see that this tag is closed at the end.

In the middle there, you can see an element called rect. This is the element used to draw a rectangle. You can see that it, like elements in HTML, can take various attributes.

• width, height: The size of the rectangle
• x, y: The position of the rectangle
• fill: The colour of the rectangle.
• stroke-width: The width of the rectangle's border, or stroke
• stroke: The colour of the rectangle's border or stroke

The above code, viewed in a good web browser (I used Firefox), should display something like this:

I'm sure that you can image the many possibilities with SVG, and the way that even complex images can be created using only your keyboard. This has endless possibilities, such as using a server side language, such as PHP, to generate images on-the-fly, for viewing by your users!
9
Because SVG is a standard for XML set by the W3C, you can even validate your code to make sure that you did everything right. Just use the W3C Validator, and the SVG document type declaration will let them know how to validate your code.

So you can run the code in the example above in the W3C Validator, and as you can see, it validates with no errors! From that example, you can see, to code in valid SVG, because it is based on XML, you just need to follow similar guidelines for marking up XHTML files.

Conclusion

SVG is a truly fantastic XML standard for creating images. You can check out various SVG tutorials on the internet, and try out different techniques to see what you can come up with!

Do you ever use SVG for creating graphics? Or do you have any ideas of where or how SVG can be implemented? I'd love to hear, so be sure to leave a comment on this post.

What is the reason for the "minimalist" style's popularity? It's easy. Anyone can slap together a quick design and call it "minimalist". It could technically still be called minimalism, but it's worthless if it's not done right.

It's Not Memorable

Let's get this out of the way first. It's almost impossible to brand a minimalist website. Extremely simple user interfaces have already been taken by Apple. They've established themselves as the company with the minimalist designs. And nobody's going to take that from them.

And because minimalism is so simple, there are much fewer possibilities than with other styles. Of course, the good minimalist designs will have some way of standing out from the crowd, but most of them look exactly the same.

Minimalism means removing the unnecessary elements of a design, but it's those unnecessary elements that set one design apart from another.

The best minimalist designs are for websites that do one thing and that do it well. Let's use Google as an example. Back when it did only one thing, it was, and still is, a simple search box on the page. The design only worked because searching was the only thing anyone ever used the site for.

It Won't Work For Everything

The one place on the internet where you see minimalism the most is in designers' portfolios. Minimalist designs are most appreciated by creative types. They're usually building their own websites for themselves, so they can make it look the way they like it.

That designer probably wouldn't use minimalism in the design for, say a site that sells games for ages 5 to 10. They would always need to consider the audience of the website, and build it around that specific audience.

Minimalism Applied to Blogs

Take a look at the WordPress themes directory, and notice how many minimalist designs there are. Not only are there tons of them, but they all look about the same. Because they still follow the standard blog layout, there isn't much room for difference. And a blog with an unusual layout is (usually) not too good for usability.

I think we can all agree that readability is an important part of blog design. A common tip to improve readability is to add whitespace to the page. That's when people take it a bit too far. They see the "white" in whitespace, and associate that colour with minimalism.

Make Minimalism Good Again

Don't get me wrong, I think that minimalism can look nice, if it's done well. Minimalist websites don't all have to conform to certain standards that end up making every website look exactly the same.

Don't just throw together a bunch of divs with black text on a white background. Try out some different colours and see what you like. Try including a nice image, to draw the reader's attention. The important thing is to be creative with it, and

But what exactly makes this such a great design? Let's find out!

It's Simple

A feature of the design of all of their products is the extreme simplicity. It's part of their branding. Because it's part of their branding, it applies to their website as well.

When you first get to the home page, you see that it really has the bare minimum. There is a main navigation bar, and below that is a giant picture of the iPad. If you scroll down, you'll find a bit of information about some of their other products. But to avoid cluttering up the home page, you'll have to click through to those products' individual sections of the site.

They don't even have a huge logo on their site. The only logo is the little icon in the navigation bar. However, it is still in a consistent location, the top left section of the page and at the beginning of the navigation bar, so users will know that clicking it will take them back to the home page.

It's Well Organized

At Apple.com, everything is nice and organized, with everything where you expect it to be. If you're looking for information about a specific product, you'll be able to get to it from their main navigation bar, at the top of the site.

Once you venture one level deeper into the site, you'll find another menu near the top, to narrow down what products you're looking for information on even more. On every page, you'll find the most important information at the top. If you want the less important details, simply scroll down and you'll find them.

One thing I like about how it's organized is the way that a grid is used. Sections that are less important can have up to five narrow columns, while the important stuff that they want you to pay attention to can take up three or even all five columns.

It's Interactive

Not only is it interactive, it's actually done well. In my opinion, it is best for all interactivity to be done subtly. For example, having some small change in an element on the page to let the user know that if they click it, something will happen.

The way interactivity is done on this website can really help usability. The navigation menu changes when hovered over, like how most websites do it, and that's what the user can expect.

But Apple has gone a step further, having the background image change again to a special active state when the user click on one of the links. Most website do not do this, and this really a simple thing that most websites could do to add those extra details that really count.

And that leads me on to my next point…

Extreme Attention to Detail

The details can make or break a design. In web design, it is important to pay attention to the little details.

One example of the excellent attention to detail is this little button. At first, it just looks like a little button telling you to buy a MacBook Pro. But upon closer inspection, you can see all of the details that were put into such a simple button.

Most noticeable is the gradient background, giving a sense of depth. Another detail is a thin border around the button, with a subtle drop shadow. Another nice detail is the hover effect, and the active state of the button when clicked.

It's Consistent

One thing that I love about Apple.com is the way that every page is consistent with the rest of the site.

Many times I go to some company's website (*cough* Asus *cough*), and I'm greeted with a page with information to get me to buy their latest product. And then I head over to the "store" section of the site to buy it, to find a page that is completely different from the rest of the site, with entirely different colours and layout. Later, when I have a problem with the product I bought, I check out the "support" section of their site, and end up having to learn a new way to navigate through this part of the site.

But not with Apple. If I want to buy a laptop from them, I can simply go to the appropriate section of the site and easily figure out how to navigate it, based on my experience with the rest of the site. And then when I have a question, I can take a look at the "support" section of the site, and quickly figure out how to get support for my laptop.

What Could Be Improved

While the design of Apple's website is very well done overall, there are always a few little things that could be improved.

• All of the videos on the site are in Apple's QuickTime. That's a problem for me, because it doesn't seem to be officially available for Linux. Maybe it's just a secret plan to make everyone buy their software. But QuickTime is available for Windows, so…

• Move the breadcrumb navigation closer to the top of the page. Users looking to go one or more levels up in the site would find this helpful, but right now it's hidden down in the footer. Users looking for a breadcrumb trail will expect it to be in an area that is "above the fold", like it is on just about every other website.

That's really all that I noticed. But I'm sure I could find a couple more, if I was being very picky.

Conclusion

Apple really has a near-perfect website design, with just a couple of minor problems that could be improved.

What do you think of the design of Apple's website? Do you love it, or do you think the style is overused? Be sure to leave your answer in the comments section of this post.

Here are a few things to remember when working on the details of your site. If you follow some of these general guidelines, it can really help to improve a website to make it stand out a bit.

Whitespace

Making effective use of whitespace is a great way to improve on a website design. Basically, you can improve your whitespace simply by adding more space around important elements of a page, to give them more "room to breathe".

For more information about using whitespace in web design, you can check out a previous post at FWebDe: Using Whitespace For a Better Design.

Visual Hierarchy

Visual hierarchy in web design is something to consider when creating a new website design. The visual hierarchy should give visual cues to the user so that they can tell what is most important.

A common way of applying visual hierarchy in web design is by using the heading tags, <h1> through <h6>. This applies a visual hierarchy by separating sections of content by different font sizes.

Other ways of working with visual hierarchy include:

• Colour
• Whitespace
• Position
• Shape

Borders

To ensure a definite separation of completely separate elements on a page, borders can easily help to achieve this. They are very effective, and they usually just work perfectly.

But you don't need a thick border in between everything. It might be best to use subtle borders to separate key sections of a page.

Dimension

Adding some dimension to a page can take a flat, boring design and make it "pop out". Adding some 3D elements to a page can be a fun way to add details to a design.

Some examples of uses of dimension can be use of subtle gradients, shadows, layered elements, and much more. Try out everything you can think of, and use what you think looks best.

Typography

Typography is a very important aspect of web design, with many little details to focus on. These details greatly affect the readability of the content, and the overall look of the design.

To improve your web site typography:

• Choose the most readable font for your site.
• Add appropriate line spacing (line-height).
• Make sure the font size is readable.
• Ensure some spacing in between paragraphs.

There are many more typography-related details that I could add to that list, but those are four that you need to remember, and if you apply those, you can greatly improve your site's design.

Do you use any of these tips to add more detail to your design? What tips would you recommend to add more detail to your website design?

First, in your theme's folder, find a file called functions.php. If it's not already there, create it.

Insert the following code into the file. It doesn't really matter where, but around the end is generally a good idea.

<?php
add_action('wp_footer', 'analytics');
 
function analytics() { ?>
Your Google Analytics tracking code
<?php }

Be sure to insert your own Google Analytics tracking code in there. This will add your tracking code into the footer of your WordPress blog.

This calls the add_action function, which is used to add a function to a hook. It is used by plugins and themes to easily modify certain parts in WordPress. Here we are using the wp_footer hook. The function we are using is called analytics.

Next we actually create the analytics function. It basically just displays what is on the line. Since it is called with the wp_footer hook, the text there (your tracking code) will be displayed in the footer of your site.

So whether you're a beginner or an expert, these are some tips that everyone will find useful.

Structure and Content First, Then Presentation

The first thing that everyone should know when learning about web development is to separate content from presentation. This means that you should create your HTML first, with the structure and content, and then worry about the CSS later.

Why?

The structure of the HTML is the main foundation under the CSS. It should contain all of the information about the content and the underlying structure of the page. That is in contrast to CSS, which should only be used to describe how things should look.

This is important for users that can't see CSS. For example, non-CSS browsers (Dillo), text-based browsers, screen readers, search engine spiders, and much, much more.

Use an External Stylesheet

Using an external stylesheet is when you have all of your CSS in an external file, and have it included in your HTML. This is probably the best way to be sure to keep content and presentation separate.

Advantages to using an external stylesheet

• It helps to separate content from presentation.
• External stylesheets can be cached, allowing faster page loading times.
• A single stylesheet can be applied to every page of a site, allowing quick style changes to a single file.
• It makes organization much easier.

To use an external stylesheet

To use an external stylesheet, simply place the following code in between your head tags. Be sure to replace style.css with your CSS file.

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

Avoid Using Inline Styles

By inline styles, I mean the style attribute in the HTML tags. You should avoid using it because it mixes up content and presentation, which can lead to more trouble.

Using inline styles is really almost as bad as using purely presentation HTML elements such as font. It leads to messy code where each HTML file will need to be updated in the event of a style change, instead of a global change in a single external stylesheet.

Bad:

<div style="background:red;">
Ipsum schmipsum
</div>

Good:

.infobox {
    background: red;
}

<div class="infobox">
Ipsum schmipsum
</div>

Organize Your CSS Files

If you spend a couple of extra minutes keeping your code organized now, I guarantee you'll save a lot more time later, when you have to edit your completely unreadable code.

It's not that hard either. A couple of quick steps to keep your selectors and properties organized will bring in tons of benefits.

Bad:

.test {background:#FFCCCC;border:3px dotted #7C2DFF;color:#FFF42D; }

Good:

.test {
    background: #FFCCCC;
    border: 3px dotted #7C2DFF;
    color: #FFF42D;
}

For more information about organizing CSS files, check out this post: Tips For Organizing Your CSS Files.

Use a Reset Stylesheet

For some reason, the developers of various web browsers just can't seem to agree on a standard way to render each element by default. How can web developers solve this problem? By use a reset stylesheet!

A reset stylesheet is basically just added to the top of your CSS, to start out by setting every element to have certain styles. And then you just set your own styles individually as you go through the rest of your CSS.

There are many different pre-made CSS reset stylesheets ready for you to use. I prefer the Eric Meyer Reset.

Compress When You're Finished

Once you're finished writing your CSS code, and everything works perfectly, then you need to minify your CSS by removing all the extra whitespace, such as tabs, spaces and newlines. This can greatly reduce your CSS file size, helping to speed up page loading times.

During this process, you should also merge all of your CSS files into a single stylesheet file. This helps to speed up page loading time by reducing the number of HTTP requests needed to load a page.

There are also some tools, such as the CSS Drive CSS Compressor, which can help to strip out the unnecessary whitespace for you. It also has several options to determine how much whitespace to remove, whether to remove comments, etc.

Use Shorthand CSS

Imagine having to write the following code, if you want to have a different margin for each side of a div.

margin-top: 10px;
margin-right: 24px;
margin-bottom: 12px;
margin-left: 0;

That would take a lot of time every time you want to have something like that applied to a box, right? Thanks to the magic of shorthand CSS, that code can be condensed into a single line.

margin: 10px 24px 12px 0;

Now, that's much quicker to right! Just remember: The order of the sides goes clockwise, from the top. So it's top, right, bottom, left.

For more on using shorthand CSS, check out this awesome article at Webtint.

Keep a Colour Reference

I bet this has happened to you many times, when you're working on a website design and you can't exactly remember the hexadecimal colour code for each element of the design.

A way to fix that is to include a colour reference at the top of your CSS file. That way, if you forget the code for a specific colour, you can simply check the top of the file, then simply copy and paste it into another section of your file.

/* Colour reference
 
background: #FFCCCC
normal text: #FFF46D
links: #38FF0E
headings: #77F6FF
main content bg: #DCAFFF
 
Note: Do not use this colour scheme in a real design. It will look horrible.
*/

Become Familiar With Every Property

While you don't need to use every property that exists in CSS, it is a good idea to at least know what most of them do. For this, you can take a look at the CSS property reference, from HTML Dog.

What other CSS best practices would you recommend using? Be sure to leave a comment with your response.

I came across the Vancouver 2010 Olympics website, and after staring at the nice colour scheme for a minute, I also came up with a few ways that it could be improved even more.

A good website is very important for just about any organization or event. In this post I'll talk about the good and the bad of the 2010 Olympics website.

The Home Page

Of course, the first thing to look at is the home page. It's the first page of the site that I saw, so it gives me a first impression of the site, and what to expect from it.

Upon loading the site in my browser, the first thing I notice is the use of colour. It is a very nice, colourful design, with mostly blues and greens, with a few nice highlights in some sections with orange and red.

The second thing that I see is the navigation. The events are all listed near the top of the page, in alphabetical order, with nice little icons. One thing that looks a bit out of place is the "Home" link, which is right next to the list of events. I think that could have gone in the navigation menu just below it.

Below the list of events is what I would call the main navigation. Some may disagree, because it isn't exactly clear what the "main navigation" is.

You'll notice that the site is very cluttered, with the only real whitespace being used in the 20 pixel space between columns. I really believe that they could have added more spacing between elements of the page, to avoid the whole cluttered look.

The logo doesn't seem to have too much importance in the design, being barely even 80 pixels wide. But it doesn't really need to be as important, because other features of the page also help to identify what this website is about.

A nice feature of the design is the background illustration of a person holding a torch, on the right-hand side of the page. It just looks a bit strangely cut off under the main container. I think that they could have pushed it to the right a bit more to avoid that awkwardness. It would also look less uncomfortable to have the image cut off by the right side of the browser window, because it simply looks more natural.

Alignment

The home page is generally arranged in a type of three-column layout, giving some sense of alignment. However, I think it would have been a good idea for them to make an actual grid, to make it look more organized.

The Footer

When you reach the bottom of the site, you'll come across a huge sea of nothing but white. And I do not count that as whitespace, because it is just so far down, and doesn't provide any actually useful separation from other sections of the page.

Continuing down, you'll see another illustration of a guy holding a torch, right below the Bell logo.

Even further under that, you'll find some "Useful Links". This section is not very useful, with cluttered lists of links that I simply cannot scan through. At least there are headings, though. I'd say it's more of a way to help search engines to crawl through their site.

Use of Flash

I'm actually surprised at how Flash is used in this design. On the home page, you can see featured content box, powered by Flash. I don't see why they chose to use Flash for that, as they could have done the exact same thing with JavaScript, with fewer accessibility problems.

The Olympic Torch Relay Interactive Map seems to be powered by Flash, however after waiting for a long time, it would not load. I just got to stare at a greyed-out map with a spinning circle over it.

Readability

The pages with the actual content have very poor readability. I just went to one news article and had a very tough time reading through it.

The most obvious problem with readability is that the font size is extremely tiny, which is simply unforgivable, in my opinion.

There could also be more contrast with the colour of the text and the background, simply by using a slightly darker shade of grey. More line spacing could be added as well, to help improve readability.

The hierarchy of the text is quite poor as well, with subheadings the exact same size as the main body text, except bold. I can't tell if one section is more important than the other, or if it's just a point that's being emphasized.

Just a Few More Suggestions

• The text in the header "With Glowing Hearts" is not clickable to go to the home page. I know it's not a logo, but it looks like one, and many users will mistake it as a logo and try clicking on it and expect to go to the home page.
• If you go to the "Tickets" page, only two columns are filled, with the third completely empty. I'm not saying that they should clutter up the design even more, but that they could increase the width and spacing of the two main columns to fill up the remaining space.
• 272 validation errors. It's not a huge deal, and I'm probably being a bit picky, but it could be helpful to try to reduce that number a bit. If not, at least don't use XHTML 1.0 Strict for your site. There are only 55 errors when validating as HTML 5.

Conclusion

The Vancouver 2010 Olympics website has an overall nice design, with just a few places with room for improvement. What do you like about this site, and would you suggest any more improvements?