For many sites, the blog and other resource pages are the main sources for organic visibility. They drive new users to the site by satisfying their informational needs.

The value, provided to users this way often gets returned once they fall in love with the site and become its loyal visitors. Better yet, when they become consumers and advocates of the brand and its products.

But in order to make the most out of the blog, there is some groundwork you should do in getting the page layout just right to enhance the user experience.

Here are 10 tips on nailing the page layout, navigation, and author mentions on your site to maximize the readability of your blog.

Part I. Make the most out of the Page Layout

1. Take advantage of grid systems

One of the easiest places to start achieving a clean and organized design is by utilizing a grid system — a technique that’s been used widely throughout print layouts in newspapers and magazines.

A grid is a consistent system for placing objects. It works on two levels:

• at the unit level of cells (e.g. 20×20 pixels) and
• at the column level (e.g. 4 columns).

To make the most out of implementing such as system, ensure that you have:

• Enabled plenty of white space on the page
• Reduced clutter
• Aligned the grid style to the device the majority of your visitors use.

Since the vast majority of users are using monitors that are 1200px — 1300px wide (laptop size), your blog’s grid width should range from 900px — 1100px, with 1024px being the ideal.

2. Use large images as covers for blog posts

One of the current trends across many blogs is incorporating large, non-stocky hero images for each blog card and inner blog post.

While a large featured image may seem large, so much so that it pushes down the content, it acts as a compelling element to help connect the user to the article before reading anything beyond the title or author.

Best practice tips include:

• Making sure the image is topic-relevant and intrigues the reader
• Making sure the image is optimized in terms of size and dimensions
• Enabling site-wise consistency

The size of the image can be limited to the grid or can be full-length across the page.

3. Make social sharing accessible

You have written an amazing, curiosity-provoking piece of content that users love. They reach out for the social sharing buttons but they don’t work.

This happens more often than you can imagine, especially for company sites and small blogs where the web-dev team consists of one person. Updates get pushed, mistakes happen, at some point, a tiny bug can result in the social sharing buttons not being social at all.

So, my advice is to make sure all buttons work as expected, and are leading users where intended. Allow users to easily share blog articles.

If the blog is read by users on mobile devices, the best place for the social sharing buttons is on the navigation pane at the top.

As messenger apps gain popularity, best to enable sharing on different apps, such as Facebook Messenger, Discord, or Slack.

Part II. Create a killer user experience through navigation

4. Simplify the main navigation

If there is one thing users hate is feeling lost. Worse yet, wanting to find something, but not being able to find a clear path to it. We all know how patient web surfers are, so best avoid them bouncing off your site.

Take a look at Square’s homepage — makes it nearly impossible for website visitors to get lost or confused when they’re navigating.

Here are a few ways to reduce clutter in the navigation:

• eliminate unnecessary menu options
• add a search bar
• put product/service features in a features tab rather than have an individual tab for each feature
• instead of having a “home” button, just use the website logo to link back to the home screen

5. Organize the blog‘s sections as a learning center

There is a high possibility that content in both sections of the site is various in nature are subject matter.

Many organizations have taken a move towards organizing this content from a content type standpoint (e.g. grouping videos with videos or blog posts with blog posts). However, this is not beneficial for the user experience, nor is it beneficial for SEO. Google seeks patterns, based on the content itself, not its type.

A learning center approach to layout and organization of content makes it more likely for users to spend more time on the site since the barrier of finding what they want has been decreased significantly. This will also likely result in an increase of the pages per session, too.

Best practices include:

• Incorporate filters, based on audience/ user, as well as a filter by topic
• Add a search bar
• Allow sorting mechanisms

6. Organize the blog posts as cards

With that many posts, how do you best use your website’s content to organize it so you can display the most at once without hitting visitors with information overload?

One of the most UX-friendly layouts to solve for this is card-based design.

This involves organizing blog posts as cards, featuring only snippets of important information for each card.

Keep the cards simple and easy to read through. Use different image and font sizes to represent the most to least important elements of the card.

For instance, it’s best to include:

• a featured image
• the blog’s title
• the author (preferably with their image)
• a small blog excerpt
• the post date
• the content category/topic

You can also add social sharing links, as well as a CTA button, such as ‘read more’.

On your articles listing page, arrange these cards in columns of 2 or 3 depending on your page layout arrangement. Ensure that you maximize how many are seen at once, whilst not cluttering the page.

Part III. Respect authors and honor their influence.

7. Highlight the authors of the content.

Provide short bios that appear at the bottom of articles, so your users are able to distinguish who’s written what on your blog.

Most author bios are between 50 and 100 words long.

Respect the fact that readers might like some authors more than others and would like to read what else they have to say. So, best to have individual author pages that showcase all the posts an individual author has written.

8. Keep bios professional, but endorse being social.

Include a good, professional photo of the author and keep the description professional as well. Include information about your credentials.

At the same time, it’s quite important to make sure that the bio represents a real person. While something quirky in the bio is not uncommon (e.g. mother of cats, lover of plants), if your site is professional, the author bio might not be the best place to focus on authors’ quirks.

So, best provide an opportunity for authors to include their social media handles. This not only confirms they are living and breathing beings but also allows a direct way for readers to engage with them, which could, in turn, make readers more interested in reading what else they have to say next time they guest-post on your site.

Trust me, both parties would be grateful you have done this.

9. Celebrate authors as professionals and promote their work.

We previously mentioned the benefits of re-organizing content as a method to improve the user experience. You can do this based on what the author has written, too.

Include a link in the bio to the author’s written blog posts, hosted on the website. When doing this, you are not only inter-linking the content on the site, but allowing the tracking of author popularity, based on incoming and outgoing traffic on their blogs.

It is vital to use only Nofollow links in the author bios, especially if they are linking to other sections of the webpage.

10. Use Schema markup for author bios.

Schema markup is code (semantic vocabulary), placed on the website, which helps search engines return more informative results for users. To read more about it, I suggest turning to Neil Patel’s blog post about it.

What is important in the context of page layout is that schema.org can be used to template and highlight information about a specific person based on a biographic sketch. As the creators of BioMarkUp template state:

The purpose is to creative machine-understandable and processable structured data for search engines to use for Linked Open Data and in knowledge graphs.

Potential tags include name, related URL, nationality, birth date, important roles related to creative and artistic works, and relationships with other persons and organizations.

Implementing these changes will likely lead to more conversions and traffic. At the least, it will surely lead to a better reader experience, which you can measure by a reduced bounce rate on the blog, as well as an increase in the average session duration.

Let me know what changes you observed after implementing one or all of these changes. For even more tips on page layout, I suggest reading Christine Austin’s awesome article on the topic.