Submit Your Article Forum Rules

Page 1 of 3 123 LastLast
Results 1 to 10 of 29

Thread: Tips For A Better Website

Hybrid View

  1. #1
    Junior Member
    Join Date
    Nov 2004
    Posts
    21

    Tips For A Better Website

    Hello fellow WPWers,

    This post is based on my article "Tips For A Better Website"

    This is not meant as an authoritative source, it provides you with a generalised guide that can be built upon.

    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
    Writing for the Web

    * Write in layman's terms so that everybody can understand your content, unless you're running a technical site for technical people.

    * Reading from a screen is painful: use 50% less words than you would use on print.

    * If a page is too long, break it into several pages and link to them.

    * Don't use font sizes smaller than 10pt. for the body of your page. Specify your fonts in percentage terms instead of pixels, to let users set their own size preferences using their browser's text view options.

    * Use a spell checker. Spelling mistakes are embarrassing and hurt credibility.

    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
    Content Presentation

    * Save the top of your page for your most important content. Remember: good content must flow to the top.

    *Lay out your page with tables, and set the width in percentage terms instead of a fixed number of pixels. That way, your page will always fit the screen, without the need to scroll horizontally.
    Note: You may also layout your site with CSS (create a tableless site), which is intermediate to advanced designer option.

    * Optimize your page to be viewed best at 800x600 (the most popular resolution at the time of this writing).

    * Use high contrast for the body of your page: i.e. black text on white background, or white text on black background, try different variations but remember that they must contrast for easy viewing.

    * Don't use too many different fonts in one page, try to stick with 2-3 at the most. Also, avoid using small serif fonts (like Times Roman): they are difficult to read from a computer screen. Verdana and Arial are the most widely used fonts on the web.

    * Avoid long blocks of text. Use tools that facilitate scanability, like bullets, subtitles, highlighted keywords, hyperlinks, etc.

    * Avoid amateurish features like: numeric page counters, wholesale use of exclamation points, all caps, center justified blocks of text, excessive animated gifs, busy backgrounds, etc.

    * Don't use pop-up windows. They distract your visitors and are immediately dismissed as ads, use of popups is acceptable in some circumstances and when the client is aware that his link will bring up a popup page.

    * Test your site so that it looks good in different browsers and resolutions.

    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
    Graphics

    * Optimize your graphics. Use only .gif and .jpg formats. Make your image files as small as possible while maintaining acceptable quality.

    * Use thumbnails (miniature versions of a picture) and make them clickable to the actual size picture.

    * Avoid graphics that look like ads. People ignore them.

    * Use the ALT attribute on pictures, even the image is not a link. It helps users with disabilities and people who have turned off graphics.

    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
    Navigation

    * Design your pages to load in less than 5 seconds on a 56K modem.

    * Group your navigational options in relevant categories.

    * Use common names for your menu options: Home, About Us, Contact Us, Help, Products. Avoid "clever" or "trendy" alternatives.

    * If your site uses Flash, provide also an HTML version for users who prefer a less fancy, faster site.

    * Provide simple text navigation links at the bottom of long pages, so users don't need to scroll back up.

    * Link your logo to your homepage, except in the homepage itself. Put a link to your homepage on all your internal pages.

    * Display a "breadcrumb trail"; it is basically the path from the homepage to the page where you are. A breadcrumb trail looks like this: Home > Section > Sub-Section > Page, and it greatly facilitates navigation.

    * If your site is too big, provide Search capabilities. Include a search box in the upper right corner of your homepage, and a link to a Search page from your interior pages.

    * Set your search box to search your site, not to search the web.

    * Create a custom error page that displays a simple site map with links to the main sections of your site. That way, you will not lose visitors that have followed a bad link to your site or who have misspelled your URL.

    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
    Linking

    * Make your links descriptive. They should indicate what the user will be linking to, as opposed to just saying "click here".

    * Don't underline anything that is not a link, otherwise your customers may click on it and become frustrated, underlines have become sinonymous with links on the web.

    * Underline your links and use a consistent color for them across your site (the standard color is blue).

    * Use a different color for visited links, so that your visitors know where they've been (opt for a more subdued tone of the unvisited links color).

    * When linking to a non-HTML file, such as Excel, Word or Acrobat, make it evident, by including a small icon next to the link or text identifying the link.

    * Don't link to "under construction" pages, if they are not finished, do not add them to your site's navigation.

    * Make sure that your links work and that you don't have broken links. There are free online tools that can help you with this.

    * If you use graphic links, don't forget to use the ALT attribute. The ALT attribute should describe what are you linking to.

    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
    Branding

    * Include your logo in all pages. Most sites position the logo at the top left or each page, however other variations to this rule can apply if done properly.

    * Complement your logo with a tagline or catchy sentence that summarizes your business purpose. For example "Always low prices" is the tagline for Wal-Mart.

    * Create a favicon. A favicon is that small graphic that appears next to the URL in the address bar.

    * Have a consistent look and feel in all your pages. Use a color scheme and layout that are clearly recognized across your site.

    * Have an About Us section, that includes all relevant information about you and your business.

    * Include a copyright statement at the bottom of each page.

    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

    I welcome additions that anyone feels are equally important to this list.

    Thank you for your time in reading this post, and I sincerely hope this helps you in your quest for a better website.
    Regards,

    Alessandro De Barros
    Sao Paulo, Brazil

  2. The following user agrees with linknode:
  3. #2
    Senior Member
    Join Date
    May 2004
    Posts
    239
    Thanks for your post Linknode.

    I might add that when putting copy on a website it is good to consider your formatting dynamics. I've found that many web users are "subtitle-ers" and "caption-readers". Get the message in your "caption" sentences and or <h3></h3> them.

    Keith
    www.corporateface.com
    Custom Website Design
    No Templates

  4. #3
    Hi Alessandro,

    Thanks for your excellent article! Beside the theoretical approach there also is the practical, learning by doing way to study methods and means to improve presentations!

    My idea I like to bring to your attention is short and simple: Participate on the 2005 vote of the best blogs

    Where can you find the most interesting weblogs? Which blogs have made their mark this year? Who will do anything for a nomination? Those questions will be answered in the o*ne and o*nly fifth annual weblog awards, the 2005 bloggies! The Bloggies™ are a set of 30 publicly-chosen awards given to weblog writers and those related to weblogs. This is the fifth ceremony, with previous winners listed o*n their respective sites: 2001, 2002, 2003, and 2004. Everyone's invited to take part in the awarding process, so read below to find out how you can nominate and vote for your favorite blogs! So, friends, do not hesitate to vote your favorite weblogs: http://2005.bloggies.com/

  5. #4
    Senior Member
    Join Date
    Apr 2004
    Posts
    279
    * Don't use font sizes smaller than 10pt. for the body of your page. Specify your fonts in percentage terms instead of pixels, to let users set their own size preferences using their browser's text view options.
    I'm afraid I am going to have to disagree with you here.
    I always specify pixel sizes - why? because using pt renders inconsistently across browsers and platforms, 12pt on a mac is hugely different from 12pt on windows which again is different from 12pt rendered in a broswer on a unix platform. Pixels sizes are relative to the readers resolution and can be resized by the browser if the user so desires.

    That and the w3c recommend not using pt or other absolute lengths. See here.
    "I have not failed. I have found 10,000 ways that don't work" - Thomas Edison.
    "The secret to creativity is knowing how to hide your sources" - Albert Einstein.

  6. #5
    WebProWorld MVP Webnauts's Avatar
    Join Date
    Aug 2003
    Location
    European Community
    Posts
    8,934
    Quote Originally Posted by Easywebdev
    * Don't use font sizes smaller than 10pt. for the body of your page. Specify your fonts in percentage terms instead of pixels, to let users set their own size preferences using their browser's text view options.
    I'm afraid I am going to have to disagree with you here.
    I always specify pixel sizes - why? because using pt renders inconsistently across browsers and platforms, 12pt on a mac is hugely different from 12pt on windows which again is different from 12pt rendered in a broswer on a unix platform. Pixels sizes are relative to the readers resolution and can be resized by the browser if the user so desires.

    That and the w3c recommend not using pt or other absolute lengths. See here.
    Lets be honest here. You definetely should not use pt or pixels. You should use percent or em! Or did I get you wrong?
    John S. Britsios, Forensic SEO & Social Semantic Web Consultant | My personal blog Algohunters

  7. #6
    WebProWorld MVP Webnauts's Avatar
    Join Date
    Aug 2003
    Location
    European Community
    Posts
    8,934
    Linknode you wrote:
    "Design your pages to load in less than 5 seconds on a 56K modem."

    Users with 56K modems tollerate up to 8 seconds.

    And by the way: Excellent post!
    John S. Britsios, Forensic SEO & Social Semantic Web Consultant | My personal blog Algohunters

  8. #7
    Senior Member
    Join Date
    Apr 2004
    Posts
    279
    Sorry Webnauts, the topic was made sticky and I did not notice it move.

    Now onto the great text size debate :)

    No you did not get me wrong. I do use pixel sizes. When you say to use percent or em then you have to consider what that is a percentage of or how big the m actually is, the base text size needs to be defined somewhere either as pt, px or the browser default text size.

    I find using pixel sizes gives me the best results across multi platforms and browsers. As I said above pixels are relative to the users screen. Specifying pt is going to leave you with large text on one platform and miniscule text on another.

    So for me with the average user using a screen resolution of 800x600 - 1024x768 a base font size of 12px is what I will be sticking to.
    "I have not failed. I have found 10,000 ways that don't work" - Thomas Edison.
    "The secret to creativity is knowing how to hide your sources" - Albert Einstein.

  9. #8
    WebProWorld MVP Webnauts's Avatar
    Join Date
    Aug 2003
    Location
    European Community
    Posts
    8,934
    Quote Originally Posted by Easywebdev
    Sorry Webnauts, the topic was made sticky and I did not notice it move.

    Now onto the great text size debate :)

    No you did not get me wrong. I do use pixel sizes. When you say to use percent or em then you have to consider what that is a percentage of or how big the m actually is, the base text size needs to be defined somewhere either as pt, px or the browser default text size.

    I find using pixel sizes gives me the best results across multi platforms and browsers. As I said above pixels are relative to the users screen. Specifying pt is going to leave you with large text on one platform and miniscule text on another.

    So for me with the average user using a screen resolution of 800x600 - 1024x768 a base font size of 12px is what I will be sticking to.
    I also use as a base font size equivalent to 12 px on my web site too. But not pixels, rather percents or ems.
    What do you mean about average users? Do you mean excluding older users, or users with visual impairments, as i.e with low vision? If you are using pixels and the user is with IE, how can he resize your fonts? So where do you see the best results accross multi-platforms and browsers?

    Can you be more specific here?
    John S. Britsios, Forensic SEO & Social Semantic Web Consultant | My personal blog Algohunters

  10. #9
    Senior Member
    Join Date
    May 2004
    Posts
    158
    Hi,

    For some more tips on website design, read the articles on my site at http://www.creativecauldron.com/Webs...Articles.shtml

    Have Fun,
    Jeff
    Visit The Creative Cauldron at http://www.CreativeCauldron.com You'll find reports, ebooks, events, retreats, a blog and much more.

  11. #10
    Senior Member Faglork's Avatar
    Join Date
    Feb 2005
    Posts
    913
    I definitely am with webnauts here. Specify em or percent. AFAIK, the IE cannot resize text which size is specified in pixels.

    Have you ever noticed, that website demos are always made for the chief, but the secretary has to work with it? What I want to say is, the website may look good for those who buy the design from you, but the visitors will have the problems.

    I experience that a lot: When I visit a client in his office, I find 17' monitors with 800x600 and big font size turned on, because the 50-year old secretary just needs that. Now, who do you think will do the work and collect a list of websites which offer a certain product (or whatever example you want): The chief himself? In most cases, the secretary will get assigned to this task. If your website is not able to change font size (because the secretary uses IE ...), you have lost.

    BTW: You could even add a feature to let the user resize the text with some easy-to-see buttons or text. See an example at
    http://www.goldner-stern.de/

    In the left column, it says

    Schriftgröße ändern:
    [ + ] normal [ - ]

    which is german for "Change font size". Just try it. It is an adaptation of the script found over at ALA - I just used the website example above to show that this is *not* an academic issue.

    My opinion: Fixed font sizes are the result of a company-oriented thinking, variable font sizes are customer-oriented. Now, it depends for whom you create the website ...

    Fixed fonts are no advantage - they are a disadvantage handed down by age-old technology: the rigid demands of the PRINT medium. In print, you are stuck with the font size a magazine is printed with.

    The WWW is different: Any information is supposed to adapt to the needs of the visitor - or the output device. Accessibility is the key phrase here. This is the beauty that underlies the concept of Tim Berners-Lee - dont let it be affected by the limits of an old medium.

    Just my 2 cents (or shold I say ems? SCNR).

    Alex

  12. The Following 3 users agree with Faglork:

Similar Threads

  1. IT Company website looking for tips for seo
    By nickelscomputers in forum Submit Your Site/Logo For Review
    Replies: 2
    Last Post: 02-02-2004, 02:52 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •