際際滷

際際滷Share a Scribd company logo

Responsive navigation techniques for 2014

HappyDogWebProductions
HappyDogWebProductions

Let's go over some of the most popular navigation techniques used in 2014. Presented at Joomla! Day Boston 2014.

1 of 25
Download to read offline
The Coolest Responsive Navigation Techniques on your Joomla! Template Mobile Menus Matter
About Me Ryan Boog @hdwebpros @ryanboog /HappyDogWebProductions hdwebpros.com 651-243-2DOG Lets Connect! #youreawesome CEO of Happy Dog Web Productions Devoted father and husband A proud Vikings fan Away from Joomla! and web, I enjoy sports, trying new restaurants and pretending to be a decent food critic, doing fun competitive things. Okay, an occasional beer too, especially on fun events like this. Happy St. Pattys Day!
Why is mobile navigation important? Mobile usage has surpassed desktop usage for browsing the internet (including apps). 55% of all time spent on the internet is from a mobile device. People (and dogs) are glued to their phones.
Start With Mobile Start your wireframes and design from mobile first. Add more features if you want when the screen gets bigger.
How should you create menus for mobile devices? Every site is different. Make it work for your client and their target audience.
Lets dive in! Here are a few examples of responsive navigation
Stacked Pills Positives Easy to read Easy to tap Clearly defined Easy to implement Negatives Limited amount of menu items Can be obtrusive and take up valuable real estate
Example Can be found in Bootstrap
Usage Built in Protostar. Part of Bootstrap. getbootstrap.com
Bootstrap Responsive Nav Advantages If done right clearly defined Can hide a fair amount of menu items nicely Becoming more and more universal Can be accordion (see warning) Disadvantages: Either parent items can not be clickable, or all menus forced open Can be easy to accidentally tap an option if scrolling Typically requires a "bar" that takes up some decent real estate (at least out of the box) The "hamburger" icon doesn't perform as well as other options yet
Example
Usage Built in Protostar. Part of Bootstrap. getbootstrap.com
Select List Advantages: Uses phones native list scroller, which some like Shows all levels instantly Easy to spot Disadvantages: Can be confusing List scrollers take up some valuable real estate No custom styling
Example
Usage Use an older Yootheme template There is a module that converts to select list out there, fire it on media queries
Perspective Page View Advantages: Really, really cool looking Can be triggered from a small icon or area Custom content can be inserted Requires little JS (lightweight) Disadvantages Limited menu options Limited space to work with
Example
Usage I went to http://tympanus. net/Development/PerspectivePageViewNavigat ion/ Use the JS and CSS for that menu to incorporate. Shows div in class outer-nav.
Off Canvas Advantages: Can hold a lot of menu items Non-Obtrusive Can work from a fixed position Scrollable Disadvantages: Odd and obtrusive for little menus
Example
Usage Fully use UIKit in your theme Nab the LESS for off-canvas and incorporate the JS into your theme
Custom Nav Advantages: Extremely customizable No JS required (typically) You dictate its awesomeness Disadvantages: Takes a lot more effort Success depends on your knowledge
Example
Usage Figure out what works, and just do it. A little effort can go a long way!
Questions? I will answer your questions. I will not catch socks in my mouth. Got one for later? @hdwebpros or just pull me aside Remember, #JoomlaDayBoston #youreawesome

More Related Content

Responsive navigation techniques for 2014

  • 1. The Coolest Responsive Navigation Techniques on your Joomla! Template Mobile Menus Matter
  • 2. About Me Ryan Boog @hdwebpros @ryanboog /HappyDogWebProductions hdwebpros.com 651-243-2DOG Lets Connect! #youreawesome CEO of Happy Dog Web Productions Devoted father and husband A proud Vikings fan Away from Joomla! and web, I enjoy sports, trying new restaurants and pretending to be a decent food critic, doing fun competitive things. Okay, an occasional beer too, especially on fun events like this. Happy St. Pattys Day!
  • 3. Why is mobile navigation important? Mobile usage has surpassed desktop usage for browsing the internet (including apps). 55% of all time spent on the internet is from a mobile device. People (and dogs) are glued to their phones.
  • 4. Start With Mobile Start your wireframes and design from mobile first. Add more features if you want when the screen gets bigger.
  • 5. How should you create menus for mobile devices? Every site is different. Make it work for your client and their target audience.
  • 6. Lets dive in! Here are a few examples of responsive navigation
  • 7. Stacked Pills Positives Easy to read Easy to tap Clearly defined Easy to implement Negatives Limited amount of menu items Can be obtrusive and take up valuable real estate
  • 8. Example Can be found in Bootstrap
  • 9. Usage Built in Protostar. Part of Bootstrap. getbootstrap.com
  • 10. Bootstrap Responsive Nav Advantages If done right clearly defined Can hide a fair amount of menu items nicely Becoming more and more universal Can be accordion (see warning) Disadvantages: Either parent items can not be clickable, or all menus forced open Can be easy to accidentally tap an option if scrolling Typically requires a "bar" that takes up some decent real estate (at least out of the box) The "hamburger" icon doesn't perform as well as other options yet
  • 12. Usage Built in Protostar. Part of Bootstrap. getbootstrap.com
  • 13. Select List Advantages: Uses phones native list scroller, which some like Shows all levels instantly Easy to spot Disadvantages: Can be confusing List scrollers take up some valuable real estate No custom styling
  • 15. Usage Use an older Yootheme template There is a module that converts to select list out there, fire it on media queries
  • 16. Perspective Page View Advantages: Really, really cool looking Can be triggered from a small icon or area Custom content can be inserted Requires little JS (lightweight) Disadvantages Limited menu options Limited space to work with
  • 18. Usage I went to http://tympanus. net/Development/PerspectivePageViewNavigat ion/ Use the JS and CSS for that menu to incorporate. Shows div in class outer-nav.
  • 19. Off Canvas Advantages: Can hold a lot of menu items Non-Obtrusive Can work from a fixed position Scrollable Disadvantages: Odd and obtrusive for little menus
  • 21. Usage Fully use UIKit in your theme Nab the LESS for off-canvas and incorporate the JS into your theme
  • 22. Custom Nav Advantages: Extremely customizable No JS required (typically) You dictate its awesomeness Disadvantages: Takes a lot more effort Success depends on your knowledge
  • 24. Usage Figure out what works, and just do it. A little effort can go a long way!
  • 25. Questions? I will answer your questions. I will not catch socks in my mouth. Got one for later? @hdwebpros or just pull me aside Remember, #JoomlaDayBoston #youreawesome