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 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 introd...
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 t...
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
Designing a theme navigation? Here's 7 things to keep in mind
Designing a theme navigation? Here's 7 things to keep in mind
Designing a theme navigation? Here's 7 things to keep in mind
Designing a theme navigation? Here's 7 things to keep in mind
Designing a theme navigation? Here's 7 things to keep in mind
Designing a theme navigation? Here's 7 things to keep in mind
Designing a theme navigation? Here's 7 things to keep in mind
Designing a theme navigation? Here's 7 things to keep in mind
Designing a theme navigation? Here's 7 things to keep in mind
Designing a theme navigation? Here's 7 things to keep in mind
Designing a theme navigation? Here's 7 things to keep in mind
Designing a theme navigation? Here's 7 things to keep in mind
Designing a theme navigation? Here's 7 things to keep in mind
Designing a theme navigation? Here's 7 things to keep in mind
Designing a theme navigation? Here's 7 things to keep in mind
Designing a theme navigation? Here's 7 things to keep in mind
Designing a theme navigation? Here's 7 things to keep in mind
Upcoming SlideShare
Loading in …5
×

of

Designing a theme navigation? Here's 7 things to keep in mind Slide 1 Designing a theme navigation? Here's 7 things to keep in mind Slide 2 Designing a theme navigation? Here's 7 things to keep in mind Slide 3 Designing a theme navigation? Here's 7 things to keep in mind Slide 4 Designing a theme navigation? Here's 7 things to keep in mind Slide 5 Designing a theme navigation? Here's 7 things to keep in mind Slide 6 Designing a theme navigation? Here's 7 things to keep in mind Slide 7 Designing a theme navigation? Here's 7 things to keep in mind Slide 8 Designing a theme navigation? Here's 7 things to keep in mind Slide 9 Designing a theme navigation? Here's 7 things to keep in mind Slide 10 Designing a theme navigation? Here's 7 things to keep in mind Slide 11 Designing a theme navigation? Here's 7 things to keep in mind Slide 12 Designing a theme navigation? Here's 7 things to keep in mind Slide 13 Designing a theme navigation? Here's 7 things to keep in mind Slide 14 Designing a theme navigation? Here's 7 things to keep in mind Slide 15 Designing a theme navigation? Here's 7 things to keep in mind Slide 16 Designing a theme navigation? Here's 7 things to keep in mind Slide 17 Designing a theme navigation? Here's 7 things to keep in mind Slide 18 Designing a theme navigation? Here's 7 things to keep in mind Slide 19 Designing a theme navigation? Here's 7 things to keep in mind Slide 20 Designing a theme navigation? Here's 7 things to keep in mind Slide 21 Designing a theme navigation? Here's 7 things to keep in mind Slide 22 Designing a theme navigation? Here's 7 things to keep in mind Slide 23 Designing a theme navigation? Here's 7 things to keep in mind Slide 24 Designing a theme navigation? Here's 7 things to keep in mind Slide 25 Designing a theme navigation? Here's 7 things to keep in mind Slide 26 Designing a theme navigation? Here's 7 things to keep in mind Slide 27 Designing a theme navigation? Here's 7 things to keep in mind Slide 28 Designing a theme navigation? Here's 7 things to keep in mind Slide 29 Designing a theme navigation? Here's 7 things to keep in mind Slide 30 Designing a theme navigation? Here's 7 things to keep in mind Slide 31 Designing a theme navigation? Here's 7 things to keep in mind Slide 32 Designing a theme navigation? Here's 7 things to keep in mind Slide 33 Designing a theme navigation? Here's 7 things to keep in mind Slide 34 Designing a theme navigation? Here's 7 things to keep in mind Slide 35 Designing a theme navigation? Here's 7 things to keep in mind Slide 36 Designing a theme navigation? Here's 7 things to keep in mind Slide 37 Designing a theme navigation? Here's 7 things to keep in mind Slide 38 Designing a theme navigation? Here's 7 things to keep in mind Slide 39 Designing a theme navigation? Here's 7 things to keep in mind Slide 40 Designing a theme navigation? Here's 7 things to keep in mind Slide 41 Designing a theme navigation? Here's 7 things to keep in mind Slide 42 Designing a theme navigation? Here's 7 things to keep in mind Slide 43 Designing a theme navigation? Here's 7 things to keep in mind Slide 44 Designing a theme navigation? Here's 7 things to keep in mind Slide 45 Designing a theme navigation? Here's 7 things to keep in mind Slide 46 Designing a theme navigation? Here's 7 things to keep in mind Slide 47 Designing a theme navigation? Here's 7 things to keep in mind Slide 48 Designing a theme navigation? Here's 7 things to keep in mind Slide 49 Designing a theme navigation? Here's 7 things to keep in mind Slide 50 Designing a theme navigation? Here's 7 things to keep in mind Slide 51 Designing a theme navigation? Here's 7 things to keep in mind Slide 52
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

1 Like

Share

Download to read offline

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

Download to read offline

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!

Related Books

Free with a 30 day trial from Scribd

See all

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
  • firozsabaliya

    Dec. 3, 2017

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!

Views

Total views

2,054

On Slideshare

0

From embeds

0

Number of embeds

23

Actions

Downloads

1

Shares

0

Comments

0

Likes

1

×