slide1 l.
Skip this Video
Loading SlideShow in 5 Seconds..
Download Presentation

Loading in 2 Seconds...

play fullscreen
1 / 34


  • Uploaded on

UNIVERSITY OF WASHINGTON Publications Services - Web Publishing Design, Budgets and Accessibility - Making it Work Who is Web Publishing? Cast of characters Kathy Hoggan - Director of Creative Services, Publications Services

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 'UNIVERSITY OF WASHINGTON' - Gabriel

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


Publications Services - Web Publishing

Design, Budgets and Accessibility - Making it Work


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

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”

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


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


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!

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

Working with Designers

Accessibility Red Flags

Image Backgrounds:


Work with client and designer to alter design if possible. Provide a screened background for important content.


Working with Designers

Accessibility Red Flags

Reversed Backgrounds:


Work with client and designer to develop alternate designs if budget allows.


Working with Designers

Accessibility Red Flags

Unconventional Navigation/Hierarchy:


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.


Working with Designers

Accessibility Red Flags

Graphic-Based Menus:


Work with client and designer to alter design if possible. Add text to navigation when possible. Insert additional navigation type-based menu.


Working with Designers

Accessibility Red Flags

Unconventional Layouts / Structure:


Work with client and designer to develop alternative layouts if budget allows. Clarify with client accessibility issues.


Working with Designers

Accessibility Red Flags

Design-Font Headers / Titles:


Headers convey hierarchy in HTML. Using graphics-based headers will remove page hierarchy.

Compromise with text-based headers.


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

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

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

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


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


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

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?!?!)

Building CSS Templates and Pages

Browser Testing

  • Firefox (PC and Mac)
  • Internet Explorer 6 and 7 (PC)
  • Safari (Mac)
  • Lynx (Unix)

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

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

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

Sample Sites

  • Life Sciences Discovery Fund
  • Office of Multicultural Affairs
  • University of Washington Policy Directory
  • Diabetes Endocrinology Research Center
  • National Alzheimer’s Coordinating Center
  • Oncotalk

Sample Sites

Life Sciences Discovery Fund


Sample Sites

Office of Multicultural Affairs


Sample Sites

UW Policy Directory


Sample Sites

National Alzheimer’s Coordinating Center


Sample Sites