Welcome to Wow Web Works Community Sign in | Join | Help
The Best Page Layout and Design for Content Websites

By Miles Galliford (c) 2007

I was chatting to a veteran print publisher who had been producing magazines for over thirty years.

He shook his head in despair, as he told me that every year he sees new magazines hit the newsstands with the publications' titles placed vertically on the magazine cover.

"Whenever I see this," he said, "I know it has been produced by a new publishing company that does not understand the industry. Anyone with any experience of periodical publishing knows that publications with vertical titles fail, or at least have to change quickly to survive. The market has taught us this lesson hundreds, if not thousands of times, but still people make the same mistake."

This message is just as relevant to website layout as it is to magazine design. The web has been around for long enough that rules and best practices have emerged from years of trial and error by thousands of website owners. You can either go with the flow and be grateful that you can learn from the experience of others, or you can swim against the tide and try to convince the market that you are right and they are wrong.

I would suggest that swimming downstream is far easier and will give you a much greater chance of success.

To understand which layouts work you only need to look at the industry gorillas. These are the online content publishers who have been around for years, and who have tested just about every layout combination. Good examples are some of the most read websites on the internet including:

    - BBC (Opens New Window)

    - The Financial Times (Opens New Window)

    - The Economist (Opens New Window)

    - The Wall Street Journal (Opens New Window)

You will quickly start to recognize elements of the page layouts which are common across all these sites. Just as with print newspapers and magazines, these are the layouts that have proven to sit most comfortably with the reader and with the way online users want to consume content.

The key design and layout elements which should remain constant are: Masthead across the top – the masthead is where the logo goes and usually the imagery that supports the subject matter on the website.

The left hand column should contain all the primary navigation, which should remain constant across the whole website. It should list all the main categories of the website, so users can find their way around from every page.

The right hand column on the homepage should provide navigation to individual pages in the site which you want to highlight. Or, it can be used for small applications, such as email newsletter sign-up, scrolling news headlines, links to the forum, etc. This column tends to disappear on the content pages to leave more space for the article and images.

Top menu bar – some sites have most of their navigation in the top menu bar which goes across the page under the masthead (take a look at www.guardian.co.uk or www.forbes.com as examples). I don't like this for two reasons. First, it restricts the number of menu links that you can have. Secondly, it usually means that the site has flash based drop down menus to enable them to accommodate more links. Flash menus are not user friendly. They force your reader to search for links to the content they are looking for. Don't make your user work for their answers. Also, search engines find it harder to index sites with flash menus.

Bottom menu bar – This strip at the foot of every page tends to contain links to the site's terms and conditions, privacy statement, sitemap, etc. The central column contains the content. On the homepage, this can be a combination of an introduction to the website and teasers to articles. On the content pages, the articles and images sit in the central column.

Search top right on every page – this is the search box used to search the content of the website. This is a less rigid placement than it used to be, but you can't go wrong if you place it top right.

Time and date – usually placed on the right hand side under the masthead. This is optional, but does give readers the impression that the site is up-to-date.

Within this layout there is a great deal of flexibility to add your own personality and styles, particularly when you overlay your design on the basic page structure. However, at all times your number one goal should be constant; that is to make your website simple and intuitive, for every reader that visits. To achieve this learn from those sites that have a lot of experience.

Don't be the person that puts a vertical title on the front cover!

About The Author
Richard Hill is a director of E-CRM Solutions and has spent many years in senior direct and interactive marketing roles. E-CRM provides EBusiness, ECommerce and Emarketing and ECRM.
http://www.e-crm.co.uk/profile/message170807.html

   

    Copyright © 2007 Jayde Online, Inc.  All Rights Reserved.

    SiteProNews is a registered service mark of Jayde Online, Inc.

What is meant by Web Safe Colors?

