General Layout Assessment
In assessing a website please look over each of the following, and take notes on what works and doesn’t for each website you provide a link to.
- Use of color for the page layout
- Styling of text, both in the body content and the page titles
- The navigation type, its styling, and interactivity
- The header design type and styling
- The placement and size of the logo
- The use of images on the pages, especially the home page
- How the content on the pages is presented
In our portfolio and gallery we’ve include some of our designs, both old and new, to provide you a sense of visual diversity that is present in our layouts, and layout styling in general. Note that most websites utilize the same common elements; i.e. masthead/header at top, followed by the navigation, the body content, sidebars, and footer.
Layout Specifics and Considerations
While most layouts are structurally similar, the styling choices and the use and placement of content in the layout is what provides the necessary diversity. In current design practice all layouts will include:
Page Dimensions: Few web pages are sized at less than 940px in width. This ensures that the pages look good in the 1024×768 browser resolution. Responsive pages are often wider than this to better accommodate the larger resolutions, and mobile only pages will be designed to look good at 320px width.
Columnar dimensions and Padding: All modern layouts will utilize a columnar grid system wherein each column has a defined width, and defined inter-column margins (typically 20px). A grid system allows for column creation in a layout by assigning a CSS column class to the div layer.
Background Styling: A background will either be a solid color, a full-sized image (scrollable or fixed), or a tiled wallpaper.
Page Colors: Effective layouts will utilize a consistent color palette with a primary color choice and a few color harmonies or compliments. The correct colors are best defined by first sampling the logo to ensure effective integration, with consideration of the industry and target audience. If you don’t have a logo with color or existing colors defined, it can be helpful to identify if your web page would look best with a spring, summer, winter, or fall palette.
Typography: The typeface used for web will most often be a sans-serif font for the body content area for the sake of readability, though the heading titles are often serif fonts to provide visual differentiation. The best sans-serif font-families for web use are Arial, Tahoma, Verdana, and Trebuchet MS. For Serif fonts, the best font-families for web are Georgia, Palatino Linotype, and Times New Roman. In contemporary design the common practice is to use a dark grey color for text (not pure black), and to avoid the use of colored text in most cases. It is also a good practice not to over use bolding, italics, capitalization, or to mix font families beyond one type for headers, and one type for all other text. Google Fonts have become popular (before this were Cufon fonts) but I must caution on their use since even though a font may look great in print, for the web optimal readability is paramount.
Header (Top-bar): This is the top most section of a web page, and is where many businesses add their phone number, email address, and small social media icons. In some modern layouts the logo will also be included here.
Header (Logo Area): The section directly below the title-bar (when in use) is where the logo is placed. Typically this area provides for a left aligned “rectangular” logo, with a tagline/slogan adjacent to it at right. Larger logos (round and vertical) will typically need to be centered, or added to the top of a left sidebar.
Header (Masthead): Below the logo is the masthead area. In the past this would typically have been a singular image; in current design practice this will typically be a jQuery slideshow of some type.
Navigation: The main menu is commonly place directly above or below the masthead (horizontally aligned), vertically on a left-sidebar, or in modern layouts, at the top left as a mobile “hamburger” menu. The “top-level” of the typical horizontal menu will consist of 8 or less “short” menu link word/s to ensure that they fit well on one line. It is also important to ensure good visual contrast between words and a background for the sake of readability. If additional menu links are needed then a sub-menu (drop-down) is used.
Body Content: The content section is where the text of the page is displayed. The top 1/3 of the page is the “above-the-fold” area that is most often indexed by the search engines, so it is important to ensure that you not only have ample keyword rich text, but that there is a keyword rich description near the top that clearly states what the website is about, and the services available.
Sidebars: Sidebars are most often used on the interior pages and is a great place to provide additional content such as contact information and short contact forms, testimonials, additional navigation (known as sidebar menus), call-to-actions, resource information, and related.
Content Elements: The challenge for many people is defining how to best present their content. For service businesses a common practice is to use a three or four columnar layout wherein a representative image that reflects each service is added to a column, followed by the service title, a short description, and a link to that page. In current design there are many possible options for inclusion such as tabular systems, toggles/accordions, scrolling testimonials, embedded videos, image carousels and slideshows. The important thing is to ensure that the pages look complete by including enough content, while not overloading it.
Footer Section: The footer (like the title bar) is consistent on all pages, and is positioned below the body content area. The footer is most often presented in a three or four columnar format. This area is typically used to provide general company information, areas served, social media icons, links to key pages or resources, testimonials, thumbnail images of important visual content, etc.
Sub-Footer: The sub-footer is the very bottom bar of the page, also consistent on all pages. This is typically used for the copyright notice, designer information, business license, and privacy policy / terms of use link.
Content Best Practices
An important consideration when adding content to your pages is how and where to place it. For content to look good in a layout we typically recommend:
- When there is two or more columns ensure that the vertical length is very close between them; this is especially important with columns of only a few lines. If you are using a two column structure it is best if the first (left) column has the same amount or a bit more text than the second one (right) column. In most situations left-alignment is best for page headings and text copy.
- Most web pages will include full-width pages and sidebar pages. In most cases it is better to use a right sidebar than a left sidebar. The primary exception is when the left sidebar is being used for supplemental navigation; and it is best to stay consistent with the sidebar placement (all left aligned, or all right aligned).
- It is generally best to left-align text content. There are a few exceptions here, such as a caption below an image, or if you choose to have all of your page headings centered, but the important thing is consistency in use across all of the pages.
- Image position within the page copy typically looks best right-aligned, and no larger than 300px width unless the image is needed to span the entire width of the page.
- When adding images to the pages always ensure that there is enough space (margin or padding) between the image and adjacent text copy or the column itself. Typically 20px is the right amount. To style this appropriately for right alignment just add the image in a div layer as: <div style=”float:right; padding-left:20px”>image source</div> This will ensure that there is space to the left. You can also add space at top and bottom of the image if needed.
- Avoid the default image alignment properties in most cases. Responsive layouts don’t do well with this, which is why we use div layers, as noted above, or place the image within a column of appropriate size.
- Use bulleted lists when you are providing a short listing of content. This just makes the text easier to read and studies have shown that people often read lists more readily than just text on a page.
- Avoid text justification unless absolutely necessary. Justified text will change per the viewing resolutions, and on smaller devices it just looks awful.
- Avoid lots of short declarative sentences in the body copy. Sure, it’s fine for lists, but when used as an artifice to get people’s attention it conveys an impression of demanding one’s attention, similar to the over use of headings, bolded text, italic text, red text, and capitalized text.
- Avoid the over-use of images, but ensure that you have enough. People are visual so images are absolutely needed, but when too many images are added to a page it can lose its professional appeal. If lots of images are needed it is best to size them small and then link them to the larger representation.
- Use the appropriate page colors and typography for your target audience, while ensuring that the copy can be easily read by all by providing good contrast between the image color and its background. More on this on our typography and colors page.
- Spell and Grammar check all of your page copy. This is important not only to have your web pages perceived as professional, but it is known that the search engines will lower a site’s ranking that contains lots of mistakes.
