diff options
Diffstat (limited to 'build/hamburgers/index.html')
| -rw-r--r-- | build/hamburgers/index.html | 65 |
1 files changed, 65 insertions, 0 deletions
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 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta name="color-scheme" content="dark light"> + <link rel="icon" href="data:,"> + <title>Stop Using Hamburger Menus (Sometimes)</title> + <link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> + <link href="/rss.xml" type="application/rss+xml" rel="alternate" title="RSS feed for blog posts" /> +<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}blockquote{background:rgba(0,0,0,0.1);border-left:4px solid;padding-left:5px;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.footnotes{font-size:90%;}</style> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1 id="stop-using-hamburger-menus-sometimes">Stop Using Hamburger Menus (Sometimes)</h1> +<p>2023-05-05</p> +<p>I recently <a href="https://fosstodon.org/@tdarb/110264983268249599">tooted about my hatred of website hamburger menus</a> which was met with a surprising amount of support from other users. It seems like most people <em>don’t actually like hamburger menus</em>. 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?</p> +<h2 id="the-core-problem-with-hamburger-menus">The Core Problem with Hamburger Menus</h2> +<p>The biggest headache when coming across these menus on the web is the complete disregard for <strong>accessibility</strong>. 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.</p> +<p>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.</p> +<h2 id="but-i-have-no-choice">“But I Have No Choice!”</h2> +<p>I see this argument pop-up frequently when taking to design leaders or developers. I call bullshit on this excuse. You <em>absolutely</em> 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.</p> +<h2 id="best-alternative-sitemap-footer">Best Alternative: Sitemap Footer</h2> +<p>So instead of just whining about hamburger menus, I will actually offer up a solid replacement: <strong>sitemap footers</strong>. 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.</p> +<p>That’s it. There is nothing else you need to do for this to <em>just work</em>. 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.</p> +<p><strong>Pros:</strong></p> +<ul> +<li>Keyboard navigation accessible</li> +<li>Excellent screen-reader support</li> +<li>Works on all devices/screens by default (no media queries!)</li> +<li>Stays out of the way until called upon (UX goodness)</li> +<li>Requires ZERO CSS or JavaScript</li> +</ul> +<p><strong>Cons:</strong></p> +<ul> +<li>Footer can become large with many links (although I <em>really</em> don’t see this as a big deal)</li> +</ul> +<h2 id="no-excuse">No Excuse</h2> +<p>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 <em>least</em> we can do is improve something as simple as website navigation…</p> +<footer role="contentinfo"> + <h2>Menu Navigation</h2> + <ul id="menu"> + <li><a href="/">Home</a></li> + <li><a href="/projects">Projects</a></li> + <li><a href="/uses">Uses</a></li> + <li><a href="/wiki">Wiki</a></li> + <li><a href="/resume">Resume</a></li> + <li><a href="/colophon">Colophon</a></li> + <li><a href="/now">Now</a></li> + <li><a href="/donate">Donate</a></li> + <li><a href="/atom.xml">RSS</a></li> + <li><a href="#top">↑ Top of the page</a></li> + </ul> + <small> + Built with <a href="https://barf.btxx.org">barf</a>. <br> + Feeds: <a href="/atom.xml">Atom</a> & <a href="/rss.xml">RSS</a><br> + Maintained with ♥ for the web. <br> + Proud supporter of <a href="https://usefathom.com/ref/DKHJVX">Fathom</a> & <a href="https://nextdns.io/?from=74d3p3h8">NextDNS</a>. <br> + The content for this site is <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.<br> The <a href="https://git.sr.ht/~bt/bt.ht">code for this site</a> is <a href="https://git.sr.ht/~bt/bt.ht/tree/master/item/LICENSE">MIT</a>. + </small> +</footer>
\ No newline at end of file |