UNIVERSITY OF WASHINGTON

1. UNIVERSITY OF WASHINGTON Publications Services - Web Publishing Design, Budgets and Accessibility - Making it Work

2. Who is Web Publishing?

3. Cast of characters • Kathy Hoggan - Director of Creative Services, Publications Services • Nigel Heinsius - Web PublisherProject Management Website Planning Website Production Website Design Scripting Database Design/Programming • Brian Vogt - Web PublisherDatabase Design/Programming Website Planning Website Production Scripting • Rich Burmeister - Web GraphicsWebsite Design and Graphics Website Planning Website Production Scripting Online Maps Production

4. Stuff we do • Customer service / problem solving • Information restructuring and website planning • Website design • Website templating and production • Database design, programming and management • Web application development • Website maintenance • Online maps creation • E-news creation, distribution and list management • Video editing, processing and distribution • PDF creation, editing and distribution • Data “munging”

5. How we do it Determine client needs, project scope and timeline Gather and analyze client materials Provide proposal and cost estimate Build outline / planning document for new website or database Hire writer, illustrator, photographer (as needed) Hire designer based on project specifics Begin database design process (as needed) Build website templates, make revisions Produce website with provided content Import and integrate database-driven content Client testing and revisions Website launch, provide maintenance option

6. What do they usually ask for? In this order: A website that is professionally designed A website that is easy to use and “makes sense” A website that is affordable A website that they can maintain A website that provides unique content A website that is accessible, up to standards A website that performs tasks online (forms, apps) A website that has a picture of me (the client), a mouse, Mt. Rainier or the Space Needle on the homepage

7. Working with Designers

8. Working with Designers Communicating the Limitations without Lowering Expectations Designer priorities: Web realities: • Typography - Different typefaces convey different messages. Hundreds to choose! Kerning! • Composition - Designers will spend hours composing elements for a fixed space • Color - Painstaking time is devoted to picking the right Pantone color and checking color on the press • Photography - Can make or break a project • Typography - Limited selection of typefaces. Some spacial control but rudimentary tools • Composition - Can control width of a page, but total composition based on window size • Color - Different monitors, different color!! Can provide consistent color combinations • Photography - Hey, we can make it happen for you!

9. Working with Designers Tips for Designers from Taggers • Keep the layout simple and uncluttered, one/two focal points per page • Keep navigation and headers large and easy-to-read • Web-friendly fonts in body copy for the most part • Do not obscure text with imagery or excessive color shifts • Do not alter the layouts from page to page, site title always present • Keep navigation near the top of the page, do not move main navigation • Include page footers, “Back to Top” (I always have to add these!) • Avoid fancy borders if possible - difficult to style these out • Do not design in “moving” or disorienting navigation effects • No designer fonts in menu flyouts, form fields and other interactive items • Avoid dark backgrounds except against large bright type • Layouts: Conventional always works, maybe sad but true

10. Working with Designers Accessibility Red Flags Image Backgrounds: SOLUTION: Work with client and designer to alter design if possible. Provide a screened background for important content.

11. Working with Designers Accessibility Red Flags Reversed Backgrounds: SOLUTION: Work with client and designer to develop alternate designs if budget allows.

12. Working with Designers Accessibility Red Flags Unconventional Navigation/Hierarchy: SOLUTION: Work with client and designer to improve hierarchy and size of navigation within overall design. Insist on core navigation appearing in top half of page.

13. Working with Designers Accessibility Red Flags Graphic-Based Menus: SOLUTION: Work with client and designer to alter design if possible. Add text to navigation when possible. Insert additional navigation type-based menu.

14. Working with Designers Accessibility Red Flags Unconventional Layouts / Structure: SOLUTION: Work with client and designer to develop alternative layouts if budget allows. Clarify with client accessibility issues.

15. Working with Designers Accessibility Red Flags Design-Font Headers / Titles: SOLUTION: Headers convey hierarchy in HTML. Using graphics-based headers will remove page hierarchy. Compromise with text-based headers.

16. Building CSS Templates and Pages

17. Building CSS Templates and Pages Life in Slop Code / Tables Life in CSS Compliant Code • NOVICE - still learning the work-arounds and hacks, dealing with new browsers • SLOW - building layouts is time consuming, like rolling the dice, then tweak • CLIENTS - Can work in Dreamweaver or other WYSIWYG program. Easy to read • COSTLY - Clients will pay more money for development of CSS compliant templates • GREAT CODE - Presentation and content separate. Controllable structure. • MAINTENANCE - much less work to update presentation code • ACCESSIBILITY - with work, very good • EXPERT - I’ve worked hard to become expert at building slop code templates!! • FAST - building templates is much faster in slop code • CLIENTS - More likely to be familiar with HTML slop than structured CSS layouts • CHEAPER - it is less expensive for us to build slop code because we are faster • CRAP CODE - Presentation and content bound up together. Bad structure. • MAINTENANCE - Time consuming to update presentation of sites built in slop • ACCESSIBILITY - often terrible

