If you’re looking to start a new website, or do a redevelopment of an existing site there are a few things that you need to keep in mind for your site to be a successful. First and foremost, ensure that the web design layout is carefully considered both in its visual aspects and content inclusions.
Just know that the typical user of today expects quality from all sites, and accordingly most template builders and do-it-yourself layouts won’t meet the expectations of most internet users.
The Design needs to be easy on the eyes
All too often I come across a website that uses graphics in a way that visually assaults. Flashing banners and lights, dark layouts with rainbow colors, colors that are too bright, colors that don’t compliment each other, and the over use of graphics, most which can be easily converted to HTML. Of course it is important to get a visitor’s attention, but the visual elements of a site need to convey an impression of harmony, balance, and professionalism. The use of Flash and Java can also be impediments since they can decrease page load time, are often on the screen far too long (most visitors have a short attention span), require the user to have the plugin, and are typically non-indexable elements, so not SEO friendly. If you do use Flash, be sure that it is only as an accent, such as a simple accent to a graphical header, or as a small slideshow inclusion.
The Layout of the pages need order
The layout itself will have a big influence on how your site is perceived. A good layout will convey a sense of structure and an orderly feel. In this regard most contemporary websites will include a title bar, header, graphic/slideshow, navigation system, body section (with sidebar for interior pages), footer, and sub-footer. The width of the layout is designed at approx. 1000px to avoid the need of horizontal scrolling on the 1024×768 resolution monitor, and the content area of the page utilizes a grid system to provide consistent padding/margin between columnar layout objects.
While one might choose to deviate from this common layout format, each of the inclusions noted above serve a purpose:
- The title bar is typically where a business phone number and email are applied. In some cases small social media icons and/or a slogan/tag-line is added here.
- The header is where the logo is typically added, often with a slogan and social media icons.
- The header is typically followed by a full-width graphic or image slideshow. This is a visual element intended to engage the viewer and to convey, in part, what the website is about. In some cases an image or slideshow is provided adjacent to a block of text (instead of using a full-width image/slideshow), typically at a 50/50 percentage ratio of the page width.
- The navigation system, being below the header section, is easily found and more likely to be indexed by the search engines than if placed father down the page.
- The body content is featured next since you want your text easily found, and indexed. Remember that search engines are more likely to index content that is higher on the page (known as “above the fold”).
- The footer follows this, which allows for additional content such as company information, links, testimonials, Twitter tweets, thumbnail images, etc.
- And then finally we have the sub-footer, which is where we place the copyright notice, designer info, business license, etc.
The Home text copy needs to be easily read, understood, and representative
Far too many sites I’ve visited have either way too little text on their home page, or a large block of text with few visual breaks. The better layouts of today utilize a magazine type of approach, meaning that content blocks are applied in a columnar format, with topic headings, photo inclusions, read more links, etc. The important thing here is to differentiate content some.
Of course you want to include enough text for SEO indexing and to get your message across, and this can be easily provided for by using accordion toggle and tabular systems which only reveals content upon user interaction. The simply act of breaking up content into columns will encourage the visitor to both read and scan your text copy more readily.
It is important that Navigation is both representative and works
When someone clicks a link on your site it needs to be have the content that they expected. There are few things more annoying that clicking upon a navigation menu link and the page you are redirected to has little or no relevance to what the link indicated. Another concern of many sites are the broken links to pages, different links that take one to the same page, and menus that don’t work properly either as a result of out-dated JavaScript or script conflicts, the use of Flash, or a consequence of an animated slideshow that overlaps the navigation system that has a higher stacking order (fixed through Z-index).
In each of these cases the failed navigation system will be an irritant to the site visitor, and will convey an impression of nonprofessional. With links within the page copy it is best to use a standard blue color and to have these underlined since most people are familiar with these; it is also a good idea to have the underline link disappear upon link selection to let your visitors know that they have visited this link. If you do link to other websites always be sure to utilize the target=”_blank” tag in the hyperlink. This will ensure that while one visits another web site they will simply open a new browser window and remain on your website. And finally, avoid design elements that look like buttons but aren’t.
Pages need to be engaging and easily read
In line with what I noted above for the home page, it is a good idea to use a similar format for the interior pages as the home page. By providing layout consistency, related visual graphics, and utilizing toggles and tabs, a simple page will become one that is fun and easy to read. The use of sidebars is also a great way to provide additional content such as contact information, calls to action, testimonials, and links. Note that on most websites the sidebar (typically positioned on the right) is only on the interior pages, and the header slideshow is removed on the interior pages.
If the header is simply graphical then it is commonly carried through all the pages (often with a different image for each page) though it will not be as tall. For example a graphic used on the home page may be 350px in height, and on the interior pages it would be approx. 100px in height.
Use consistent formatting
Be consistent in the formatting of your pages, the colors used, how content is positioned, the text styling, etc. As I noted above, the design needs to be easy on eyes, so the use of colors is important. Engaging colors work well together, and by providing consistency (same background color, same title bar and footer color, etc) the pages are provided visual order, and shown to be connected. I’ve gone to sites where I really couldn’t tell if I was on the same site from page to page since the colors and layout used varied so much. Ah, but I have seen the occasional exception. The site that provides consistency across all design elements yet employs a different colored background for each page with a different heading and body text color, often based upon a navigation menu color.
And most importantly, never choose a text color that doesn’t provide effective contrast. If your text is not easily read you will lose visitors!
It is also very important to use consistent formatting for all typographical elements. Either use all of one font-family, or use one font-family for headings, and one font-family for page copy. Page heading sizes need to be consistent across the pages (all H1 for primary page title, all H2 for secondary title, etc); keep the text color the same in most all cases (avoid adding red text and all CAPS since this is seen as shouting) and use italics, bold, and underlines only when really needed. I have seen many pages that fail in this regard since the website builder wanted to “get their attention”.
Text copy needs to be presented in a friendly way
Studies have shown that people respond to conversational speech that is easy to understand and pleasant to read. The important thing is to be precise. It is annoying to read a bunch of text and have no idea what the business is trying to sell, describe, or convey. When it comes to text, the rule of thumb is to eliminate anything unnecessary. In short, the copy of your pages should be presented in a way similar to what the newspaper provides — the Inverted Pyramid. The idea here to convey the most important information at the top (the leader or summary of what is being conveyed), and then provide the related information and supporting details farther down the article for those who want to know more. Being that we are creating a web page, not a new print article, then we would simply have a “read more” link to provide more content for those who want to know more. In addition, always use page headings to differentiate content blocks, and use bulleted and number lists where appropriate since the eye will naturally gravitate to these. Once all is in place always be sure to check the spelling and grammar of your pages.
On a final note, don’t make unsubstantiated claims. I personally find it irritating when I visit a site (often very lackluster) that tells me how they are the BEST! Unless you have evidence to support you are the best then this will come off disingenuous. Sure, you can say “we strive to be the best at …”, or if you do have awards, then sure, you can note “we were voted as the best by …”. Anything else, well, you decide.
