When considering the layout styling for a website it’s important to take into account the intended purpose and target audience of the design, the resources available for the website (text, images, video, and links), your own design preferences, and any existing branding such as a logo or print marketing material. The layout choices that are made will be defined in part by these.

We recognize that is not always easy to know the look you are after, and we have found that the best way to get a good sense of what you do like is to browse the better websites in your industry — it won’t take long for you to begin to recognize what you like and don’t like about each. And even though most layouts have similar builder components, each website will incorporate its particular features, elements and styling to create something that will fit to the needs of the business for which it will be developed. The process of layout customization is merely a matter of recognizing how best to present the website content.

If there are websites you have seen which convey the look you are after please provide the web address to these, and let us know what you like and don’t like about each.

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 included 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: Some web pages’ size are less than 940px in width. This ensures that the pages look good in the 1024x768 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 where each column has a defined width and inter-column margins. 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 do not have a logo with color, it would be helpful to know 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 below the title is where the logo should be 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 usually have been a singular image; in current design practice will usually 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 “humburger” menu. The top-level of the usual horizontal menu should consist of 8 or less “short” menu link word/s to make sure that they will fit well on one line. It is also important to make sure that 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 will clearly describe what the website is about, and the services it offers.

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, etc.

Content Elements: The challenge for many people is defining the best way to 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 to include like tabular system, toggles, scrolling testimonials, etc. 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 usually used to give general company information, areas served, social media icons, etc.

Sub-Footer: The sub-footer is located at the very bottom bar of the page and 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 are 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 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:
  image source
  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 using 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 preferred visual so images are absolutely required, 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.