Once, long ago, monitors could display only a restricted number of colors without dithering or other color discrepancies. The traditional solution to this problem was to use a restricted color palette known as the Netscape 216 colors, browser-safe colors or the web-safe colors. In hexadecimal form, the web-safe colors are composed of three pairs of identical hexadecimal digits selected from 00, 33, 66, 99, cc, and ff; for example, #000000 is black, and #cc0000 is red.

Time passed, as it so frequently does, and new hardware supported thousands or millions of colors. People grew tired of the old 216 colors. They wanted more earth tones, more variety. The web-smart colors are those 4096 colors composed of any three pairs of identical hexadeximal digits (0-9 and a-f), such as #dd1188.

The unsafe colors are the full set of 16,777,216 hexadecimal colors, featuring any color between #000000 and #ffffff, such as #5a832d.

Use this link to check out an excellent color wheel for choosing the best colors.

Permenant 301 Redirect

From webconf.com

301 Redirect

301 redirect is the most efficient and Search Engine Friendly method for webpage redirection. It's not that hard to implement and it should preserve your search engine rankings for that particular page. If you have to change file names or move pages around, it's the safest option. The code "301" is interpreted as "moved permanently".

You can Test your redirection with Search Engine Friendly Redirect Checker

Below are a Couple of methods to implement URL Redirection


IIS Redirect

  • In internet services manager, right click on the file or folder you wish to redirect
  • Select the radio titled "a redirection to a URL".
  • Enter the redirection page
  • Check "The exact url entered above" and the "A permanent redirection for this resource"
  • Click on 'Apply'

ColdFusion Redirect

<.cfheader statuscode="301" statustext="Moved permanently">
<.cfheader name="Location" value="http://www.new-url.com">


PHP Redirect

<?
Header( "HTTP/1.1 301 Moved Permanently" );
Header( "Location: http://www.new-url.com" );
?>


ASP Redirect

<%@ Language=VBScript %>
<%
Response.Status="301 Moved Permanently";
Response.AddHeader("Location","http://www.new-url.com/");
%>


ASP .NET Redirect

<script runat="server">
private void Page_Load(object sender, System.EventArgs e)
{
Response.Status = "301 Moved Permanently";
Response.AddHeader("Location","http://www.new-url.com");
}
</script>


JSP (Java) Redirect

<%
response.setStatus(301);
response.setHeader( "Location", "http://www.new-url.com/" );
response.setHeader( "Connection", "close" );
%>


CGI PERL Redirect

$q = new CGI;
print $q->redirect("http://www.new-url.com/");


Ruby on Rails Redirect

def old_action
headers["Status"] = "301 Moved Permanently"
redirect_to "http://www.new-url.com/"
end


Redirect Old domain to New domain (htaccess redirect)

Create a .htaccess file with the below code, it will ensure that all your directories and pages of your old domain will get correctly redirected to your new domain.
The .htaccess file needs to be placed in the root directory of your old website (i.e the same directory where your index file is placed)

Options +FollowSymLinks
RewriteEngine on
RewriteRule (.*) http://www.newdomain.com/$1 [R=301,L]

Please REPLACE www.newdomain.com in the above code with your actual domain name.

In addition to the redirect I would suggest that you contact every backlinking site to modify their backlink to point to your new website.

Note* This .htaccess method of redirection works ONLY on Linux servers having the Apache Mod-Rewrite moduled enabled.


Redirect to www (htaccess redirect)

Create a .htaccess file with the below code, it will ensure that all requests coming in to domain.com will get redirected to www.domain.com
The .htaccess file needs to be placed in the root directory of your old website (i.e the same directory where your index file is placed)

Options +FollowSymlinks
RewriteEngine on
rewritecond %{http_host} ^domain.com [nc]
rewriterule ^(.*)$ http://www.domain.com/$1 [r=301,nc]

Please REPLACE domain.com and www.newdomain.com with your actual domain name.

Note* This .htaccess method of redirection works ONLY on Linux servers having the Apache Mod-Rewrite moduled enabled.


