| When creating a new website or redesigning an | | | | * The wrong way: "For search engine |
| existing site, there are four critical rules | | | | optimization techniques, click here." |
| which the designer should follow to make the | | | | |
| site effective and functional - and | | | | * The right way: "Good techniques for search |
| successful. | | | | engine optimization are important to use." |
| | | | |
| 1. Easy to Read | | | | Using link text (anchor text) that describes |
| | | | what the link is about is the best way. |
| When building a website, the first thing you | | | | Search engine web crawlers (programs that |
| need to be sure of is that your website is | | | | automatically index the contents of websites) |
| easy to read. When you write content, | | | | visit your site, they "read" links. Spiders |
| remember that most web site visitors don't | | | | can index descriptive links into a subject or |
| read every word of a page - in fact, they | | | | keyword category. Spiders have nothing to |
| only scan pages to find what they want. | | | | work with when reading a "click here" until |
| | | | it reaches the linked page. |
| Break up Your Content | | | | |
| | | | This is Cross Linking - use it as much as |
| Break up your pages and use headers between | | | | possible when it makes sense to do so when |
| major ideas so people scanning your site can | | | | writing your content. |
| find what they want quickly. Use meaningful | | | | |
| headers between each paragraph or major idea | | | | 3. Consistent Design |
| - this helps with SEO. Headers should be | | | | |
| created with the H1 through H4 tags for SEO. | | | | At most, one or two layouts should be used in |
| Always use good writing structure. | | | | your site design. As a reader browses your |
| Additionally, avoid long paragraphs that run | | | | site, they should be able to get used to |
| on. You should break up any long paragraphs. | | | | looking in the same place for your |
| | | | navigation, for your sub-navigation and for |
| Color and Fonts | | | | your content. That's all there is to say |
| | | | about that. |
| To help readability, use high contrast colors | | | | |
| between font and background. Black text | | | | 4. Lower Page Weight is Better |
| against a white background may seem stark, | | | | |
| but it is very readable. To make a website | | | | Page weight is the total size of a page on |
| easy on the eyes, try an off-white background | | | | your site in bytes - code, text and images. |
| and a dark gray (almost black) text color. | | | | Your site's page weight makes a big |
| | | | difference to your viewers. Lighter page |
| Things to avoid with content color: | | | | weight is better for your readers because the |
| | | | page will download faster. The faster a page |
| * Avoid vibrant background colors like purple | | | | downloads, the faster they will get to the |
| or yellow. Such back colors make text | | | | content. |
| difficult to read. | | | | |
| | | | What is Means to be Light |
| * Avoid using an image behind your text. | | | | |
| | | | * No large images. (unless the site's purpose |
| * Avoid using bright text colors on bright | | | | is to showcase images, art or photos) |
| backgrounds. | | | | |
| | | | * Fewer images are better. |
| Fonts Matter | | | | |
| | | | * Optimize images for the web at no more than |
| One simple statement covers the font issue: | | | | 72 dpi |
| | | | |
| Simple fonts are the best; the more fancy the | | | | * Use as small an image dimension as possible |
| font, the harder it is to read. | | | | for the given design. |
| | | | |
| Since many browsers only have the standard | | | | * Use a table td bgcolor attribute or a |
| font set, use standard fonts. In reality, | | | | background-color style attribute for solid |
| there is no "standard", but there are certain | | | | color backgrounds. |
| fonts that are installed on most browsers. | | | | |
| These include Arial, Verdana, Tahoma and | | | | * Make gradients horizontal or vertical (not |
| Times New Roman. Your readers will see | | | | diagonal) so that you can use a small image |
| something different than you see if you use | | | | "strip" and repeat it. |
| other fonts. | | | | |
| | | | How "Heavy" Should a Web Page be? |
| Standard Compliant Browser for Development | | | | |
| | | | Certain studies show that 64K is a good |
| When developing and testing your site, use a | | | | maximum webpage size. 64K is a maximum, |
| Standards compliant browser like FireFox. If | | | | however it is still, in my opinion, really |
| you develop your site to be standards | | | | big! The smaller the page, the better. 25K |
| compliant, it will work in most browsers, | | | | is good, 15K is even better. There is a |
| including MS Internet Explorer (IE). It is | | | | balance between design and function. It is a |
| recommended that you test your site using the | | | | good idea to focus more on function. |
| latest and last browser versions of IE (IE6 | | | | |
| and IE7). To run multiple versions of IE on | | | | Try putting pages on your web host server as |
| the same machine, TredoSoft has a free | | | | you build your site so you can test it as you |
| installer that will install multiple versions | | | | go. For pages online, you can test the page |
| of IE. It works great! | | | | weight to be sure you are on track. |
| | | | |
| 2. Simplify Navigation | | | | Ways to make pages lighter: |
| | | | |
| The menus and links make up the navigation | | | | * Use linked style sheets |
| that the visitor uses to get from page to | | | | |
| page in a site. Always plan a site around how | | | | * Use DIVs instead of TABLEs where possible |
| people will get from page to page. A visitor | | | | |
| to your site should be able to get to what | | | | * Use simple repeating backgrounds for effect |
| they want within three clicks of their mouse. | | | | |
| | | | Summary |
| Multiple navigation points makes it easy to | | | | |
| find things. Repeat the top menu and at the | | | | Visitors to your website should be able to |
| bottom. Also create a left or right menu. | | | | find what they are looking for within about |
| | | | three clicks. Making a site easy to read |
| Using links within your text to other areas | | | | with consistent page design, and easy to |
| on your site. You can create links so that | | | | navigate will make it easy to find |
| they are good for search engine optimization | | | | information. You will be on the way to |
| (SEO). There are generally two ways to create | | | | building a readable, effective, functional |
| links within your text: | | | | and hopefully successful website if you |
| | | | follow these rules. |