Your SlideShare is downloading. ×
Responsive navigation techniques for 2014
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Responsive navigation techniques for 2014


Published on

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

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

Published in: Education

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. The Coolest Responsive Navigation Techniques on your Joomla! Template Mobile Menus Matter
  • 2. About Me Ryan Boog @hdwebpros @ryanboog /HappyDogWebProductions 651-243-2DOG Let’s 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. Patty’s 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. Let’s 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.
  • 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
  • 11. Example
  • 12. Usage Built in Protostar. Part of Bootstrap.
  • 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
  • 14. Example
  • 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
  • 17. Example
  • 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
  • 20. Example
  • 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
  • 23. Example
  • 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