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