This technique of image replacement can be found on a range of websites including the Apple website and Web Designer Wall, and it has a range of benefits, mainly loading time and reduction of file size.

Using the image replacement technique is very handy when each link is unique. If you notice on the Hull Digital website, each link on the navigation has its own unique background on rollover. It can be used if each link has the same interactive states but I would advice using CSS more in this case. So here is a short tutorial on how to create an accessible based navigation similar to the Hull Digital website.

All the files used in this tutorial can be found here: Download
You can view the final navigation here: Final Navigation Demo

1. Start with your sprite.

First of the whole navigation is drawn from 1 single image. This reduces the load time required and also avoids any delay on mouse over by actually loading in a new separate image.

Here is what your image would look like.

So once this image has been uploaded we need to set up the XHTML and to do this we use a standard un-ordered list with an ID.

2. The Markup

<ul id="global-nav" >
<li><a href="./">Home</a></li>
<li><a href="./about">About</a></li>
<li><a href="./contact">Contact</a></li>
</ul>

We must then give each list item an ID. This is not ideal, especially not for an ever expanding CMS driven site. But I would not recommend this technique on a dynamic or expanding menu bar anyway. This technique is ideal for smaller static sites, or menus that will not change.

So, our markup now looks something like this:

<ul id="global-nav" >
<li><a href="./" id="gn-home" >Home</a></li>
<li><a href="./about" id="gn-about" >About</a></li>
<li><a href="./contact" id="gn-contact" >Contact</a></li>
</ul>

Now we have our markup we need to figure out how we are going to insert our image. There are many different ways of doing this. The easiest is to display each element as a block element, add the image as a background image and nudge the text out of the way using either padding or a negative text-indent through CSS. This works and works well, however it is not particularly accessible.

You see, if a user has their images switched off on their browser, there will be no text to display, therefore making the navigation inaccessible.

So to counter this we must play around with an empty span which we embed within the <a href> element. Again, empty code tags not great! But to achieve the desired effect it is really the best and most effective way before looking at CSS3.

So our markup ends up looking like this.

<ul id="global-nav" >
<li><a href="./" id="gn-home" >Home<span></span></a></li>
<li><a href="./about" id="gn-about" >About<span></span></a></li>
<li><a href="./contact" id="gn-contact" >Contact<span></span></a></li>
</ul>

And that’s it! Pretty clean huh? Well obviously other than the empty span!

Anyway, lets move on to styling this bad boy.

3. The Style.

Ok, now we have our markup and our image, all we have to do is style it. We firstly need to make sure all the links sit in-line rather than top to bottom, we then need to make sure they are set as block elements so we can actually see the background image, and finally we need to sort out positioning so we can play around with our span.

So, for the initial styling. We need to add a background to the main page to allow the images to blend in, I have chosen a simple noise texture for this example. All image files can be found in the download or in use on the demo page.

body{
background:url('images/BG-main.jpg');
}

We then set up the un-ordered list with ID ‘global-nav’ with a set height and width. This allows us to clear any content beneath as we will be using floats on our blocked list objects.

#global-nav{
display:block;
height:33px;
list-style:none;
}

We then need to look at the standard list item. We won’t look at styling sizes and particulars yet as this will be done with the specific IDs. We can also within this single tag add some global styling to the links and the spans as they will all warrant the same style.

#global-nav li, #global-nav li a, #global-nav li a span{
float:left;
height:33px;
}

We now need to make sure our hyperlink has a relative position. We do this because we are going to position our span absolutely over our hyperlink, effectively masking the text behind with the image.

#global-nav li a{
position:relative;
text-align:center;
}

Now we position the span. As we have added a relative position to the surrounding hyperlink and set specific sizes, add an absolutely positioned element within this will be simple and cross browser compatible. We also at this stage include our sprite which will apply the background image to each span on a single load.

#global-nav li a span{
position:absolute;
top:0;
left:0;
background:url('images/BG-global-nav.jpg') no-repeat left top;
}

Now as each of our hyperlinks are different, they all need individually styled elements applied to them. So for this next step we apply two styles, one to the hyperlink itself and one to the span.

#global-nav li a#gn-home, #global-nav li a#gn-home span{
width:102px;
}
#global-nav li a#gn-about, #global-nav li a#gn-about span{
width:109px;
}
#global-nav li a#gn-contact, #global-nav li a#gn-contact span{
width:135px;
}

