Home Giving Contact District Calendar Website Concerns
Search
Webpage Tips for Teachers & Staff

Tips on Creating User & Browser Friendly Webpages

It is a good idea to always think of your users when you are creating and putting content on your web page - Will your users be able to easily see and read your text and easily view your content?  Users come to your webpage to get the information they need and if they cant see it easily or its not legible, they will leave.  Not all users have the latest and greatest wide screen monitor, or high speed internet connection, or fast computer. Many users still have old small monitors.  Also, think of the users with handheld digital devices, PDAs and mobile phones that can access the internet.  Can they see and read your text on those tiny LCD screens?

 

Web Browser Friendly Fonts

 

Use browser & monitor friendly fonts such as Arial or Verdana as much as possible  Although these fonts may be boring, these fonts are compatible across all browsers and computer monitors and make your text clear and easy to see/read on the web.  Avoid using fancy or script fonts because they may not be compatible or readable in different browsers or monitors.  The Times New Roman font, although classic and great for hardcopy/printed material, is not as clear on the web because of its small lines that protrude from the tops and bottoms of each letter which make the font fuzzy on the screen or in certain browsers.  
 
Font Size - Its good practice to use a font size that is readable, not too small and also not too big.  For this school site, its good to use: size 2, 3 or 4 for regular text and paragraphs; and size 5 or 6 for titles and headlines. Size 1 is too small and size 7 is too big.

 

Web Browser Friendly Background Colors and Text
 

For text, its always good practice to use black, dark grey or other dark colors against a very light background.  Light colored text like yellows, light greens or light grays do not show up on the screen well and are also very difficult to read.  Furthermore, not all colors show up on all monitors or browsers.  What if a user wants to print your page?  Light colors do not show up on white printer paper and browsers usually default to ignore the background colors of web pages.

 

Graphics, Photos and Clip Art
 

It is a good idea to minimize the amount of graphics, clip art and photos and make sure they are a reasonable size. Its wonderful to use graphics, clip art and photos because they can enhance your page and add color and interest. However, if your photos, graphics or clip art are too big or there are too many, it will slow the download speed of your page.  The more there are, the longer it will take for your page to appear.  Remember that not all users have high speed internet connections and some still use phone dial-up connections. 

 

Formatting Text for User Friendliness & Eye Scanning Comfort
 

Web users tend to read content on the screen by scanning quickly so you want to try your best to make a your page easy to scan with the eyes from left to right.  Therefore, the following suggestions will help to make your web page more user friendly.  Studies have shown that web users tend to read content on the screen like they would read a newspaper.

 

  • Justification: use left justification for paragraphs and section titles
  • Centering: is OK for main titles, banners and headers.  However, avoid centering everything on the page.  On printed material, centering everything may look good, but on the web, its not easy for a persons eyes to scan.
  • Highlighted or Bold Text:  its good to use bold font for titles and headers which help users hone in on the information they want or need and makes it easier for eyes to scan and find.
  • Italics:  Avoid using italics or italicized text. No matter what font is used, italics appears fuzzy on screen. An option is to bold the font to highlight an important note, phrase or text.
  • Underlining Text:  try not to underline text that you want to highlight because on the web, underlined text usually means its a link.  Again, use bold text instead.
  • For additional user friendliness: use bullets when you are creating lists.

Tips provided by Melinda Yee, Parent Volunteer Webmaster, WS/JL Technology Committee


Last Modified on December 2, 2008