Let's go over some of the most popular navigation techniques used in 2014. Presented at Joomla! Day Boston 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
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.
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

11. Example

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

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