The Coolest Responsive
Navigation Techniques on your
Joomla! Template
Mobile Menus Matter
About Me
Ryan Boog
@hdwebpros
@ryanboog
/HappyDogWebProductions
hdwebpros.com 651-243-2DOG
Let’s Connect! #youreawesome
● ...
Why is mobile navigation important?
Mobile usage has surpassed
desktop usage for browsing the
internet (including apps). 5...
Start With Mobile
Start your wireframes and
design from mobile first.
Add more features if you
want when the screen
gets b...
How should you create menus for mobile devices?
Every site is different.
Make it work for your client
and their target aud...
Let’s 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
m...
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
● Becomi...
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
Di...
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 cont...
Example
Usage
I went to http://tympanus.
net/Development/PerspectivePageViewNavigat
ion/
Use the JS and CSS for that menu to
incor...
Off Canvas
Advantages:
● Can hold a lot of menu
items
● Non-Obtrusive
● Can work from a fixed
position
● Scrollable
Disadv...
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:
...
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...
Upcoming SlideShare
Loading in …5
×

Responsive navigation techniques for 2014

865 views

Published on

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

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
865
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive navigation techniques for 2014

  1. 1. The Coolest Responsive Navigation Techniques on your Joomla! Template Mobile Menus Matter
  2. 2. About Me Ryan Boog @hdwebpros @ryanboog /HappyDogWebProductions hdwebpros.com 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. 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. 4. Start With Mobile Start your wireframes and design from mobile first. Add more features if you want when the screen gets bigger.
  5. 5. How should you create menus for mobile devices? Every site is different. Make it work for your client and their target audience.
  6. 6. Let’s dive in! Here are a few examples of responsive navigation
  7. 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. 8. Example Can be found in Bootstrap
  9. 9. Usage Built in Protostar. Part of Bootstrap. getbootstrap.com
  10. 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. 11. Example
  12. 12. Usage Built in Protostar. Part of Bootstrap. getbootstrap.com
  13. 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. 14. Example
  15. 15. Usage ● Use an older Yootheme template ● There is a module that converts to select list out there, fire it on media queries
  16. 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. 17. Example
  18. 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. 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. 20. Example
  21. 21. Usage ● Fully use UIKit in your theme ● Nab the LESS for “off-canvas” and incorporate the JS into your theme
  22. 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. 23. Example
  24. 24. Usage Figure out what works, and just do it. A little effort can go a long way!
  25. 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

×