As you can see from this code we have applied a width to each span and hyperlink to define the exact widths for each item.

So if you check your build at the moment, you should see everything taking shape, but each link will have the ‘Home’ image visible. This is because we need to do our final step which is to position each item according to the size of the link. This is where a bit of simple maths comes in!

Take the image below as a guide for your sizes. The space around the sprite has been increased so the guides can be visible.

Once you have worked out the widths of your navigation elements, it is then a simple case of applying a minus value each time you add a link. Within the style this looks like the following:

#global-nav li a#gn-home span{
background-position:left top;
}
#global-nav li a#gn-about span{
background-position:-102px top;
}
#global-nav li a#gn-contact span{
background-position:-211px top;
}

So as you can see, the first link or the ‘home’ link image is positioned ‘left’ ‘top’ or ‘0 0′. The next link along is then nudged to the left by the exact amount as the first link is wide, in this case 102px.

The next figure is then created by adding the first two widths together, in this case 102px + 109px = 211px. For longer navigation bars you would simply continue this trend right the way through to however many links you want on the page.

So re-checking the example you should see that each link now has the correct ‘inactive’ state applied. Now we simply need to add a hover state, and this again is really simple. We need to add the hover state to the ‘href’ rather than the ’span’ so it will be compatible with the good old crummy IE6!

So your final addition to your CSS would look like this:
#global-nav li a#gn-home:hover span{
background-position:left bottom;
}
#global-nav li a#gn-about:hover span{
background-position:-102px bottom;
}
#global-nav li a#gn-contact:hover span{
background-position:-211px bottom;
}

All we have done here is change the value ‘top’ to the value ‘bottom’ meaning the hover over state looks visible when the user hovers over the link.

The Dreaded IE6!

There is one down side to this swift little technique and that is IE6 will not support the hover of any html element other than a link, so our neat little CSS technique just won’t cut it and you will need to pull in a little Javascript. Luckily there is a script at hand, and it is know as ‘Whatever:hover’. It can be downloaded here and it has simple installation instructions.

So that’s it! Give it a go yourself, making an accessible image based website navigation is simple! Make sure to view the fully working demo and download the files!

My journey started on the night of the 13th, I traveled down to meet all the speakers for a pre-conference dinner which was great. We got down to some techie talk over some calamari and pizzas! I must say for a very small group of people I don’t think I have ever seen more iPhones in my life!

Within the group was the keynote speaker, Rory Cellan-Jones, BBCs Technology Correspondent, Charles Arthur from The Guardian, Anand Verma from Sapient Interactive and Kai Gait from GSK. Also present was Matt Seward who won his ticket to come to the meal and conference through the HDLive competition. Matt runs a small web design agency in Leeds called Kilo75, and he was a pleasure to chat to.

After dinner we all headed back to the hotel where I spent the next 2 hours in my room pacing over my speech and making my final modifications. Then it was off to bed for a well earned rest before the big day!

8.15am came pretty sharpish, I even un-characteristically missed my breakfast! (Nerves!) We arrived at KC Stadium, the venue for the conference just on time to get setup with the AV guys who did a marvelous job throughout the day.

The conference opened with Rory’s keynote on “Digital and technology in the UK today” which was extremely enlightening. Jaan Orvet then followed, The Swede from Noded! His talk was on Noded, entitled “Don’t limit yourself – work Noded” It was an extremely interesting speech about finding the best team for particular web projects and searching outside the box. I have just downloaded a copy of his book, “Noded – The Untouchable Business” which was written along with his business partner Andreas Carlsson. I am sure it will be a very interesting read.

Charles Arthur and Mike Butcher from TechCrunch also spoke, Mike gave an interesting speech about business start-ups.

We had a break for lunch where again, I ate very little as I was first up after the break! 1.30pm arrived and it was my turn to go on. I was quite pleased with how much I actually held my nerve, (Kai may disagree!). My speech was all about how much a well designed website can influence a business and its presence on the web.

It was quite difficult to judge the audiences technical knowledge so I didn’t go to much into coding techniques and covered off more detail on good design practices. It seemed to go down really well!

