Page Flow

Looking more at my pages establishing the correct page flow seems to be more and more important.

The seperation of my pages into distinct areas means that it is even more important that pages lead on to the relevant sub-pages. Web Design leads to the key areas such as Coding and Coding to CSS and Javascript.

This should also help with search engine indexing and possibly SEO.

Menus and Layout

The key to getting a good Page Flow is to have a structure that allows the visitor to locate what they are lookimg for in a logical manner. To achieve this a good layout with relevant menus helps to guide the visitor.

In addition, the pages need to be responsive in that they need to render on all devices.

In my analysis of the CSS and JavaScript for Responsive Design I have developed the technique of having a fixed side menu that displays on the users screen even if they scroll down the page. This does not work if the page is viewed on a mobile phone. This side menu is accomopanied by a fixed bottom menu that is visible on the screen regardless of how it is scrolled and also on a mobile device. The bottom menu on a mobile device has an expansion icon (hamburger) to provide additional navigation.

The way that I intend the pages and menus to work is that related pages to the page displayed are included in the side menu and the bottom menu is reserved for basic navigation, such as the Site Map and returning to the top of the page.

The Fixed Side menu

As a byproduct of my analysis of the code I has adapted for use on this site I have worked out how to fix the position of elements on the screen. This started off with the Fixed Bottom Menu and was developed using the analysis of the CSS used for the FBM and the RWD layout.

I was finding that when I scrolled down the page I often lost track of what page I was actually looking at. It used to be the case that I would either have to look at the URL shown ny the browser or scroll to the top or bottom of the page. The URL method is no good on the iPad or phone. The solution to this was the addition of a fixed label paragraph above the fixed menu.

The Fixed Bottom menu

The combimation of this fixed bottom menu and the fixed side menu I think gives the ultimate in clarity for navigation of the website.

I can now space things out on the page

......and not get lost because the menu has scrolled off the top. The "Top of Page" menu option is now not as important.

Links

Page Flow