There is more to blog menu design than you might think. The first thing a visitor might notice when they land on your site is your logo, the first thing they might read is the landing page but the chances are that the first thing they are going to interact with is the menu.
What is a Menu for?
The structure and the personality of your blog are embodied in its menu. The right menu will make a big difference and it is essential that it is designed and organised appropriately. A menu that is easy to understand and operate has a significant positive impact on your results. One that is designed badly is going to do little more than confuse your visitor.
A menu is a navigation system. Navigation systems for blogs are really little more than lists of nested links. Pragmatically, a blog menu can be compared to the contents section at the front of a book … but with the ability to respond to the movements of a mouse.
A menu is a table of contents that can expand and contract according to context, potentially providing direct links to every page on your site.
Or is it?
There is much debate about the nature and the role of the menu, and its size and its complexity. Ultimately it is going to depend on what you are trying to achieve … and what you are trying to achieve it with.
The role of the menu for a 30-page blog is going to be very different from that for a 600-page blog.
When you look for help and advice about blog design on the internet, most of the bloggers providing answers are concentrating on the look rather than the feel. They tend to focus on the aesthetics … because that’s the easy bit.
The look is important but your blog menu design really depends on the nature of your blog.
What’s a Blog Menu for?
The structure and the personality of your blog are embodied in its menu. A blog menu should, therefore, provide your visitors with an intuitive means of navigating to ALL the content on your site, directly or indirectly. Your blog menu tells its own story, guiding the reader through the blog site in the same way that the headings in a blog post guide the reader through the content … telling the story of the blog post in bold letters.
Take as an example, https://www.dirtbikeplanet.com/ … a guide to beginner dirt bike enthusiasts. The site uses only five headers that lead the new dirt biker from the initial selection of kit and clothing, through preparation for the sport to tips associated with riding. The Riding Tips menu option is the only option that uses drop-down menus: there are two of them. The first links to posts about where to ride and the second links to “fun”. The right-hand menu option is a link to a Garage Manual sales page. There is also a menu in the footer that covers the Privacy Policy, the Terms and Conditions and Contact details.
This minimalist approach is possible because the subject neatly falls into:
- Introduction
- Development
- Execution
- Sales
and the headings broadly reflect this. Note that the individual posts are able to stand alone within their section, evidenced by the fact that there are few internal page links.
A cursory analysis of the menu and the contents will show that the relationships between the blog menu items and the blog posts are sometimes a little loose, but all in the interests of simplicity. I don’t believe that a complex drop-down menu structure would enhance the usability of the site. So, something to think about.
A little bit of up-front thinking on your blog menu design will make your writing life so much easier, and it will help make your blog more accessible to your readers. A properly designed blog menu will help define the scope and direction of your blog contents … and it will help you focus your mind.
If the nature of the blog is made simple for you, helping you to write better, it’s also going to be made simple for the reader.
Navigating a menu should not be confusing – little things can make a big difference.
The menu is probably not going to be the first thing that your visitors see when they land on your blog … but it may well be the second!
It’s certainly where they are going to look if they are inspired enough to look further.
The blog menu is the springboard into your site and your blog menu design will need to reflect this.
What is a Blog Menu?
A blog menu is really a means of presenting a collection of links to a reader. The presented blog menu should be concise, relevant and engaging.
The relationship between a blog and the blog menu is similar to the relationship between the contents of a library and a library catalogue. A library houses millions of books on floors of racks and shelves, all the books are unique and they all have their own unique reference number.
There are many alternative library referencing models – all reflecting slightly different readers’ needs – but they all support the same basic approach:
- author
- title
- subject
- date of publication
- ISBN
They are all represent simple approaches to cataloguing a pice of work, designed to provide for its easy retreival.
Then it becomes a little more complicated. The books are arranged into collections based on classes, categories, subject matter and so on. The cataloguing system means that a single book, occupying a single physical position in the library, can be included as an entry in multiple lists.
Your blog consists of a collection of stand-alone articles that may or may not be related to other articles on your site, and every article will have been assigned its own unique permalink. It’s a good idea not to modify any permalink unless it is absolutely necessary. They are linked to the site SEO … and just as important, altering a permalink will break any external links to that page.
In summary: permalinks are meant to be permanent … the clue’s in the name.
Why am I talking about permalinks in an article about blog menu design?
Well, it’s because the blog post permalink is the logical equivalent of the unique reference assigned to a book.
Since we are talking about permalinks …
What is a Permalink?
A permalink, a contraction of “permanent link” is a URL that is intended to remain unchanged. Hyperlinks based on unchanging permalinks are less likely to fail in the future.
If we are accepting that the permalink is supposed to be permanent, it would make little sense to impose any particular structure on its format that might prevent that. Let’s say you write an article called “7 face masks to try in 2020”. If you are including the year in the permalink and you then update the article for 2021, it will become “7 face masks to try in 2021”, but the permalink will remain in 2020 – unless you change it to 2021 and then it’s not a permalink.
Maybe it doesn’t matter to you and what you are trying to achieve, but it’s something to consider when thinking about defining your blog menu structure. You can change the blog menu and the blog menu design without any significant consequences, but changing the permalink will break any existing hyperlinks based on it!
It’s a good idea to make sure that you are happy with the format you chose for your permalinks before moving on. It may well influence your menu design and changing the format in the future is going to be a pain.
Within WordPress, the following options are available, I am assuming that similar options are available elsewhere.
Taking a Plain approach to the format returns a permalink that is nothing more than a reference number. It might be functional, and it would support the use of a creative blog menu design, but it adds very little value since the permalink by itself doesn’t provide any information, other than the website address. It’s pretty useless for SEO too.
The Day and Name option may be useful for a chronologically-based blog, like a diary. It’s not appropriate (though it can still be used) for articles that are likely to be updated in the future. If the article is updated and the date is changed to reflect the update, the SEO data associated with the old page will be lost. Any links, internal and external, will also be broken.
The impact of the Month and Name option is very much the same as the Day and Name option. Any updates that cause a change to the permalink will have a negative impact on the page SEO and any external, and internal links to the page.
The Numeric option provides each of your posts with a unique, sequential reference number under what is essentially an archive category.
The Post Name option, in my opinion, is the most useful. Since the permalink is derived from the site URL and the post slug, each permalink is unique and can reflect the actual title of the post. If the post is modernised or updated, the permalink is not affected – unless you chose to affect it. No external or internal links are broken, and all search engine metadata relating to the post is retained.
The Custom Structure allows you to format the permalink to reflect the blog menu structure. Whilst this appears useful on the surface, it really only works if the blog menu design is restricted to a single path for each article. The benefits of a flexible blog menu design disappear when that design logic is applied to the permalink.
Something to be aware of: if you use the %category% tag, and then associate your blog post with multiple categories, you are very likely to cause yourself some problems. If you are going to include the category in the permalink, it’s best to limit the post to that single category.
How does a blog menu help?
The blog menu helps visitors that land on your site as a result of a specific question to explore the rest of your site easily.
You can use drop-down lists and other menu magic to engage with your visitors, and engaging with visitors adds stickiness to the site.
Opinion regarding drop-down menus and lists is varied but generally, drop-down menus appear to be frowned upon. So if you are thinking about using a drop-down menu structure, remember to use it carefully. I will explain the principles around the design of the drop-down menu … because sometimes they just do the job.
The Principles of Blog Menu design
Before getting down to the design of your blog menu, you should think about the following:
- Your blog menu should be descriptive, letting visitors know that they are in the right place.
- Your blog menu design should be capable of standing alone, telling its story on every page.
- Your blog menu is a place to tell visitors and search engines what value they can expect to gain from the content.
You should also think about what you are trying to do with your virtual footfall.
There are people out there who are interested enough to pay you a visit. They can either have a quick look and then leave, or they can hang around. What they do is mainly up to you.
If your goal is advertising revenue, then your primary objective is to keep them hanging around, clicking through and browsing your content.
If your objective is to sell something then you need to guide them to and through your sales funnel.
For Advertising, the blog menu design should be broad and able to draw the browser’s attention to all content.
For Sales Generation, the blog menu design should be narrower and more focussed. It should lead your visitors to the appropriate entry point in the sales cycle.
There are four blogging models
- The traditional Blog Diary
- The “how-to” blog site
- The Marketing Funnel
- The Serial Development Blog (like this one)
and you should let the design of your blog menu be guided by which of the blog types you want your blog to be.
To be fair, the structure of your blog will work itself out in time, but that’s the time we’re trying to save. Reading about what you can do first will help you decide how best to do what you want to do. Follow?
Structuring your Blog
If your blog is a chronological report on a trip around Europe, you don’t need a menu, or maybe you just need a list. If you would like to separate the Spanish adventure from the trips around the canals of Birmingham, allowing your readers to navigate directly to the relevant posts, then you will need something more.
A properly structured blog menu allows you to guide your readers straight to the Spanish section or, if they are interested in the canals of Birmingham, to the British section. Once in the “British” section, they might see an “English” sub-section or a “British Towns and Cities” sub-section. Eventually, they will see Birmingham and the Birmingham sub-sections: “Eating out in Birmingham”, “Shopping in Birmingham” and “Navigating the Birmingham Canal System”.
The Birmingham articles should exist in only one location. It isn’t sensible to duplicate posts as it will cause problems when it comes to maintaining them and having duplicate pages and content doesn’t help your case with Google – see the post on Canonical URLs.
The blog menu allows you to list a single item under several categories, although whether it’s best practice to do this in the menu is open to debate. An alternative approach might be to minimise the menu options and then complete the navigation on the pages linked to the menus.
Birmingham is both a city in England and a city in Great Britain and could appear under both menu headings, if you had that many menu headings. It could also be listed separately under a “Cities with a canal system” menu item, for example. The point is that the post title and its permalink are not related to its position in the menu. You are free to organise your site to the best advantage of you and your visitors.
All pages should be accessible from the menu system, which includes the blog menu and the pages that are linked to, from the blog menu. Pages that are not accessible are called “orphan pages”. You do not want orphans.
The best blog menu allows visitors to navigate to any page using the menu system and associated top-level pages. It’s our job – when designing the blog menu – to make sure that the blog menu works efficiently and effectively.
Before you design your Blog Menu
Take some time to consider what you are trying to achieve. I thought designing and building a blog menu was going to be the easy bit of blogging … until I tried to build one.
Actually, that’s not stricktly true. My first couple of attemps were fairly straightforward.
You can see why in the diagram on the left. My first attempt was a few posts and a couple of pages.
This worked. I then added a series of “resources”. For me, a “resource” is a chunk of information that relates to the subject that essentially doesn’t change. In my world, therefore, resources are written as “pages” rather than “posts”. In the wider world, it’s generally accepted that static information is presented as a “page”, but the general advice on the use of “pages” is limited to About Us pages, Terms and Conditions and Privacy Policies.
I now have a blog that I can visualise, and I can build a blog menu that reflects the structure of the blog.
[su_note note_color=”#e0e7e9″ text_color=”#6c7a89″]
Don’t forget:
You are creating a blog menu to reflect your site, primarily for the benefit of your readers … but that same menu is also going to be visible to the web crawlers, so keep it simple.
[/su_note]
On the one hand, the potential complexity of your blog menu design increases with your page count. On the other hand, we’re trying to reduce the number of drop-downs. At the same time as we are performing this balancing act, we’re trying to make sure that we have not left any orphans out in the cold.
Designing your Blog Menu
Whatever blog menu structure you adopt, it should make your site easy for your readers to navigate.
Keep in mind that the usability of a blog menu is down to you and your design. It’s not something that is dependent on the abilities of the reader.
Creating a menu structure is a bit like solving a puzzle. The solution needs to be simple and it needs to be logical … and it needs to be able to carry the visitor quietly and peacefully, without confusion or stress, to their destination.
The blog menu structure doesn’t need to mirror the structure of the permalinks, but it can. If you use the category as part of your Custom Structure permalink naming convention, it sort of makes sense to show the categories in your top-level menu … assuming that you haven’t set yourself up with too many categories.
I find it best to use the Post Name option and then if the article falls into multiple categories, you can link to it from multiple menu points.
Now, let’s think about what a menu point is. It’s obvious that the “not very exciting Blog menu” below is an example of a string of menu points. I have implemented it with 5 drop-down menus – they’re the ones with the arrows – which on reflection, I don’t feel are particularly visitor friendly.
An alternative, which is what I have now adopted on this site, is to use the top-level menu to tell the story.
The visitor’s journey starts at one end, usually on the left, and it progresses towards the other end … and that wasn’t happening here!
I think it’s fair to say that there needs to be a Start Here page since this site is about helping new bloggers to begin their blogging journey. The Start Here page is your greeting, it’s function is to be welcoming so make it welcoming. It sets the scene for the rest of the visitor’s journey – and this is especially true for new visitors.
But …
… don’t you think that Start Here sounds a bit bland. I did. Here are some alternatives that I came up with:
- Blogging 101
- Blog Starter
- Start your Blog
- Beginnings (since the site name is Blogging Beginnings)
- Getting Started
- Beginning your Journey
- Get Blogging
You get the idea, make the Start Here page relevant. I think I am going to use Beginnings. It matches the site header and it sits quite well with beginner.beginner.beginner.beginner.beginner.beginner.beginner.beginner.blooger.me – a site that just spells it out.
If you want some ideas to get you going, have a look at these 7 elements of a great Start Here page. I haven’t used them all, but then this isn’t really about me.
And then there is the About Us page. I found this piece of wisdom on Quora in a piece about building corporate sites:
About Us or About is pretty standard and people who want to know more about you are scanning your web page looking for the word “About“. If it’s called “The Crew” they aren’t going to find it.
Wise words … the underlying sense of Start Here can be abstracted to any of the bullets above, without losing any of the meaning. This isn’t true for About. The recommendations here are to leave this particular menu item as it is – About or About Us.
If your visitor wants to evaluate the depth of your knowledge, your experience or your credibility – or maybe just wants to know what you look like, becaues sometimes, what you look like is important – the About page is the page they are going to head for.
The contents of an About Us page is going to vary depending on the nature of the blog and as always, there are no hard and fast rules. Here’s how to begin thinking about writing an About Us page. Once you have thought about it,have a go at writing it.
So, we now have the Start Here menu point completed, and we have done the About page. Now let’s think about the middle bits.
What should I include in the Menu?
A blog menu restricted to “Start Here”, “Posts” and “Resources” is a bit bland and conveys very little information about the nature of the blog. When bloggers use such menu items as the norm, it’s like they are assuming that the visitor already knows the context.
Such a menu is not very exciting and it tells no story!
Think back to the four bullets associated with dirtbikeplanet at the top of the page: introduction > development > execution > sales.
This is one approach. Now, think through your blog and your ideas. Do your articles follow a similar approach and can they fall into similar categories? Is there a natural progression of blog content that you could weave into your blog menu design? I can’t provide the answers here, every blog is different. I can, however, provide you with ideas.
The rest is up to you.
Blog Menu Design for Blogging Beginnings
In the case of a blog about starting a blog, like this one, there should be a starting point in the blog menu that sets the scene:
- What is blogging?
- How does blogging carve its niche in the world?
- Why should anyone want to blog?
- How can what I am writing about help someone starting out?
Not only should the blog menu starting point be setting the scene, it should also be setting the subject boundaries. This blog, for example, is aimed at the very early stage beginner, but it’s specifically aimed at the very early stage beginner who is interested in understanding the “why” as well as being shown the “how”.
This is one of the Blogging Beginnings differentiators and it should be reflected in the blog menu design as well as in the contents.
The menu design should then present the visitor with access to some background information, again pertinent to the needs of the beginner:
- What do I need to think about before I begin?
- What do I need to do before I begin?
- What tools and platforms do I need to begin with?
- What should I be expecting in the early days?
So … the foundations have been laid and the thinking and the planning have been completed. Now it’s time to start to lay the first blogging brick. We’ve moved on to building the site, exchanging the thinking for the doing! The menu design moves on to building the site:
- Setting up a blogging platform.
- Obtaining a domain name.
- Establishing a relationship with a blogging host, or service provider.
- Writing a blog post.
As soon as I started building the blog, and doing the research that goes with it, I began to ask myself all sorts of new questions. I have also noticed that a lot of my questions are not answered by the mainstream blogging “experts”. Some of them touch on the subjects but I am usually left wondering. When this happens, I make a note of the question.
Now I have piles of PostIt notes stuck to the walls around my desk!
These questions are not “absolute beginner” questions, they are the second-level questions that beginners ask once they get the hang of what they are doing. They all relate to the gotchas that reveal themselves once you get started. As it happens, I have spent a long time doing analysis, defining requirements and building systems … over the years, I have learned how to spot a “gotcha“.
The next menu option leads the way to the more detailed information, answering the specific questions that beginners are asking once they know what to ask.
- How do I set up an alternative physical address?
- What is a canonical URL?
- What is the implication of the General Data Protection Regulations?
- How do I write a Privacy Policy?
The questions that come up once the beginner has achieved the basics are primarily about improvements: getting the most out of developing and operating a blog.
Then there’s sales.
Blog Menu Design and Sales
Affiliate marketing principles are generally woven into the fabric of the blog articles. You will have developed your blog menu design to encourage new visitors to head towards your Start Here section. From here they can be guided to the relevant affiliate links, should that be the approach you are adopting.
Alternatively, if you have developed an info product, you will want to give it the prominence it deserves. I am assuming that any info product you are promoting on your site is going to be related to the content on the site, which is why I have positioned the sales menu item on the right-hand side. On the right-hand side, the menu item is positioned as the logical conclusion of the menu story – It doesn’t have to be called Sales.
What have I learned
There is no standard for a blog menu, your blog menu design depends on what you have and what you are trying to achieve.
A blog menu should be descriptive, it should tell a story and it should show visitors what value they can expect.
Drop-down menus are generally frowned upon because of their usability, but they do have their uses.
A blog menu is a dynamic table of contents providing access to every page on your site.
A blog menu should reflect the personality of the blog it represents.
There is more to blog menu design than at first you might think.
Take your time and think about the menu design.
A blog menu tells the story of your blog.
The blog menu adds value.
