The First Impression: Planning your Perfect Homepage
The homepage is often the first thing your readers will see when they visit your website; it should make a good impression, introduce them to your brand and encourage them to click around.
A blog’s homepage can be more traditional and blog-like, focusing mainly on recent content, or it can be more modular, with numerous different blocks of categorical content not unlike the sections of a magazine (we often call this style of blog ‘magazine-style’).
Deciding what exactly you want on your homepage is a big decision, as it determines the direction of the site design as well as the bulk of the cost. Thus, knowing what you want before getting in touch will allow us to better anticipate your needs and quote your project accordingly.
As a blog, your homepage is going to be vastly different from say, a restaurant or ecommerce site. Blog content is ever changing, and you want the homepage to reflect the width and breadth of what your site has to offer.
First, ask yourself what is your primary goal? Is it more pageviews, increased email subscriptions, or promoting your personal brand?
With that goal in mind, it’ll be more easy to determine what the biggest focus of your homepage should be. Is it recent content? Your sign up form? You? If you want your site to be about you and your personal brand, for example, the homepage should be more about you and what you offer rather than heavily emphasized blog content.
The main purpose of a homepage (according to InboundMarketing) is threefold:
To attract and captivate visitors
This is achieved through a professional looking design with cohesive branding, eye-catching imagery and plenty of white space. A large image-based featured area is often a good way to grab a user’s attention, by putting your best and most popular content front and center.
To educate visitors on your brand
Your personal brand can be the primary focus, or it can be secondary with a smaller about/bio blurb in the sidebar or footer. The prominence depends on how much you are branding yourself as a personality and how much you want that to be a focal point of your website.
To encourage readers to visit other pages on your website
This is where the bulk of the content on the homepage comes in. By offering your readers choices, they can view new content, categorical content, featured content, and trending content and click through to what they find relevant and engaging.
Keep in mind, however, that there is such thing as too much choice: a site with dozens of different sections and hundreds of clickable images might be overwhelming and actually result in fewer clicks than a more focused approach with fewer, more relevant choices (not to mention a faster load time).
What’s in a Homepage?
A homepage is made up of a combination of different types of content, what we’ll call content blocks. In its simplest form, the homepage is just your most recent posts (see A Beautiful Plate, Salt & Baker or She Bakes Here). On the other end of the spectrum, a homepage can have numerous blocks of non-chronological content, space for featured posts, maybe a video, subscription call to action forms, and more. A magazine-style homepage often differs from the interior/post pages of a site in that it has full width content and no sidebar, or partially full-width content and a shorter sidebar (see Downshiftology or Primavera Kitchen).
In general, most of the blog sites we do fall somewhere in between these two examples, focusing mainly on recent content but with additions like a featured post section or a few category-based sections to highlight some older/seasonal content as well.
When you are thinking about what you want on the homepage, often times sketching up a wireframe is the most effective way to visualize exactly what you want on your homepage. Don’t overthink the specific design details like fonts or colors, rather focus on the overall structure: what KIND of content do you want to feature and WHERE.
Regular visitors to your site are probably coming back for one reason: to see what is new. Not everyone wants to subscribe to a blog via email/rss/social/etc, and instead might have your site bookmarked and check back when they remember. Loyal visitors like this are great, and we want to encourage them to keep coming back by making it easy to see what’s new.
For this reason we always recommend showcasing a few of your most recent posts prominently on the homepage, with either pagination to scroll farther back or a ‘blog’ page with all recent posts listed chronologically.
If you’ve blogged for any length of time, you’ve likely got a hearty archive of posts. And if your homepage just shows the recent ones, new visitors to your site might not realize the extent of what you offer. Sure they can browse your (hopefully well thought-out and organized) navigation or your recipe index, but giving them a little taste of what’s available on the homepage will get them clicking and browsing more.
Featured content sections are blocks of manually-curated posts that you can pick and choose what to show from your entirely catalog of published posts. Featured content doesn’t have to be tied to a specific category. Maybe it’s close to the 4th of July, and you want to showcase red, white and blue food. Or perhaps you want a section for your own personal all-time favorite recipes.
Featured sections are most often at the very top of the homepage, however we can also position them below your recent posts, in a sidebar, or even in the footer of the site. Again, it just depends what you want to be the main focus and what you want to be secondary to that.
We can display featured content on homepages in a variety of ways, both static (non-moving) and dynamic (interactive or animated in someway).
Static featured areas are the simplest. Whether it is a single large featured post or a set of 2, 3 or 4 posts above the fold, this is an easy and efficient way to feature older posts in a way that gives you full control over what posts you want to highlight at any given time.
A slideshow gives you the visual impact of a single large image, but with the flexibility to have multiple posts in that same space. The post title can appear on top of the image, either persistently or just on hover (when you put your mouse over the image the title appears), and each image links through to the post page. Slideshows can autoplay, or include a navigation to allow users to click through the slides at their own speed.
A carousel will slide through a series of smaller images. It allows you to feature more different posts in the same amount of space.
A tabbed featured area allows you to essentially have 2-4 static featured areas within the same space, defined specifically with a tab title. Users can click each tab to view the posts you’ve selected. Maybe you want to showcase Recent, Popular, and Featured posts. Or you could choose your tabs by category, changing out categories with the seasons (Grilling, No-Bake, and Salads for the summertime, for example, and Soups, Cookies, and Slow Cooker recipes in the winter). Each tab would show a set number of posts from the chosen category.
Unlike featured content which is manual, categorical content ties into your category structure. So if you happen to have a 4th of July category, it’s very easy to show a section of just these posts on your homepage, and it will automatically pull and display posts from whatever category you set, as well as a small ‘more’ link to view more posts in that category. Category blocks can be displayed both on your homepage as well as in the sidebar, and are very flexible and easy to manage.
It’s popular to display the most popular content, as determined by your readers! People like to see what other people like, and so displaying a section with popular posts or reader favorites is a great way to highlight older content. We can either set this up to be manual, so you can select exactly which posts you want to display, or utilize a Popular Posts plugin to track and display popular content automatically.
Note: the automatic popular functionality is often server-intensive since it tracks post views itself. If you’re looking for the fastest, lightest-weight site possible, consider the manual option instead.
It’s your site, so you should let people know who you are! We often include a bio block in a site sidebar with a small photo and brief bio with a link to your about page. If you want your personality to be more of a focus, we can turn this into a larger area on the homepage too. For bloggers trying to build a personal brand, letting readers get to know you and feel more connected to you as a person will help build reader loyalty.
A section like this is often built around the photography, so if you are able to schedule a photo session with a professional photographer to get some really eye-catching images, then I’ll be able to design the block around those images.
Call to Action
If you want to encourage subscriptions to your newsletter, increase your Instagram following, promote a cookbook, or sell a product, we can design an eye-catching section encouraging your readers to take a specific action.
We recommend only having one prominent call to action on a homepage so as not to divide your readers attention. So pick what is the most important to you and promote that.
Sidebar vs No Sidebar
There’s a recent trend in homepages towards full width content and no sidebar. This allows for more space for wider content and larger, more eye-catching images (see The Toasted Pine Nut, Downshiftology, and I Heart Umami).
Your individual post pages will still have a standard sidebar, it’s just the homepage that will expand to fill the full content width.
What about ad revenue? You may see some reduction in ad revenue by removing the sidebar on the homepage, however I’d bet you’ll barely notice. Your most valuable pages are going to be your internal post pages (and those will still have a sidebar); additionally the majority of your traffic is likely mobile, where sidebars are repositioned to the bottom of the page anyway. If you’re worried, consult with your ad network before deciding to ditch the sidebar.
Below I’ve highlighted out a few good examples of different homepages, and included examples of what a wireframe for that site might look like. In terms of cost, the first is the most complex and thus the most expensive, while the last is the simplest and least expensive to implement. In general, the more modular blocks and non-chronological content you want to include, the more costly the site will be to implement.
Case Study: Primavera Kitchen
Primavera Kitchen is what we consider a true, magazine style site. It’s much more than just recent content, and barely looks like a blog at all. It has a lot of sections with different kinds of content, from featured to recent to categories, but it doesn’t feel like too much or too cluttered. The different content formats break up the numerous images and offer users clean, concise choices. A short sidebar space appears just alongside the recent posts, and the interior post pages have a longer sidebar space for additional ads and other content.
Case Study: The Chunky Chef
The Chunky Chef represents the bulk of the blogs we create nowadays: it’s primarily recent content in the form of teaser posts (so it’s very easy to quickly scan and see what’s new), but that teaser content is enhanced by the addition of a featured carousel and smaller, categorical content below to bring some older, more seasonal posts to the forefront.
Case Study: A Beautiful Plate
A Beautiful Plate is simple, without any featured or categorical content in the main body area. It’s just recent content, highlighting the latest and greatest, but it is no less engaging than the others. The first post is emphasized with a full-width display that can be manually controlled using the ‘more’ tag within the post (the point where this tag is inserted is where the post splits and the ‘continue reading’ button appears on the homepage. The teaser posts below feature large vertical thumbnails and short excerpts.