Designing a theme navigation? Here's 7 things to keep in mind
Report
Dmitry MayorovFollow
Dec. 2, 2017•0 likes•2,201 views
2 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Check these out next
Designing a theme navigation? Here's 7 things to keep in mind
Dec. 2, 2017•0 likes•2,201 views
2 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Download to read offline
Report
Design
Even the very simple-looking menu may be tricky to build if it is poorly designed. In this short talk, we’ll cover the best practices for creating website navigation and what to keep in mind when creating a theme or building a website for a client. When to use multi-level vs. single-level menus or sticky vs. non-sticky vs. mixed type menus. What accessibility challenges you can face and how to tackle them. Hamburger pros and cons. What to include in the menu and what to keep away. Buckle up, we have only 10 minutes!
Dmitry MayorovFollow
Designing a theme navigation? Here's 7 things to keep in mind
- Designing a Theme Menu? Here’s 7 Things To Keep in Mind Dmitry Mayorov / www.themepatio.com WordCamp US 2017
- Make it Accessible
- Use appropriate font size
- http://www.mirador.net.au/
- Increase the font size from 8px to 16px
- http://www.mirador.net.au/
- Pay attention to color contrast
- https://webaim.org/resources/contrastchecker/
- #595959
- Define clickable areas on mobile
- Design all states of menu items
- Design all states for menu items -- Hover -- Focus -- Current page
- Don’t only differentiate by color
- Use multi-level menus wisely
- Mark menu items with children elements
- Make sure submenus are keybord-accessible
- Avoid using multi-level menus
- Avoid using multi-level menus -- They hide navigation content from view -- They encourage using empty links -- They introduce many accessibility challanges that require using JS
- Multi-level menu alternatives
- Hub pages
- Table of contents
- What about Hamburger Icon?
- Dont’ use it for less than 5 menu items
- Add a Menu lebel next ot it
- ... and make it accessible
- ... and make it accessible -- It needs to be focusable (button) -- The label needs to change to “Close” when the menu is toggled -- Don’t forget to make the label translatable through wp_localize_script()
- What about Sticky menus
- https://wornwear.patagonia.com/
- PRO CON
- IT IS ALWAYS THERE PRO CON
- IT IS ALWAYS THERE PRO IT IS ALWAYS THERE CON
- JavaScript to the Rescue
- https://wornwear.patagonia.com/
- There are no universal rules
- Dmitry Mayorov themepatio.com/about