Download - Responsive navigation techniques for 2014
![Page 1: Responsive navigation techniques for 2014](https://reader033.vdocuments.site/reader033/viewer/2022052621/558a37f1d8b42ab31d8b4593/html5/thumbnails/1.jpg)
The Coolest Responsive Navigation Techniques on your Joomla! Template
Mobile Menus Matter
![Page 2: Responsive navigation techniques for 2014](https://reader033.vdocuments.site/reader033/viewer/2022052621/558a37f1d8b42ab31d8b4593/html5/thumbnails/2.jpg)
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!
![Page 3: Responsive navigation techniques for 2014](https://reader033.vdocuments.site/reader033/viewer/2022052621/558a37f1d8b42ab31d8b4593/html5/thumbnails/3.jpg)
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.
![Page 4: Responsive navigation techniques for 2014](https://reader033.vdocuments.site/reader033/viewer/2022052621/558a37f1d8b42ab31d8b4593/html5/thumbnails/4.jpg)
Start With MobileStart your wireframes and design from mobile first. Add more features if you want when the screen gets bigger.
![Page 5: Responsive navigation techniques for 2014](https://reader033.vdocuments.site/reader033/viewer/2022052621/558a37f1d8b42ab31d8b4593/html5/thumbnails/5.jpg)
How should you create menus for mobile devices?
Every site is different.
Make it work for your client and their target audience.
![Page 6: Responsive navigation techniques for 2014](https://reader033.vdocuments.site/reader033/viewer/2022052621/558a37f1d8b42ab31d8b4593/html5/thumbnails/6.jpg)
Let’s dive in!
Here are a few examples of responsive navigation
![Page 7: Responsive navigation techniques for 2014](https://reader033.vdocuments.site/reader033/viewer/2022052621/558a37f1d8b42ab31d8b4593/html5/thumbnails/7.jpg)
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
![Page 8: Responsive navigation techniques for 2014](https://reader033.vdocuments.site/reader033/viewer/2022052621/558a37f1d8b42ab31d8b4593/html5/thumbnails/8.jpg)
ExampleCan be found in Bootstrap
![Page 9: Responsive navigation techniques for 2014](https://reader033.vdocuments.site/reader033/viewer/2022052621/558a37f1d8b42ab31d8b4593/html5/thumbnails/9.jpg)
UsageBuilt in Protostar. Part of Bootstrap.
getbootstrap.com
![Page 10: Responsive navigation techniques for 2014](https://reader033.vdocuments.site/reader033/viewer/2022052621/558a37f1d8b42ab31d8b4593/html5/thumbnails/10.jpg)
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
![Page 11: Responsive navigation techniques for 2014](https://reader033.vdocuments.site/reader033/viewer/2022052621/558a37f1d8b42ab31d8b4593/html5/thumbnails/11.jpg)
Example
![Page 12: Responsive navigation techniques for 2014](https://reader033.vdocuments.site/reader033/viewer/2022052621/558a37f1d8b42ab31d8b4593/html5/thumbnails/12.jpg)
UsageBuilt in Protostar. Part of Bootstrap.
getbootstrap.com
![Page 13: Responsive navigation techniques for 2014](https://reader033.vdocuments.site/reader033/viewer/2022052621/558a37f1d8b42ab31d8b4593/html5/thumbnails/13.jpg)
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
![Page 14: Responsive navigation techniques for 2014](https://reader033.vdocuments.site/reader033/viewer/2022052621/558a37f1d8b42ab31d8b4593/html5/thumbnails/14.jpg)
Example
![Page 15: Responsive navigation techniques for 2014](https://reader033.vdocuments.site/reader033/viewer/2022052621/558a37f1d8b42ab31d8b4593/html5/thumbnails/15.jpg)
Usage● Use an older Yootheme template● There is a module that converts to select list
out there, fire it on media queries
![Page 16: Responsive navigation techniques for 2014](https://reader033.vdocuments.site/reader033/viewer/2022052621/558a37f1d8b42ab31d8b4593/html5/thumbnails/16.jpg)
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
![Page 17: Responsive navigation techniques for 2014](https://reader033.vdocuments.site/reader033/viewer/2022052621/558a37f1d8b42ab31d8b4593/html5/thumbnails/17.jpg)
Example
![Page 18: Responsive navigation techniques for 2014](https://reader033.vdocuments.site/reader033/viewer/2022052621/558a37f1d8b42ab31d8b4593/html5/thumbnails/18.jpg)
UsageI went to http://tympanus.net/Development/PerspectivePageViewNavigation/
Use the JS and CSS for that menu to incorporate. Shows div in class “outer-nav”.
![Page 19: Responsive navigation techniques for 2014](https://reader033.vdocuments.site/reader033/viewer/2022052621/558a37f1d8b42ab31d8b4593/html5/thumbnails/19.jpg)
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
![Page 20: Responsive navigation techniques for 2014](https://reader033.vdocuments.site/reader033/viewer/2022052621/558a37f1d8b42ab31d8b4593/html5/thumbnails/20.jpg)
Example
![Page 21: Responsive navigation techniques for 2014](https://reader033.vdocuments.site/reader033/viewer/2022052621/558a37f1d8b42ab31d8b4593/html5/thumbnails/21.jpg)
Usage● Fully use UIKit in your theme● Nab the LESS for “off-canvas” and
incorporate the JS into your theme
![Page 22: Responsive navigation techniques for 2014](https://reader033.vdocuments.site/reader033/viewer/2022052621/558a37f1d8b42ab31d8b4593/html5/thumbnails/22.jpg)
Custom NavAdvantages:● Extremely customizable● No JS required (typically)● You dictate its
awesomeness
Disadvantages:● Takes a lot more
effort● Success depends on
your knowledge
![Page 23: Responsive navigation techniques for 2014](https://reader033.vdocuments.site/reader033/viewer/2022052621/558a37f1d8b42ab31d8b4593/html5/thumbnails/23.jpg)
Example
![Page 24: Responsive navigation techniques for 2014](https://reader033.vdocuments.site/reader033/viewer/2022052621/558a37f1d8b42ab31d8b4593/html5/thumbnails/24.jpg)
UsageFigure out what works, and just do it. A little effort can go a long way!
![Page 25: Responsive navigation techniques for 2014](https://reader033.vdocuments.site/reader033/viewer/2022052621/558a37f1d8b42ab31d8b4593/html5/thumbnails/25.jpg)
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