• View
• Edit
• History
• Print

Links and Navigation

A Web Design Lecture by Steven Choy

Overview: The importance of hyperlink design - Hyperlink States - Popular CSS Properties for Styling Hyperlinks - Adding image links - Adding a navigation bar - Why be conventional? - Navigation on large sites - Using a drop-down menu - Breadcrumb trails - Adding a site search - Adding a sitemap

The Importance of Hyperlink Design

• Links are the most basic interactive component between a user and a web page.
• Links are the oxgen of the Web! Imagine a webpage without links.
• A link is an area of a web page that takes you to another web page (or part of the same page) when you click on it.
• Links can be text or image, or even portion of an image (do you know what is image map?)
• HTML code for links
  <a href="http://www.stepwise.hk/blog/" title="Stepwise Internet Solutions">Stepwise Blog</a>
  • <a> means anchor.
  • href means hypertext reference.
  • title gives a sensible title to the link.
• What is anchor text? Anchor text is the text used to display a link.
• If a hyperlink is represented by an image, the image's alt attribute will be included as the anchor text.

    <a href="http://www.stepwise.hk/blog/" title="Stepwise Internet Solutions">
    <img src="stepwise-logo.png" alt="Stepwise Blog" />
    </a>

Types of Hyperlink

• External - links going to outside web sites;
• Internal - links inside the current web site

Hyperlink States

• There are 5 states that <a> elements can have:

• Web browsers treat these states differently by default.
• It’s best to have a style for each state so that the user is aware of the status of each hyperlink on a web page.

Popular CSS Properties for Styling Hyperlinks

• color – the color of the hyperlink
• text-decoration – Setting this to none removes the default underline
• background-color – If used in the :hover state, can make the link’s background color change
• font-weight – Another distinguishing method for hyperlinks is setting them to bold
• border – If you need more control outside of text-decoration: underline, try giving your hyperlinks a bottom border (experiment with thickness, color and style)

Hyperlink Design Best Practices

Reference: Designing Hyperlinks: Tips and Best Practices

• In body text, text links are usually underlined and a different color.
• In navigation menu, links are not usually underlined, but they may be styled (using CSS) to look like buttons.
• If you have several links, which are related to each other, it makes sense to put them into an unordered list.
  • An example of HTML code

      <div id="nav-menu">
            <ul class="menu">
              <li class="first">
                <a href="index.html" class="current"><span>Home</span></a>
              </li>
              <li>
                <a href="services.html" ><span>Services</span></a>
              </li>
              <li>
                <a href="portfolio.html"><span>Portfolio</span></a>
              </li>
              <li>
                <a href="about.html"><span>About us</span></a>
              </li>
              <li class="last">
                <a href="contact.html" ><span>Contact us</span></a>
              </li>
            </ul>
          </div>

• Links can change its appearance when you move your mouse pointer over them (mouseover effect).
• Make your links conventional
  • Why be conventional? (for class discussion)
  • Keep links underlined
  • Visited links should be different
• Sample CSS code for conventional links

      a { color: #0060ff; text-decoration: underline; }
      a:visited { color: #333; text-decoration: underline; }
      a:hover { color: #df0000; text-decoration: underline; }

Using images to make or decorate hyperlinks

• Two ways to turn images into links

      <a href="/pluiplui/">
        <img src="/pictures/logo.gif" alt="Plui Plui Logo" />
      </a>

      <a href="http://xavisys.com" title="Professional WordPress Development" id="xavisys-logo">
      Xavisys Website Development
      </a>

      #xavisys-logo {
          background-image:url(/wp-content/uploads/2009/11/email_logo.gif);
          display:block;
          height:58px;
          text-indent:-9999px;
          width:200px;
      }

        <div id="main">
            <div id="header">
                <a href="/" title="Home"><h1>Title</h1></a>
            </div>
            <div id="body">Body</div>
            <div id="footer">Footer</div>
        </div>

        #header
        {
            background: url(logoExample.jpg);
            width: 180px;
            height: 135px;
            position: relative;
        }
        #header a
        {
            position: absolute;
            top: 0;
            left: 0;
            width: 180px;
            height: 135px;
        }
        #header a h1
        {
            display: none;
        }

• Image Mouseover Effect with CSS

        <ul id="nav">
          <li id="work"><a href="work.php">Work</a></li>
          <li id="about"><a href="#aboutme">About</a></li>
          <li id="blog"><a href="http://blog.mattdempsey.com">Blog</a></li>
          <li id="contact"><a href="#contactme">Contact</a></li>
          <li id="twitter"><a href="http://www.twitter.com/mattdempseycom">Twitter</a></li>
        </ul>

        li#work a{
          background: url(../images/nav-work.png) 0 0 no-repeat;
          display: block;
          height: 50px;
          width: 87px;
          text-indent: -100000px;
           }
        li#work a:hover{
          background: url(../images/nav-work.png) 0 -50px no-repeat;
           }

        li#about a{
          background: url(../images/nav-about.png) 0 0 no-repeat;
          display: block;
          height: 50px;
          width: 100px;
          text-indent: -100000px;
           }
        li#about a:hover{
          background: url(../images/nav-about.png) 0 -50px no-repeat;
           }

Navigation Design

Adding a navigation bar

• Most sites have a navigation bar (or called menu).
• It is important that the navigation looks consistent across the site. (Why? for class discussion)
• The 7 link rule - you should try to avoid giving people more than 7 choices at any stage while they're on your site.
• If you do have more than 7 pages in your site, you'll need to group them into sections or put some of the less important ones in a secondary navigation bar.
• If there are more than 7 sections in your site, consider grouping some together into sub-sections.

Navigation on large sites

• How to design links and navigation for web sites with hundreds or thousands of page?
• Case study: http://www.homeoffice.gov.uk/

Using a drop-down menu

• Drop-down menus are useful for web sites that have more than a handful pages.
• You can use JavaScript or CSS to make a drop-down menu
• You can see a live example here.
• Sample HTML code

• Sample CSS code

Breadcrumb trails

• Breadcrumb navigation (also referred to as a "breadcrumb trail"), locates the current webpage in the context of a navigation path.
• A breadcrumb trail shows current page in webpages hierarchy
• It helps people work out
  • where are they?
  • how do they get there?
• The term comes from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale (童話故事-糖果屋)

Adding a site search

• Where should you put your search function?
• The search results page
• Add an advanced search
• Case studies: http://www.ibm.com/, http://www.tvb.com/, http://www.polyu.edu.hk/

Adding a sitemap

• For a large website, it is not practical to put links to every web pages in the navigation menu.
• A sitemap helps visitors find their way around quickly and easily.
• It also provides a way for visitors to check if the site has the page they are looking after.
• Sitemaps also help search engines to index your site.
• Some examples

Thanks for Reading

If you would rather like to have this lecture note in printed format, please click the print action link in the top right corner.

If you find any problem in this lecture note, please feel free to tell Steven via steven [at] findaway.hk.