by-expession

Expression Web Resources

Website Navigation

Latest post 07-29-2007 1:39 PM by cdwise. 5 replies.
  • 07-14-2007 12:50 PM

    • cdwise
    • Top 10 Contributor
    • Joined on 12-22-2006
    • Houston, TX
    • Posts 510

    Website Navigation

    One feature many people who migrated from FrontPage to Expression miss is the automatic menu navigation generated based on the site structure. While I personally found the generated menus to limiting I can appreciate how some people found it useful.Toolmaker Steve has a beta version of his SiteNav add-in at http://toolmakersteve.com/

    While I was testing Steve's add-in I started thinking about website navigation which led to a longish bey post. Since I have comments turned off on my blog (too much spam) I decided to stab a discussion thread here to discuss site navigation view..

    Cheryl D Wise MS MVP Expression Instructor: starttoweb.com

    Filed under:
  • 07-15-2007 9:52 AM In reply to

    • jwfisher
    • Top 50 Contributor
    • Joined on 07-15-2007
    • computer nerd
    • Posts 3

    Re: Website Navigation

    Excellent article Cheryl. But I've already gone down a different path with frames for navigation.

    I have several personal sites (not commercial), with 1 very large site (5k pages and 10k images) and several far smaller ones. Purpose is to provide broad and deep information, so there are a lot of pages. Been building all these since 1999 and have great stats for a personal site. They are all based on frames for navigation and organization. The topmost page has navigation button links to the major sections - so no matter where you are in the site there is always nav. Everything was originally done in FrontPage, although I never used it's navigation functions (too limiting, yes). Everything is now Expression of course. 

    The big site (http://www.drivingenthusiast.net/) is just too darn massive to change unless I know for sure that I've some up with a superior design, and one that still allows me to add pages easily and quickly.

    The smaller sites (such as http://www.s2000enthusiast.com/) can be changed and could perhaps be used to experiment a bit on a better design. I looked at SiteNav and may use it. I may also switch to a dynamic template or master page scheme as well. And yes, I know I need a serious CSS plan - but it's going to be murder to implement it in the big site because of the sheer size of the job it would take to go back into every single page.   

    The problem with SiteNav or any link bar with drop-down menus is that I feel my big site is too large for this type of design. I have held the major subject areas (along the top frame) in the big site to 9 areas. Each of those areas links to a page that builds the frame for that section and has a navagation menu to the right for 10-20 "sub" topics. So if I used SiteNav here, I'd have to build the 90-180 new frame pages necessary for all the new links. That's a heckuva lot of work to provide (and maintain) direct navigation, versus forcing people to go down my hierarchy. That's why I never did the major navigation with FrontPage's (crude) tools in the first place.

    Note that for my left-hand navigation within a subject area I did once implement a third-party DHTML/javascript drop-down menu to attempt to categorize the "sub-topics", but the code was slow and performance was poor. I've since removed it and am looking for something better - particularly to use on the main page where I have an atrocious number of blog categories to organize.

    So lets say I started over from scratch on one of my smaller sites with the goal of coming up with a perfect design and rolling it into all other sites. Why should I use something like SiteNav or some other menu bar and skip the "hierarchical" frames approach?  Some sort of a template or master page with CSS is a given, but navigation has me stumped for a better way.

    -Jeff

    -Jeff www.DrivingEnthusiast.net
    Filed under:
  • 07-18-2007 10:55 PM In reply to

    • Tina
    • Top 10 Contributor
    • Joined on 12-22-2006
    • UK
    • Posts 41

    Re: Website Navigation

    Jeff, the best time to do a large site is before it gets any larger, belive me I've redone my FrontPage Tutorials site a few times so I know the feeling.

     Looking at your site this is what I would do.

    Make a dwt template with includes for the menu. Use css for the formatting and use a text based menu with great graphic look but done with css. So everthing is accessibility and seo friendly.

     Design Time Includes used for menus within a DWT work extremly well, I use them for all my sites and used includes on my main fp site for menus in the format you see there now before dwts came along.

    You could use a drop down css menu but I always prefer the control a side menu gives me, so that I can expand much more easily. Maintainance wise yes the work at the beginning is intense but the long term effects are well worth it. By giving your site a workover not only will the maintainance be easier but your accessbility and usebility will improve not to mention your seo.. as I see it waiting is not an option you can take too long over as your content just keeps growing.

    I have implemented all this on my main Expression Web site right from the beginning. It takes a minute to add a new link to the menu, not even that.

     Try all this on your smaller site.. the trick is two-fold.... make sure the template you use works before you use it... on many fronts.... seo, accessblity, colour, validation, usebility and easy maintainance. The other is to make sure you strip all your old code from the previous content, which is not as easy as it sounds, its quite easy to miss coding so you have to be able to see what should not be there.. ew can help a lot with that.. and by Setting up Expression Web before hand you can be guided along the way. 

    Have a read of my Expression Web DWT Ebook (free) and have a practice there are some guidelines about moving from an old site to a new in order to make your dwt.

     hth

    Tina

  • 07-22-2007 8:39 PM In reply to

    • cdwise
    • Top 10 Contributor
    • Joined on 12-22-2006
    • Houston, TX
    • Posts 510

    Re: Website Navigation

    Jeff,

     Thanks for the compliment. I hope you won't be offended if I say that I find your site hard to use. I can see why you are fustrated by tryiing to figure out the best way to provide navigation for your site.

    I would suggest keeping a contextual navigation like you currently have with main top categories and subnaviation on the side but I'd ditch the frames because of the usabaility issues I'll mention below. The buttons at the top are sort of squished and hard to read. A little more padding on the top and bottom would help with that so the line isn't quite so close to the text. This could then be the basis for your site template.

    The scrollbars for the main frame with the longer vertical left side is confusing. I had not realized until I got I had scrolled the left frame down that there was a horizontal as well as a vertical scoll on the main right frame. Since that horizontal scroll is well below what fits in my browser window and does not trigger a horizontal scrollbar in my browser IE 7.  (Browser size 1024x768 since i happend to have used sizer for a screen capture I know the exact outside dimensions)

    Unlike Tina I wouldn't use design time includes. You have too much content for that but I would use a DWT (or better yet if your host supports it asp.net 2.0 master pages - for a site the size of yours master pages make more sense in many ways) I would use real server side includes. That way when you update menus, etc. you only have to publish the included file much like you do when you update one for a frames based site.

    This allows you to reuse your current left side frames as include files and would speed up conversion. The way it would work would be to create your DWT. Put an include snippet in an editable region in the left column. You then open each of your main frame pages and apply your new template. Adjust the link in your include snippet and save. You would need to adjust the links in your left nav so that they no longer pointed to your frame but that is all a one time deal. While you are at it you can clean up the font tags and make better use of your stylesheet.  Which should speed up your page load.

    The dropdown menus used on our main site are pure css and cache though I  am not sure anything like that would be appropriate for your site. While I don't like the way the pages are coded something like the menu system used on http://llbean.com might be a starting place for you.

    Cheryl D Wise MS MVP Expression Instructor: starttoweb.com

  • 07-24-2007 5:56 AM In reply to

    • jwfisher
    • Top 50 Contributor
    • Joined on 07-15-2007
    • computer nerd
    • Posts 3

    Re: Website Navigation

    Thank you both for your coments.... I appreciate them and will work on this. It will take a while to come up with a new design... and a long while to implement it. But you are correct, it is necessary.

    Time to get a big whiteboard and go into design mode!

    -Jeff www.DrivingEnthusiast.net
  • 07-29-2007 1:39 PM In reply to

    • cdwise
    • Top 10 Contributor
    • Joined on 12-22-2006
    • Houston, TX
    • Posts 510

    Re: Website Navigation

    Shh, but I need to update my company site too. <vbg>

    Cheryl D Wise MS MVP Expression Instructor: starttoweb.com

Page 1 of 1 (6 items) | RSS
Powered by Community Server (Commercial Edition), by Telligent Systems Sponsored by: Start to Web
@ 2005-2008 Cheryl D Wise