The homepage is often the first thing your readers will see when they visit your website, so you want to make a good impression. A good homepage welcomes new visitors to the site and encourages them to click around. Your homepage can be more blog-like, focusing mainly on recent content, or it can contain numerous different blocks of content like the sections of a magazine.
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? 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 personality or service focused, for example, the homepage should be more about you and what you offer than 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 featured area is often a good way to grab a user’s attention, by putting your best and most popular content right in front of them.
To educate visitors on your brand
Your personal brand can be the primary focus (as it is here on Joanne’s website), or 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, trending content and click through to what they find relevant and engaging. Keep in mind, 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 quicker 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 or She Bakes Here). On the other end of the spectrum, what we call magazine style, there are numerous blocks of non-chronological content, space for featured posts, maybe a video, subscription 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 (logo aligned left with the menu to the right, for example, or 2 columns of teaser posts with bold centered titles), rather focus on the overall blocks of content, namely, 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.
If you’ve blogged for any length of time, you’ve got a hearty archive of posts. And if your homepage just shows the recent ones, new visitors to your site might not realize there’s more. Sure they can browse your (hopefully well-thought out and organized) navigation, but giving them a little taste of what’s available on the homepage will get them clicking and browsing more.
Featured content is a section of manually-curated posts that you can pick and choose what to show from your entirely catalog of published posts.Featured content is not 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.
We utilize this functionality on homepages in a variety of ways, both static (non-moving) and dynamic (interactive or animated in someway). The later is more complex to implement, but will allow you to feature more content in the same amount of space.
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.
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.
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 utilize a Popular Posts plugin to track and display popular content during a specific time range (24 hours, 7 days, or 30 days) so the content is always changing with the ebbs and flows of your traffic.
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 taking the extra time to making a “Popular” category 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…
Remember: just because these are options doesn’t mean you need to include all of them. Each section should serve a purpose, not be there just because it can.
Below I’ve called out a few good examples of different style 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. In general, the more 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.