Layout Styling

A page's width is generally known as the "wrapper". As resolutions increase so does the default page-viewing dimensions. In the past we designed for the 600x480 resolution, then it was 800x600, and currently it is approx. 900-1000px. Many contemporary layouts use the 960 grid system (defined layout specifications), which after applying 20px padding (space) to the left and right sides equals the 1000px width. Most contemporary layouts have the width defined precisely by pixels, Though some layouts are variable in width (percentage based), so they shrink or expand based upon the viewing resolution (more common in CMS layouts). The layout content portion can be center or left aligned, though almost all designers center align a layout to best balance the amount of unused space for those using large resolution monitors.

Background styling is mostly a matter of preference and depends a lot of the visual elements used in the layout. Tiled-wallpaper, or a plain color was used often in the past, typically with a border applied to the layout to set it off from the background. In contemporary layouts gradient wallpapers are used often, both as a background to frame the layout and for boxes and forms. Image/picture wallpapers are used by some designers, and are especially effective to create a theme for a web page. Graphical layouts that are sliced from a PSD are used to integrate a layout with the content portion of the page. This type of visual layout allows for more creative use of design and styling. And finally, drop-shadow is often used to set the layout content apart from the background (especially effective when the background color is the same color as the content area).

When designing a web page it is important to recognize how the use of color will influence one's emotional reaction to the pages. When color is applied correctly it engages the viewer and creates an inner sense of order, a sense of balance. When color is not harmonious, it is either boring and bland or chaotic and an irritant. In short, the human brain will reject what it can not organize, and color harmony provides both visual interest and a sense of order. There are three main perspectives about the use of color. The colors need to either be analogous, complementary, or defined by nature. It is also important to recognize that for each color there is a tonal value range, which separates colors into the broad classifications of spring, summer, fall, and winter. Read more about the effective use of color.

For the title-bar, traditionally most designers would include the company name and the contact phone number. In some cases JavaScript is used to provide the date and/or time. Current design trends are more in line to have no title bar, or a simple color or a graphical accent, but without the text.

There are many ways to approach the header/masthead design. Traditionally the header was used for a simple logo inclusion at the left or center, with company slogan/tag line. Another popular option is the collage header; this type of header uses representative images to provide visual interest, typically overlaid with the company logo, and slogan. In recent years the Flash header has become popular. Typically this type of header is used in a cycling slideshow format with company logo positioned on top of the animation with a slogan. Other Flash header options are ones that only loop once - this type of animation typically utilizes about one-third of the header space, the other portion is for the company logo (typically at left), slogan, a small amount of text, and a clickable button to "learn more". The most recent header style is the jQuery header. Much as with flash, there are a variety of quality animation options; and unlike flash, jQuery is SEO compatible, so this is our preference for most clients seeking animation. In most cases jQuery is used on headers for cycling images, and semi-translucent banners over images.

Navigation styles are varied, and while they need to look good in a design, it is absolutely important that they are SEO friendly. Horizontal navigation is one of the most common of types, and is typically placed below the header, though in some layouts it works better to place it above the header and below the title-bar. Navigation scripting options are plain text links, text links styled with CSS, graphical CSS links, JavaScript or DHTML (styled text or graphical), jQuery text or graphic, Flash text or graphic, and Image Mapped links. In many cases the horizontal navigation utilizes a "drop-down" with sub-menu items to categorically group the menu and allow for more menu links. Rollover buttons have also long been popular and if done with text on top of the image are SEO friendly. The other option is vertical navigation. When navigation is applied this way, left or right aligned in the body content of the page, it is typically used for websites which need additional navigation (no drop-down menu), wish to differentiate menu links categorically, or to bring attention to key pages. Vertical navigation can be enhanced with expandable menus upon click much like I have used in this section. Note that expandable links are often used for FAQ sections as well.

Traditionally the "home-page" body content would feature an introductory "welcome message" at the top-left with a representative image adjacent to it at the right, though for some designs these elements can be switched effectively. Below these inclusion it is often effective to include important key-word rich content in a 3 or 4 columnar format since it allows for content to be differentiated, and easily digestible. It is important to have enough content on the home page for SEO, but not so much so that the page looks "bogged down" or cluttered. The interior (linked to) pages in a design need to follow a consistent layout styling convention with that of the home page. In many cases the home page will have a prominent header design (possibly 300px tall), whereas the lesser pages will have a less prominent header (100px tall) that is consistent across all of the interior pages. Of course visual diversity is good in part, but the amount of padding between elements, where the page titles are placed, the size and font face of titles and body text, the color of hyperlinks, the border width on images, etc. need to be consistent or a web page will visually break down.

Of the many important content elements, the use of images in a design is one of the most important. The header is often the primary aspect of visual interest for a page, but it is generally a good idea to have one or two engaging images for each primary page. These can be simple graphical inclusions (icons are often used), buttons and/or banners, a Flash or jQuery slideshow, or eye-catching static images. People respond to visual imagery far more readily than they do text, so it is important to engage the eye first and foremost. In addition to informative and easily readable content, I suggest interactive page elements for they help to keep your visitors on your page. For some websites it might be a jukebox wherein the visitor selects a song, a blog or forum where one can comment, a visitor poll, an image or video gallery, or a game. Better yet, give your visitors a chance to win somethings each time they come, and they'll be sure to return again and again.

The footer has traditionally been used as the place for the business name and copyright notice, business license, privacy policy, and a terms of use or legal disclaimer links; in the past guest counters were popular, but less so now. For websites with SEO un-friendly navigation (Flash, some JavasSript and DHTML) many designers will include plain text links in this section as well. Current trends have been to use the footer in more of a "blog" list-type of way. Now footers will contain all types of infomation, including links to affiliates, testimonials, contact forms and company information, thumbnail images, and just about anything else one can think of. Note that my footer on this site utilizes a "toggle" screen to make it interactive.

The sub-footer is the section where some designers will include the company name and copyright, though others will leave it without content. As with the title-bar it is primarily just a framing element for the layout.