The Coolest Responsive Navigation Techniques on your Joomla! Template
Mobile Menus Matter
About MeRyan 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!
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 MobileStart 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.
Let’s dive in!
Here are a few examples of responsive navigation
Stacked PillsPositives● 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
ExampleCan be found in Bootstrap
UsageBuilt in Protostar. Part of Bootstrap.
getbootstrap.com
Bootstrap Responsive NavAdvantages● 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
UsageBuilt in Protostar. Part of Bootstrap.
getbootstrap.com
Select ListAdvantages: ● 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 ViewAdvantages:● 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
UsageI went to http://tympanus.net/Development/PerspectivePageViewNavigation/
Use the JS and CSS for that menu to incorporate. Shows div in class “outer-nav”.
Off CanvasAdvantages:● 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 NavAdvantages:● Extremely customizable● No JS required (typically)● You dictate its
awesomeness
Disadvantages:● Takes a lot more
effort● Success depends on
your knowledge
Example
UsageFigure 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