Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: added note about selecting other icons from font awesome

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

Note

Delete this page properties table before pushing to Viewport.

...

Status

...

Status
colourRed
titlenot visible to public
Status
colourYellow
titleReady for review

...

Type

...

Reference / Explanation

...

Reader

...

Clients

...

Reader goal

...

Contributors

...

JUNO version

...

V2.0

...

Reviewers (check the box when you’re done!)

...

  •  Scrilla
  •  Renae

...

Review deadline

...

...

Notes for reviewers

...

in person review, Thursday Jan 20th

  • Review doc for accuracy/missing details (like character limits).

  • What else needs to be updated (Obviously internal docs... but what about site structure workbook?)

  • Get terminology aligned across internal/external docs and workbook. Put it into the style guide. Make sure the actual config names won't cause confusion.

The JUNO team can help you configure your site navigation.

Info

For color and font configurations, see https://junolive.atlassian.net/wiki/pages/resumedraft.action?draftId=796721189. Brand options .

Site navigation is made up of multiple parts:

  • Site logo (links to the home page)

  • Primary navigation menu

  • Subnavigation menu

  • More menu

  • Profile icon menu

...

  • Primary navigation is located at the bottom of mobile screens. It’s at the top of the page on desktop devices.

  • Mobile devices only show 4 links in the primary navigation menu, even if there are more on desktop devices. Any additional links are still accessible in the More menu.

connect is being fixed by renae, etc-- get screenshot from there when it’s done.

...

Example desktop navigation (above)[SCREENSHOT]

...

Example mobile navigation (above)

...

...

An example [image]primary navigation bar on a desktop device. See the tables below for details.

Element

Options

1

Icons

(info) Change icons Get the list from the brand page, move it here

2

Links Primary navigation links (Desktop)

(plus) Add or remove links (recommend approx. 5 max)
(info) Change text (Character limits)

2

Icons

(info) Change icons. See the list of recommended options below, or select others from fontawesome.com. Here are some tips for picking icons:

  • Simple icons are better than complex ones.

  • Use the same weight/design: Solid, Regular, or Duotone. Don’t mix them.

Expand
titlePrimary navigation icon options

Insert excerpt
REUSE - Icons
REUSE - Icons
nameTop navigation icons
nopaneltrue

...

An example [image]primary navigation bar on a mobile device. See the tables below for details.

Fewer primary navigation links fit on mobile devices. Your site’s home page is always the first link, and More is always the fourth link. You Then you can choose two more. They

The links you choose don’t have to be the same as the links in the desktop viewthose on desktop devices. They can even be links that exist somewhere else in subnavigation. Think about what is most important to your mobile app users! For example, they might want a direct link to the schedule page while they’re on the go.

Element

Options

31

Links Primary navigation links (Mobile)

(tick) Choose 2 links to appear on mobile devices.
(info) Change the text so that it’s different on mobile devices than on desktops. This can help the text fit on small screens.

...

...

An example [image]subnavigation bar on a desktop device. See the tables below for details.

When you click a primary navigation link, a subnavigation bar appears with additional links for that section of the site.

Element

Options

1

Links (identical on desktop and mobile)Subnavigation links

(plus) Add or remove links (0-# max number)
(info) Change text (Character limits)

...

...

An example [image]More menu. See the tables below for details.

The More menu is a comprehensive list of all navigation links. It includes everything from primary navigation and subnavigation, as well as additional links.

The first top section must remain as is. It’s identical to your primary and subnavigation (as configured on desktop). But the other sections are configurableflexible:

Element

Options

1

SectionsAdditional sections

(plus) Add or remove sections
(info) Change section title titles (recommend 26 characters max)
(error) Remove section titletitles

2

Links (identical on desktop and mobile)

(plus) Add or remove links
(info) Change text (20 characters max)

3

Admin section

(plus) Add or remove links. These are restricted so that only site admins can see them. Regular attendees won’t see the link at all.

...