Title: Implementing%20Web%20Standards%20across%20the%20institution:%20Trials%20and%20tribulations%20of%20a%20redesign%20Patrick%20H.%20Lauke,%20Web%20Editor,%20University%20of%20Salford
1Implementing Web Standards across the
institutionTrials and tribulations of a
redesignPatrick H. Lauke, Web Editor, University
of Salford
Institutional Web Management Workshop /
Birmingham - July 2004
2Workshop programme
Time Topic
1600 Introduction to the workshop
1605-1610 Setting the scene what do we mean by web standards
1610-1650 Case study trials and tribulations of a redesign the Salford experienceQuestions
1650 Exercise 2 Implementing web standards identifying common problems and possible solutions Report back
Final discussions and conclusion
3Workshop aims
- At the end of the session participants will
- Be familiar with web standards"
- Have gained an insight into the advantages of
web standards - Be aware of potential problems, and approaches to
resolve them
4So why am I here?
- Web Editor for University of Salford
- Small central team, 30 devolved web authors
- September 2003 University relaunched new web
standards based core site - A few trials and tribulations along the way
- Many web people considering move to web standards
- Here to share my experiences
- Not a guru, dont have all the answers simply a
method that worked for us - Hoping to generate good discussion
5Why are you here?
6Setting the scene what do we mean by web
standards
- Technical
- working to a common, agreed syntax (W3C spec)
- no proprietary markup - compatibility
- generating code that validates (so you can have
your little badge on the site?) - Ethos
- Return to basic principles HTML for content, CSS
for presentation - semantic/structural markup (no validator for
that!)
7Case study trials and tribulations of a redesign
the Salford experience
8Case study trials and tribulations of a redesign
the Salford experience (cont.)
9Case study background
- University website redesigned December 2000
- first effort by External Relations to bring
consistent look and feel - external design company
- happy to say I didn't do it! (started in January
2001)
10Case study problems with the site
- Purely from design point of view
- Compliant with CI, but tied to print campaign
- Dominant design feature in its own right
- Naff/Kitsch/insert expletive here
- Structurally confusing where am I?
11Case study problems with the site (cont.)
- Technical issues
- Cluttered code FONT, TABLE
- HTML not made for round corners more markup
to fake it - As result templates cumbersome
12Case study problems with the site (cont.)
- Pages didnt print well
- Need for printer friendly versions
13Case study problems with the site (cont.)
- and many more problems
- graphical buttons
- dropdown navigation(accessibility and
spiders?) - In short a mess.
- Butwell keep it for a while.
- Fixed some issues, but most problems remained
14Case study fast forward 2 years
- Beginning of 2003 University started CI review
- Tightening of lax guidelines, creation of new
ones - Web would need face lift
- Stricter rules for Faculties/Schools/etc adopt
the templates! - Do you
- Simply slap new facade on decrepit old building?
- Make a fresh start, learning from past mistakes?
15Case study why web standards?
- Nowadays web standards buzzword
- At the time just trying to follow best practices
- Separation of content/presentation
- Lighter code quicker download times
- Accessibility concerns (SENDA/DDA) making site
work in maximum number of browsers no
proprietary markup - What about next redesign?
- work smarter / web design on a shoestring
16Case study why XHTML specifically?
- Separation of content/presentation can be
achieved with HTML4.01 just the same - Requires personal discipline
- Stricter syntax for XHTML removes most/all
presentational markup - validation brings more
things to light - Future plans of CMS repurposing content XHTML
is XML, so simple tools available (XSLT)
17Case study why abandon tables?
- Syntax of XHTML still allows tables (rightly so)
- Ethos however tables for tabular data, not
layout - Using pure CSS driven layout increased
flexibility for future redesigns - Same page / different delivery channels (screen,
print, etc)
18Case study approach - structure
- tabula rasa start from scratch
- New development server
- Inventory of current content
- Working out new structure, discarding
old/redundant content - Initially, simply copied pages to new directory
structure
19Case study approach - template
- Ideal situation
- Create page structure
- Style the structure
20Case study approach template page structure
- Concentrated on identifying functional blocks
- Branding (logo)
- Search box
- Navigation
- Breadcrumb trail
- Content
- Footer
- Tempting, but dont think about what it looks
like!(however, think about order in which blocks
appear in code) - Directly translates to XHTML DIVs (or
appropriate block level elements FORM) - Try choosing most semantically appropriate
elements (e.g. navigation as list) - Validate
21Case study approach template style
- Creating stylesheet probably took longest
- Ideally, XHTML frozen
- However, occasional need to revisit XHTML
re-ordering elements, adding hooks for specific
styling
22Case study approach template style (cont.)
- Develop for most compliant, then work backwards
- From general to specific (e.g. rough block
position, before tackling padding/margin) - Validate
- What about old browsers?
23Case study approach populating the template
- Now bringing it all together
- Content from existing site extracted from
pages(sounds easier than it is find/replace,
retagging, etc) - Same process
- Create most appropriate XHTML
- Where necessary new page/section specific styles
- In theory simply pop it into the template
(plus few manual tweaks)
24Case study approach populating the template
(cont.)
- Relatively easy to create beautiful CSS driven
layouts with known, frozen content(cfr.
CSSZenGarden) - Real-world content offers interesting
challenges - Often requires revisiting content XHTML, or even
template XHTML/CSS
25Case study approach lets get dynamic
- Static pages converted, but not forgetting
database driven areas (e.g. news/events, course
finder) - Mostly simply updating server-side scripts
output - Databases containing badly formed HTML
- UPDATEing db tables after cleanup
- Solving problem at the root ensuring HTML data
well formed (if not valid) before committing to
database Editize and sanity checks
26Case study launch
- After final validation and browser testing
launched September 2003 - Set up redirections / rewrite rules on server for
new structure - Monitoring error logs / 404s
27Case study does the design solve original
problems?
- Design
- In line with tighter CI
- More neutral allows page-specific design
elements - Feedback professional / polished
- Less confusing for visitor (breadcrumbs, visible
navigation)
28Case study does the design solve original
problems? (cont.)
- Technical
- Separation content/presentation
- lighter code (20-30 saving or better)
- Templates far easier
29Case study does the design solve original
problems? (cont.)
- No need for printer friendly pages (print
stylesheet)
30Case study does the design solve original
problems? (cont.)
- No need for graphical buttons
- Navigation now pure list of links accessible,
spiderable
31Case study problems experienced
- Majority due to inexperience with XHTML/CSS
learning by doing - Choosing semantically most appropriate elements
not straightforward (but XHTML is flawed!) - Authoring tools still not good enough DW code
view, glorified text editor with FTP client - Flaky CSS support and browser bugs most annoying
- Testing on multiple platforms not always
possible Mac and different versions of IE
32Case study what would I have done differently?
- Learning XHTML/CSS while going along resulted in
frequent re-starts (now would probably take less
time) - Not using XHTML 1.0 Transitional, but straight to
Strict - Not gone far enough in terms of semantics
- Although minimal use of modularisation
(includes), would go further more includes,
template engine (SMARTY)?
33That was easy
34Hard part getting web authors to follow
- Redesign of core site was fairly easy single
developer - How to get 30 web authors, with varying skill
levels, to follow my lead? - Answers on a postcardbut in the meantime, this
is the approach were taking
35Hard part approach
- All sub-sites physically hosted on same server
- Created templates, based closely on core site
templates - Use of global includes for header
- Stick new web publishing guidelines, stricter
rules (plus teeth to enforce them) and best
practice recommendations - Carrot all imperative guidelines taken care of
automatically if web authors use templates
36Hard part approach (cont.)
- Education, education, education replace generic
how to use Dreamweaver with tailored staff dev
sessions - Web strategy ensuring Faculties/Schools/etc
recognise technical requirements of post, and
resource accordingly (still growing teeth to
enforce) - Any 3rd party supplier needs to adhere to
standards as fundamental requirement - Majority of sub-sites now transitioned to new
design, however this is not the end
37Hard part continuous QA
- But it was valid when I first created it
- Validation of XHTML/CSS as routine, second nature
- Making it as simple as possible URI based
validation, using right tools for the job - Automatic checks (based on server access logs)
and alerts (e.g. validator to RSS) - Any external data sources either fixed at
source, or run through filters (TIDY)
38Conclusion
- Brian Kelly People may be interested to know
how you managed to get your homepage to validate
as XHTML 1.0 Strict - Hmmmthrough hard work.
- No magic bullet
- steep initial learning curve
- Paradigm shift
- Continuous monitoring / QA
39Doing it for yourselves exercise
- Split into groups
- Identify problems of implementing web standards
in your own institutions - Discuss solutions/strategies to overcome them
- Feed back
40Contact
- Patrick H. Lauke
- Web Editor
- Marketing Communications
- External Relations Division
- University of Salford
- E-mail p.h.lauke_at_salford.ac.uk
- Web http//www.salford.ac.uk
- Personal site (on web standards, css,
experimental techniques,etc) - http//www.splintered.co.uk