...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
| Note |
|---|
Delete this page properties table before pushing to Viewport. |
...
Status
...
| Status | ||||
|---|---|---|---|---|
|
| Status | ||||
|---|---|---|---|---|
|
...
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 . |
About navigation
Site navigation is made up of multiple parts:
Site logo (links to the home page)
Primary navigation menu
Subnavigation menu
Side navigation More menu
Profile icon menu
Navigation is identical on desktop and mobile devices, with two exceptions:
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 side navigation More menu.
Is either example accurate below? In example 1, should “OnDemand, Launch U, Connections…” be in section 0? Should example 2 have more in the primary nav so that I can show how it’s limited on mobile?
If we have something already set up, or a wireframe, that’d be helpful. Otherwise I’ll set up on playground or photoshop. Will make mobile version of this.
...
Example desktop navigation (above)[SCREENSHOT]
...
Example mobile navigation (above)
Internal and external links
Whenever we refer to links on this page, they can be internal or external. Internal links go to another page on your site. External links go to another website.
Primary navigation
...
(desktop)
...
An example [image]primary navigation bar on a desktop device. See the tables below for details.
Element | Options | 2 | Icons | ||
|---|---|---|---|---|---|
1 | Links Primary navigation links (Desktop) |
| |||
2 | Icons |
| |||
Add or remove links (| Expand | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
|
Primary navigation (mobile)
...
An example 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) |
|
Choose 2 links to appear on mobile devices.Subnavigation
[SCREENSHOT]
...
the text so that it’s different on mobile devices than on desktops. This can help the text fit on small screens. |
Subnavigation (identical on desktop and mobile)
...
An example 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 |
|
More menu (identical on desktop and mobile)
Side navigation
[SCREENSHOT]
...
An example [image]More menu. See the tables below for details.
Side navigation 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 |
|
2 | Links (identical on desktop and mobile) |
|
3 | Admin links |
|
Remove section ...
NOT SURE / LEFT OUT:
...
Remove Powered by JUNO?
...
Profile icon menu - no client facing configuration options, correct?
My Q: What are we saying can differ between mobile and desktop? Right now I only have differences for PRIMARY nav. But these configs show potential differences for other parts. Should any of this be advertised?
...
Add removeFromDesktop true to a route under NAVIGATION to remove the route completely from the desktop. This option is added so that we could duplicate a route a make it slightly different for the app vs desktop without causing issues.
...
Add removeFromApp true to a route under NAVIGATION to remove the route completely from the app.
...
Add hideOnApp true to a route -> data -> subNavItems -> item to remove a subnav from the app
...
. |