OUCampus 201Site Navigation and Architecture

2

Class Topics

What is navigation? Vocabulary Template navigation overview How to customize site navigation Navigation design best practices

3

What is navigation?

The roads and railways of your site.

Getting from POINT A to POINT B

( via C, D and sometimes Y )

4

Vocabulary

.pcf, .inc

index

root

top-level

directory / folder

parent, sibling, child

primary nav / mega nav

sidenav

5

SJSU Template Navigation

6

SJSU Template Navigation

7

SJSU Template Navigation

8

SJSU Template Navigation

< Top Level page

< Child pages

< Child pages

9

Primary Nav

primarynav.pcf

• Automated• Not editable• Looks at top-level pages

10

Mega Nav

Using MegaNav:

1)Rename “/includes/zz-meganav.inc”

2)Edit “meganav.inc”

3)Snippets: Row & Sub

•Difficult to use and update•Requires some coding knowledge

11

Side Nav

12

Side Nav

• Not visible on end-pages• Editable• Updated only when new pages are created

13

Quick Links

• Only on the home page• Open editable region• Useful for important, highly-trafficked pages• Don’t get too fancy

14

Department.inc

• Only on the home page• Open editable region• Contact info only• Don’t get fancy

15

Side Nav

16

Do’s and Don’ts

DO:• Plan ahead: draw a map• Keep language simple and clear• Think about your user’s goals

17

Do’s and Don’ts

DON’T:• Link to external pages in primary/meganav• Link to files in primary/mega nav• Overuse internally-focused jargon• Design based on your own preferences

“It’s easier to build than to renovate. Plan ahead!”

18

Getting Further Help

Addons tab• Links to videos, help docs, classes & more

Web Services• Tuesday Open Lab

• Advanced Training: OUCampus 201 / 202

• iSupport: iss@sjsu.edu, attn: Web Services

19 Running Footer - Title of Subtitle