When surfing the web for the information we want, our attention span is incredibly short. The reason for this is that we know if the site we’re on doesn’t instantly supply us with what we’re looking for, there are plenty of other sites a few clicks away that probably will. If you are a blogger, it is essential that you compose your posts and format you blog with this reality in mind. It will make your site more effective, by encouraging your readers to stay on it longer, clicking more links. And that’s what you want, isn’t it? Here are 10 tips that will give professional appearance and trackable results to your blog posts.

1. Start with a Short, Concise Overview of the Post: Reduce the entire direction of your post down to one sentence if possible, that says, “if this is what you’re looking for you will definitely find it here,” and then display it in bold, eye-catching print that is slightly larger than the following text.

2. Embed Video to Capture Attention: Video is compelling. YouTube, and its incredible stream of traffic on the web, has taught us that. Blog posts with video exude greater credibility, incite interest, and connect better with a generation that is much attuned to visual presentations. Ask yourself if you’d rather watch a demonstration video on hanging a light fixture or work through detailed written instruction on how to do it. You get the point!

3. Write Using Short Bursts and Bold Headlines: Short paragraphs with dynamic first sentences that clearly express your main points make scanning the blog post easy and enticing. If your readers quickly scan your post and like what they see, they will slow down and take a deeper look at your blog, and that’s the first action step you want them to take.

4. Use Images and Graphics to Illustrate Copy: Comprehension happens much faster when a reader can scan an image or graph and get your point immediately rather than having to read a lengthy explanation. Online, a picture truly is worth a thousand words.

5. Use an Economy of Words: Blogs should get right to the point of things and not include a lot of superfluous text. Readers find that a waste of time and will click away if they are not getting what they find quickly. Save lengthy stories for late in the blog, once you’ve captured attention and moved your readers in the direction you desire them to go, or simply save them for telling over dinner with friends.

6. Use Quality Writing and Excellent Grammar: Readers hit the back button at the first sign of “Engrish” or other spelling or grammatical malfeasance. In short, they simply don’t trust the source! With some many good spelling and grammar checkers available, this is an inexcusable faux pas for bloggers.

7. Use Slideshows to Keep Attention and Call for Action: Slide shows are great for presenting your case and inviting your readers to take an action step that is to your benefit.

8. Leave White/Open Space on the Page: If a potential reader lands on your blog page and the immediate impression is that it is densely populated with text – images don’t have quite the same negative effect – chances are they will click away. Few of us go online to read a textbook. We left those behind and have no desire to return to them!

9. Make Effective Use of Lists: Bullet-point lists are easy to scan and present information quickly and pointedly.

10. Conclude with a Bang: Just like some readers skip to the end of the book to see how it concludes, some of your readers will want just the “bottom line.” The last paragraph is a great place to deliver that. Sum up what you want the reader to know and what you want them to do, and deliver it concisely, in slightly larger print. Use a juicy, bold first-bite headline that will compel them to consume the whole paragraph.

These simple steps can separate top bloggers from the rest of the pack. They are easy to employ and will enhance the readability of your blog, which in turn will boost your credibility and will keep your readers coming back for more! More visits, more clicks on your advertisers and links, and more success for you. It is just this easy!

This is a guest post from Tom Walker, a writer working with an online store offering Phaser toner cartridges and other supplies for the creative industry. You can stay up to date with his latest writing about advertising and design on CreativeCloud.

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.