1 / 42

Web Design for Schools - PowerPoint PPT Presentation

  • Updated On :

Websites for Schools. Outline. Needs Assessment Static vs. Dynamic Technology Web Maintenance Roles Layout & Design Basics Graphics Buzz Technologies Resource Files (downloads) Security Additional Resources. Needs Assessment. Who is your audience?.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Web Design for Schools' - PamelaLan

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Outline l.jpg

Websites for Schools


  • Needs Assessment

  • Static vs. Dynamic Technology

  • Web Maintenance Roles

  • Layout & Design Basics

  • Graphics

  • Buzz Technologies

  • Resource Files (downloads)

  • Security

  • Additional Resources

Who is your audience l.jpg

Needs Assessment

Who is your audience?

  • 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

Who is your audience3 l.jpg

Needs Assessment

Who is your audience?

  • 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.

Who is your audience4 l.jpg

Needs Assessment

Who is your audience?

  • Parents

  • Volunteers

  • Staff

  • Students

  • Media

  • Job seekers

  • Families considering relocation

  • Outside groups

Who is your audience5 l.jpg

Needs Assessment

Who is your audience?

  • Parents

    • Not only what type of information, but how it’s 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

Who is your audience6 l.jpg

Needs Assessment

Who is your audience?

  • 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 it’s a good way to share the positive if it’s presented well

Who is your audience7 l.jpg

Needs Assessment

Who is your audience?

  • Volunteers

    • Looking for the group or event they are involved with

    • Permanent section for groups or temporary announcements of “hot topic” events

Who is your audience8 l.jpg

Needs Assessment

Who is your audience?

  • Staff

    • Intranet vs. Internet

    • Remote access email

    • Site maintenance, update

  • Teachers

    • Gradebooks, Assignments, Attendance

    • Presentations

    • Professional Development

      Password protected security!

Who is your audience9 l.jpg

Needs Assessment

Who is your audience?

  • 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.

Who is your audience10 l.jpg

Needs Assessment

Who is your audience?

  • 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

Who is your audience11 l.jpg

Needs Assessment

Who is your audience?

  • Families Considering Relocation

    • Community Demographics

    • State Report Card

    • Graduation rates

    • Contact info

    • Special programs for students, families

    • Real estate links

    • Links to community incentives

Who is your audience12 l.jpg

Needs Assessment

Who is your audience?

  • Outside Groups

    • Adult education

    • Community events, elections, Scouts, Churches, etc. that may use school property for non-district functions

    • Maps & Directions

    • Contact info

Stuff for every site l.jpg

Needs Assessment

Stuff for every site

  • Contact informationGeneral contact on every page, area-specific on Contact page

  • Maps & directionsto 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.

Stuff for every site14 l.jpg

Needs Assessment

Stuff for every site

  • 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…

Definitions l.jpg

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.

Static site l.jpg

Static vs. Dynamic

Static site

  • 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

Dynamic site l.jpg

Static vs. Dynamic

Dynamic site

  • 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

Software options l.jpg

Static vs. Dynamic

Software options

  • Web design software

    • Macomedia Dreamweaver (Adobe)

    • Adobe GoLive

    • Microsoft FrontPage

  • Graphic software

    • Adobe Photoshop / ImageReady

    • Macromedia Fireworks

  • Other

    • Adobe Acrobat

    • Microsoft Office

    • Macromedia Flash

Who s job is it l.jpg

Maintenance Roles

Who’s job is it?

  • 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.)

Who s job is it20 l.jpg

Maintenance Roles

Who’s job is it?

  • 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

Research shows l.jpg

Layout & Design

Research shows…

  • 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

Research shows22 l.jpg

Layout & Design

Research shows…

  • 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

Good practices l.jpg

Layout & Design

Good Practices

  • Keep messages shortPeople don’t read sentences until reaching final destination or if lost

  • Use familiar clear terminology in navigation (“Student Council” or “Lion’s Den” depending on your audience)

  • Standard fonts (arial, verdana, helvetica, times)

  • Identify the page you’re on

Good practices24 l.jpg

Layout & Design

Good Practices

  • 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

Good practices25 l.jpg

Layout & Design

Good Practices

  • 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

Behind the scenes l.jpg

Layout & Design

Behind the scenes

  • 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

Formats l.jpg



  • Download time vs. quality

  • Formats

    • JPG (photos)

    • GIF (logos, text, icons)

    • Animated GIF (use sparingly if at all)

Jpg vs gif l.jpg



Best for logos





Best for photos

Working with images l.jpg


Working with images

  • 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

Understanding resolution l.jpg


Understanding Resolution

  • 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 monitor’s 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

Understanding resolution31 l.jpg


Understanding Resolution

  • Pixels are the “dots” that make up digital screen imagery

The downloads l.jpg

Resource Files

The Downloads

  • 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

Communication l.jpg

Buzz Technologies


  • Blog

  • Bulletin Board

  • Chat Room

  • Forum/Discussion Board

  • Digest

  • Chat Room

Subscription news l.jpg

Buzz Technologies

Subscription News

  • RSS = Really Simple Syndication

  • Listserv

    • Distribution Group vs Discussion Board

    • Spam filtering

    • Opt out

  • E-Newsletterwww.gomasa.org/EnergyWise/e2007-10/e2007-10.htmwww.gomasa.org/ldr/2007/ldr102607/ldr102607.htm

Multimedia l.jpg

Buzz Technologies


  • Streaming Video

  • Streaming Audio

  • Webinar

  • Podcast

  • Flash Animation

Authoring l.jpg

Buzz Technologies


  • HTML

  • Javascript / Applets

  • Dynamic / Data Driven (XML, DNN, PHP, ASP…)

  • CSS (Cascading Style Sheets)

  • Tables

  • Frames

  • Templates

  • Cookies

  • Pop-ups

Ada accessibility l.jpg

Buzz Technologies

ADA Accessibility

  • W3C 508 Compliance

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

2 part approach l.jpg


2-Part Approach

  • 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

Find help online l.jpg


Find Help Online

  • Right-click, View Source for source code

  • Web developers: www.schoolwires.com;www.foxbright.com;http://ltgi.net;

  • Classroom Management Systems:www.powerschool.com;www.finalsite.com; www.renweb.com;

Find help online40 l.jpg


Find Help Online

  • Listservs:www.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

Examples l.jpg



  • 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

James scofield l.jpg

Contact Me

James Scofield

  • James [email protected]

  • This presentation online:www.michiganedusource.org then go to Communication Tools