Pro Blog Design

Get to Know the WordPress Hierarchy

Angie Bowen — Mon, 15 Mar 2010 16:00:40 +0000

WordPress’s popularity and usefulness as a multi-purpose content management system, continues to grow, and the more people flock to using this CMS the more an understanding of some of the basics of how it operates becomes necessary.

In that vein, I have put together this post that examines the WordPress template hierarchy and the use of conditional statements. Technically you only need two files for a WordPress theme to work, index.php and style.css.

However, if you would like to make your theme a bit more unique and have some variance in the way different content is presented, you will want to use some other template pages. Now this is where the hierarchy comes into play, because WordPress runs off a Template Hierarchy.

What this means is that it will automatically look for a particular file when retrieving a page in the active theme directory. If, for whatever reason, it cannot find that file, WordPress will then look for the next filename in the hierarchy and so on until it finds a match.

Below I will go over different additions that can be made, that will not only add to the complexity of the overall site, but each one will also impact the site’s hierarchy. With each entry below, I will tell the benefits of having that particular template page as part of your site and how each will alter the hierarchical structure of your WordPress theme.

Home

Establishing a home.php file will give you a custom home page for your WordPress site that varies from your index. This could also be accomplished with conditional tags but I only recommend that for minor changes from the original index.php page to keep size and complexity to a minimum. So if you plan to have major changes in the home page for your site, then adding a home.php is the route to pursue.

The Hierarchy

home.php
index.php

Single

Given that a good number of WordPress installs are used for blogs, you will most likely have a single.php template for your individual posts. This will allow the posts on the blog to have a distinctively different set-up than the other pages on the site, as well as allowing a section for comments.

The Hierarchy

single.php
index.php

Tag

Some users in the blog design community opt to focus more on tags rather than categories for separating and organizing the content for the site. If this is the case for the WordPress site you are designing, then you will want to include the tag.php template. And once again, you have an option to style each tag individually by adding the tag-id.php template.

The Hierarchy

tag-id.php
tag.php
archive.php
index.php

Author

If you are designing a blog that is going to have multiple authors contributing, then you can add an author.php template to allow site users to search the site by the authors. You also have the option of adding an author-id.php template if you would like to style each author’s page for that specific author for a more personal feel. Say altering the colors specifically for that author, or however you choose for their page to stand out from the others, you can do that with this template.

The Hierarchy

author-id.php
author.php
archive.php
index.php

Date

Another searchable content element that you can add to the site for the sake of your user’s navigation is allowing them to browse your content by the date that it was published on the blog. If this is needed for your WordPress site, simply add a date.php template to allow this functionality.

The Hierarchy

date.php
archive.php
index.php

Search

Whenever a user searches your site, you can set up a search.php template to control the way that the site delivers the search results to the content seeker. Style it differently than the other templates on the site for a unique delivery and presentation to make it stand out.

This isn’t required and a lot of sites leave it out, but it can always be a nice stylish touch for the site. The default search results from an index.php file look nothing like what a user would expect from a search page!

The Hierarchy

search.php
index.php

404

Style-matching, helpful 404 error pages are an extremely popular way to manage user navigation when errors occur. This helps to ensure that the user who has gotten lost in the site does not necessarily leave out of frustration.

Simply add the 404.php template to make this possible for the client. Here are some ideas to get you started with 404 pages.

The Hierarchy

404.php
index.php

Page

In order for your site to have multiple pages (i.e. about, contact, etc.) which most will, you need to add the page.php template. Again, this is an area where you can actually individually set up your pages with a page-id.php template addition.

