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 Publ
isher Project Management Website
Planning Website Production Website
Design Scripting Database Design/Programming
Brian Vogt - Web Publisher Database
Design/Programming Website Planning Website
Production Scripting
Rich Burmeister - Web Graphics Website 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 Onli
ne maps creation E-news creation, distribution an
d list management Video editing, processing and d
istribution PDF creation, editing and distributio
n Data munging
5
How we do it
Determine client needs, project scope and
timeline Gather and analyze client materials Pro
vide proposal and cost estimate
Build outline / planning document for new website
or database Hire writer, illustrator, photographe
r (as needed) Hire designer based on project spec
ifics 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, prov
ide 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 conte
nt 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 cli
ent), a mouse, Mt. Rainier or the Space Needle on
the homepage
7
Working with Designers
8
Working with Designers Communicating the Limitati
ons without Lowering Expectations
Web realities
Designer priorities
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 Ta
ggers
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 bod
y 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 possib
le - difficult to style these out
Do not design in moving or disorienting
navigation effects No designer fonts in menu flyo
uts, form fields and other interactive items
Avoid dark backgrounds except against large
bright type Layouts Conventional always works, m
aybe 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 clie
nt 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 impr
ove 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 clien
t 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 deve
lop alternative layouts if budget allows. Clarify
with client accessibility issues.
15
Working with Designers Accessibility Red Flags
Design-Font Headers / Titles SOLUTION Header
s 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 CSS Compliant Code
Life in Slop Code / Tables
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 i
n Dreamweaver or other WYSIWYG program. Easy to
read COSTLY - Clients will pay more money for dev
elopment of CSS compliant templates
GREAT CODE - Presentation and content separate.
Controllable structure. MAINTENANCE - much less w
ork to update presentation code
ACCESSIBILITY - with work, very good
EXPERT - Ive 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 HT
ML 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 consu
ming 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, templat
e building and site production as distinct
processes and quote them separately on estimates.
Determine development roles COLLABORATE closely w
ith 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 clients 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, CSSEd
it) 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 ass
ist 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!)
Dont 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 ,
, ,
/ tags Close open tags (,

) Strip out in
line styles throughout site content, build-up
style sheet Add alt tags to images Correct page
structure where possible Build accessible navigat
ion 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 / st
ructure / hierarchy Use longdesc to describe ch
arts, 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 fo
nts, spacing to allow scaling Add text descriptio
ns 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 (P
C)
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 W
YSIWYG software, usually Dreamweaver
Suggest that client receive training if they are
new to web publishing Free 1 hour training sessio
n to setup site in software (by phone or in
person) If possible, provide a copy of the site o
n CD for the client Identify pages on the site th
at 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 Bad
The Good
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 prese
ntation code in content (, )
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 b
y separate files CSS, includes, Javascript
29
Sample Sites
Life Sciences Discovery Fundhttp//www.lsdfa.org/
Office of Multicultural Affairshttp//depts.was
hington.edu/omca/dev/ University of Washington Po
licy Directoryhttps//wwwudev.cac.washington.edu/
admin/rulesnew Diabetes Endocrinology Research Ce
nterhttp//depts.washington.edu/diabetes
National Alzheimers Coordinating
Centerhttp//www.alz.washington.edu
Oncotalkhttp//staff.washington.edu/bmeister/honk
ytonk/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 Alzheimers Coordinating Ce
nter
34
Sample Sites OncoTalk