After me was Kai with his talk on his on going digital battles in the pharmaceutical world, the difficulties they experienced when incorporating social media into their business due to different rules and regulations, and how relying on strong content written for search will enhance a websites rankings. Kai also mentioned that its been heard some GPs gather their medical information from Google! Which is rather worrying…

Next up was Karen Barber from Audio Boo. Karen had a few technical problems at the beginning of her talk but pulled it back marvelously once she really got into her business and booing!

And finally to round up a great day was Anand Vermas talk. I have to admit, I was totally taken back by the quality of work Sapient are producing and Anands talks was extremely inspiring. He touched on a project they are working on to close his talk involving Augmented Reality, which was pure wizardry! I am definitely going to have to get my study cap on and get myself some of that intel!

So all in all it was a thoroughly enjoyable day and a great experience. There is already now talk of HDLive10 so lets watch out for next years conference!

Video Podcasts to follow shortly! – Follow the comments and Tweets here!

Don’t get me wrong, If I am inspired and have a great idea in mind, I don’t wait to write a functional spec before I visualise it! But before I show it to a client I always back track and make sure what I have visualised can actually be built!

With all these steps involved we need to have some way of simplifying and speeding up the process. So here are some general tips and tricks to help take away some of the leg work in a web project.

Milestones & Sign off

Setting milestones for a project is a good way of managing workload and time frames. It can be done as simply as adding dates into your iCal, or using some project management software like Basecamp which is ideal for this sort of thing. In a general web project I work to some specific milestones, these can be summarized and ordered into the following:

• Information Architecture Phase

• • Client Personal Persona – Highlighting an overview of your client is very important. Finding out their likes, dislikes, trends and expectations will make your life much easier in the long run.
  • Website Schematic – (See Schematic & Key overview below)
  • Wireframes – (See Wireframes overview below)
  • Functional Spec – This can become a pretty hefty document, but should be produced and detailed for every unique page on a site. It should highlight what content and elements are to be on a page, and more importantly ‘how’ you intend elements to work. If there is an interactive section on a page, this document should cover either a visual or descriptive work flow and goals for the element in question.
  • Sketch work – It wont harm to brainstorm and sketch out your ideas at this stage.
  • Client Sign off of all above

• Design Phase

• • Design Stylesheet – This can also be referred to as an enhanced wireframe. I use it to display snippets of ideas on how I intend an element to work, and also add some colour to different sections, possibly even a patch of texture here and there. This sometimes helps clients visualise the final product and make any final amends before you waste a lot of time changing your final designs.
  • Layered PSDs – (See PSD set up below)
  • client Sign off of all above

• Build Stage

• • Slicing – Cut out and create all your textures, background images and interactive elements first, use a well formatted naming structure. I generally use BTN-name.jpg for buttons, BG-name.jpg for Backgrounds, ICON-name.jpg for Icons, IMG-name.jpg for inline images and LOGO-name.jpg for logos. This will help when searching for images in the build stage.
  • CSS – (See Global CSS settings below)
  • HTML/PHP - Writing from scratch and after every page written check it against web standards
  • Client Sign off all above

• Testing

• • Cross Browser Checks – Try to test on as many browsers as possible, and on different Operating Systems. I test on both Mac and PC, generally on the following browsers: IE 6-8, Firefox 2-3, Safari, Chrome and Opera
  • Accessibility – If you haven’t got it installed, Web Developer toolbar for Firefox is an absolute must and will totally speed up and improve your testing processes.
  • Client Sign off all above elements before hosting

Site Schematics & Keys

Site schematics are a great way to improve you and your clients overview of a project and cover off any late changes or additions to a site build. I use Illustrator to create my Schematics, but there’s some great software out there like Omnigraffle which does a lot of the hard work for you. Tip to speed the process up if doing it manually is to create a key of elements which you can use over and over rather than creating everything from scratch.

Wireframe Elements

Wireframes are so important in the creation of websites. There is nothing worse than spending hours creating a PSD design which shows a three column layout, a large header and three paragraphs of text nicely fitted around 3 images aligned to the left, then the client decides they want the ‘exact’ opposite of what you have designed! Following the above processes should narrow down these sorts of errors, but it generally takes about 30 mins – 1 hour to create a wireframe, where as it can take 3-4 hours to create a full PSD, so even though you are adding time on, in the long run you will save time on error correction. Again, I do my wireframes in Illustrator, but you can use software like Giffy to do this.

