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.
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;
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 includes the author name, the posted date, and the post category and tags.
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.
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:
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 http://widgets.wp.com/likes/
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:
- post title
- author – date – number of comments
- featured image
- post text
- author bio
- share this
- like this
- related posts
- previous post link
- next post link