Let’s Build: A Consultancy Website – Part 36

Finishing the Mobile Menu

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

The example we borrowed from in 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 for this Project

Source Code

The Series So Far