{"id":29,"date":"2005-02-16T15:38:44","date_gmt":"2005-02-16T20:38:44","guid":{"rendered":"http:\/\/www.killersites.com\/blog\/?p=29"},"modified":"2017-02-23T10:05:50","modified_gmt":"2017-02-23T15:05:50","slug":"best-website-navigation","status":"publish","type":"post","link":"https:\/\/www.killersites.com\/blog\/2005\/best-website-navigation\/","title":{"rendered":"The Top 2 Website Navigation Systems"},"content":{"rendered":"

Making a website easy to navigate is one of the most important things you can do as a web designer – if a website is not easy to navigate, people will quickly leave.<\/p>\n

Over the years, every type navigational layout (system) has been attempted, and now we know the 2 best ways to create navigation for websites:<\/p>\n

    \n
  1. Left aligned ‘master’ navigation menu using CSS buttons or links. And ‘breadcrumbs’ navigation running across the top of the page.<\/li>\n
  2. A close 2nd would be to have the ‘master’ navigation float on the right. But since book layouts (table of contents) are left aligned, left aligned is best for navigation.<\/li>\n<\/ol>\n

    <\/p>\n

    Why CSS based links or buttons?<\/strong><\/p>\n

    In a nutshell: <\/strong>CSS buttons are quick to build and update. In the old-days, people used images and image-swapping techniques (using JavaScript,) to create buttons and button roll-over affects. This is something you want to replace with CSS based techniques because:<\/p>\n

      \n
    1. JavaScript is not available in about 10% of the browsers<\/li>\n
    2. JavaScript roll-overs can cause problems for people with disabilities – thanks Kyle for that point.<\/li>\n
    3. Menu changes are very time consuming because to make a change, you will have to create new images and update the controlling JavaScript.<\/li>\n<\/ol>\n

      What are breadcrumbs?<\/strong><\/p>\n

      Example:<\/strong><\/p>\n

      home > articles > web design > css<\/p>\n

      As you can see, breadcrumbs are a list of links that tell the user where they are in the website. In other words, they tell users how ‘deep’ they are within the site – it’s a hierarchical view of the website. <\/p>\n

      Breadcrumbs make it that much easier for people to navigate a website, and to quickly see what else they can find within the site. <\/p>\n","protected":false},"excerpt":{"rendered":"

      Over the years, every type navigational layout (system) has been attempted, and now we know the 2 best ways to create navigation for websites …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/www.killersites.com\/blog\/wp-json\/wp\/v2\/posts\/29"}],"collection":[{"href":"https:\/\/www.killersites.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.killersites.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.killersites.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.killersites.com\/blog\/wp-json\/wp\/v2\/comments?post=29"}],"version-history":[{"count":2,"href":"https:\/\/www.killersites.com\/blog\/wp-json\/wp\/v2\/posts\/29\/revisions"}],"predecessor-version":[{"id":4764,"href":"https:\/\/www.killersites.com\/blog\/wp-json\/wp\/v2\/posts\/29\/revisions\/4764"}],"wp:attachment":[{"href":"https:\/\/www.killersites.com\/blog\/wp-json\/wp\/v2\/media?parent=29"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.killersites.com\/blog\/wp-json\/wp\/v2\/categories?post=29"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.killersites.com\/blog\/wp-json\/wp\/v2\/tags?post=29"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}