Designing a theme navigation? Here's 7 things to keep in mind
•
2 j'aime•2,201 vues
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!
Recommandé
Contenu connexe
Similaire à Designing a theme navigation? Here's 7 things to keep in mind
Similaire à Designing a theme navigation? Here's 7 things to keep in mind (20)
Dernier
Dernier (20)
Designing a theme navigation? Here's 7 things to keep in mind
- 1. Designing a Theme Menu? Here’s 7 Things To Keep in Mind Dmitry Mayorov / www.themepatio.com WordCamp US 2017
- 6. Increase the font size from 8px to 16px
- 8. Pay attention to color contrast
- 10. #595959
- 11. Define clickable areas on mobile
- 15. Design all states of menu items
- 16. Design all states for menu items -- Hover -- Focus -- Current page
- 17. Don’t only differentiate by color
- 20. Mark menu items with children elements
- 23. Make sure submenus are keybord-accessible
- 25. 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
- 27. Hub pages
- 33. Dont’ use it for less than 5 menu items
- 34. Add a Menu lebel next ot it
- 35. ... and make it accessible
- 36. ... 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()
- 41. PRO CON
- 44. JavaScript to the Rescue
- 51. There are no universal rules