Navigation Drawer – Google Dev Web Fundamentals

Google Developers Web Fundamentals
Navigation Drawer

Navigation Drawer - Google Dev Web Fundamentals

My new Web dweeb obsession is the Navigation Drawer as defined in Google’s Web Fundamentals.

First made popular by the mobile version of Facebook (with it’s roots found in Google Chrome’s tool icon theft of Apple’s iOS playlist reorder icon), now it can be found on every popular site and I predict will become as commonplace as the header and footer to site design (there’s a reason Google includes it in it’s Web fundamentals).

Popular sites have even begun to include it into desktop version site design – YouTube is one example.

I myself have been studying how the functionality works in jQuery and have many prototypes (here’s my latest: http://ejgh.co), but I will now begin to adopt Google’s standard to simplify things going forward.

Here’s an example of that:

https://google-developers.appspot.com/web/fundamentals/resources/samples/layouts/navigation-patterns/appbar-navdrawer-sample1

My hopes are now with this standardization by Google others will more heavily adopt and it will become more standard in WordPress development.

CycloneRV.com Responsive Landing Page

CycloneRV.com

Back in January, 2013 I had the opportunity to design a responsive landing page for a very popular Toy Hauler brand name, Cyclone RV. Using WordPress, I properly optimized the target keywords for the Web site and quickly turned my focus on making this landing page display as well on a mobile device as it does a large screen desktop.

I made sure to keep the phone number front and center on the mobile layout, so anyone interested in buying a Cyclone RV is only a finger tap away while swiping through the many floor plans available.

For the past 2 years I’ve been reading about responsive design and how to properly implement it across multiple browsers on multiple devices, but before now I’ve only tested and followed the lead of others in regard to the best way to accomplish a successful responsive design. The experience has left me with a much stronger opinion about mobile design than before.

I feel privileged to have been given the chance to develop a search engine friendly responsive design for Cyclone by Heartland RV, and I look forward to many more!

Mozilla’s take on a mobile Web menu. No side panel. Not very intuitive.

20130526-212536.jpg 20130526-212545.jpg 20130526-212550.jpg

20130526-165419.jpg 20130526-165426.jpg

Mashable.com mobile web side panel. It’s a bit glitchy but it definitely looks nice.

Facebook and Mobile First

Mark Zuckerberg might have made a mistake for doubling down on the mobile Web browser over mobile apps – a mistake Facebook has now fixed with one of the most feature rich social apps out right now. And although I may be biased toward the mobile Web browser as a Web Developer who prefers simple markup over the mathematics of computer programming, I believe Facebook is poised to maintain a lead in advanced mobile Web browsing going forward. I don’t know of another site as rich with interaction through the touch of a smart phone. And it’s only going to get better with time. In fact, I think it might have been the smartest move for long term success in the always growing social and mobile and local world we now share. As I study the mobile Web more, I’m seeing just how far ahead Facebook is to everyone else. Right now Responsive design is winning the crowd, but in 5-10 years who will pull up your site on there desktop? I’m focusing my efforts on Mobile First. It’s the only game in town for me.