Pages can also have custom templates, the most common use for custom templates is an archives.php page (not to be confused with archive.php. You can read more on how to create a great archives.php file here.

To create a custom template simply place this at the top of the pagename.php file, where ‘pagename’ is whatever name you have chosen.

The Hierarchy

custom.php
page-id.php
page.php
index.php

Conditional Tags

Conditional Tags are another tool at the coder’s disposal when assembling the WordPress framework you are putting together for your client. With conditional tags you can tell WP to only present content if a certain page is being displayed.

For example, is-home() is a conditional tag telling WordPress to only display the selected content on the home page. If this is in your index.php file, that content will only be shown on the home page and not any other pages that default to index.php.

The following is an example of a conditional statement.

if (is_home()) {
   echo 'Welcome to my blog, I hope you enjoy what you read here!';
}

Conditional tags are best used when you only want a minor variation for certain content types, e.g. if you just wanted to display the words "Search Results" at the top of your search pages, you could just add a conditional tag to the index.php file. That way if you update something in the index.php file, you don’t need to worry about updating the search.php file as well.

For larger changes though, conditional comments get messy and you’ll find template files make things easier to manage!

There are a variety of different conditional tags and tons of uses for each. For a complete list and description of each see the WP Codex Conditional Tags Entry

The Visual

Download the PDF

Your Turn

That concludes my look at WP hierarchies, but I would love to hear your thoughts and suggestions in the comment section below on any areas that you need further clarification or that you would do a little bit differently.

Automatic Amazon s3 Backups on Ubuntu / Debian

Michael Martin — Thu, 11 Mar 2010 17:00:00 +0000

VPS (Virtual Private Server) hosting is the next level up from shared hosting. You get a lot more server usage for each of your dollars, but the catch is that you lose all of the easiness of shared hosting.

One of the most important things you need to set up with your VPS is automatic backups. If your VPS crashes and your data is lost, your entire blogging history will be wiped out in an instant if you don’t have backups at the ready.

This article isn’t going to be for everyone, it assumes two things:

You’ve already set up your VPS (If you’re on shared hosting, have a look at this automatic database backup post instead).
You’re comfortable with the command line (If you didn’t set up your VPS yourself, I highly recommend you don’t fiddle around with anything here unless you’re certain of what you’re doing!)

The last thing to note is that I’ve done all of this on Ubuntu, though it should have no trouble with Debian either. The software I use is all compatible with other Linux distros though, but I haven’t used them so you may need to adapt certain steps.

If both of those are okay with you though, let’s carry on and set up our ideal backup system!

An Overview of Our Setup

Let’s start by taking a step back and getting a plan of how our backup system will work.

Every day, at a time you set, the backup process begins.
First, a backup of your database will be taken and saved on the server.
Next, the database program will connect to your Amazon s3 account, and make a full backup of your site if needs be.
Alternatively, it will only backup the changes from yesterday’s backup (i.e. an incremental backup).
Before sending out the backups, all of your files will be encrypted so that no-one but you will be able to read them.

In pictorial form:

One thing to note is that we will work through this as though we are backing up just one site. You can of course apply this to as many sites, databases, and directories on your server as you like.

Step 1 – Set Up Encryption

To set this up, we’ll actually be working backwards through the steps above (So you’ll be able to test each one before moving to the next).

The encryption tool we’ll use is called GPG (Gnu Privacy Guard). GPG works by creating two key files:

Public key – Used to encrypt your data. It doesn’t matter who sees this.
Private key – Used to decrypt your data. This file must be kept safe and only seen by you.

The two files it creates are essentially a pair. Files encrypted by a public key can only be decrypted by the corresponding secret key. If you lose your private key, you will not get your files back, ever.

So, let’s get to it!

In your command line (e.g. Putty on Windows, or terminal on Linux/Mac), type the following:

gpg --gen-key

You’ll be walked through a few options for your key, select the following:

Key type – DSA and Elgamal (Default)
Key size – 2048 bits (Again, the default)
Expiration – Do not expire (Not necessary for what we’re doing as you won’t be sharing the public key with anyone).
Name, Comment and Email – You can enter whatever you like here, but do take a note of them somewhere. They’ll help you remember which key is which if you create multiple keys later.
Password – Make sure you remember whatever you type, there’s no way to get it back if you forget!
When it talks about “generating entropy” to make the key, it means that the server needs to be in use in order for it to get some random numbers. Just go refresh a webpage on the server a few times, or run some commands in another terminal window.

When your key is made, you’ll see a few lines about it. The important one looks like this:

pub   2048D/3514FEC1 2010-03-05

The 3514FEC1 is the part you need. That’s your key ID, and you’ll need it for later!

If you do end up forgetting your key ID though, it’s easy enough to get that back. Just type:

gpg --list-keys

That’s our encryption set up and ready to use! If you’d like to learn more about what all you can do with GPG key, have a look at this GPG quick start guide.

Step 2- Sign up for Amazon s3

I should start by saying that while s3 is not a free service, it’s incredibly inexpensive! My bill for the last month was $2.60, and that was with backing up a lot more than just this site! It’s the cheapest peace-of-mind ever.

Start off by signing up at Amazon Web Services (Not linked to your regular Amazon account). They have a few different services, but the only one we want at the minute is s3 (Simple Storage Service).

When you’ve registered, log in to your account and click the “Security Credentials” link.

On this page, you’ll need to create a new access key (You can see the link in the screenshot below). When you’ve made it, take a note of your Access Key and Secret Access Key (click the “Show” link to see the secret one).

If you’re a FireFox user, you should also install the s3Fox plugin. It gives you an extremely easy way of seeing what’s in your s3 account, and even uploading/downloading files from it. It’s not essential, but definitely a handy tool!

Step 3 – Install Duplicity

The backup system is fairly easy to put in place, all thanks to the program we’ll be using; Duplicity.

Let’s start by installing Duplicity.

sudo apt-get install duplicity

Now with it installed, we just have to create a script that tells it how to run. Duplicity can take a wide range of commands, and you can read more about them all here.

Step 4 – Our Duplicity Backup Script

Here is how we want to set it up:

Encrypt with our GPG key.
Backup to an Amazon s3 “bucket” (a bucket on s3 is like a folder).
Make an incremental backup every day.
Make a full backup if it’s been more than 2 weeks since our last full backup.
Remove backups older than one month.

You can change any of the parameters you like, you’ll see where you can do it.

With your favorite text editor (I use Nano), create a new file and paste the following into it:

#!/bin/sh
export PASSPHRASE=YOUR_GPG_PASSWORD
export AWS_ACCESS_KEY_ID=YOUR_AMAZON_KEY
export AWS_SECRET_ACCESS_KEY=YOUR_AMAZON_SECRET_KEY
 
# Delete any older than 1 month
duplicity remove-older-than 1M --encrypt-key=YOUR_GPG_KEY --sign-key=YOUR_GPG_KEY s3+http://BUCKETNAME
 
# Make the regular backup
# Will be a full backup if past the older-than parameter
duplicity --full-if-older-than 14D --encrypt-key=YOUR_GPG_KEY --sign-key=YOUR_GPG_KEY /DIRECTORY/TO/BACKUP/ s3+http://BUCKETNAME
 
export PASSPHRASE=
export AWS_ACCESS_KEY_ID=
export AWS_SECRET_ACCESS_KEY=

You’ll need to update some info in that script to your details. They should be self-explanatory. Replace the bit after the = in lines 2-4, the 4 instances of YOUR_GPG_KEY further down the page.

Also, replace the 2 instances of BUCKETNAME with the name of your bucket on s3 (Don’t worry if it doesn’t exist yet, Duplicity will create it for you!), and last of all, the /DIRECTORY/TO/BACKUP/ with the folder to backup.

Now save the script (e.g. backup.sitename.sh), and run it. Now if you check your s3Fox plugin, you should see the files (Well, the encrypted version of them).

Step 5 – A Restore Script

It’s not much use backing up your files if you can’t get them back when you need them, so we still have to set up our restore script!

And a warning; do make sure you set this up and test it now. If it turns out that you can’t decrypt your backups or any error like that, then it’s too late to discover that come the time you actually need to make a restore!

#!/bin/sh
export PASSPHRASE=YOUR_GPG_PASSWORD
export AWS_ACCESS_KEY_ID=YOUR_AMAZON_KEY
export AWS_SECRET_ACCESS_KEY=YOUR_AMAZON_SECRET_KEY
 
## Two options for restoring, uncomment and edit the one to use!
## (to restore everything, just take out the --file-to-restore command and filename)
 
# Restore a single file
# NOTE - REMEMBER to name the file in both the --file-to-restore and in the location you will restore it to!
# Also file name (path) is relative to the root of the directory backed up (e.g. pliableweb.com/test is just test)
#duplicity --file-to-restore FILENAME s3+http://BUCKETNAME /FILE/TO/RESTORE/TO --encrypt-key=YOUR_GPG_KEY --sign-key=YOUR_GPG_KEY -vinfo
 
# Restore a file from a specified day
# NOTE - Remember to name the file in both locations again!
#duplicity -t4D --file-to-restore FILENAME s3+http://BUCKETNAME /FILE/TO/RESTORE/TO --encrypt-key=YOUR_GPG_KEY --sign-key=YOUR_GPG_KEY
 
export PASSPHRASE=
export AWS_ACCESS_KEY_ID=
export AWS_SECRET_ACCESS_KEY=

Once again, you’ll need to replace parts of that with your own details. For explanations of what each thing is to be replaced with, look back to the explanation for the backup script, they’re the same!

And last of all, you’ll see that I’ve commented out the commands. Delete the # infront of them to uncomment them when you want to use them. That’s just a precaution in case you run the script by accident!

Step 6 – Backup Your Databases

We’re getting there, promise!

There’s absolutely no point in backing up your files if you aren’t backing up your databases as well. Thankfully, it’s not difficult to do.

You have 2 options:

Use a WordPress plugin and backup to an email address. You can read the full automatic WordPress backup guide here.
Make a backup of your database and include it with the files being backed up to s3.

Naturally the one I’ll be talking about here is the s3 solution! To do it, all you need is another shell script.

The best script I’ve found to do this is AutoMySQLBackup. It will:

Make daily, weekly, and monthly backups of your database, and delete old ones (You set how long to keep them for in the script).
Email you a warning if anything goes wrong with the backup (Extremely useful). You get the peace of mind of being notified if there’s a problem, but no spam because if it all goes well, you won’t hear from it (in the settings at the top of the script, set MAILCONTENT="quiet").

Step 7 – Automate all of This

The final step is to set this up to run automatically so that you can forget all about it! We’ve made this very easy to do by storing all of our commands in shell scripts. All we need to do is use cron to run them at set time.

If you aren’t familiar with Cron, Ubuntu Help has a great explanation of them.

To access your crontab, enter:

crontab –e

Now, here’s an example of 2 cron jobs you could add:

40 8 * * * ./backup-db-problogdesign.sh
0 9 * * * ./backup-problogdesign.sh > /var/log/backup.problogdesign.log

The first will back up the database. The second will then run the whole backup to s3 20 minutes later, and store the output in a log file for you (Make sure you’ve created the log file already though).

If you only wanted to run it every other day, you could use:

40 8 * * */2 ./backup-db-problogdesign.sh
0 9 * * */2 ./backup-problogdesign.sh > /var/log/backup.problogdesign.log

Troubleshooting

There are a few places you could go wrong in all this. If you do have trouble, here are a few things to try:

Test each step, one at a time. Is your encryption working? Are you able to connect to Amazon s3? Is Duplicity working? Last of all, does it all work from cron?
If the trouble is with your encryption, are the keys owned by the same user as the one who runs the commands?
s3 buckets names and GPG IDs and passwords need to be written down in a few places. Quadruple check for typos!

Conclusion

You’ve now got a fairly robust backup system in place. All of your files will be copied safely to a third party server, every single day.

The major flaw here, which some of you may have spotted already, is that your GPG password is stored in plain view on your server, and that anyone with access to the Duplicity script can delete your backups. If someone gets into your server account, this isn’t going to help you, you’re only protected against hardware failures.

If anyone has any thoughts on getting around that issue, I’d love to hear them!

Update (14/03/2010): Check out a tip from Matt in the comments, to backup your key to your local computer.

40 Extraordinary Photoshop Text Effects

Narendra.s.v — Mon, 08 Mar 2010 16:00:12 +0000

The trouble with Photoshop Tutorials is that there are a lot of them out there, but you only want the very best, most creative ones.

In this post, we’ve collected 40 of the very best and most extravagant tutorials for working with type. After working through a few of the most appealing looking ones to you, you should have more than a few ideas for creating your own, unique effects!

Tutorials:

How to Create a Stereoscopic Image for Crossed Eye Image Viewing
This tutorial will teach you how to create a stereoscopic image for cross eye viewing and you will be able to view the final image in 3D and full color without any other objects.

Lost in Space Typography in Photoshop
Learn how to create an easy and super quick text effect in Photoshop. You will play with different Brushes, Blend Modes and basic filters like Blur and Liquify.

3D explosion using Photoshop Tools
In this tutorial you will learn how to create a 3d explosion with the Brush Tool and Smudge Tool using Photoshop and its default settings. This tutorial also features a few steps guiding on how to create and implement your own 3d text.

Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop
A step by step tutorial on creating a really cool-looking, Splashing Ocean Text Effect with Lightning Background in Photoshop.

Maddening Text Effect in Photoshop – Unlimited Variations
Create a breathtaking maddening text effect and composition that can be used for advertising.

Photoshop Tutorial: Metallic Text
Learn how to create a simple metallic effect for a text.

How to Create Eroded Metal Text with Photoshop
This tutorial will teach you on how to create an eroded metal text effect. You will also get to learn various drawing techniques, channels, and patterns.

How to Create an Elegant Text Effect
Know how to create an elegant text effect in only 13 steps.

Create realistic type on wood
This tutorial will show you how to make a regular text look like it has been painted or printed on wood using different text effects. This is a great way to give your text that natural look. This can be applied to any solid shape, text, images, logos, etc.

Create Simple Candy Cane Text in Photoshop
In this quick tutorial will how you how to make some simple candy cane text.

Create A Beautiful 3D Text Composition
This tutorial is jam-packed with techniques, tips and tricks to improve your work flow and design skills. You will find a ton of useful information in this tutorial.

Create a Transparent Text Effect with Fresh Grass
Create a cool looking Trasparent Text Effect, mixing with Fresh Grass Texture and Cloud Brush set. You can use the text effect in a wide range of occasions – such as website header background, part of a natural themed design, etc.

Jelly Fish Delight – Photoshop Tutorial
An inspiring tutorial created using different techniques to create a soft background with glowing jellyfish.

The 1 Layer Bubbly Text Effect!
A interesting tutorial on creating a Bubbly Text Effect with just One Layer.

Subtle Reflection Tutorial
Know how to create a “Subtle Reflection” text effect. You can experiment with different settings than you will learn and might be a mandatory if you are working in a different sizes.

AVIAN Studios Logo
Recreate a col AVIAN Studios Logo using Photoshop.

Tutorial: Killer 3D Poster Design with 3DS Max & Photoshop
Learn how to create a killer 3D Poster Design with 3DS Max & Photoshop.

3D Jungle Text Effect
This Photoshop tutorial will explain how to realize a 3D jungle text effect. You will create the text in Xara3d and use Photoshop to texturize the letters.

Extinction Text Effect
In this tutorial you will know how to create a good 3D type explosion with Adobe Illustrator, Cinema 4D and Adobe Photoshop using basic tools to make this artwork.

Striking Text Effect Using Glows and Blends
This tutorial will show you how to create striking text using a combination of glows and blends in 7 steps.

Basic Candy Cane Text Effect in Photoshop
In this tutorial you will learn how to create a candy cane like text effect with the help of some simple Photoshop techniques.

Create a gel text effect photoshop – Gelatinous Text
This tutorial will teach you how to make a Gel text in photoshop, you can make it within a few steps, using photoshop layer style and character menu, this is a very beautiful and easy tutorial.

Create a RENU Typography Effect
Create some really cool-looking effects to decorate a Typography. You will be using a combination of layer styles, color blending, lens flare and images. The end effect is quite stunning and hopefully you’ll pick up some tips you didn’t know before.

Create a New Retro Text Effect in Photoshop
This effect is good for all sorts of projects, flyers, websites, posters. It works particularly well with music based projects. It will take you through the motions for type.

Create Pillowed Text Using Various Effects
Learn how to create that pillowed effect on text.

3D Typography in Photoshop
In this tutorial you will go over various techniques you may haven’t seen before, as well as a bulk of techniques that may be new to you. After you have completed this intense walk though, you will be able to explore even more new ways of creating typefaces as well as other types of ideas.

Create a Unique Burning Text Effect
Learn how to create a superb, unique burning text effect, whereby areas of flaming text actually peel off to expose an under layer.

Create Gloomy Text Effect
Know ow to create a stunning Gloomy Text Effect by Utilizing the Amazing Cloud Filter in Photoshop.

Glorious Starburst Photoshop Tutorial
This Photoshop tutorial will show you how to create a cool background swirl effect for websites, twitter pages, etc. Learn how to make text pop out of the background, add dust particles and more.

Ultra Glossy Liquid Metal Text Effect
In this tutorial you will learn techniques mostly based on Layer style settings and a combination of a lot of Curves. When combined together, they give a rich, deep and glossy look to the text.

Create a Shiny Text & Effect in Photoshop
Learn how to create a shiny text effect in photoshop.

Create a Glass Text effect in Photoshop and Shatter it
This tutorial with respect to the Blending modes and Layer styles. Infact, to achieve the glass text effect, we will experiment with a lot of layer styles which are very much required to get the realistic effect.

Create a spectacular SF looking wallpaper
In this tutorial we are going to create the mosaic background and a cool radioactive looking text, combine this two elements and you will get an amazing desktop wallpaper.

Aurora Borealis Typopgraphy Wallpaper

A great tutorial on creating Aurora Borealis typopgraphy wallpaper

Design a Brilliant Product Advertisement
In this tutorial, you’ll learn the steps and techniques involved in creating a brilliant product advertisement. You’ll start with a stock image of an Adidas shoe, extract it from the background, then combine it with various photo stocks to create a liquifying product advertisement.

Old style typography tutorial
Create a old style typography tutorial.

How to create an impressive-looking text effect
This tutorial will show you on how to create a strong and eye-catching text effect using gradient overlay, pattern overlay styles and combination of different techniques.

Photoshop Grungy metal effect
This tutorial you will be learning how to create a text effect using textures from stock images. The final image is a grungy picture with text being illuminated in the dark.

3D Valentine’s Day Typography (Exclusive Tutorial)
In this tutorial you will walk through different steps in creating this illustration. This technique can be used in a variety of ways and also for different themes besides Valentine’s Day.

Create a Psd Geek Wallpaper From Scratch
In this tutorial, you will learn how to make a high quality wallpaper for your desktop from scratch.

Some More Photoshop Resources

If you know of any other awesome text tutorials, share the link in the comments!

Get More From Your Site’s Visual Acreage

Joseph Alessio — Mon, 01 Mar 2010 16:00:44 +0000

One of the most important, and sometimes most difficult, parts of web design is deciding what to do with the space that is given you.

Usually, you have around 960 pixels in width and an indefinite height to work with, and it often feels like too much or too little. It’s very valuable when used correctly, but when used incorrectly it can destroy a website’s potential.

There are similarities in real estate. Each piece of property has a different value, some high and some low. Using a beautiful piece of property in the wrong way can diminish its value. By comparing page area in a website to real estate, we can learn a few principles that help us utilize the “property” of a web page to the maximum advantage.

Location

The location of a piece of property is probably the most important factor in determining its value. Prime locations are more visited and more public.

In web design, location is important too. There are several different page location factors that affect your content and how it is viewed.

Above the Fold

You’ve probably heard this term before, borrowed from newspapers and similar print media, and it simply means the area that is above the cutoff at the bottom of your viewer’s browser. Obviously, this is the part of your site that the viewer will see first.

This is the first impression that your viewer has of the page, and you need to take advantage of this area to show him/her that your site is worth taking time to look at. This is a good place to put attention-catching images and copy to keep the visitor reading (or looking).

HelpYourHabitat.org // OmidForIran.org

The yellow line in these image above is the “fold” line. You can see how the designers strategically put interest-creating information above the fold and have content cut off partially by the fold to induce the reader to scroll down and read more.

The old rule that visitors will not scroll unless you invite them to do so has recently been contested, and there is definitely no exact location you can judge the fold by, but the principle of putting the most important content higher up on the page still applies.

Reading Direction

Since most of your site visitors will read left-to-right and top-to-bottom, it is important to arrange your content in a way that will follow their attention pattern. Their eyes will probably scan your page like this:

DesignReviver.com

The person’s primary attention will go to the upper left, and then consecutively less attention with each area until they focus on the last area in the lower right.

The most important “properties” on your web page are the upper left quadrant and the lower right quadrant (i.e. where their eyes stop). Use this to your best advantage by placing content accordingly. Your most interesting content, particularly headlines and large header images, should go on the top right.

This principle is also known as the Gutenberg Rule. You can read more about it on blog posts such as this post by 3point7 Designs.

Zoning

In real estate, the zoning of a property designates what the property can be used for. Thus, residential zoned property can only be used for residential development, commercial property can only be used for commercial development, et cetera.

Similarly, in web design, your page has certain pieces of “property” that are “zoned” for certain types of content.

Readers Like What They’re Used To

A lot of content has standard, or at least commonly used, placements. We can think of this as the “zoning regulation” for this type of information.

The web page’s branding and navigation is nearly always in the upper right, whether the navigation is horizontal or vertical. The upper right corner is usually home to a search bar and icons linking to the RSS feed or Twitter page. People become used to finding certain things in the footer of a website, e.g. Twitter and Facebook, contact information, often a few links that the site owner feels are important.

WebDesignerDepot.com

For example, on Web Designer Depot, each feature is in a place where you could reasonably have guessed it would be.

If a site visitor can’t find something where he/she thinks it should be, he won’t stay on your site for very long. The frustration of looking for something that may not even be there is familiar to us all, and the easy option is to go back to Google and start your search again.

One of the most important ways in which “zoning” applies is in ad space. Advertising “real estate” is for advertising! Nearly all blogs and similar sites relegate the right column of their site to advertising.

If you bury content in the middle of advertisements, it will most likely be missed by your site visitors. It is a good idea to stick with the standard “zoning.” Leave things where viewers expect to find them rather than placing the advertising elsewhere and putting content in the right 1/3 of your website. Since readers are used to seeing only ads in that area, they won’t get the most out of your site.

Size

Last but not least, the size of a property helps determine its value. Making a particular element or feature of your site very large will undoubtedly draw quite a bit of attention. Big images, such as blog headers, are like a wide-screen TV, and they grab attention whether the reader means to be interested in it or not.

Fl-2 Blog

Recently, there has been a major trend towards huge type. With font replacement tools such as sIFR, Cufon, and @font-face, you can use beautiful fonts that are worth using a lot of prime website real estate for.

More and more people who aren’t into typography are beginning to recognize the beauty of letterforms, so using quality, large typography is a great way to give importance to a headline, even with a wide target audience.

If you don’t want to make the actual element too large, you can leave a lot of white space around it. Thus, the element “owns” a large amount of “property,” and takes over your site visitor’s attention.

Desigui.com

In the site above, you can see that, although the text logo at the top is not very large in size, it “owns” quite a bit of “real estate” on the page. There is a significant amount of space surrounding it before any other content begins or elements appear. Thus, it still is the obvious header and focal point.

Summary

So, by comparing the principles in real estate to web design, we actually learn how to better manage our pages. Now we can use the canvas of the web page more effectively.

Here’s a quick run-down of what we’ve learned from the real estate market:

Keep the most important information in the prime locations
Place the information where it belongs – “zoning”
More “real estate” means more important

Hopefully these guidelines will be helpful to you in your next web design project! What do you think of them? Are there any other tips you’d like to share about getting the most out of a page?

7 Essential Elements of Blog Design

Angie Bowen — Thu, 25 Feb 2010 16:00:42 +0000

The blogosphere continues to expand almost on a daily basis, and as a web designer we often inform clients of the numerous benefits of attaching a blog to their site. It is always a great way to continuously update your readers as to what new developments are being made in your business and what to look for as they stick with you on this journey.

This in turn, keeps your site well trafficked by the online masses as new content is added on a regular basis. And while there are a plethora of points and elements that are vital when designing a blog, some take precedence over the others.

No matter what style you are aiming for as you put the site together, even on the most minimally designed blogs, the elements discussed below are the essential ones to include and give a heavy focus to in your design. Each of these elements can potentially have a large impact on the success and failure of the site, even though the design is not responsible for the content that will eventually fill the blog.

So the next time you are contracted to design a blog, what ever direction you head in, make sure that you take these elements with you.

Header

Naturally this is an important part of any site, because it lets people know just where they are on the web. For example, if your site is called Read Write Web and you want users to know they are not on, say Facebook, then you would want to have a large header that reads ‘Read Write Web’ plainly so that visitors will know with a glance to the top of the page, where they have cyberly landed. This should help eliminate any confusion among your visitors, though it is not a guarantee.

The header will usually contain a logo, the name of the site or company behind it, and possibly some design flourish to accompany this text.

The header of the blog is one of the two main elements that should always steal the attention and focus of the user immediately. So it needs to stand out boldly, much like on a newspaper or magazine. And because you generally want this to be the first element of the site that the user looks to, most designers will position the blog header in the upper left corner of the site.

This is not always a necessity, but after years of subtle unintended conditioning, the online public has been trained to look there for the site name and logo. Also given that a large portion of written dialects and texts are setup to begin in the upper left hand corner, this is an almost expected flow for information.

More Examples

Post Headlines

If the header is one of the two main elements that should pull the readers attention its way, then the Post Headlines are the other. Once again to look at a print based template, newspapers and the like always take steps to have the headlines separated from the body text that follows it, using larger, bolder font choices.

These highlights grace the page throughout, guiding the readers eyes as they search for relevant or intriguing entries. The same goes for a blog. This visual playground is littered with material for the reader to sift through as they navigate through the blog, so you want to make sure that they have to exert little effort to locate the post headlines.

Headlines can certainly be a tricky element to work out, because you want them to be large and looming, but not so much that they become cluttered and feel like they are squeezed in, as if they were an afterthought.

This can be tricky to do given that once the design is out of your hands the user is plugging in the headlines of unknown character lengths. Definitely something to take into consideration, because though you want it to draw the eye, you want it to do so for positive reasons, not because it breaks the flow of the design.

A good place to start your search is with this list of big, bold headline fonts from DesignM.ag.

For this reason, the font you select may need to have the spacing adjusted to stack well and tighten the appearance.

More Examples

Navigation

Once again, as with any site, intuitive site navigation is an important element for the sake and sanity of the reader. Now as the designer you are not necessarily dictating what other pages will be included with the blog, but you do set how to get to and from them, and this important usability interface can be integral to the blog design.

In fact, what is the point of having other pages, if you are not going to showcase them to your readers in some form or fashion, and the navigation is an important part of that. Just creating the access is a big first step.

Navigation, while an important element that needs to be accessible and clearly marked, does not have a lot of restrictions as to how you can achieve this effectively and creatively.

One tip for over-delivering on this element, and thereby demonstrating its importance, is through a multi-layered approach. Not only having the main site navigation that is styled to match and fit in with the blog design, but you can easily include a simple secondary text-based nav element just below the footer of the blog. This is a quick addition to the site that will aid both your client and their readers.

You can get as complex as you like with your navigation though, as this unusual navigation gallery at Noupe will show you.

More Examples

Site Search

Archives are not the only way to work a focus on the content into your design, and given that blogging seeks to be engaging and does so through its content, let your design highlight this through the inclusion of a site search element as well.

Site searches give some users more comfort and familiarity than trying to use the navigation or archives to find what it is they are looking for on your site. They may also have come to your site via another and may want to just browse for a particular keyword that is not apparent on whatever page of the blog they have landed. A site search can address easily these concerns.

This can be done as subtly and unobtrusively as you wish, or you can go to more garish and bold places with it, but however you do it, just do it. Both the client and the readers will be appreciative of this thoughtful inclusion.

And as said, if you are into a much more minimal approach and the thought of yet another element to add makes you cringe, this is certainly not a cringe-worthy addition as much as it is a necessary one.

Besides the site search is easily worked into a minimal style as it can be tucked away nearly anywhere given that you determine its dimensions and the way it blends into the background. And as long as it does not detract from the blog design, why not make it that much easier for readers to surf the site?

More Examples

RSS Subscribe

Speaking of the content that pushes the blog forward, as the designer you want to be sure that you give the readers a way to subscribe to the site’s RSS feed, even though it means that they may not be exposed to your brilliantly crafted design.

Honor your design by helping to ensure it sticks around, and allowing readers to receive the content how they want it. As the designer, you will not be in charge of the content, but its delivery and presentation does fall to you. Cover the basic bases that readers have come to expect so as to not hurt the blog you are designing for.

Even though, design wise, this tends to be a rather small element, it still deserves your attention. After all, size doesn’t matter in design. It still needs to match the rest of the design so as to not detract from the flow and feel of the design.

With so many amazing RSS icons available from the design community, not to mention your own design skills to draw from, adding this ever important blog element should be an item to tick off your checklist.

More Examples

Post & Comment Styling

Blogs, by nature, are both engaging and interactive, and your design should highlight both of those aspects through one very important element; style.

In particular, the style of the posts and of the comments (when applicable of course. Find out from your client if they intend to allow comments before you dedicate any time to it, naturally). The posts are the lifeblood that flows through the blog and keeps it alive, just as the comments are an area of the heart that helps pump the blood.

So make sure that the design showcases the posts with substantial focus on the style. These areas are key, so be sure that their importance is reflected in the design with the grace and power that is owed to an element that carries this much weight for the overall site.

If comments are included, then you want them to stand out in the design to not only highlight this interactive element of the blog, but to also shine a light on the members of the community who are taking the time to share their thoughts. And you can do this through the design.

And by now everyone has heard of styling author comments different, but it’s possible to give every role in WordPress a unique comment style.

More Examples

That is a wrap

Those are the must-have design elements to focus on when you are designing a blog. What areas would you think need major focus? Just leave a comment below to keep the discussion going.

40 Creative Navigation Menus

Tehseen — Mon, 22 Feb 2010 16:00:24 +0000

One of the first things to do when planning out a new website is to work out all of the content that will be in the site. You then divide that up into sections and then into various levels of navigation.

The result is a boring list of links.

That list of links is one of the most important part of your website though, it goes without saying that every visitor to the site will be using them to get around.

In this post we’ve pulled together some of the best designed navigation bars (both horizontal and vertical) to help give you ideas to enhance your own.

Horizontal Menus

1. Fabric London

A beautiful minimalist menu with fast colors and a compact design.

2. Nopoko Graphics

Sleek looking tabs with drop shadow and a beautiful background pattern.

3. Culture Code

iPhone style menu for an Iphone app.

4. Box Wish

Simple, compact and sleek.

5. Mac Rabbit

Light colors and creative symbols make this menu stand out from the crowd.

6. Kyan Media

Solid colors and simple MouseOver effects make this menu pretty.

7. Loodo

A nice multi-colored menu. The tiny green car indicates the current page.

8. Firestone Live

A beautiful black and white themed menu with block fonts.

9. Matt Maxwell Design

A simple menu with beautiful contrasting colors.

10. Cognigen

Another simple, light-colored design with unique tabs.

11. Black Book Mag:

A black-and-white menu with a transparent effect.

12. Agachi

A simple multi-line menu with soft blue colors.

13. App Storm

A classy example of a minimalist multi-line menu.

14. Built By Buffalo

Wide tabs and simple fonts give this menu a pretty sophisticated look.

15. Clear Left

Another multi-line menu with a great color scheme.

16. Fashion Photography

A truly dynamic menu. A thumbnail pops up every time you hover on a menu item.

17. Mia and Maggie

A cool multi-line menu with the traditional underline effect.

18. Michael Austin

Wide tabs and simple colors.

19. Mint

Another wide-tabbed menu with a transparent effect.

20. Rockatee

Refreshing use of numbers with each menu item.

21.Ronny Pries

Chalk-on-blackboard effect makes the menu casual yet creative.

22. Royal Caribbean

Another great menu with elegant fonts and nice contrasting colors.

23. Small Stone

A really creative and unique menu for a DJ.

24. Sohtanaka

Pretty colors, elegant fonts and light effects.

25. The Resume Girl

Another creative menu with a nice casual look.

26. Sky Larkin

Each item in the menu is of a different color when you mouse over it. Really creative and fun.

27. Web Designer Wall

Another casual sticky-note style menu.

Vertical Designs:

28. Surfstation

One of the most elegant menus. Nice use of bullets in a minimalist design.

29. Alex Cohaniuc

An expandable vertical menu with lots of colors.

30. Carbonica

A casual arrow and a circle indicates the current page. The casual font also adds to the beauty of this menu.

31. District Solutions

Every item in this vertical menu turns a different color when you mouse over it.

32. IipVapi

A black-and-white vertical menu in the shape of a post card.

33. Intereactive

An elegant, multi-line vertical menu.

34. Power To The Poster

Sophisticated fonts and a transparent effect make this menu stand out.

35. Jeff Sarmiento

A colorful menu with extra large fonts and symbols.

36. McAllan Ridge

Another multi-line menu with a nice textured background.

37. Nando Designer

A casual menu with a notebook effect.

38. Pixel Media

Simple and elegant.

39. Nick Ad

A highly dynamic menu with great effects and contrasting colors.

40. Nocturnal Miami

Another vertical menu with a transparent effect.

Your Favorite Menus

Every site on the internet has its own menu, which means it’s simply impossible for us to even come close to finding all of the amazing menu designs out there.

What sites have you visited with a menu so nicely done, that you actually paused to look at it?

Fundamentals of A/B and Multivariate Testing

Mark Thompson — Thu, 18 Feb 2010 16:00:25 +0000

Many companies worry so much about how much traffic they can drive to their website. The real focus should be how can you convert more website visitors? Effective website testing can help increase site performance, usability and conversions.

By using A/B and multivariate testing techniques, you can experiment with different design elements to find a winning combination.

Lets take a look at the fundamentals of both A/B and multivariate testing.

A/B Testing

By definition A/B testing or split testing is testing the effectiveness of one landing page over another. Normally the current landing page will be used as the control, and a second page with some changes to the original will be used as the experiment.

There are a number of different elements that can be tested including colors, fonts, layouts, graphics, icons, headlines, offers, etc.

For this example, I will be using the Google Website Optimizer, a free testing tool that allows you to perform and track A/B and multivariate tests.

1. Identify the Page to Test

Decide on a page you would like to test. It’s recommended that you choose a page with high traffic so you can gather data faster and make a conclusion.

Once you have chosen a page, decide on one element that you would like to use as your testing element. Be bold when it comes to your testing element. If you simply change one word in a headline or change a color from black to grey, your chances of seeing noticeable differences are minimal.

2. Choose the Conversion Page

Decide on a desired goal that you want to track. That can be a contact form submission, a download, a purchase, a sign-up, a time-on-site goal, etc.

If you are tracking a form submission, purchase or a sign-up…you will want to have a unique “thank you” url that you can use as your completion page. This is the url you will add in the goals.

URL Goal in Google Analytics: Analytics Settings >> Edit >> Add Goal >>

Name the Goal, Choose “URL Destination”, then insert the unique URL under “Goal URL”

If you are looking to track an engagement on your site like Time On Site or # of Pages Visited:

URL Goal in Google Analytics: Analytics Settings >> Edit >> Add Goal >>

Name the Goal, Choose “Time on Site” or “Pages/Visit”, then enter the length of engagement.

If you are looking to track engagement goals, every site is different, so there will not be a benchmark to go off of….except your own. Monitor your current time on site and pages visited, then watch your progress over time to see your metrics have improved or declined.

3. Set up Tracking Scripts

In order to track your experiment properly you will need to add tracking scripts to your control, test, and goal pages. Depending on which testing software you use, it may very slightly, however they are very similar when setting up the tracking. Usually it will be a small snippet of java-script code. For Website Optimizer you can see the full installation guide here.

There are two types of script that needs to installed on your pages. Although it looks complicated, each set of script serves a purpose:

First, there’s the control script. Among other things, the control script makes sure that the experiment variations are switched randomly and that all variations are displayed an equal number of times. For this experiment (and in most cases), place the control script immediately after the tag. You’ll need to install the control script just on your original test page. For this experiment (and in most cases), place the tracking script immediately before the closing tag in each page.
The second set of script is the tracking script. It ensures that visits to both the test page and the conversion page are tracked by Website Optimizer for the experiment. For this experiment (and in most cases), place the tracking script immediately before the closing tag in each page. You’ll need to add the tracking script to your original test page, each of the alternate variation pages you’ve created, and your conversion page.

4. Decide on A/B Distribution, then Start!

Depending on the number of tests you are running, you will have to decide on what percentage of your traffic will be displayed the control page and version A, version B, etc. If you’re testing 2 pages, splitting the traffic up with 50% for each page is the simplest way to do it.

I would recommend starting with only one variable (i.e. your normal page, plus a page with one thing changed), unless you have a large amount of traffic to send to multiple test pages.

5. Analyze Results

Your testing efforts mean nothing if you don’t analyze the results and implement changes based on them. Google Website Optimizer has great reporting features that allow you to see which variation was more successful.

In this screen shot you can see the different variations that were tested, the estimated conversion rate, chances to beat the original page, and the actual improvements. The green percentages are improvements, while the red are variations that perform worse than the original. To the far right you can see the number of conversions and impressions that each variation received. Again, its important to state that unless you have a high number of conversions, you may want to start with one variation.

Multivariate Testing

A more complex test, the multivariate test allows you to test multiple page variables at one time. Unlike A/B testing, multivariate testing can essentially test endless variable combinations.

The only limitations are the amount of time it will take to gain sufficient data to come to a reasonable conclusion. The more components you add to a test, the longer and more data you will need to complete a test.

The process of designing a multivariate experiment is very similar to setting up an A/B testing experiment, however, what to test is slightly more involved. This graphic is a great representation of how each user is shown different elements on a page.

Website Testing Tools and Resources

Testing Tools:

Further Resources & Readings:

Recommended Books:

It should be said that you can perform these testing techniques on not only web pages, but email marketing campaigns, banner ads, and paid placement campaigns.

It should also be noted that you should always be testing. Just because variation A beat out your original page, doesn’t mean you should stick with that page. Try testing variation A with variation B to see if you can continue to improve.

Website testing is becoming a main component in more and more company marketing strategies. Marketers are beginning to realize that improving the conversion rate for existing traffic can be much more effective than trying to drive more traffic and convert less.

Have you experimented with A/B or Multivariate testing before? I’d love to hear your experiences and what parts of your site you tested!

50 jQuery Tools for Awesome Websites

denbagus — Mon, 15 Feb 2010 16:00:18 +0000

By now, everyone has heard of jQuery. It’s a framework that makes JavaScript development much easier, and has become massively popular for adding JavaScript functionality to websites.

In this post, we’ve picked out 50 of the best scripts we know of and talked about why they rock. They can help in just about any aspect of a website, so enjoy!

Editors

These first tools don’t use jQuery themselves, instead, they’re editors to help you write and edit your own jQuery scripts.

1. Aptana Studio

Aptana Studio is a tool built for making great websites and webapps. It supports a wide range of JavaScript frameworks, including jQuery.

2. Komodo Edit

Komodo Edit is an open source editor that provides features such as auto complete, call tips (CSS, HTML, JavaScript, Perl, PHP, Python, Ruby, Tcl, XML and XSLT), multi-language file support, syntax coloring, syntax checking, Vi emulation, Emacs key bindings and more. One of the most useful features is the ability to extend Komodo Edit. You can find lots of useful add-ons for JavaScript developers like DOM Inspector , Komodo Extension Developer ,Venkman JavaScript Debugger and Hack It

3. Spket IDE

Spket IDE provides features like code completion, syntax highlighting etc. to help developers create efficient JavaScript code productively. Spket IDE is free for non-commercial use.

Navigation

4. Coda-Slider 2.0

Coda-slider JQuery plugin, which was published first in September 2007. Their goal was to mimic the regulatory impact on the promo page for Panic Software Coda. Coda-Slider 2.0 was built from scratch and should be much more flexible and lighter than its predecessor.

5. jQuery Treeview Plugin

jQuery Treeview Plugin is Lightweight and flexible transformation of an unordered list into an expandable and collapsible tree, ideal for unobtrusive navigation enhancements. It can even set a cookie to remember how a user last left the menu.

6. Accordion Menu

This plugin creates an accordion menu. It works with nested lists, definition lists, or even just nested divs. It has options to specify the structure in which the active element (to adjust to the first display) and animations.

7. jquery mb.menu

jquery mb.menu is another very powerful component for easy creation of jQuery multilevel tree menu or context menu (right mouse button).

Forms

8. jQuery Nice Form

jQuery Nice Form is simple way to create a form, but can also make more complicated forms if you desire.

9. jQuery form validation

jQuery Validation is a jQuery plugin that checks a user’s input as they fill out a form.

10 . Ajax Fancy Captcha

Ajax Fancy Captcha is a jQuery plugin will helps you protect your web pages from bots and spammers.

11. Masked Input Plugin

Masked Input Plugin lets you easily set a format that a form input must be in, e.g. a phone number field could onto contain numbers, dashes and dots.

Tables

12. DataTables

DataTables is plugin for Jquery. This is a very flexible tool, that adds advanced interactive controls to any HTML table

13. TableSorter

Tablesorter is a JQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sorted table without reloading the page. Tablesorter successfully analyzes and classifies the different types of data in the cells.

14. FlexiGrid

Flexigrid adds a lot of formatting options to tables, including pagination, column sizing and navigation/search controls.

15. Colorize

Colorize highlights the columns/rows that a user has currently moused over or selected. You can set the exact color changes you’d like in the options.

16. uiTableFilter

uiTableFilter allows you to instantly search a table and only display rows with your results in them, e.g. check out the demo page.

Upload Files

17. Uploadify

Uploadify is a JQuery plugin that allows easy integration of multiple (or single) file upload boxes on your website. This plugin requires Flash as well.

18. Multiple File Upload Plugin

Multiple File Upload Plugin (jQuery.MultiFile) is another plugin for allowing multiple file uploads, but this time without Flash being needed.

Image SlideShows and Galleries

19. Ad Gallery – Custom Photo jQuery Plugin

Ad Gallery takes a simple unordered list of images and then converts them into a, much more presentable, gallery.

20. slideViewerPro

SlideViewerPro is another highly recommended script for easily making interactive galleries from your photos.

21. Pikachoose

Pikachoose offers a number of options for displaying your pictures, including slideshows.

22. Galleriffic

Galleriffic has a slightly different layout for its gallery by default, but it looks great!

23. Galleria

Galleria is great because it loads progressively, i.e. as each image is loaded, its thumbnail will appear. It won’t make you wait for the entire gallery to come down.

24. Simple Controls Gallery

Simple Controls Gallery is an easy way of making an automatic slideshow of photos for your users, and offers controls for them to pause/skip forward.

25. JQuery (MB)gallery

jQuery (mb)Gallery is a little more complex than some of the other options here, but it supports showing different albums in one gallery so it may be worth the extra effort.

26. Galleryview

GalleryView is extremely well documented/demonstrated on its page so if you’re unsure about how to set up some of the other plugins, give this one a go!

27. Supersized

SUPERSIZED, as you might expect, supports displaying images the full size of the browser window. The cool thing about this is that it will resize the image, keeping their ratios, to fill the screen for you without any part of the picture being cut off.

28. Easyslider1.5

Easy Slider 1.5 is jQuery plugin that offers many features such as auto slide, continuous sliding, “go to first” and “go to last” button, hiding controls, vertical sliding, multiple sliders on one page, and many more.

Content Editor

29.jWYSIWYG

jWYSIWYG is a lean script that converts text fields into visual content editors.

30. MarkitUp!

MarkItUp! is a JavaScript plugin built on the jQuery library. MarkItUp allows you to turn any textarea into a markup editor. HTML, Wiki Syntax, BBCode are all supported, but even better, you can define your own markup language!

31. HTMLBox

HTMLBox can convert any textarea into a visual editor. It is very feature complete and packs in just about any formatting option you could ever need!

32. Lightweight RTE

As the name implies, Lightweight RTE focuses entirely on creating a text editor while adding as little weight as possible to the page. At only 7kb when compressed, I’d say they succeeded!

33. WYMEditor

WYMeditor is a WYSIWYM (What You See Is What You Mean) XHTML editor. It focuses on editing the structure of the content to what the user would like, but leaves the presentation controls to you.

Twitter

34. Realtime Related Tweets

Realtime Related Tweets displays a set of Tweets in real-time that are related to your post.

Calendars and Datepickers

35. Transcendent

Transcendent makes it easy to set dates via calendars, and even select whole date ranges between two days.

36. Clockpick

ClockPick is intended to make setting a time easier. Check out the demo page (click one of the white input fields) to see what you think.

37. Weekly Calendar

Weekly Calendar sets up a great looking calendar very similar in functionality to Google Calendar.

38. UI Datepicker

UI Datepicker makes date entry on forms so much easier for your users.

Charts

39. Visualize

Visualize is jQuery plugin that turns regular HTML tables of data into charts.

40. JS Charts

JS Charts allows you easily to create a variety of charts, including pie charts, line, and bar graphs.

41. Google Charts GUI

Google Charts GUI uses the Google Charts API to create its charts, so as you can imagine, they look great.

42. JqPlot

jqPlot’s specialty is for line graphs, as you can see from the screenshot.

Tooltips

43. jQuery Tooltip – Tooltips done right

Tooltips Done Right can set up tooltips with any HTML you like, including images and tables.

44. Jtip

Jtip is another tooltip script that gives you a lot of control over the output.

45. jQuery (mb)Tooltip 1.6

(mb)Tooltip 1.6 will take your regular link “title”s and design a nicer looking tooltip from them.

Tabs

46. TabContainer

TabContainer lets you easily set up tabbed sections, and fade between them.

47. jQuery UI Tabs

jQuery UI Tabs is a simple tool for setting up tabbed content areas on your blog.

Rounded Corners

48. Curvy Corners

Curvy Corners helps add rounded corners to your divs, at least until CSS3 support for border-radius is more common amongst your users.

LightBox

49. Thickbox

Thickbox is ideal for displaying images. It loads on top of the rest of your page (Not a traditional pop-up though!) and gives the user controls to browse to the next image, space for content and easy exit controls.

50. SimpleModal

SimpleModal creates a similar effect to Thickbox, but its specialty is in displaying any sort of content you like. No need for it to be an image.

That’s Them All!

Those are 50 of our favorite jQuery tools. We’ve covered a wide range of functionality in this list alone, but there is much more out there!

What jQuery scripts have you used on your sites? Anything we should know about?

Educating Web Designers on Google Analytics

Mark Thompson — Thu, 11 Feb 2010 16:00:56 +0000

Most web designers have heard of Google Analytics, but many of them have not taken the time to understand just how valuable the data can be. There is a wealth of knowledge you can gain about your web traffic that can help improve your site design and marketing efforts.

For web designers it is important to understand how visitors are interacting with your site. What pages are visitors landing on? What pages are visitors exiting on? How long are visitors staying on site? Where are visitors leaving in the conversion funnel? All of these questions are crucial for turning a pretty website, into a pretty website that converts!

Let’s break down the important visitor data specific to web designers that will contribute to improving usability, engagement, and conversion rates.

Entrance Pages

In Google Analytics: Content >> Top Landing Pages

It is important to understand what pages users are entering on when they get to your website. For new visitors, this will be the first time they browse your site, so you will want to make sure the page they land on is engaging and compelling. Are they landing on the homepage? a service page? a viral blog post?

For a typical company website, it is normal for the majority of users to enter on the homepage or a service page. For a blog or news focused site, it is not unheard of for popular posts to be the top entrance page. Look at the top landing pages and the bounce rate side-by-side. Do you notice a page that has a noticeably higher bounce rate than the other pages? There could be a number of reasons why this is.

The page was not relevant to their search query
The content was not engaging enough to keep the user on the page
They were reading that days blog post, then left (usually enters via direct traffic)

For designers, look at the page and see if there are things that can be improved from a design standpoint.

Try a different content layout
Try a new call to action/offer
Test a different headline
Test different graphics/icons/fonts/colors

Which ever are the top landing pages, these are the pages that get the most attention. Whatever the clients objectives/goals, try to work in ways you can incorporate those goals onto the page. Add a quick contact form, make the phone number prominent to entice users to call, create a download graphic, etc…

Exit Pages

In Google Analytics: Content >> Top Exit Pages

If visitors are consistently exiting on a certain page(s), look at the page and ask yourself why? Similar to landing pages that visitors are entering on, look to see if there are ways to improve the page. Typically individual blog posts will have high bounce rates because the user reads the post then leaves. In order to keep the user engaged in the content, try adding relevant links to other content throughout post. For e-commerce sites, try adding similar or complimentary products that the buyer may enjoy.

Bounce Rate

In Google Analytics: Visitors >> Visitor Trending >> Bounce Rate

Just to define Bounce Rate quickly, it is when a visitor enters a page, then leaves without visiting another page or is idle for over 30 minutes. As we discussed, bounce rate is a more useful statistic for e-commerce site, rather than blogs or news sites because there are more variables to take into consideration. Users who visit blogs frequently bookmark web pages to view later, which can skew results.

Nevertheless, web designers can use this information to help gain insight on what pages need attention. Try using a testing software like Google Website Optimizer to run A/B and Multi-Variate tests to improve page engagement.

Also check out Lowering Your Bounce Rate: What to Analyze

Time On Site

In Google Analytics: Visitors >> Visitor Trending >> Time On Site

Usually the longer you can keep someone on a site, the more likely they are to convert into a lead/customer. Many times you will notice a correlation between bounce rate and time on site. If the visitors time on site is very low, typically the bounce rate will be very high. So what can you do to keep people on your website longer?

Add a video that explains the service/product
Add graphics that help explain the content
Make sure there is a consistent layout across all pages
Fix any broken images or links
Add a poll or survey
Incorporate social media features (Google Friend Connect, Tweetmeme button, etc…)

Goals/Conversion Funnel

In Google Analytics: Goals >> Funnel Visualization

Probably the most important data to look at is the goal visualization funnel. This graph will show you where visitors enter the conversion process and at what step users exit or complete the funnel. This graph can identify flaws in your sales process. It could possibly be that an error is occurring during the process and users are unable to move on to the next step. It may also be that your checkout process involves too many steps or that you ask for too much information so nobody is filling out the form. Especially for e-commerce sites, it is important to optimize the checkout process by minimizing the number of steps it takes to purchase and offering multiple payment and shipping methods.

Here are some quick tips to help with the checkout/goal funnel.

Add fields that are MANDATORY only
Remove “Optional” fields
Explain that you do not spam
Add secure payment logos
Give multiple payment/shipping options
Show a cart summary during the process
Remove unnecessary steps or combined

Browser Type

In Google Analytics: Visitors >> Browser Capabilities >> Browsers

When looking at browser types it is important to see which browsers and browser versions people are still using. Just because a website looks fine in Firefox 3.5 or IE 8 doesn’t mean that someone using IE 6 will not have issues rendering the page.

Seeing browser stats will make you aware of which versions you still need to make sure the website renders properly in. If you notice that less then 1% of the visitors are using IE6, it probably is not worth your time to figure out why something is not working properly.

To find out how to test your site in all browsers (Including mobile ones), have a look at our post on how to test a blog.

Screen Resolution

In Google Analytics: Visitors >> Browser Capabilities >> Screen Resolutions

5 years ago web designers used to design a website for 800 x 600, now with flat screen monitors becoming the norm, the minimum screen resolution is usually around 1024 x 768. Screen resolution data can have a big impact on how you design your site. Analyzing resolution data over a period of time can allow you to see trends in user monitors.

Mobile Devices

In Google Analytics: Visitors >> Mobile >> Mobile Devices

With the innovation of smart phones and other mobile devices, there has been an increase in mobile web usage. This has made web designers rethink how they design web sites. Using Google Analytics, you can start to see an increase in the amount of mobile device traffic. Now that people are browsing websites on their iPhone’s and Blackberry’s, designing a mobile version of your site (or for blogs; ensuring your normal website displays well) is imperative to cater to these visitors.

If you haven’t installed an analytics solution on your website, go sign up for a free Google Analytics account and start tracking your visitor data. If you just take 20 minutes a week to analyze the data and see what users are doing on your site, it can help assure you that your designs are doing what they were meant to do.

I would love to get some feedback from web designers.

How do you utilize web analytics data to benefit the overall designs of your sites? What other analytics solutions do you use to help understand your web visitors?

How to Install Wordpress on your PC

sogeking — Mon, 08 Feb 2010 16:00:10 +0000

Wordpress is arguably the most popular and the best blogging platform out there. You might have installed Wordpress on your site, but you might be scared to experiment with Wordpress worrying that you could break your site and Wordpress.

Experimenting is one of the best way to learn new things and if you break your site, you probably might not want your visitors to see the fault as it might leave a bad impression. So, it is necessary to have the ability to learn WordPress and try new themes, plugins and other items without putting it online where people can see.

So, the best solution is to install WordPress locally on your computer. It will save you quite a bit of time since you can just put your files inside your WordPress folder without having to upload it to FTP. You can do anything you want with WordPress without a worry which surrounds you when you put it online. The possibilities are endless. Here is a step-by-step instruction on how to install WordPress in localhost using XAMPP. I hope it will become a great use to you.

1. Go to the official XAMPP website. We are going to use XAMPP as it is one of the best Apache distribution containing MySQL, PHP and Perl. It is very easy to install and use.

2. Select your operating system and which format you want to download. You can either choose a zip or a exe format. I would recommend the .exe file. There are also portable version such as XAMPP lite, but using XAMPP is just fine for what we need. There are also add-ons available such as Tomcat, but it but they’re not necessary for our use, may be something you want to experiment with at a later date though!

3. Open the installation file and you will be presented with a window. In, the destination folder, choose your destination. “C:\” is recommended. Click install to start the installation (Won’t take more than a minute or two!)

4. When the installation is almost done, an MS-DOS window opens, You might think you have to type a bunch of codes, but that’s not the case. This window just helps you set your preferences. The answers are just yes and no.

First question it will ask you is whether you should add a desktop shortcut. Type “y” for yes and “n” for no.

5. The second question it will ask you is whether you want to locate the XAMPP paths correctly. Type “y” for yes. I would recommend saying yes because XAMPP usually locates the paths correctly for you, much easier!

6. The third and last question it will ask you is whether you want to make XAMPP portable or not. You can choose which ever one you want, but i would recommend saying no if you aren’t going to be making use of the portable functionality (We won’t be in this tutorial) because it makes it easy for us to see the path such as C:\ and easier in the browser.

7. After this is done, XAMPP starts configuring and you will see this appear in the window. Press Enter and XAMPP will have been correctly installed in your computer.

8. Go the the destination folder you gave (such as C:\) and look for “xampp-control” and open it. Now that XAMPP installation is complete, it is time for us to start using it.

9. You should see this open up. This helps us specify which services we want to start.

10. Click start on “Apache” and MySQL. They are services required for running WordPress. XAMPP uses port 80 as a default port, so if you have any issues, try making sure no other programs are using the port (Skype occasionally tries it). It will say “Running” next to the modules if they are started. The others don’t need to be started.

11. To check if XAMPP is working, open your browser and type “http://localhost/” and you should see this. Yes! we are good so far. Choose your language for the list.

12. After that, you should see a page saying that you have successfully installed XAMPP on your system. Hoora!

13. Now that we have successfully installed XAMPP, it is time to get WordPress. Go to wordpress.org and download WordPress. Extract the folder.

14. Now, the steps get critical. Make sure that you do these steps carefully or the installation of WordPress probably won’t work. Go back to XAMPP folder (C:\xampp) and go inside a folder called “htdocs”.

15. This is where we are going to put the WordPress folder. Copy the wordpress folder that you extracted and put it inside the “htdocs” folder. Note: Make sure that when you copy the WordPress folder, not the folder above it such as “wordpress-2.9.1″

16. We need a database for WordPress so that we can install it in our computer. Go to your browser and go to localhost (http://localhost/) and click on phpMyAdmin and you should see a page like this.

17. We need to create a new database for WordPress. Look for the “MySQL localhost” section and you should see some boxes, and on top it says “Create new database”. That is what we need.

18. On the box on the left, your will enter a database name. You can name it whatever you want. I will call it “wordpress_test”. Then, on the next box, your will see a list of options. Scroll to the end and select “utf8_unicode_ci”. We are going to use this option because it supports expansions and ligatures. Click Create.

19. You will be notified that the database “wordpress_test” has been created.

20. Now, go inside xampp/htdocs/wordpress (for example C:\xampp\htdocs\wordpress) . Then, we need to setup up wp-config. This is to configure wordpress to fit our database, username etc. Many people are familiar with this step.

22. Rename the “wp-config-sample.php” to “wp-config.php” so WordPress will recognize your config file (Depending on how you’ve set up Windows, the .php may or may not be displayed. If wp-config-sample doesn’t show it visibly, don’t add it on to the wp-config when you rename it). Open the file you have just renamed (wp-config) with your favorite text editor (e.g. Notepad, not Microsoft Word!).

23. Now you will need to change these parts of the wp-config.

24. So, inside the DB_NAME to the right you will see ‘putyourdbnamehere’. That is where we will put our database name. Delete the putyournamehere (without deleting the apostrophe) and put “wordpress_test” (remember that is what we called our database in phpMyAdmin).

In the same way, put “root” in the DB_USER part. Then on the next part (database password), leave it blank, since we haven’t set a root password for our MySQL.

We will also not change any part of the DB_HOST because localhost is what we want and it is already localhost. This is just a test site, so no other configuration is needed here. Now, we are done with the configuring. It will be easier to understand what I am saying by the illustration below.

25. Save and close the file (wp-config.php). Next, open your browser and go to “http://localhost/wordpress/”. Hooray! It worked. You will see this screen and once again, many people are pretty familiar with this process. Put your blog title and email and click “Install WordPress”

26. Success! You will be notified that WordPress has been installed. You will get your username and random password. Copy the password and click “Log in”.

27. You are now in the login page. The username is admin and paste the password. Don’t worry about memorizing the password as we will change it.

28. Success again! We are in the wordpress dashboard. The very first thing you might want to do is change the password. On the red bar, click on the “Yes, Take me to my profile page”.

29. Scroll down and change your password, then update profile.

30. Yes, now you are all set. When you go to http://localhost/wordpress. You should see your blog with the default theme Kubrik.

31. You are done. There are a few other things I would like to remind you. In the XAMPP Control Panel , Apache and MySQL have to be running. You don’t need FTP to change stuff in wordpress. Just go inside xampp\htdocs\wordpress and change everything there. For example, if you want to add themes, just go inside wordpress\wp-content\themes and put your themes there.

32. There you go. That wasn’t too hard. You can now master WordPress without worrying about breaking your website and you will also save some valuable time. Go celebrate!

Then, come back and you are free to experiment with WordPress any way you like. Try out new posts, themes, plugins and explore the wonderful world of WordPress.

If you have any problems or want to ask a question, feel free to comment below. I will try my best to answer your questions.

I would also appreciate it if you commented what you are going to use WordPress in localhost for. I hope you enjoyed this post!

Pro Blog Design

Get to Know the WordPress Hierarchy

Home

The Hierarchy

Single

The Hierarchy

Archive

The Hierarchy

Category

The Hierarchy

Tag

The Hierarchy

Author

The Hierarchy

Date

The Hierarchy

Search

The Hierarchy

404

The Hierarchy

Page

The Hierarchy

Conditional Tags

The Visual

Your Turn

Automatic Amazon s3 Backups on Ubuntu / Debian

An Overview of Our Setup

Step 1 – Set Up Encryption

Step 2- Sign up for Amazon s3

Step 3 – Install Duplicity

Step 4 – Our Duplicity Backup Script

Step 5 – A Restore Script

Step 6 – Backup Your Databases

Step 7 – Automate all of This

Troubleshooting

Conclusion

40 Extraordinary Photoshop Text Effects

Tutorials:

Some More Photoshop Resources

Get More From Your Site’s Visual Acreage

Location

Above the Fold

Reading Direction

Zoning

Readers Like What They’re Used To

Size

Summary

7 Essential Elements of Blog Design

Header

More Examples

Post Headlines

More Examples

Navigation

More Examples

Archives

More Examples

Site Search

More Examples

RSS Subscribe

More Examples

Post & Comment Styling

More Examples

That is a wrap

40 Creative Navigation Menus

Horizontal Menus

Vertical Designs:

Your Favorite Menus

Fundamentals of A/B and Multivariate Testing

A/B Testing

1. Identify the Page to Test

2. Choose the Conversion Page

3. Set up Tracking Scripts

4. Decide on A/B Distribution, then Start!

5. Analyze Results

Multivariate Testing

50 jQuery Tools for Awesome Websites

Editors

Navigation

Forms

Tables