From 3f6a9546ec13063d0d5bdf21d30a93d3e8aa6050 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Tue, 2 Jul 2024 14:22:21 -0400 Subject: Rebuild changes based off latest barf --- build/hamburgers/index.html | 65 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 65 insertions(+) create mode 100644 build/hamburgers/index.html (limited to 'build/hamburgers/index.html') diff --git a/build/hamburgers/index.html b/build/hamburgers/index.html new file mode 100644 index 0000000..e18af06 --- /dev/null +++ b/build/hamburgers/index.html @@ -0,0 +1,65 @@ + + + + + + + + Stop Using Hamburger Menus (Sometimes) + + + + + + + +
+

Stop Using Hamburger Menus (Sometimes)

+

2023-05-05

+

I recently tooted about my hatred of website hamburger menus which was met with a surprising amount of support from other users. It seems like most people don’t actually like hamburger menus. So why do we, as developers, keep using them in our products and designs? Is it our only option? Or is it because we have become conditioned to expect it?

+

The Core Problem with Hamburger Menus

+

The biggest headache when coming across these menus on the web is the complete disregard for accessibility. Performance and solid user experience is almost always thrown out the window in favour of a “prettier” design layout. You might have made the overall design “cleaner” for your users, but you sacrificed all usability to do so.

+

I challenge you to visit a webpage or web app with a hamburger menu and try to navigate solely with your keyboard and screen-readers (or better yet - try these screen readers on mobile!). Within seconds you will find a whole mess of issues. Now try the same test with JavaScript disabled… Yikes.

+

“But I Have No Choice!”

+

I see this argument pop-up frequently when taking to design leaders or developers. I call bullshit on this excuse. You absolutely have the choice to avoid implementing bad designs - that’s your job! Either you’re not fighting hard enough against those pushing for it, or you’re just trying to build a “pretty” portfolio.

+ +

So instead of just whining about hamburger menus, I will actually offer up a solid replacement: sitemap footers. Simply place all your website/application links into the bottom footer and link directly to them from your header. Be sure to also include some form of “Top of the page” link for quick access back to the initial scroll view.

+

That’s it. There is nothing else you need to do for this to just work. It might sound oversimplified and that’s because it is. Looking for an example? This very website utilizes this technique, so give it a spin! Try using just your keyboard or even better - use a screen reader. Disable JS and CSS and watch it work flawlessly still.

+

Pros:

+ +

Cons:

+ +

No Excuse

+

There really is no excuse to still be using hamburger menus. Users expect them to be present only because we as designers have conditioned them think that way. They deserve a better experience on the web. The least we can do is improve something as simple as website navigation…

+ \ No newline at end of file -- cgit v1.2.3-54-g00ecf