Check out the Latest Articles:
Using Location Awareness

A future web design trend that I predict is location awareness, and using it to ensure a better user experience. However without access to GPS, most of the world's desktop PCs will have to rely on other means of telling servers where they are. One way that we can use today to determine the location of any given computer is by using a user's IP address and feeding it to a service that will tell us where the computer is located. Now while this sounds great in practise, in reality most services aren't all that accurate. But saying that, most can tell you what country a user is visiting from. So how can we use this is web design?

Well say for instance you have two e-commerce sites that are essentially the same shop - one for your American audience, and one for the UK. Differences might include currency conversions and product listings, and it would be nice to be directed to the right site should you accidentally visit the wrong one. For example Crucial's website alerts the user with a nice little pop-up, asking them if they would like to visit their international site, as it were, as you can see below.

Crucial Popup

This sort of interaction is really beneficial to the user because it stops them making mistakes later on, and more importantly, it's easy to accomplish!

Now instead of presenting you with all the code, I'm going to tell you how I accomplished the desired effect - hopefully I'll make you actually think about how it works :)

So first off I visited this code snippet page to get my code for finding out where the user is. I then took the array filled with information and used an "if" statement to evaluate it. So something like...

if($ipInfo["country"]=="GB - United Kingdom"){
  echo '';
}

The code above will initiate a JavaScript function if the user appears to be coming from the UK. This function would do anything you want really, I would suggest you use a nice pop-up box to alert the user, much like the one shown above, and then allow them to navigate to another site. I would argue against immediate redirection, because the reliability of a free database cannot be ensured, and you wouldn't want to be redirected to the wrong site without the option to navigate back, now would you?

As I said, this is a really easy way of determining where your users are, and making a decision based on that information. Users will thank you for helping them out, and admire the fact that you know where they live!*

*Users may not be impressed by this simple technique ;)

Using CSS Sprites

Navigation is an important part of how sites work, and so I think we can all agree that it is important for our navigational items to look nice. One problem that many sites encounter is the slow loading of roll-over images that are used to give feedback to the user. I'm sure you know what I'm talking about here - when you roll-over an image and it goes white for a moment before loading in the image? Well the reason for this problem is because the browser only loads the images that are going to be used immediately, and so when you're CSS uses something like #nav-item:hover { background-image:url(images/2.png) } to change the background image, the browser has to go off and find that image.

Ways of avoiding this are simple, and one of the best ways to do so is by using one image for all of your navigational images within one image! Sound crazy? Well that's what we call a sprite. Using CSS sprites will reduce your web-page's loading time and greatly reduce the number of requests made by the browser, and that can only be a good thing. Many sites use this method to ensure their servers don't die altogether, for example Apple uses it for their primary navigation.

Apple's Menu

So lets go ahead and create a nice looking menu.

We will begin with the HTML.

<div id="nav">
  <ul>
    <li id="menu-home"><a href="#">Home</a></li>
    <li id="menu-blog"><a href="#">Blog</a></li>
    <li id="menu-contacts"><a href="#">Contact</a></li>
    <li id="menu-about"><a href="#">About</a></li>
  </ul>
</div>

So that will just create for us a simple unordered list that we can now manipulate using the CSS below (and don't forget to link to your CSS file).

* {
margin:0px;
padding:0px;
}

#nav {
width:700px;
height:55px;
overflow:hidden;
padding-top:0px;
margin-left:0px;
margin-right:0px;
display:block;
list-style-type:none;
}

#nav li {
list-style:none;
top:0px;
}

#nav a {
display:block;
width:150px;
height:100px;
background-image:url(images/blueMenu.png);
text-indent:-9999px;
float:left;
margin:5px;
}

#menu-home a { background-position:0px 0px; }
#menu-home a:hover { background-position:0px -50px; }

#menu-blog a { background-position:-150px 0px; }
#menu-blog a:hover { background-position:-150px -50px; }

#menu-contact a { background-position:-300px 0px; }
#menu-contact a:hover { background-position:-300px -50px; }

#menu-about a { background-position:-450px 0px; }
#menu-about a:hover { background-position:-450px -50px; }

So together that HTML and the CSS will create a rather lovely menu. To customize the menu you will need to create your own image and aligning it up with the values in the CSS. To view a live example of this visit the demo page.

So what are the real benefits of this method? Well first off it will speed up your site, and although you might not recognize the speed increase straight-away, on sites where daily visits are in the 100s of thousands, the fewer HTTP requests, the better. Also there are the obvious benefits of using images as opposed to text, for example post pictures, and nice roll-over effects.

To finish I'd like to mention one drawback - if you want to edit only one menu item, you will have to have access to the original file to edit it, and then upload it to your server. This can be annoying if you are working on somebody else's site.

Oh and by the way, you don't have to just restrict yourself to menus, many of the larger sites such as YouTube use huge sprites to hold nearly all of the images on their site. Such an approach can be annoying if you are constantly editing your site, but the pros received on a large site are huge and will usually outweigh the cons.

Why you should be using PHP

I would like to introduce you to PHP. If you aren't already using PHP on your site, you should be! PHP is an easy way of generating dynamic content and interacting with all sorts of things, from the server, to the user, right back to databases. In past tutorials I've used PHP without first explaining [...]

Resizing images – the right way

Something that is very important on the web today is how fast our websites load, and alongside script optimization and other fancy tricks, images are a large part of our sites, and so it's important that they are optimized for the web. However what if we don't have control over the size of the images, [...]

Building a CMS Part 3

Note: I must apologist for the lateness and length of this article - I got caught up with other things, sorry and enjoy!
And so we've arrived at the last in this set of tutorials; if you've been following along, by now you should have a user system as well as a basic CMS. [...]

Building a CMS Part 2

So if you're following this set of tutorials you should now have your very own login system that allows users to sign up and login. However these tutorials aren't about building a user base, so we need to add the functionality of a CMS. At the moment if a user logs in they will be [...]