hamburger icon button

When viewing a website on a mobile device I often see the site menu hidden behind a hamburger icon. I am not so sure that it is actually a hamburger icon, but it is called that because it consists of three lines that look like a bun with a patty in the middle.


The problem from a design perspective is that is assumes that the visitor to the site knows exactly what it represents. Sometimes as in the case on the CNN website above they feel the need to add the word menu next to the icon just so you know what it is (which seems to miss the point of having the icon in the first place?).

But on other sites like use it so prominently that it makes me think that designers just assume that every knows that clicking the hamburger icon will show the site menu:


it actually represents a list

According to Wikipedia it was created by Norman Cox as part of the interface for Xerox Star, and reading further it seems that the icon actually represent a list. That is a list of three items, and clicking the list icon expands the list. Seeing it as a list (rather than a hamburger) makes better sense from design perspective.

Some sites have taken this into account and the LA Times website use four lines rather than three and they include the word Sections. They also actually have a horizontal menu of important sections rather than just use a icon:


smaller screens require icons

As more and more people use smaller screen it is necessary to maximize the limited screen space by making use of icons and only time will tell if the trend to use the hamburger icon button as a menu link will continue. There is a good chance that it soon will join other icons like to magnifying glass and the shopping trolley to represent website features without having to use text. My concern is that it does assume that your site visitor knows exactly what it means and what will happen if the click or touch the icon.

Microsoft menu with hamburger icon

WP Tavern website analysis

Designers put a lot of thought into their websites and one way of learning from their hard work is to analyse their public website to see what elements they include in the design.

Today I want to take a look at the WordPress blogging site WP Tavern.

WP Tavern has an interesting history. The about page of the site says that the domain was bought by Jeff Chandler in 2008 and the blog was launched, but in 2011 Jeff Chandler announced that a new owner had purchased the site. In 2013 it was revealed that the new owner was Matt Mullenweg (of WordPress and Automattic fame). The current site is now run by his investment company Audrey Captital

So the site has strong links to WordPress and the WordPress community and it seems like an interesting site to deconstruct.

WordPress theme

According to the theme used by WP Tavern is a child theme of the popular theme Stargazer available on the ThemeHybrid website and designed by Justin Tadlock.

The theme has a number of plugins installed:
  • Swiftype Search ~ A fully customizable search
  • WP Polls ~ An AJAX polling system
  • Jetpack ~ From Automattic
  • Author Avatars ~ Display lists of user avatars
  • Epoch ~ 100% realtime chat and commenting
  • Better Author Bio ~ A adds an author bio in every post automatically
  • Tw Recent Posts Widget ~ Show recent posts from selected category
  • Better Extended Live Archive ~ Create a clean and structured archive page
  • Crowd Control ~ Allow your users to flagging offensive comments
  • Powerpress ~ Podcasting plugin for WordPress

single post layout

A single post on the WP Tavern website has a full menu with seven items and a search baron he right. When viewed on smaller screens the main menu folds away and is replaced by a hamburger menu and includes the words Secondary menu (although I’m not sure why).


The font used for the header <h1> tag is Droid Serif and the font family is: ‘Droid Serif’, ‘Lora’, ‘Georgia’, serif; The h1 to h6 tags all use the same font.

The main body text font is Open Sans and the font family is: ‘Open Sans’, Arial, sans-serif;


WordPress Tavern post header

The page header on a post consists of:

  • The main menu
  • The WP Tavern logo with the alt text WordPress Tavern
  • A breadcrumb consisting of:
    • a home icon > the category > the post title
  • The post title
  • The author’s name, date, and number of comments
  • Each post has a right sidebar

page meta

Page meta includes the author name, the posted date, and the post category and tags.

WordPress WP Tavern - Post Meta

Each post includes the author’s full name with a small person icon and a link that goes to the persons author bio. This is followed by a small calendar icon and the full date. Hovering over the date shows the day and the date as well as the time that the post was published. This is followed by a speech bubble icon with the numerical number of comments. These elements include a link to the comments which are at the bottom of the page. If there are no comments then the number 0 is displayed.

post format

WordPress WP Tavern - Post image and text

Each post includes a featured image situated above the post text. Links in the text are in blue underlined with a grey bar. The grey underline turns to red/orange when when hovered over with the cursor.


At the end of the post text is a box containing the author’s details:

WordPress WP Tavern - Post author

Hovering over the author’s image show more details about the author from Gravatar and this is displayed using hovercards. The box includes the authors name preceded by “Who is”. There is a description of who the author is. This is followed by links to “View all posts by”. As well as links to their other accounts: Their blog, twitter, Facebook, and Google+.


After the author bio the page includes and option to Share this and to Like this page. You can share the page via Email, Facebook, Twitter, Google, Pocket, and Reddit. The Like this button has a link to

This is followed by a related post section showing three posts (with images).

This is followed by the categories and tags. The categories line has a folder icon and the word Posted in. While the tag line has a ticket icon and the words Tagged. These link to all the posts in the relevant tag or category.

These elements are followed by the comments. and a link to the next post and to the previous post.

WP Tavern summary

In summary, the structure of a post on the WP Tavern website (as at 2 Feb 2015) is as follows:

  • menu
  • logo
  • breadcrumb
  • post title
  • author – date – number of comments
  • featured image
  • post text
  • author bio
  • share this
  • like this
  • related posts
  • categories
  • tags
  • comments
  • previous post link
  • next post link