Web Maintenance Roles. Layout & Design Basics. Graphics

1
Outline
Websites for Schools

• Needs Assessment
• Static vs. Dynamic Technology
• Web Maintenance Roles
• Layout Design Basics
• Graphics
• Buzz Technologies
• Resource Files (downloads)
• Security
• Additional Resources

2
Who is your audience?
Needs Assessment

• Take a momentThink about how you look at web
  pages. What takes you there?
• Portal pages Open to new info
• Favorites Familiar routine
• Info-seeking Looking for specific answer or
  resource (95 schools)
• Leisure Surfing Following thread of connected
  interests

3
Who is your audience?
Needs Assessment

• People on a missionWeb is different from print
  news. People come to a site with very specific
  questions in mind. They are scanning for key
  words, not reading for content.

4
Who is your audience?
Needs Assessment

• Parents
• Volunteers
• Staff
• Students
• Media
• Job seekers
• Families considering relocation
• Outside groups

5
Who is your audience?
Needs Assessment

• Parents
• Not only what type of information, but how its
  presented
• Announcements School closings, Special Alerts,
  etc.
• Support organizations Band Boosters, PTA,
  volunteer groups
• Complaints How to contact the people they need
• Resources Registration forms, Permission slips,
  etc.
• Calendar Parent-Teacher conferences, holidays

6
Who is your audience?
Needs Assessment

• Parents
• Good news
• Highlight staff in personal way
• Feel good blurbs about teams/ programs/ events
• KEEP IT SHORT! They may not come seeking this
  info, but its a good way to share the positive
  if its presented well

7
Who is your audience?
Needs Assessment

• Volunteers
• Looking for the group or event they are involved
  with
• Permanent section for groups or temporary
  announcements of hot topic events

8
Who is your audience?
Needs Assessment

• Staff
• Intranet vs. Internet
• Remote access email
• Site maintenance, update
• Teachers
• Gradebooks, Assignments, Attendance
• Presentations
• Professional Development
• Password protected security!

9
Who is your audience?
Needs Assessment

• Students
• Consult district policy, explore legal risks,
  seek parent consent, and provide internet
  security
• Classroom assignments, teacher-led content, links
  to resources
• With the growing popularity of web resources and
  the increasing variety of functionality, students
  and teachers will seek outside sites for
  functions not offered on district site. Take that
  into consideration when exploring liability and
  cost issues.

10
Who is your audience?
Needs Assessment

• Media
• Contact information for spokespersons
• Superintendent
• Principals
• Public Relations
• Press releases
• Proactive information sharing
• Formatted for public consumption
• Photos
• Hi-quality print quality and web optimized
• portraits of supt key staff
• Events, teams, newsworthy activities

11
Who is your audience?
Needs Assessment

• Families Considering Relocation
• Community Demographics
• State Report Card
• Graduation rates
• Contact info
• Special programs for students, families
• Real estate links
• Links to community incentives

12
Who is your audience?
Needs Assessment

• Outside Groups
• Adult education
• Community events, elections, Scouts, Churches,
  etc. that may use school property for
  non-district functions
• Maps Directions
• Contact info

13
Stuff for every site
Needs Assessment

• Contact informationGeneral contact on every
  page, area-specific on Contact page
• Maps directions to buildings and other areas
  events or services might occur
• Personnel bioskey people that parents and media
  will want to get to know supt, board, etc.

14
Stuff for every site
Needs Assessment

• Calendar of events
• Announcements current newsHome page location
  for posting school closings, deadlines, etc.
• SearchSite-specific or web-wide
• Policies general info
• FAQ
• Links Partners, ISD, Community

15
Definitions
Static vs. Dynamic

• Static site is developed maintained with
  editing software and does not allow user
  interaction. Online Brochure strategy.
• Dynamic site has features that respond
  automatically to user input and/or database edit.

16
Static site
Static vs. Dynamic

• Benefits of static site
• Less expensive start-up
• Flexibility in appearance
• Greater control at a hands-on level
• Minimal security risks
• Introductory technology for students

17
Dynamic site
Static vs. Dynamic

• Benefits of Dynamic site
• Greater range of features
• E-commerce, RSS feeds, Blogs and other
  communication, directories, surveys, gradebooks,
  sign-ups
• Can be edited/updated from any online source
• Multiple people can be assigned content
  responsibilities
• Minimal training/software

18
Software options
Static vs. Dynamic

• Web design software
• Macomedia Dreamweaver (Adobe)
• Adobe GoLive
• Microsoft FrontPage
• Graphic software
• Adobe Photoshop / ImageReady
• Macromedia Fireworks
• Other
• Adobe Acrobat
• Microsoft Office
• Macromedia Flash

19
Whos job is it?
Maintenance Roles

• Class Poll
• One person does all updating district-wide
• One person for each building
• Roles divided by content specialists (Public
  Relations, Curriculum, Technology Dept, Supt,
  Principals, Students, etc.)

20
Whos job is it?
Maintenance Roles

• Decide during design phase some ideas of how
  content will be managed, reviewed, and updated.
• Time-intensive and important responsibility
• Policy should provide formal guidance for intent,
  restrictions, and standards for web content
• Keep material current

21
Research shows
Layout Design

• Web viewing patterns are very different from
  traditional media
• Scanning for key words in expected places
• Predictable locations, terminology, and colors
  are critical to easy navigation
