1. You shall not make for yourself an idol

   There are many rock start designers, many are very good, many are just good self publicists, acknowledge and read there blogs them but but don’t worship them, or emulate them or use there ramblings as design gospel.

2. You shall not make wrongful use of the name of your God

   Like so many of these texts this is open to many interpretations, so far I can surmise that it means, Use semantic markup when building a web site, call a heading a heading a list a list so on and so forth. Another interpretation could be, and this is one I wish some people I have worked with would heed – don’t call your self a Designer if your not one.

3. Remember the Sabbath and keep it holy

   This is one I am most guilty of, you’ve got to stop working at some point, just because the client gives you the assets on Friday evening and ‘Absolutely must have the work done by Monday morning’ its okay to push back and explain that its not achievable, and that you need to take some time to rest and do other stuff, if you don’t then you whole week could be whacked out of joint and the quality of the work you deliver will suffer.

4. Honor your father and mother

   We all have influences in our work, honor and acknowledge them, people who’s work we saw as a child, mine are Vaughan Oliver, Simon Larbalestier, Dave Mackaen, Hans Belmer, Egon Schiele & Ralph Steadman, who are yours?

5. You shall not murder

   Don’t fluff it up, if your going to do something to kill the design like ‘Making the logo bigger’ then don’t do it, even if the client tells you to and you know it will kill the design, just explain that you love your client and you don’t want them to be accessory to murder, they might be understanding, if they are intent on this cold blooded act, hand them the knife and report them to the authorities.

6. You shall not commit adultery

   On occasion I’ve been given another designers work by a client and asked to improve it or change things or something else unspeakable, sometimes I’ve done it, sometimes I’ve not it all depends on how pretty the design is, but I’ve always regretted it and felt guilty that I’ve not spent the time and love on my own design’s and ended up hiding the bastard children of my affairs by not putting them in my portfolio.

7. You shall not steal

   Pretty self evident, in design its often regarded as a large crime to rip off another designers work, but behind closed doors we all whisper average designers borrow, good designers steal, but it could also be stated that Average designers steal and get caught, good designers are so good at stealing that they don’t, or they are open about her influences (see commandment 4).

8. You shall not bear false witness against your neighbor

   If a design sucks its YOUR fault, don’t blame the client for making you do something that broke it, if your in that position, push back explain why it wont work, if your unable to convince the client try two things, the first is try and make there suggestion work, the second is book your self on a assertiveness training or hypnosis course (I’m looking to book one myself as I’m far to accommodating). If neither of these work then just shut up, finish the job and don’t put it in your portfolio, just don’t slag the client off, they had there reasons no matter how bad you thought they where.

9. You shall not covet your neighbor’s wife

   I’ve once or twice taken on what where in my perception lesser jobs in order to get a slice of a clients bigger pie, don’t do this, because I found that I was always thinking about the clients metaphorical wife rather then the job in hand ‘so to speak’ and you never end up servicing the current project with any great satisfaction and as a result you’ll probably do a bellow par effort and never get invited to that party where your invited to covet the neighbor’s wife with permission.

10. You shall not covet anything that belongs to your neighbor

    This was a hard on to differentiate from the previous commandment as once I had that picture in my head it was hard to shift, but I think it could be interpreted into this… Don’t be tempted to shoe horn a clients design asset in to a Design if it doesn’t fit, no matter how cool you think it is, if it isn’t going to gel well then leave it out, if you don’t there is a good chance that you’ll make everything involved all grubby.

So are you a sinner, go on confess?

Overview

We are all pretty much convinced of the accessible benefits of using lists for web site navigation or at least we should be, however its not always easy to get your head around how to make this work for relatively large navigation’s without the use of a database.

Over my many years of designing and building web sites I have developed a system that allows me to create navigation system that in one place holds all the primary navigation elements needed for a site but that allows me to hide and show relevant subsections dependent or requirements and can then be re-utilised for a no maintenance site map.

I am assuming that if you are going to use any of the stuff I talk about here you at least have some knowledge of html & css structure as I don’t want to bog things down with a discussion of minutia.

Benefits of this approach

1. Building and maintaining web sites can become pretty time consuming so anyway we can make publishing new pages and sections as easy and quick as possible can only be a good thing, and by using this method you simply add your new page to a centralised list of pages and it will automatically update the navigation on all pages and keep your site map up to date at the same time.
2. By having all links on all pages you open the web site up to being indexed by search engines without compromising the user experience.

Tools

Now in order to do this you will need the following

1. A basic understanding of HTML & CSS
2. A web site that can run either asp, php or Coldfusion
3. An understanding of how to do a server side include
4. A computer of some description and your favourite html editing and ftp software
5. A functioning mind, pair of fingers eyes and a modicum of patience

Now please ask your parents to leave the room or it wont be a surprise now will it?

Build the list

The first thing we need to do is build the list in a blank html file with no html or body definitions as we are going to reference this page as either a php or asp server side include (make sure you make all links relative to the root of the website though), for example I will use the following.

Which will give us this:

Quieting down the children

The first thing that must happen is to close down all the nested lists and we do this in the css (cascading style sheet) like thus:

This then makes the navigation as displayed to the viewer like this:

But search engines still see everything, all the links the whole ka boodle!

Speak in turn

This is all well and good but now we need to turn on the relevant navigation sub sections for the right sections? Glad you asked I was just getting to that bit, We do this but inserting a unique class in the body tag of each section for example for section two we change <body> to this:

And in the CSS we add this array to take care of all instances up to three sections you can carry on and add as many as your site demands, what this is doing is creating conditions so that if elements such as the correct site section and navigation group are aligned then the correct sub navigation will be displayed:

This way we can simply turn on and off sub navigation sections by altering the class in the body of the HTML document, so for section 2 we get.

Identifying the speaker

But why stop there? Why not also height the current page through the navigation? We do this by adding an extra class to identify the page in the section so the body tag for the first page in section 2 will look like so:

then in the CSS we create a section to deal with the styling when all the elements are aligned like this

this should give us this:

Recycling the navigation

Now we can use the same navigation to dynamically build the Site map simply by pulling in the same server side include, changing the body class like so in the html we go.

and in the CSS we sing.

For illustration and variations of styling and usage please take a wonder around:

This very site you are looking at & Shopping-Organic.Com