1. Developing a Framework for Web Design LiteracyLink: Lessons Learned

2. LiteracyLink: Background  5-year Star Schools initiative, funded by U.S. Department of Education  Partners - NCAL, KET & PBS  Primary goal: to develop multimedia resources for adult education instructors & learners

3. NCAL’s Role  Develop online resource for adult learners that complements KET videos & workbooks l Workplace Essential Skills l GED  Develop online resource for adult educators l LitTeacher online classes l PeerLit l Practice Guides l Videoconferences

4. LiteracyLink: Development Challenges  Multimedia - coordinating partners’ efforts across video, online & print  Flexibility of web is positive & negative l Changes can be made (unlike KET’s video products & workbooks) l Changes *must* be made (evolving web requires constant upkeep)  Restricted technological capacity of many adult education programs (pressing the envelope without pressing it too far) - developing alternatives for low-end use

5. LiteracyLink: Development Challenges - Continued  Diverse audience (teachers & learners) - parallel construction of website  Range of technology experience among users - developing a system that will appeal to a range of users & won’t alienate people  Striking a balance between structure & flexibility  Striking a balance between community & autonomy/privacy  Creating opportunities for meaningful interactivity  Developing a collection of useful learning tools that will complement/enhance the LiteracyLink content

6. LiteracyLink: Development Challenges - Continued  Desire to develop a “language” of graphics - that reinforce but do not control meaning within the system  Limited staff on project  Basic logistics - coordinating production components (programmer, system designer, graphic designers, video consultants, text authors, experts/contributors, testers)

7. Development Tips - Grounding Questions  1. Who is your audience? What are their needs? Strengths? Limitations?  2. How would you describe your web project in three sentences or less?  3. Why are you pursuing this particular project over others? Why is it important?  4. How will it address users’ needs, reinforce their strengths and work with their limitations?

8. Practical Development Steps  1. Create Site Map - A Visual Representation l Include all site pages l Identify connections between pages l Clearly present/identify content on each page l Identify number of website pages – so you (or programmer) can build shell

9. Practical Development Steps - Continued  2. Draw Individual Pages l Sketch out what you want individual pages to look like (completely) l Keep these drawings organized according to your site map “headings” l Draw/draft specific images for individual pages

10. Practical Development Steps - Continued  3. Identify Special Features l Create a list of special features that your pages will need – bulletin boards, online chatting functions, video clips, etc. l Determine the creation order of these special features

11. Practical Development Steps - Continued  4. Keep Running List of Images Needed l Identify images (page by page) to be created l Identify “site-wide” icons, buttons and headers – like “Back,” “Help” and “Exit” buttons l Keep this list organized according to site map “headings” l If you hire outside consultants to create graphics, keep an itemized list of what you need – try to send consultants requests “in bulk.” (This itemized list will also come in handy if you or colleagues are charged with locating or developing graphics.) l In either case, describe in explicit detail what you want each image to look like – be sure to mention color/dimensions and explain how you plan to have images work together on a page. l Try to develop a reasonable timeline for acquiring these graphics. If you are working with consultants, be sure you discuss turn- around time as well as fees.

12. Practical Development Steps - Continued  5. Keep Running Prioritized To-Do List For Programmer l Have weekly or biweekly meetings with programmer and identify priority tasks l Keep list where programmer can refer to it easily – on the wall/on a calendar l Assess progress on itemized list regularly and shift focus as needed

13. Practical Development Steps - Continued  6. Develop Your Text l Create a list of all the text needed (for the different pages) l Remember your design – be sure that your text will fit into/complement the space that you’ve allotted l Save all page text in “plain text” format for conversion into valid html l Come up with a naming system that lets everyone know where these “plain text” files fall in the site map l For every page of text you write, you should at least consider creating complementary “Help” text l Remember to write text that will describe images and video – for users with older browsers and to ensure Bobby compliance

14. Practical Development Steps - Continued  7. Testing l Be specific about what you need tested – content/functionality l Allow 1-2 weeks for extensive testing of new site l Ask testers to print out all pages that they test and mark “problem spots” on those handouts l Be sure to build “fix-it” time into your design schedule

15. Practical Development Steps - Continued  8. Upkeep l Create a master list of areas within the site that require ongoing attention l Divide upkeep into different areas and delegate responsibility l Develop a basic maintenance schedule and plan regular updates (once a month, once every two months, etc.)

16. Practical Development Tips - Continued  Wrap-Up l Revisit grounding questions regularly l Maintain a working schedule l Post your work in a public arena l Strive for simplicity l Try to remain consistent - carry a few themes through the website l Delegate/collaborate & let contributors know how their work will be used l Test/conduct focus groups l Don’t forget upkeep!