Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Designing a theme navigation? Here's 7 things to keep in mind

514 views

Published on

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!

Published in: Design
  • Be the first to comment

Designing a theme navigation? Here's 7 things to keep in mind

  1. 1. Designing a Theme Menu? Here’s 7 Things To Keep in Mind Dmitry Mayorov / www.themepatio.com WordCamp US 2017
  2. 2. Make it Accessible
  3. 3. Use appropriate font size
  4. 4. http://www.mirador.net.au/
  5. 5. Increase the font size from 8px to 16px
  6. 6. http://www.mirador.net.au/
  7. 7. Pay attention to color contrast
  8. 8. https://webaim.org/resources/contrastchecker/
  9. 9. #595959
  10. 10. Define clickable areas on mobile
  11. 11. Design all states of menu items
  12. 12. Design all states for menu items -- Hover -- Focus -- Current page
  13. 13. Don’t only differentiate by color
  14. 14. Use multi-level menus wisely
  15. 15. Mark menu items with children elements
  16. 16. Make sure submenus are keybord-accessible
  17. 17. Avoid using multi-level menus
  18. 18. 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
  19. 19. Multi-level menu alternatives
  20. 20. Hub pages
  21. 21. Table of contents
  22. 22. What about Hamburger Icon?
  23. 23. Dont’ use it for less than 5 menu items
  24. 24. Add a Menu lebel next ot it
  25. 25. ... and make it accessible
  26. 26. ... 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()
  27. 27. What about Sticky menus
  28. 28. https://wornwear.patagonia.com/
  29. 29. PRO CON
  30. 30. IT IS ALWAYS THERE PRO CON
  31. 31. IT IS ALWAYS THERE PRO IT IS ALWAYS THERE CON
  32. 32. JavaScript to the Rescue
  33. 33. https://wornwear.patagonia.com/
  34. 34. There are no universal rules
  35. 35. Dmitry Mayorov themepatio.com/about

×