Brown Web Commandments

Skip to end of metadata
Go to start of metadata

Brown Web Commandments

(aka. Web Best Practices)

Before you begin

  • Plan and draw. You wouldn't build a house by buying wood and nails, and starting to hammer away. You would think about your ideal house and then draw blueprints. Do the same with your website.  A good first step is to think about your information architecture.
  • Design a site appropriate for your audience. Prospective students and their parents are a very important constituency and odds are your website should be useful to them.
  • BrownSites is completely free and makes building your website easy.

Designing your site

  • Tables are great for grids. Use tables to display tabular data, but look to Cascading Style Sheets (CSS) for layout.
  • When you have a choice, use externally linked style sheets instead of embedded or inline styles.  External CSS files will save you from making the same change on many pages, help with making your pages look consistent across browsers and will decrease page load time.
  • Consistent naming conventions are good. Shorter is better than longer (application.html, not studyabroadapplication.html). Clear is better than vague (application.html, not app.html).  Using hypens (page-name.html) is superior to capitalization (pageName.html) or underscores (page_name.html) because it facilitates one-handed typing and prints out cleanly. Never put spaces in your file names.
  • Avoid redundant paths like brown.edu/about/brown-statistics/about-brown-enrollment  Neither about nor brown need to be repeated.  Try brown.edu/about/statistics/enrollment instead.
  • Don't use too many colors.  Brown has a style guide to help you select appropriate colors.
  • Don't use too many fonts. Two is usually plenty.  Stay away from "cute" or "trendy" fonts like Comic Sans as they are often difficult to read.
  • Check your site on a variety of browsers and on a variety of platforms. Consider backwards-compatibility.  IE6 is different from IE7 is different from IE8 is different from IE9 and that's just one browser!  Test thoroughly!
  • Proofread!
  • Design and maintain clear, consistent navigation. Accessible websites offer consistent, clear navigation throughout the entire site.
  • Keep distractions to a minimum. Blinking, scrolling, rotating or otherwise moving elements can cause your page to fail to meet minimum accessibility guidelines.
  • Avoid frames.
  • Don't use graphics as text.
  • Use the alt attribute when embedding images.
  • Don't "borrow" graphics from another site. If you must use an image or text from another site, ask permission and credit the site and author.
  • Create margins. Don't let your text stretch from one end of the screen to the other. Readers typically won't read lines longer than 15 or 16 words.

Contents and Maintenance

  • Always create a link back to the department home page and to the Brown University home page. You never know how a user found her way to your site, so make sure she knows where she is-and how to get around.
  • Use titles to your advantage. This helps search engines catalog your page; it is what the user sees in the top of the browser; and it is the text that is saved when a user makes your page one of her Bookmarks or Favorites.
  • Include meta information-both descriptions and keywords. This can help search engines and sometimes are displayed on search result pages.
  • Show yourself! Use your actual email address as the email link text. Users of public terminals or those who print your page for later can't write to "contact us." Use "real world" contact information on your pages. Like it or not, we still rely on paper for much communication-give users a phone number, postal address, and (as necessary) a physical address.
  • Be clear about what you're presenting to the visitor. Don't make her wade through "happy talk" and graphics to find the point of your site.
  • Don't tell your visitors how to use your website.  Few things cause a visitor to stop reading like instructions on how to use the page.
  • Include a site map for large sites. No matter how elegant and efficient your navigation scheme may be, some users just prefer to see where everything is in one large index.
  • Reply. Make sure someone reads and responds to email generated by your site on a regular basis.
  • Do not use the words "under construction." Web sites are organic creatures-we constantly add, tweak, revise. If your site isn't ready for Prime Time, don't leave it where people might find it.
  • Audit each page of your web site annually.  Update or replace outdated content.

Finally

  • Remember that just because you have technology doesn't mean you must use it. Think about whether a two minute Flash intro, a really neat javascript, or a great sound file will really help visitors experience your site.
  • Ask! If you have questions about planning or design, contact webservices@brown.edu.

Labels

best best Delete
practices practices Delete
commandments commandments Delete
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.
  1. Feb 15, 2007

    Kenneth Zirkel says:

    Be aware that there are some more specific, and perhaps contradictiory, "command...

    Be aware that there are some more specific, and perhaps contradictiory, "commandments" for the Department Template project.

    Here is a section for content editors using the Templates: https://wiki.brown.edu/confluence/display/CISDOC/Contribute+Users+manual

    Here is a section for site builders who wish to build their own site using the Templates:
    https://wiki.brown.edu/confluence/display/CISDOC/Departmental+Template+Guidelines+-Building+your+own+site%28Under+Construction%29