Andy from Webcrunch

Subscribe for email updates:

Portrait of Andy Leverenz
Andy Leverenz

November 1, 2017

Last updated November 5, 2023

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's 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 quick hiding and showing the 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 design. Ask yourself, does this thing function as 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 the user's journey across your website.

Download the Source Code for this Project

Source Code

The Series So Far

Link this article
Est. reading time: 3 minutes
Stats: 377 views


Part of the Let's Build: A Consultancy Website collection

Products and courses