Let's Build: A Consultancy Website - Part 36 - Finishing the Mobile Menu

Hi, My name is Andy Leverenz. I design, code, and am an author of things. Check out my agency called Couple of Creatives https://coupleofcreatives.com and my blog Web-Crunch https://web-crunch.com🤘🏻

======

In part 36, I round out the styles for the mobile menu.

The example we borrowed from in part 35 (https://web-crunch.com/lets-build-consultancy-website-part-35/) of the series had a lot of unneeded CSS in my opinion. For this design I wanted the menu to be snappy and responsive to a tap of a person finger on any device. To make this happen I omitted a lot of unnecessary transition declarations as well as any odd transforms that were going on. The end result leaves us with a quick hiding and showing effect that doesn't get in the way of me trying to navigate the site.

UX first, "icing" later

When designing for users you need to think about them first before getting too carried away with a design. Ask yourself, does this "thing" function like it should? Am I following the function over form mantra? If you can answer yes to both of those questions you are on the right path. Only until the functionality is optimal should you bother with what I like to call "icing". By "icing" I mean all of the fancy animations, transitions, fades, and more you can do with CSS. These create really nice effects but sometimes hinder the perception of load time. If it animates slow, it feels slow and too me, you shouldn't put add any more time to user's journey across your website.

======

⚙ Download the source code https://github.com/justalever/endlyssdesigns

💻 Previously published at: https://web-crunch.com/lets-build-consultancy-website-part-36/

💻 Check out the blog: https://web-crunch.com

💡 👫 Check out my agency: https://coupleofcreatives.com

🚀 Links: Weekly Newsletter: https://web-crunch.com/subscribe Twitter: https://twitter.com/webcrunchblog Twitter(Personal Account): https://twitter.com/justalever Facebook: https://facebook.com/webcrunchblog Dribbble: https://dribbble.com/justalever Github: https://github.com/justalever Medium: https://medium.com/the-web-crunch-publication

📘Check out my book on UX Design: "LUXD: Learn User Experience Design" https://web-crunch.com/books/luxd

📙 Check out my FREE book on Tumblr Theming: "Pro Tumblr Theming" https://web-crunch.com/books/ptt

💯 Need awesome web hosting? Check out cloudways. They allow me to use a variety of hosting providers and build apps with ease: http://bit.ly/webcrunchhosting ... https://www.youtube.com/watch?v=dKTEfc92KAs