18. Building CSS Templates and Pages Our Challenges • Design-heavy templates ensure that the battle with browser incompatibility, especially positioning quirks, is fought everyday. • Clients want design! design! design! on very limited budgets. Design can eat up 50% of project budget • Technical compromises do not sit well with designers and clients and can further slow a project as it may go back to the drawing board • Long-time clients do not fully understand why additional resources may be needed to produce code up to standards

19. Building CSS Templates and Pages Solutions - Planning • CLARIFY with clients the need for the resources necessary to build compliant templates and rework their codebase • IDENTIFY phases of design, template building and site production as distinct processes and quote them separately on estimates. Determine development roles • COLLABORATE closely with the designer during the design phase to nip accessibility and technical problems in the bud • ALTERNATIVES for clients unable to afford site development - we build template, client builds out site content with our assistance • STANDARDIZE - Determine a client’s willingness to utilize a standard layouts and conventions before project goes into design. Use existing templates if possible

20. Building CSS Templates and Pages Solutions - Development Tools • Utilize style sheet templates as building blocks • Utilize standard format templates for common layouts • Use CSS development programs (Coda, CSSEdit) to initiate style sheets creation • Use handy browser plug-ins like Web Developer for Firefox to deconstruct templates/pages during development • Leverage server technologies that assist in further separating content from presentation (SSI, database, etc.) • Use “page styles” CSS to developalternate page designs for clients to view My Friend

21. Building CSS Templates and Pages Solutions - Working with Tight Budgets (last week I redesigned and built a site for $500!) • Don’t use images. Or ask people if you can use theirs for free - usually they say yes! • Get a designer to assist you with “over the shoulder” consultations when they have free time • Convince the client to use a standard layout or previously developed template when possible + $500

22. Building CSS Templates and Pages Solutions - The “Just Re-Template It, Dummy!” Project Take Steps to Move Towards Extensibility: • Use reg-ex scripts to clean out “Word” HTML (font and span tags) • Use reg-ex to lower-case tags and attributes • Correct <img />, <br />, <link />, <hr/> tags • Close open tags (<p>, <li>) • Strip out inline styles throughout site content, build-up style sheet • Add alt tags to images • Correct page structure where possible • Build accessible navigation if necessary (e.g. for Flash-based) • Remove frames and build new pages as necessary • Scripts to encased CDATA

23. Building CSS Templates and Pages Basic Accessibility Checklist • Navigational and display images use descriptive ALT tags • ALT tags on image maps, use client-side only if possible • Fix pages with bad headings / structure / hierarchy • Use “longdesc” to describe charts, graphs and other important visual content • Analyze tables (especially big ones) to make sure they are readable. Simplify table layouts. Insert descriptive text • Convert from “px” to “em” for fonts, spacing to allow scaling • Add text descriptions for audio, video and Flash • Remove “click heres” from link text (clients love these?!?!)

24. Building CSS Templates and Pages Browser Testing • Firefox (PC and Mac) • Internet Explorer 6 and 7 (PC) • Safari (Mac) • Lynx (Unix)

25. Building CSS Templates and Pages Accessibility Evaluation • Remove CSS and check structure of template • CSS validation (W3C) - fix all problems • HTML validation (W3C) - fix major issues / others as budget allows • View template in Lynx

26. Handing Off to Clients

27. Handing Off to Clients Setup / Education • Make sure up front that client is aware that they will be receiving standards-based templates built with CSS • Make sure client has latest version of WYSIWYG software, usually Dreamweaver • Suggest that client receive training if they are new to web publishing • Free 1 hour training session to setup site in software (by phone or in person) • If possible, provide a copy of the site on CD for the client • Identify pages on the site that are server-parsed that should be managed by a developer. Install web DB front end for edits

28. Handing Off to Clients Client-Managed Site The Good: The Bad: • Standards-based templates are better because content is separate from presentation. Clients should concentrate on content • Clients can easily change colors, fonts, images in the style sheet (which is what they like to do!) • Software, training and support is readily available to client at UW • Inexperienced clients will eventually compromise a website • Clients are likely to reintroduce presentation code in content (<strong>, <em>) • Clients are unlikely to do browser testing when creating new pages and layouts • Clients often remove server-parsed code and repost standard HTML • Clients sometimes confused by separate files: CSS, includes, Javascript

29. Sample Sites • Life Sciences Discovery Fundhttp://www.lsdfa.org/ • Office of Multicultural Affairshttp://depts.washington.edu/omca/dev/ • University of Washington Policy Directoryhttps://wwwudev.cac.washington.edu/admin/rulesnew • Diabetes Endocrinology Research Centerhttp://depts.washington.edu/diabetes • National Alzheimer’s Coordinating Centerhttp://www.alz.washington.edu • Oncotalkhttp://staff.washington.edu/bmeister/honkytonk/content.html

30. Sample Sites Life Sciences Discovery Fund

31. Sample Sites Office of Multicultural Affairs

32. Sample Sites UW Policy Directory

33. Sample Sites National Alzheimer’s Coordinating Center

34. Sample Sites OncoTalk