Logo
Link to Home - Montgomery College Maryland
Horizontal NavBar                      Button2                      Button3                      Button4                     Contact Us

LNavBar
Web Design Home Storyboard Basics
Writing for the Web
Link Three Ways!

Lake Rockville, Montgomery College, MarylandThese are notes on the Montgomery College Professional Web Design class, provided here for the benefit of students.

-- U.S. Government Usability Guidelines - http://www.usability.gov.

-- Research-Based Web Design & Usability Guidelines, U.S. Health & Human Services, http://www.usability.gov/pdfs/guidelines.html.

This column is the Main Pic and Main Text area.

Main Pic = 200 Max dimension in either the Horizontal or Vertical direction, and Main Text.

 

Writing for the Web

Keep sentences short. 

  • There should be only one verb per sentence. 
  • Use "Headline Links" to "News" stories. 
  • Put links in your sentences to help your readers find what they want. 
  • Remember - your customers are "speed-reading" your web site! 

What we’re doing here is called “Storyboarding” our web site – Laying it out in a familiar manner, before we code in HTML

This helps your administrators help you too, because  your Dean knows Word, but doesn’t know HTML.  You can put your Dean to work by giving him/her a storyboard if you super wants input, too!  This is what we did with the ITI site

Should we have text, text , text text??????

Remember the 7 second rule…..  You have 7 seconds to help your audience find what they’re looking for.

What’s better than text, text, text, text?

  1. Small Linkable Graphics.  Maybe. One good answer.
  2. Text with Links, links, links, links!!!
  3. Here’s how you do a link in Word

 

  1. Horizontal Navbar
    1. Use JavaScript Buttons
    2. Use Cascading Style Sheet Buttons.
    3. (OK, so now you have to take 2 other courses from Prof. Kimball)
      1. HTML
      2. JavaScript Buttons
      3. Cascading Style Sheets
  2. Left NavBar with Links
  3. Text in Main Section explaining your program but containing many links to other pages.  This Main Section gives you an opportunity to present your program, but also to provide users with what they want – Speed-reading for the information they want.
  • Organization Web Site – will presume that users will use the 1 link provided, and understand its meaning!!!  This is the equivalent of a “Professorial “Harrumph!”
  • MC User site = tries to help 22,000 undergrads and 24,000 adult learners find the information they need in 3 clicks or less without using the dreaded search engine!
  • User Friendly plus Accessibility Laws in the State of Maryland, which require you to create web pages accessible to those with disabilities:
  1. Later this semester – How to Build Accessible Web Sites.
  2. ITI pioneered (with DSS) the design of Accessible web sites at MC – now in wide use at the College.
  • Let’s Talk about Col. 3
  • Let’s look back at the eye-scanning speed reading study from the Sklar textbook, reproduced on my site.
  • Question – where does the eye stop first, all other things being equal?  Ans.  Col. 3
  • Question – What does Washington Post, an organization that knows a thing or two about publishing, do with Col 3?
  • Ads, with bright colors, big text, and lots of contrast between colors.
  • What can you in MC do with Col. 3?  What objectives could you accomplish with Col 3, knowing that the eye stops there first?
  • Advertise Events
  • News!!!!!!!
  • Continuing Education = “Courses we’re selling this month!!!!!
  • Image and Message – images of happy students working with instructors, pics of events and activities which show that you are running an energetic, fun program = Amanda = Student Life to interest students in joining Activities, could use Col. 3 to put in pics of those various activities = 50x50
  • Example
  • Define the Products or Services you’re providing to your public, your audience
    • Courses
    1. Prof. Devel.
    2. Undergrad
    3. Adult
    • Financial Aid
    • Schedules
    • Services = counseling, transfer, job/internship help, etc.
    • Define your products and services.
    • Define the information that students and public most want about your products and services

Parilla Pond

Eye Stops Here

Image Building

News!

Coming Events

Recent Events!

More Links!

Contact Information

Name

Address

Email, Phone