1. Make a Favicon
It's almost ridiculous how quick and simple this task is, yet without it a site can seem slightly off. A Favicon is the 16x16 pixel image shown at the top of the browser when visiting your site. For example, the Favicon for this site is a white letter "C" inside a blue square. All you need to do is install the Favicon plugin for Photoshop, make your 16x16 pixel image, save it as a .ico file, then upload it in to your root directory. Don't forget to include this code in the head of your index page:
<link rel="icon" href="favicon.ico">
2. Add hover effects to links
If a page gives no response or feedback to a user, it will feel lifeless. Not only that, but if interactive elements aren't clearly shown to be just that, the user may not know what to do next and feel disoriented. Luckily for us, it's pretty easy to fix this all with a bit of CSS.
a) The basic text hyperlink
In your body and paragraph text it's almost always a good idea to keep the underline of a link. Since the dawn of the Internet people have been familiar with this, and so by habit will know that piece of text will lead to somewhere else by clicking on it. This means you should avoid setting "none" as your value for the "text-decoration" value, which is easily achieved by simply not doing anything at all. As for navigation buttons, you may prefer the style of them without the underline. Go ahead, because these will usually be much more easily found than the other links within your site, so users will not have much trouble identifying them as interactive elements.
When the cursor is placed over the text, having it change in some way is a good way to show the user that they have got their cursor in the correct place to click and proceed with their browsing. This could be a change in colour, a background highlight, a change to italics, or a number of other things. Here's the CSS code to apply a change in text colour when the user places their cursor over a text hyperlink.
a:hover {
color: #f2f6f8;
}b) The DIV highlight
The principal and the methods are almost the same for this one. When a user hovers over it, this will cause a change to occur to the whole area of the DIV. This is particularly good for showing that a large portion of text is clickable, and is much nicer on the eyes than a whole block of underlined text. I think the best way to use this is by creating a subtle colour change in the background. To get this working, use this CSS:
.divStyle:hover {
background-color: #e8eff3;
}c) The button image
This is great if you really want to make a statement about a link, or even for use in the site's main navigation. It takes a little more work than the other methods but produces fantastic results if your button's visually pleasing. The first step is to design your button graphic. It can be any size you want, but mine in this example is 160px wide and 31px high. Once you've done this, make a duplicate and make the visual change to it that you want to happen when the user hovers over it. I've gone for a simple increase in brightness. Now that you've got both versions of the buttons finished, place the highlighted version directly below the standard version with no gap in between, and crop around them to the very edges. You should have something that looks like this:
Now for some CSS. We're going to make a DIV the size of one of your buttons and place the image inside it. This should just show your top, standard button image. Then, with a bit of trickery, we can make it so that the position of the image is changed to sit on the bottom of the DIV when the user hovers over it, thus revealing the bottom half of the image and concealing the top. Here is how we do it:
#divName {
display:block;
width:160px;
height:31px;
background-repeat:no-repeat;
background-image:url("buttonurl.jpg");
}
#divName:hover, {
background-position: bottom left;
}3. Use drop shadows
By simply adding a drop shadow do some parts of your design you create depth, which can be used to attract attention to important parts of your site. Don't overdo it though, too many shadows on your page can make it look cheap and tacky. Try to limit yourself to having three different types of objects on your page with shadows. The trick to making them fit in with the rest of the page is to use a low opacity, because there doesn't need to be a heavy shadow in order for the extra depth to be obtained. Subtlety works best.
4. 404 page
This is something that perhaps only a tiny percentage of your viewers will see, but if left with the default 404 page a website loses its level of professionalism and the style continuity is interrupted. Make sure you create a custom 404 page with your navigation menu intact, so that any users who take a wrong turn can easily get themselves back on track. Once you've made it, save it as "404" followed by the extension, in my example I am saving it as "404.php". Now upload it to your root directory.
Open your web design application (for example Notepad++ or Dreamweaver) and enter the following code in to a blank document:
ErrorDocument 404 /404.php
Save the document as ".htaccess". This file will automatically redirect a user from a non-existent page to your 404 page. That's it!
5. Make your logo act as a link to the homepage
It's commonplace in web design to have the logo in the top-left of the browser because that's where the user will look first, and this enables them to identify you immediately. It really helps to make a click of your logo direct to your home page, as this has become something people expect on the Internet now. The code for this may seem obvious, but there's one other thing to consider, and that's search engine optimisation. Using heading tags correctly is vital to letting the search engine spiders get around your site, so it's imperative that the logo is labelled as the first heading. Here's the HTML for making this happen:
<h1 id="logoDiv" title="My Website Home"><a href="index.php" title="My Website Home"><img src="logo.jpg" alt="My Website Home" /></a></h1>
Inside the div for the logo we've placed the image and wrapped it in an anchor tag. Here's the CSS to accompany it:
h1#logoDiv {
position: relative;
display: block;
width: 280px;
height: 53px;
}
h1#logoDiv a {
position: absolute;
height: 53px;
}It's important that the anchor attribute for the div has its position set to absolute so that the active hyperlink area doesn't spill outside of the image.
6. Give all links the Title attribute
A pretty simple one, this. For accessibility reasons, the title attribute should be applied to all links. It means you can provide those who use screen readers with information about where a link leads. It's important to make sure everyone is able to browse your site with ease, so this is a little something you can do towards helping. Here's an example:
<a href="contact.php" title="Use the contact form to get in touch">Contact me</a>
7. Provide a sitemap
A sitemap is a structured list of all the pages on your website. Note that I am not talking about XML sitemaps (designed to help search engines' spiders explore a site) but instead the kind that helps your user find a page quickly. If your site is relatively small, for example it may have 6 main content sections and a couple of sub-sections for each of those, then your sitemap will of course be small too. In this instance, you may wish to have it placed in the footer of every page in your site, as it enables immediate access for everyone. If you have a larger website then it's best to have all the categories and pages assembled on a separate page of their own, with a small link to the sitemap on each page. See the footer of this site for an example of a sitemap, it's really as simple as writing the name of each existing page and linking it.
8. Create a "next step" button
Visitors need guidance around your site. It's not unusual for a user to look at the home page and think "now what?". Is there a particular thing you'd like them to do or see during their visit, if nothing else? Make it obvious by creating a large button and have it link to your main event. Make it big, make it bold, make it shiny if you like. The more it attracts attention, the more likely you are to get people looking at the stuff you want them to see.
I hope this has been of help to someone out there starting their journey in web design. Good luck!