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.
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
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
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
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