It's the Little Things ...

I have spent a ridiculous amount of time this term fussing over the navigation of my new site.

I want this to be right because :-

• Students want short sharp tasks, not long huge pages to drag through.
• Students need to find where they are easily within a project if they are working outside of the classroom.
• The site needed to be cleaner and not so "full" looking as it was confusing to find things with my last site as I had too much on show.

My old site was easy. It was all along the top with drop downs to projects.

This then led to project pages, where the whole project was on one page with a table of contents at the top, and links out on the page to other areas on the site or external sites.

This year, on the new site, I needed something different.

I am trialling a new way of working this year, where the students work through the tasks in their own time while we work on skills and collaborative activities in the lesson time. Later in the year, some students will also be doing the course totally in their own time as they do not come to the lesson at all. So, I needed a navigation system that was easy to follow for the students so they know exactly where they are.

When I trialled this last, it was one module, so the navigation down the side bar to the separate tasks worked quite well.

Seeing as I am putting the whole of Design and Visual Communication on the new site this year, this method will just not provide enough clarity for all the pages that will be involved. The example here is not even complete with all the pages. I really don't want all the pages on permanent show and the side bar takes up valuable page width.

I have gone back to the horizontal bar with the main areas on show all the time.

When you click on each of the project pages, there is a navigation at the top of each page that is basically just a single row table.

I have made my site a set width of 1000px, so I just have to know how many task pages there will be within the project, and make a table with one row and that many columns.

As I wanted to make this navigation bar stretch across the whole width of the page, I went into the html and changed the width of each of the table columns. (1000 / no of task pages ). This makes the cell size nice and even and fills the whole width.

I then just had to write the names of the pages in the cells and link them up to the project pages. I only had to do this once, as copy and paste worked really well for all the formatting and links, so the same navigation could be put at the top of each of the project pages.

This method is working well as the names and links can be changed for each project, so all the project pages can be "hidden" unless you are doing that project. This keeps the top navigation nice and tidy.

A small glitch at the start was that I had called the links task numbers ... task 1, task 2, etc... This is all good until the daft teacher can't remember what work she put in which task number. If I can't remember, then how can I expect the students to keep up? They are now labelled with titles.

A lot of fuss over a small thing? Yes, it is, but if I have got this right, then students can concentrate on the work and not spend half their time trying to find where they are. 

I want them to do this out of the classroom without me being there to point where things are.

I think I've finally cracked it....