• Images, icons, and identifiable navigation items
  draw attention

22
Research shows
Layout Design

• Hot Spots on the page (in order)
• Upper-left corner
• Down the left-side, top to bottom
• Along the top, title area
• Right side (only if identifiable navigation
  exists)
• Upper-center of screen scanning for body material
• Lower part of screen
• Scrolling downward

23
Good Practices
Layout Design

• Keep messages shortPeople dont read sentences
  until reaching final destination or if lost
• Use familiar clear terminology in navigation
  (Student Council or Lions Den depending on
  your audience)
• Standard fonts (arial, verdana, helvetica, times)
• Identify the page youre on

24
Good Practices
Layout Design

• Position navigation in predictable areas (top,
  left, right)
• Contact info on every page
• Printer friendly (80, 550 pixels)
• Site unity Every page should have the same
  look and navigation should remain consistent
• Cross linking allows visitors to locate resources
  from a variety of angles and stages of their
  search

25
Good Practices
Layout Design

• Special instructions for unexpected or complex
  features (ex. Long download time or plug-in
  required)
• Avoid broken links or graphics
• AVOID ALL CAPS in excess
• Left justify blocks of text
• Only underline links
• Fresh content
• Alt tags provide Bobby Compliance helpful
  roll-over info to visitors

26
Behind the scenes
Layout Design

• Code is important
• Search engines look for Page Titles, Object
  Descriptions, Alt Tags, and Key Words in meta
  information to determine results
• They also scan file names such as embedded
  graphics and associated PDFs, forms, and other
  documents
• Random googling may not be important to school
  sites but searchability is

27
Formats
Graphics

• Download time vs. quality
• Formats
• JPG (photos)
• GIF (logos, text, icons)
• Animated GIF (use sparingly if at all)

28
JPG vs GIF
Graphics
Best for logos
GIF 6K
JPG 6K
Best for photos
29
Working with images
Graphics

• Background images are generally out of fad and
  present design complications
• Animated graphics are distracting, out of fad,
  and should be used sparingly
• Images should be optimized in Photoshop, not
  resized in web editing software

30
Understanding Resolution
Graphics

• Image Resolution is the sharpness or detail of an
  image. Ratio of pixels per inch. Digital 72ppi
  (96)
• Screen Resolution is the total numbers of pixels
  that comprise a monitors viewing screen
• 800px X 600px or 1024x768 for monitors
• 256x256 on some handhelds/phones
• Compression is the amount of quality sacrificed
  to shrink the file size (download time) of an
  image

31
Understanding Resolution
Graphics

• Pixels are the dots that make up digital screen
  imagery

32
The Downloads
Resource Files

• PDF Viewable across platforms, not easily
  editable
• Word .doc vs. Save For Web
• Excel .xls vs. Save For Web
• PowerPoint .ppt/.pps vs. Web
• Scans JPG, GIF, PDF
• Video stream vs. download (provide controls)
  www.gomasa.org/EnergyWise/e2007-10/e2007-10g.htm
• Audio stream vs. download

33
Communication
Buzz Technologies

• Blog
• Bulletin Board
• Chat Room
• Forum/Discussion Board
• Digest
• Chat Room

34
Subscription News
Buzz Technologies

• RSS Really Simple Syndication
• Listserv
• Distribution Group vs Discussion Board
• Spam filtering
• Opt out
• E-Newsletterwww.gomasa.org/EnergyWise/e2007-10/e2
  007-10.htm www.gomasa.org/ldr/2007/ldr102607/ldr1
  02607.htm

35
Multimedia
Buzz Technologies

• Streaming Video
• Streaming Audio
• Webinar
• Podcast
• Flash Animation

36
Authoring
Buzz Technologies

• HTML
• Javascript / Applets
• Dynamic / Data Driven (XML, DNN, PHP, ASP)
• CSS (Cascading Style Sheets)
• Tables
• Frames
• Templates
• Cookies
• Pop-ups

37
ADA Accessibility
Buzz Technologies

• W3C 508 Compliance
• Bobby Compliance A, AA, AAA(www.cast.org/bobby)

38
2-Part Approach
Security

• Security needs to be considered a 2-part approach
• Policies and practices in design, use, and
  maintenance
• Technology and software
• E-commerce (www.paypal.com)
• SSL Secure Socket Layer
• Filters, Firewalls

39
Find Help Online
Resources

• Right-click, View Source for source code
• Web developers www.schoolwires.comwww.foxbrigh
  t.com http//ltgi.net
• Classroom Management Systemswww.powerschool.com
  www.finalsite.com www.renweb.com

40
Find Help Online
Resources

• Listservswww.lyris.com www.lsoft.com
  www.infacta.com www.constantcontact.com
• Calendars www.webcalendarcreator.com
  www.localendar.com
• General info, tips, add-ons www.bravenet.com
  www.pcmag.com www.freescripts.com

41
Examples
Resources

• Oakland ISD www.oaisd.org
• Rochester Community Schools www.rochester.k12.mi.
  us
• Bloomfield Hills www.bloomfield.org
• Huron Valley www.huronvalley.k12.mi.us
• Ann Arbor Public Schools www.aaps.k12.mi.us
• Mona Shores www.monashores.net

42
James Scofield
Contact Me

• James Scofieldjscofield_at_gomasa.org517.327.9259
• This presentation onlinewww.michiganedusource.or
  g then go to Communication Tools