Creating The Ideal Website Layout

If your library website needs an update, the Build A Better Library Website Bootcamp is a great resource for each step of the process. The lessons are free to all New Jersey library employees and you can either take the course in full or focus on certain lessons that pertain to your needs.

The Build a Better Library Website Boot Camp is available through WebJunction’s course catalog for free to enrollees, including librarians and library workers, as well as museum and archive staff.

Over the past few months we’ve been outlining each lesson in the order that they’re offered in the bootcamp. We hope it provides a quick resource and you can then turn to the course for more information. Last time we covered creating website design through user journeys. After you’ve found the right design, you’ll want to know how to arrange your site, which is Lesson 5 of the bootcamp. Web layout is where user experience and visual design meets the prototyping and wireframes.

Basic Sections

The building blocks of your layout consist of five basic sections. These sections are universal to all webpages and can be arranged in whatever way works best for each page layout.

First there’s the header, which is the top part of every webpage. It stays consistent throughout the site, and it’s a good idea to put static elements here such as a search box, logo, social media links & site navigation. These things will not change from day to day and are important for the user to see first.

Next is the navigation, which is the tool used to move from page to page. As previously referenced, the navigation can live inside the header but it doesn’t always have to. It can be in the main body of the page or a sidebar. It doesn’t always have to include every page on your website, be strategic about what you present to the user so you’re pointing them in the right direction but not overwhelming them. The main body is the next basic section where the majority of your content will reside. The layout of the main body can vary, but usually includes all text, images and videos for users. Often, websites also include sidebars for extra content that’s not the primary focus. The sidebar can contain links to other content, call to action, or a search box.

And finally, the last piece of every website is the footer. The footer is the bottom section that appears on each page, much like the header. This section can be useful to display information that can crowd up the header such as contact info, privacy policy, terms of use and sitemap.

Page Layouts

Once you know what sections go into every webpage, then you can start to visualize each page’s layout. There are infinite options for page layouts, but the most commonly used are by column or grid. The simplest layout option is a single column. This is one column of content and no sidebar. It is the best layout for mobile compatibility because it’s slender and easy to scroll.

Next is a two-column layout. One column of content and a sidebar. The content can be split into multiple columns which can balance the page better. A three-column layout has two sidebars if one is too cluttered. The first sidebar could be for FAQ, and the second sidebar could be navigation. This separates the content out (if there is a lot of it) and can improve readability and ease of use. Lastly is the “content grid layout”, which is often referred to as the “Pinterest look.” These are blocks of related but individual content. It allows for less scrolling and enhanced readability. Examples of each page layout below:

Page Types

A page layout is the container for your content and can change from page to page, but keeping pages consistent will make your website easier to navigate. When you’re planning ahead for your website, break it down page by page and select the page type you’d like. Then, from there, you can decide which of the layouts we just covered you’ll use in that page type.

• A general content page is the jumping point for webpages. It’s the most common, and can take many shapes depending on the layout within. Basically, it’s a page with information sorted into columns and a mixture of images sprinkled throughout.
• A landing or marketing page serves the purpose of marketing a service or event. These types of pages contain more images, banners and call to action sections.
• A sub-site or portal page functions as a portal to other pages, typically connected under a theme. The user is able to understand how all of this content is related and explore the other pages in one place.
• A list page can be a great page type for libraries where they want to list out their patron resources or databases. These pages have few images and use icons and information instead to get the message across. And finally, your website’s homepage will always have a unique layout. You can mix and match page types and layouts throughout the rest of your website as you see fit, but your homepage will need to stand out and have the most pertinent information. This is the first stop most users will make when searching your library. Keep all necessary information like hours, contact information, and special timely announcements “above the fold” or at the very top so it’s the first thing a user sees when the page loads. Homepages can have a large static image above the fold (below the header), or a slider with multiple images and promotion, or a large search bar just below the header.

Each page type puts an emphasis on different aspects that you’d like to draw the user’s attention to, it just depends on what your library would like to feature.