How to Redirect HTML

Please refer to section titled 'How to Redirect with htaccess', if your site is hosted on a Linux Server and 'IIS Redirect', if your site is hosted on a Windows Server.

The Essential 2007 Code Optimization Tutorial for SEO

By James Kinsley (c) 2007

Do you want to get the traffic you deserve flooding into your website? Code optimization is an essential component of the search engine optimization process and if you aren’t technically minded then it can be difficult to get your head round. This guide is meant for beginners and more advanced webmasters alike.

A shallow knowledge of HTML coding is useful, however, it is not necessary. Optimizing your code can be done by simply opening your html document in a text editor and changing different parts as shown below. Follow these steps carefully and your code will
become 100% search engine optimized and ready for promotion and link-building campaigns.

The steps below assume you have chosen the keywords which you want to optimize the page code for. If you have not done that, go and do that now and return to this guide later.

HTML Code Optimization

The optimization of your HTML code for search engines is vital. It is the base of your SEO campaign. It must be optimized in a number of ways in order to improve the relevance of chosen keyword. Follow the advice below as closely as possible. The closer the better and the higher your rank will be.

Remember: Keywords are the words people will use in search engines. Including keyword in your site content (and optimizing your site) will cause your site to be returned as a search result. You can choose to optimize your page for a keyword or a keyphrase (a number of related words, eg: ‘free red hats’). Using a keyphrase is more advantageous (as discussed later) but for simplicity, I will refer to keywords AND keyphrases as just keywords.

TIP: Try to optimize each page for just one keyword. This will stop each keyword competing against each other for weightings and you will rank higher for the chosen keyword.

The TITLE Tag

Location: just below the <head> tag ‘<title>Web Promotion, Affiliate Marketing, SEO’ for example:

1. The title tag should not contain any of the words Google disregards. These are words like ‘and’, ‘not’, ‘a’, ‘the’, ‘about’ etc which are too common for Google to take any notice of. Using these words will dilute the importance that your keyword is given in your title (if you put it in your title). These words are known as ’stop’ words.

2. Include your keyword in the title of your page. Including other words in your title that are not your chosen keyword/s will be detrimental to your ranking. This is because it makes your keyword seem less relevant to the title of the page. This relevance is known as ‘weight’. The more weight your keyword has in a certain criteria the better.

3. Don’t include the name of your website in the title of your page: for example ‘Share The Wealth – affiliate marketing’. This is because it will dilute the prominence of your keyword
(in this example ‘affiliate marketing’). It is tempting to include your site’s name as it may look better, however it is not that important as people don’t pay much attention to the
title.

The Meta tags

Location: just below the title tag. Meta data appears as follows:

<meta name=”Description” content=”Free articles and guides on affiliate marketing and SEO”>

<meta name=”Keywords” content=”Affiliate Marketing,SEO”>

1. This is where you specify your keywords:
<meta name=”Keywords” content=”keyword1, keyword2, keyword3″> Also, weight is given to how near your keyword is to the beginning of your keywords list. So you should try to have your most important keyword in the place of ‘keyword1′ in the above example.

<meta name=”Description” content=”Free articles and guides on affiliate marketing and SEO”>

1. The above line is where the description, shown in google results, is written. It goes after content=”. Do not worry about keyword weighting in here as search engines do not take this into consideration anymore.

The BODY of your HTML

Once you have written the content of your page, you can begin SEO on it. Complete the page ready for publishing and then apply the following rules to it to ensure its optimized 100% for the top search engines.

1. Your keyword should appear in bold at least once on your page. This will show the search engines that the word, your keyword, is important to the subject of your page and so must be relevant to the keyword search performed by the search engine user.

