Six Website Page Layout Tips you Absolutely need to Consider!

Posted by Chuck Bankoff On July - 11 - 2011

In the last few years Search Engine Marketing and Social Media have stolen the spotlight away from some basic Internet marketing principles. That is; the user experience and the fundamental way that website pages are laid out and organized for your visitors (human beings…not search engines). After all, what visitors do once they get to your website is purely the result of what they see on the site.

Here is where I would normally turn the conversation towards content. However there is something even more fundamental I want to address; Usability and Visual Appeal…

Your top banner and navigation layout are major considerations because they will generally be used consistently throughout the site. However the individual page layouts (what is unique on each page) is what adds personality to the site.

  • Think magazine…not flyer: Actually think somewhere in between. Print layout is not the same as web layout, but the basic rules of design apply. Flyers typically feature oversized fonts centered down the middle of the page. Magazines are typically more “artsy”. An effective layout combines the simplicity and directness of a flyer with the flair and interest of a magazine. Professional touches might include wrap-around text, multiple columns and strategic (but limited) attention getting devices. Add flair to your layout…not distractions.
  • Spacing considerations: Unless you are publishing a term paper online you will probably not want to indent each paragraph. Instead you might consider separating each paragraph with a double space. This technique is cleaner, easier to read, separates individual points into manageable blocks and is certainly more contemporary. Here is an example of a Huntington Beach Personal Injury Lawyers site where we spaced each paragraph in blocks, and actually have each line at about 1.5 spaces for easer reading.
  • Text wrapping: Wrapping text around images can have a very professional “magazine-like” effect on your page layout. A common mistake is allowing the text to butt directly against an image, creating an unintentionally crowded feel. Make sure that you use “cell padding” or another technique to create a small buffer around your images so that the text does not physically touch the images.
  • Scrolling v. White Space: Decide what is more important, an uncluttered design, or letting the visitor see everything without scrolling. Minimal scrolling is acceptable and preferable to jamming all your content into the top portion of your page. An even better solution is to aggressively edit your content. Visitors inherently breeze through websites with an unprecedented level of impatience. On the web…less is more. Here is an example of site we designed with minimal scrolling. Note there really isn’t a lot of text on this popular healthy lifestyle Edamame website. We allowed the graphics to do the talking.
  • Background images and textures: Unless you have an absolute compelling reason to do so, it is best not to use any sort of image background or textures behind the body text. This has a tendency to appear gimmicky and it obscures the readability of your text. It might also compromise the load time (the amount of time it takes for your web page to materialize).
  • Appropriate use of Flash: Animation has several advantages, but it also has a tendency to be over used. A little animation can go a long way towards distinguishing your brand or demonstrating a technique. However it can also be a distraction to your real message and cause unnecessary load time.

Try to avoid testing the patience of your visitors with gratuitous eye candy. Moderately animated logos and slogans in the banner of your Home page (or landing page) are great for branding, but once someone has seen it and has decided to venture deeper into your site, there is no point in repeating it endlessly. The repetitive movement would be akin to someone walking back and forth in front of you while you are trying to read. Here is an example of a glass and mirror company in Dallas where we rotated the flash through once, and let it settle on the frame with the written message. It doesn’t rotate any longer and never animates on internal pages.

An example where flash serves a purpose above and beyond branding might be a website that promotes women’s lipstick products where a flash sequence demonstrates the proper technique for applying the product. As a general rule, anything that says “Skip Intro” or “Enter Site” should probably not be there to begin with.

We can influence the search engines and make our cases through Social Media channels, but at the end of the day your own website is one of the few things that you actually have total control over…

Chuck Bankoff is Director of Web Services for WSIeWorks, a full service Digital marketing firm in Orange County California.

Subscribe to our
Subscribe to our