&072; is for Hamburger

"I would gladly pay you Tuesday for a hamburger today."
                                -J. Wellington Wimpy

It's National Hamburger Day, a day set aside to honor the sandwich that has become a symbol of the American cookout. Yes, there is some debate, but the hamburger is a sandwich, according to Merriam-Webster. They're also what keep our site menus from breaking in a mobile view. It’s becoming a bit of tradition on national food days for me to write a post on the technological version of that food.

Are hamburgers used in web design? Yep, they are, and we are taking a moment to honor them—specifically, the hamburger icon.

You probably recognize it. It’s the menu icon that shows up on phones and a lot of websites. But, much like other glyphs that are used in technology, its history is a lot older than you would suspect (Fun fact, the first known use of the @ is from 1345.). The hamburger icon was actually developed 1981 by Norm Cox for the Xerox Star workstation. The three vertical lines were meant to represent a menu, but to hungry programmers, it looks like a hamburger, hence its name.

Chances are, if you’ve visited our site through a mobile device, you’ve seen we are using the hamburger icon. The problem is that our site’s menu system is too wide to fit in an-870-pixel- wide view, which means the site would break in a phone browser. So, we use responsive theming.

The site you view on a mobile device vs. a desktop is the same. It's just displaying differently. CSS (Cascading Style Sheets) has a functionality called breakpoints. By using a small bit of code, like @media only screen and (max-width: 870px), we can tell our site to use a different display for any browser set to a width smaller than 870 pixels. If you want to try it out, resize your browser and you'll see the look of the site change. One of these changes is visible in our site menu, which we replace with a hamburger icon. The icon acts as a toggle, and, when clicked, the full menu drops down. 

The hamburger is just three simple lines. But without them, mobile user interfaces wouldn't be the same. So on National Hamburger Day, we hope you relish the opportunity to appreciate all things technologically burger.

Related Resources 

• “C is for Cookie,” by Andrew Whitesell, The Bigger Picture, Smithsonian Institution Archives
• “The Future is Here,” by Andrew Whitesell, The Bigger Picture, Smithsonian Institution Archives