2. Your keyword should have a weight of 2% on your page. This is the ideal percentage as if it is too high a search engine may penalize your page for spamming. Spamming is a term used to describe the action of webmasters that trick search engine page ranking systems (SEPRS) into thinking they are relevant in order to get a high ranking. These pages will not usually be relevant at all and simply “cash in” selling advertising space with the high traffic they receive. Spamming is increasingly becoming a thing of the past as the search engine page ranking algorithms become more sophisticated. To work out the percentage weight your keyword has, visit www.live-keyword-analysis.com .

3. Use heading tags ( <h1>heading</h1> etc) and put your keyword into the heading. Again the usual weighting rules exist. Have your keyword as close to the beginning of the heading and have as few other words in the heading as possible. Position this heading as close to the top of your page as you can for increased relevance.

4. Put your keyword in up to three of the alt attributes for images and include it in one of the first three alt image attributes in your code. Alt image attributes are the alt tags
given to images in your code which can be seen if the image fails to load. These are great for hosting your keyword as users cannot usually see them. Don’t spam though, stick to three alt tags. Alt tags are used as follows:

<img src=”imagename.gif” alt=”alt-text-here” width=”image-width” height=”image-height”>

5. Keep your page content between 100 and 1400 words. This is for a number of reasons, including the size of Google’s page cache (amount of data from a page Google stores). If you have too much content, you could try splitting the page into two separate pages and perhaps having a ‘page 2′ link at the bottom of the content.

6. Your keyword should appear at the beginning of your content and at the end (The first and last 50 words) Code Optimization Checklist

* No stop words in your title tag
* Keyword included in title
* Website name not included in title
* Keyword in meta keywords list
* Keyword placed as close to the beginning of the meta keywords list as possible
* Keyword appears in bold at least once in the content
* Keyword has a 2% weight
* Keyword is in the first heading tag and is at the top of the page content
* Keyword is in the first 50 words and last 50 words of the page
* Page content is between 100 and 1400 words
* Keyword is in one of the first three alt image attributes and is in three of them in total

Tips and Advice

• Try to optimize each page for just one keyword. This will stop each keyword competing against each other for weightings and prominence and you will rank higher for the chosen keyword.

• Not every page of your site will be able to be optimized for every criterion. Don’t worry; just try to hit each criteria as best you can. Sometimes you won’t be able to achieve a content size of above 100 words: on a contacts page for example. Issues like this are of little importance as not every page will have a particular need for perfect optimization, because surfers will find contact information from a link shown on the home page.