Tip here would be similar to the Schematic tip, if you create an archive of elements such as blocks, image placers and link blocks, then it will speed up your wireframe creation.

PSD Set-up & Layers

I would highly recommend this little tip, if you have a PSD template already set out it will save you time, maybe only 5 minutes, but it all adds up! My template is a blank PSD, 1600px wide x 1200px high. It has no background set, and has all my layers already set for me. Setting up your PSDs with sensible names layers will also help when slicing your design up as you can block out say the whole Footer area and Header area. The PSD also has the following enabled and ready:

Grid Layout

I have a grid set out using guides. They are set centered on the document, one centre line, then some boundary lines to highlight 1024px and 1280px widths (Common screen widths), and 768px and 610px high to highlight the fold and average browser view. I also have a line set for 1000px wide which gives me a max width on a 1024px x 768px browser when there is a scroll bar present. (Don’t forget the scroll bar!) And also a width marker for 960px wide which is usually what I design to. 960px is a nice width as it allows for a decent border either side of your content.

Snap to Guides and Smart Guides

Having this enabled in Photoshop is a great way to get exact size layouts quickly and easily. It can be enabled in Photoshop by going to View > Show > Guides

I have uploaded the PSD template I use in most of my designs, it can be downloaded here.

Global CSS settings

Another time saver is to have a master CSS document set up with all the basic Global reset settings already written. The Global reset was introduced by Eric Meyer, his version can be found here: Eric Meyers Global CSS reset This is a pretty intense reset and is not always needed for most designs, but a simple reset can be produced by doing something like:
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,
form, fieldset, input, p, blockquote, table, th, td, embed, object {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img, abbr {
border: 0;
}
address, caption, cite, code, em,
h1, h2, h3, h4, h5, h6, strong, th {
font-weight: normal;
font-style: normal;
}
ul {
list-style: none;
}
caption, th {
text-align: left;
}
a {
text-decoration: none;
}
Have a play around with your own reset and then save it to re-use in the future.

‘John The Developer’ sneak peek, full design and website coming soon! 76qubcntzs

I have no doubt in my mind that what the digital revolution is doing for television, one day common sense will do for internet browsing and we will be rid of it forever, but until that day comes, we must live with IE6. So with that painful recognition, I thought I would put together and share a few common IE6 bugs, along with some helpful hints and tips to combat this crummy browser!

First, some advice

We can of course before we get into any bugs and fixes, help ourselves along by making sure all our code is built using semantic markup which validates and works in modern browsers. Never build your site for the older browsers first, always build for the newer ones then apply fixes for the older ones. This means you are future proofing your site. Also make sure a valid doctype is declared. If you do these things then you may not experience any bugs or issues. If you do come across a bug, fix it when you discover it as it is much easier to handle than trying to fix a boat load at the end of a project.

A handy CSS tip!

One trick I use regularly is the ‘* html‘ rule. This rule is ignored by all browsers other than IE6, allowing us to apply specific rules and styles for IE6 problem areas. This code in use could look something like:
p{
font-size:14px;
color:#fff;
}
* html p{
font-size:12px;
color:#000;
}

Using the above example, the font would be 14px and white in all modern browsers, but in IE6 it would display at 12px and be black. I sometimes use this rule to overcome some of the specific bugs highlighted below, also as a light weight alternative to replace pngs with gifs in IE6 instead of using the iepngfix.htc PNG fix which we will cover shortly.

The Double Margin Bug

Lets say we have an element on our page, a div for example. We need this div to be 500px wide and want to float it right with a margin-right of 10px. The CSS for this would look like:
div {
width: 500px;
float: right;
margin-right: 10px;
}

IE6, due to it being a genius browser will double the margin, so instead of 10px it makes it 20px. Marvelous!

Solutions:

1. You can set the element to have the property ‘display: inline;‘ which immediately remedies the issue, but this causes an element which does not have a float property attached to lose its static width. So this is not always a viable option.
2. Do not add margin-right to your element, but instead add padding-right. Again not always suitable as you may have a border or different background colour applied to your element.
3. Remove padding and margin all together from the element, and instead add a padding to the elements parent.
4. The * html fix mentioned above!

None ideal, but no bug fix is!

The Box Model

The Box Model is quite an annoying and very common IE6 bug and it involves a miscalculation of any element with a declared width. Your code could look something like:
div {
width: 500px;
padding: 20px;
}

IE6 calculates the width of the div to be 500px, whereas modern browsers will calculate the width of the div as 540px incorporating the 40px padding.

The solution:

The answer to this problem is to not add padding to the outer element, but instead embed an element, perhaps a ‘p’ tag or another div inside the parent div, and add your padding to this element instead. Creating:
div {
width: 500px;
}
div div {
padding: 20px;
}


The Stepdown Bug

This is an issue commonly found when creating elements like horizontal menus. It is caused by IE6 adding a line break after the floated element, which in turn knocks the next floated element down a line and so on.

The solution

There are two ways around this problem.
1. Set the elements that are floated, lets say the ‘li’ in a list to be ‘display:inline’, then display the embedded element as ‘display:block;’ An example of this would be:
ul li{
display:inline;
}
ul li a{
display:block;
}

This allows us to remove the float property from the parent element, in turn removing the bug.
2. You can set the parent elements line-height to 0 causing the break to attain 0 height.

None Collapsable Elements

This is quite an annoying little bug, if you are trying to set an element with a 1px or 2px height property, IE6 ignores this and will not collapse the element down further than the height of the base font-size.

The solution

Simple solution to this one, we just need to add ‘overflow: hidden;‘ onto the element in question. This then ignores the height of the font in IE6 and sets the height of the element accordingly. Example:
div {
width: 400px;
height: 1px;
overflow: hidden;
}


No Hover States

In modern web design, we like interaction, meaning we try to add hover states to more things than just links. Most modern browsers support hover states on elements such as ‘li‘ ‘inputs‘ etc, but not IE6.
You can only have a hover state on an ‘a‘ element and it must include an ‘href‘.

The solution

Unfortunately the only solution to this problem is using a JavaScript fix, something similar to this, or you will just have to live with your users experiencing less interaction on IE6.

Alpha Transparency PNG

IE6 does not support transparent images, and it was only until IE7 was introduced did Microsoft decide to say, OK we will allow people to have pretty websites! Not a quote! Yes if you try to include a nice transparent png image on your website, IE6 will throw in a lovely Grey coloured background for you.

The solution

There are again a few workarounds to this issue.
1. Use the * html fix I highlighted above to specifically add a gif instead of a png image to your site. This does mean creating 2 images every time you want to use a png but it is very flexible and allows you to keep your code clean. something like the following would work:
div{
background-image: url('images/BG-image.png');
}
* html div{
background-image: url('images/BG-image.gif');
}

2. You can use a iepngfix.htc. This works by cleverly replacing the background with a blank 1px x 1px gif image. There are many different versions of this file, some only work with inline images, some can handle background images. The one I turn to can be downloaded here. It is simple to implement and contains instructions on use.

To Conclude

These are just some of the bugs we as web designers need to face when dealing with IE6, and these are some of the ways I deal with them. Not all are the best way, but they seem to work! If anyone has any preferred and tested methods covering some of the issues above, please feel free to post them below.

But all good things must come to an end…

So,  in light of the recent times and economic downturn I have decided to say…Sod all that! Lets make things better!

I am writing this post to inform my readers that change is coming for Branded07 and I need your help! Over the coming months I am going to be carrying out  a full re-Brand(ed) of Branded07.

So whats in store?

A new name will be born, Branded07 was developed out of nothing really and there is no story behind it, I now have a story! And even though I, Rob Palmer have become known for Branded07 I feel it is reaching its final days. I will be designing a whole new and improved look to the site with a less traditional, more intriguing site layout and OK, I ‘may’ keep the Puffins!

What I would like from you…

I would like to use this post as a tool to collect a group people who would like to be kept ‘in the loop’ and up to date on all the re-design steps. You will get the chance to offer feedback and comments on all the new design elements, and I am also planning on running a couple of questionnaires to gather some insight into my specific quandaries! So if you would like to help a guy out, simply write a comment in the comments section on this blog post with your email address and I will add you all to a mailing list.

It is exciting times and I am really looking forward to starting on this. Branded07 will still be running as functionally as ever up until the date of switch over, so keep your eyes peeled and I look forward to hearing your thoughts!