If you have lunch with writers, you’ll come away feeling insecure about your writing and fearing misplaced apostrophes. If you have lunch with SEO experts you’ll want to do more with your SEO, and if you have lunch with a designer, you’ll want to put your site in maintenance mode and never look at it again!
There are many design principles for you to consider if you want to make the most of your blogging activity. But the good news is, you can change and adapt them whenever you want, starting right now.
Take it From the Top: Redesigning Your Blog Header
It’s the first thing people see when they land on any page of your blog. Just as you make a first impression when people meet you in person, your header is also the first impression people have of your blog. Ideally, you want people to look at it and immediately know what your site is about. It should build a connection with your reader by ‘telling a story,’ and that story will depend on the type of blog you have.
If it's a business blog, your story will probably be more on the serious side so your header should reflect that. But if it's a personal blog and your personality is fun and creative, then let your header show that.
Regardless of the type of blog you have, though, there are several things to consider when redesigning your header:
- Size – aim for a header image that isn't more than 250 pixels high. The header is important, but you don't want it so big that it's taking up valuable above-the-fold real estate. In fact, many modern blogs and websites are using smaller headers than that, some as small as 150 pixels or less. If a small header will work for your blog, then go for it, because a small header leaves more room for content and is mobile responsive.
- Image – if you're going to use any sort of picture in your header, it's really important that the quality of the image is the best possible. One of the quickest ways to ruin a great looking header is by using poor quality images in it.
- Text – decide what text you're going to include in your header. Make sure your site name is in the header. If you have a tagline that goes with your site, then put that in the header too. Just don’t get carried away with fonts. You want them to be readable, and use no more than two to avoid confusion.
- Visually appealing – we're all visual creatures so we're drawn to things that are attractive to us. Make sure your colours go together, that your fonts are clear, that the text is readable, and that the images convey the message you are trying to send. Remember, your header will set the tone for the rest of your site.
Keep in mind that you can always outsource this part of the blogging design process If you don't have enough time or experience to mess around with creating a header, then it would make more sense to let someone who knows what they're doing handle it.
Getting Around: Creating an Intuitive Navigation Structure
If you want to drive visitors away from your site, make your navigation confusing. That's all it takes.
We’ve all landed on a website only to be greeted by some weird navigation structure that not only doesn’t tell us what is available, but doesn’t less us return to the page we were on easily. Don’t do this to your readers, trust me when I say they'll thank you for it. Your navigation sets the pace for how visitors move through your site. And this is another important piece of your blog makeover puzzle. In fact, this element maybe even more important than your header design.
You want to keep it as simple as possible so that it's user-friendly and easy to understand. The worst thing is a busy navigation bar that leaves readers feeling confused and unsure of where to go. A confused reader doesn't end up doing anything but clicking away from your blog, never to return. With that in mind, here are some navigation tips you should know about:
- Make sure your header is linked to the homepage.
- Keep it consistent across every page of your blog – don’t move your navigation to another location or change the tabs from page to page.
- Properly name each tab on the navigation bar so people know exactly where they’ll go if they click on it.
- Keep it simple – in the case of the navigation bar, less is more. You don't want to give your readers too many options.
- Easy to find – your site visitors should be able to find what they're looking for within a few seconds of being on your site
Another thing to consider is whether you'll use a single-layer navigation bar or a drop-down one. The drop-down option may seem like a good idea because you can combine things into one tab and have them show up when someone hovers. For example, your main navigation tab ‘about' can drop down and give a visitor the option to ‘contact' you. However, if you can avoid a drop-down navigation bar, then don't use it. It’s far better to have all the important pages visible than to hide them below something else. Remember, simple is almost always better.
One last thing to keep in mind when setting up the navigation of your site: make sure that your readers always know where they are on your blog. Do this by making a ‘Home’ link in your navigation, or by using ‘breadcrumbs’ to give the reader a way to backtrack.
Once you have the navigation menu set up, ask someone to test it for you. Have them spend a few minutes on your blog to see if it's easy to navigate. You built it, so you may find that you simply don’t notice things that are out of place or not clear. Sometimes a fresh pair of eyes can see things you didn't.
The Simple Sidebar Offers More Options to Keep Readers Engaged
While sidebars aren't as important as navigation, they still take careful consideration and need to be set up in a way that will be easy for your readers to use. Done right, your sidebar can draw your reader deeper into your website. Done wrong, and they leave never to return.
A good rule of thumb is to keep your sidebar as simple as possible and clear of clutter. It should not be a virtual junk drawer! Don't add anything and everything to it just because there's space to do so. Just like mentioned above, if your sidebar is busy and confuses the reader, they'll more than likely end up leaving your site. A confused mind can't take action. And once you have someone on your site, you want them to take action!
Sidebars are an important part of your blog design and it's important that you take the time to make sure they are set up in a way that's appealing to your visitors. If done properly, your sidebar will encourage your readers/visitors to engage with you.
Getting in Front of Your Target Market: How to Integrate Social Media in Your Blog's Design
Social media is hot, hot, hot! It pretty much doesn't matter who you are or what business you’re in, you can't get away from the different social sites out there. That means you don't want to miss out on the opportunity to integrate it into your blog. And more than likely, you probably already have accounts set up and are active on them so it only makes sense you would ‘advertise' it to your blog visitors by adding the different icons to your blog.
Your blog will very likely have two types of social media buttons: Those that drive traffic to your various accounts, such as Twitter, Facebook, LinkedIn, and Pinterest, and those that enable readers to share the content they find on your site.
The first type – those that link directly to your social media pages – typically appear in the header, the footer, or somewhere in the sidebar. The second type generally appear at the top or bottom (or both) of each individual page or post. You can easily tell the difference because the first type will be just a button, while the second may have a counting feature that lets readers know how many times an article has been shared.
This part of your blog's design is a win/win situation.
Not only are you giving your readers the opportunity to connect with you on a more personal level through your social media channels. But, this is also a way for you to show those around you that you're an expert at what you do.
Adding social media buttons in your header or sidebar is as simple as making a clickable image out of a button. You can find hundreds of free buttons and icons available on the web, and some themes come with matching buttons for you to use. You could even hire a designer to create custom buttons for you.
Sharing buttons can be added via a plugin, and again, there are many to choose from. Some offer dozens of social icons to choose from, while some specialise in only Twitter or only Facebook.
There are a few things that are worth noting when it comes to social media engagement. First, make sure that you're actually interacting with people who take the time to connect with you on these different channels. Second, don't always be pushing promotional things down their throats – make sure you're sharing more of other content than promo type things. And lastly, don't make the mistake of being active, then inactive for a while, and then active again. Stay consistent!
More Than Just an Afterthought: The Power of Your Blog’s Footer
If you think the footer is obsolete and unimportant, you haven’t been paying attention to the trend towards larger footers. In fact, many blog owners and developers are looking at the footer as another place to further engage readers with additional navigation, video content, social media feeds, and more.
Besides being a new location for housing valuable resources, the footer also contains some of the more boring information on your site. Some of the more standard footer expectations include:
- Affiliate and earnings disclaimers. This legal stuff is a must-have if you promote products for a commission, or if you advise people about how to earn/save/spend money.
- Terms of service. If you have a membership site or sell things on your blog, a TOS page is important. It contains information about refunds, guarantees, and your cookie and privacy policies. Put a link to it in your footer.
- Sitemap. While not as important as it once was, your sitemap can help readers (and the search engines) find pages that aren’t readily available via your primary navigation.
- Login information. If your readers need to sign in for any reason, the footer is a good place to put a link or the form itself.
- Copyright notices. While not strictly necessary (you own the copyright for your work whether you declare it or not) some people like to put copyright information in the footer.
In addition, you can use your footer to get other important information out to your visitors, such as:
- Social media updates – real-time Twitter and Facebook feeds can let readers know where you’re most active and how to find out more about you.
- RSS feeds from other sites you own – Help drive traffic to your other web properties by linking to the articles you post there. An RSS feed automatically updates itself, so this is an easy way to create dynamic content.
- Awards and recognition – Were you interviewed on NBC or featured in the Huffington Post? Add the logos (make sure you have permission first) to your footer for powerful social proof of your expertise.
- Top comments – Let readers know about active discussions going on with a top comments list in the footer.
- Most themes have “widgetized” footers, meaning whatever you end up putting in this section can always be changed later, so maybe a blog makeover is the perfect time to try something different.
As with anything else that has to do with the design of your blog – just because something works for one person doesn't mean it will work for someone else. You have to always be testing and tracking what you're doing, including the footer section of your blog.
With a good, robust theme and a little spit and polish, your blog's design won't let you down
Great post Sarah! I could have used this advice last years when I rolled out my Corporate Rookie website. The theme I initially selected had a dark background and white text. The font was very small and friends stated that the blog was very difficult to read and navigate on devices. I changed it all, incorporating much of what you said.
The blogger’s first blog will start out amateur looking because it’s an amateur blog. Old posts disappear into oblivion and nobody will notice them in a year.
But along the way important things are happening. The blog is accruing time to qualify for Adsense if the blogger chooses to go that route. Even without trying, the blog is possibly moving up some Google search engine page. The blogger is gaining expertise. Nobody can jump from “Go!” to a professional blog in one post!
Meanwhile, take one of Sarah’s suggestions at a time and implement them. Try your own ideas and see what happens. Later, you can look back at the beginning and see how far you’ve come.