• Constantly check your competition. You may not feel it is possible to get onto the first page on Google for a certain keyword/phrase. Choose a less contested keyword.
================================================================
Article by James Kinsley search engine optimization
(http://www.sharethewealth.co.uk/) expert and web promotion
(http://www.sharethewealth.co.uk/) specialist.
================================================================

Copyright © 2007 Jayde Online, Inc.  All Rights Reserved.
SiteProNews is a registered service mark of Jayde Online, Inc.
The CSS Difficulties IE 7 Poses

Hey guys! Last month I talked a bit about IE conditional comments and now I’m going to expand on that a bit further as they can be very useful. Conditional comments only work in Internet Explorer on Windows and can therefore be used to give special instructions to IE browsers.

The scenario that I described to you last month involved detecting IE6 to serve it a different stylesheet than IE7 or Firefox or what-have-you. As you begin developing for IE7 you may see things working the same as they do in Firefox. Don’t be fooled. You still need to be checking both browsers as IE7 is an improvement but is not fully ‘fixed’. In addition, most browsers - aside from IE - support more advanced css selectors. One thing IE7 has remedied is their problem implementing ‘* html’ and ‘!important’ in a stylesheet. ( more on these and other IE6 hacks here).

Firstly let’s look at things as though we have two categories: IE browsers and everything else. I’ve just moved my IE6 hacks into a separate stylesheet and am calling it when IE6 is my users’ browser. It is important to set up my hacks as overrides. Because stylesheets ‘cascade’ in the order they are called, the rules from the last stylesheet loaded will override the same ones called previously.

So I call my base stylesheet no matter what the browser is. This stylesheet is the one that is valid and takes advantage of the CSS2 selectors. Next, using IE’s ‘conditional comments’ I assign a stylesheet to IE6 and lower which overrides or sets new styles for IE only. Then, of course, I assign a different stylsheet when it is IE7 browsing my page. Luckily, Microsoft has made a lot of improvements to their browser and this stylesheet should be very short.

First, let’s look at the comment structure:

The part between the first set of it is called the conditional block. In this example it says if ‘lt’ which means ‘less than’. So if the IE browser version is less than version 7. Do ‘the stuff’.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html lang=”en”>
<head>
<title>Conditional Comments</title>
<link href=”base_for_all.css” mce_href=”base_for_all.css” rel=”stylesheet” type=”text/css”>
<!–[if lt IE 7]> <link href=”ie_6_and_below.css” mce_href=”ie_6_and_below.css” rel=”stylesheet” type=”text/css”> <![endif]–>
<!–[if IE 7]><link href=”ie_7.css” mce_href=”ie_7.css” rel=”stylesheet” type=”text/css”> <!–<![endif]–>
<!–[if !IE]>–> <link href=”not_ie.css” mce_href=”not_ie.css” rel=”stylesheet” type=”text/css”> <!–<![endif]–>
</head>
<body>
<p>Test</p>
</body>
</html>

In the above example, base_for_all.css applies to all browsers, ie_6_and_below.css applies to all versions of Internet Explorer below IE 7, and ie_7.css applies to IE 7 only.

Well you are all setup now guys. It is unfortunate that we have to add extra markup to our code in the form of these conditional statements, but at least it will degrade gracefully.

By Andrea Butterworth at Bravenet.com

Naming Pages so Search Engines and Read Them

When creating a Web site it is helpful to name your pages after your full key word phrase using a (-) instead of an (_) to connect words. We could have done that with wowwebworks.com and instead had wow-web-works.com. We overcome this by peppering the phrase in through out the site yet for the most part the (-) is better.

For example, instead of springflowers.htm or spring_flowers.htm, use spring-flowers.htm. This way the robots can read in and the search engine can index it making it much more important. We just named foreign-car-services.htm that way.

A new update (8/26/07) Google plans to start reading the _ in the same fashion as the -. New rules go into effect in September. 

John Clark

4 Simple Solutions to Spam

If you are as sick and tired of spam showing up in your email and don’t want to spend a lot of dollars or do the programming for anti-spam programs, here are 4 easy and free suggestions to nearly eliminate the problem.

1. Never use just your first name, if it is common, for a moniker. Using mary@ or mark@ is like low hanging fruit to a spammer. They will mine for domains and then just pound them for the common names and see which ones don’t bounce. If they get through, grab your shorts because they will not stop, ever. They’ll even sell their success list to other spammers and the pile will then grow.

Solution: Hide your moniker using things like mary2945@ or mark9054@. They will never get to you or figure it out unless you post it where you shouldn’t.

2. You go to numerous Web sites and use your email address for newsletters or information. They may or may not sell those address to others. If they do, you are dead meat. If you are unsure, there is a simple free way to get what you want without the risk.

Solution: Use www.spammotel.com. It is simple and free. You set up a log-in and put in your real email address. Use the service to generate a pseudo address moniker which will be something like 1Ak34982 @ spammotel.com. Any email sent to that pseudo address will be forwarded to you. If you want to cut it off, just go back to spammotel.com and eliminate the address and you have kept your real email address intact and protected.

3. If you have a business or personnel Web site with a contact form, your web designer may have placed a file like contact.php or contact.asp to do the processing of the request to forward it to you. Spam robots search for those files and then read the email addresses inside. Then guess what they do?

Solution: Contact your Web designer and ask them to change the name to something less obvious like 2957.php or np48ut.asp. It doesn’t matter what it is named as long as it is properly named in your online form. Otherwise, they mine it and your day goes real bad.

4. Do you have your email address displayed on your Web site somewhere? If so, you might as well also send a registered letter to your favorite spammers and invite them to dinner. So how can you have your email on the site and not get spammed?

Solution: Disguise your emails with java script code. I have three simple methods that really work. Here is one that is “cut and paste”.

Input the following code for making a visible link to your email on a Web page. It can be seen only with your physical eyes and is clickable for sending email. Stupid spiders can’t read it:

<script language=”javascript”> <!– var username = “username”; var hostname = “yourdomain.com”; var linktext = username + “@” + hostname; document.write(”<a href=” + “mail” + “to:” + username + </a> “@” + hostname + “>” + linktext + “”) //–> </script>

Just replace “username” and “yourdomain.com” with what you use and presto! There are other variations you can use for even hiding them from being read by the eyes, yet clickable or showing to your eyes only and not clickable. Your Web designer should know how to do this. If not, show them the above code. If you are already being spammed it is only left for you to bury the address and create a new one. There is no other way.

Spending money on anti-spam programs will help but if you start with the above you may just be able to spend that money on a nice dinner at Zazios.

John Clark

Firefox - Tools for Web Designers and Technicians

This is a quick list of my favorite Firefox add-ons. There are thousands, but these in particular make my Web work and analysis a lot easier:

#1 - Web Developer by Chris Pederick This tool rocks the house. It adds a toolbar to the browser that is loaded with features to help you develop for the web! Things like outlining various html elements on the fly, enabling and disabling styles, resizing the browser window to various standards, validating your pages, it has a built in ruler tool, options for images, forms, cookies - you name it! #2 - ColorZilla by Alex Sirota Super little tool that sits tucked in a little corner and when you click on it you can sample any color on the web page and copy it to our clipboard. Don’t guess at a color code, get it exact. #3 - MeasureIt by Kevin Freitas Treasure it! It allows you to measure items on the screen so you know how much to correct or adjust your code. It is handy for making sure things are aligned properly. #4 - Firebug by Joe Hewitt This one? Sooo good. You can edit, debug, and monitor CSS, HTML and Javascript live on any webpage! #5 - IE View by Paul Roub This inconspicuous little add-on lets you load pages in IE! Perfect for cross browser testing! #6 - HTML Validator by Marc Gueury This little guy puts a green checkmark at the bottom of your browser if the document validates. If it doesn’t, it shows warnings and errors with a click so that you can hurry off and fix them. Lucky #7 - SeoQuake by The SeoQuake Team This extension gives you a ton of information on your page including Google page ranking, Alexa ranking, showing keyword density and META tags, it allows you to see backlinks and so much more! Quite a handy little thing.

Now here’s the run down: I have ALL of these installed on my browser. They are so well done and inconspicuous that you probably wouldn’t even notice I had them there! They don’t slow anything down… they speed it up!

And that’s why developers love Firefox. Combined with excellent support, what more can you ask for?

The easy way to get .png transparencies to work in IE6

This must be the easiest way to get full support for PNG-transparency in Internet Explorer 6. The technique even works for PNG-transparency in CSS backgrounds. Credit goes to Angus Turnbull for creating this workaround. My hat is thoroughly tipped.

Here’s what you do

First, put this file and this file in your CSS directory.
Second, paste this code into your CSS file:
img { behavior: url(iepngfix.htc); }Enjoy! Really, that’s it.

Transparent backgrounds

As I said, this can be used to make transparent PNGs work on CSS backgrounds as well. Say you have this code:
#header { background:url(header.png); }All you have to do is apply the background behavior to the #header element:
img, #header { behavior: url(iepngfix.htc); }

You can do this with every element you’re using PNG-transparency on:
img, #header, .class, blockquote { behavior: url(iepngfix.htc); }

The asterisk also works, but I don’t know what it does to rendering time:
* { behavior: url(iepngfix.htc); }