Patrick H. Lauke - Implementing Web Standards across the institution: trials and tribulations of a redesign / Institutional Web Management Workshop IWMW / Birmingham / 28 July 2004

1. Date or reference
Implementing Web Standards across the institution:
Trials and tribulations of a redesign
Patrick H. Lauke, Web Editor, University of Salford
Institutional Web Management Workshop / Birmingham - July 2004

2. IWMW2004 / Birmingham 2
Workshop programme
Time Topic
16:00 Introduction to the workshop
16:05-16:10 Setting the scene: what do we mean by “web
standards”
16:10-16:50 Case study: trials and tribulations of a redesign –
the Salford experience
Questions
16:50 Exercise 2: Implementing web standards –
identifying common problems and possible
solutions
Report back
Final discussions and conclusion

3. IWMW2004 / Birmingham 3
Workshop 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

4. IWMW2004 / Birmingham 4
So 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, don’t have all the answers – simply a
method that worked for us
• Hoping to generate good discussion

5. IWMW2004 / Birmingham 5
Why are you here?

6. IWMW2004 / Birmingham 6
Setting 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!)

7. IWMW2004 / Birmingham 7
Case study: trials and tribulations of a
redesign – the Salford experience
“How we got from there…

8. IWMW2004 / Birmingham 8
… to here”
Case study: trials and tribulations of a
redesign – the Salford experience (cont.)

9. IWMW2004 / Birmingham 9
Case 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)

10. IWMW2004 / Birmingham 10
Case 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?”

11. IWMW2004 / Birmingham 11
Case 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

12. IWMW2004 / Birmingham 12
Case study: problems with the
site (cont.)
• Pages didn’t print well
• Need for “printer friendly”
versions

13. IWMW2004 / Birmingham 13
Case study: problems with the
site (cont.)
…and many more problems:
• graphical buttons
• dropdown navigation
(accessibility and “spiders”?)
In short: a mess.
But…we’ll keep it for a while.
Fixed some issues, but most problems remained…

14. IWMW2004 / Birmingham 14
Case 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:
a) Simply slap new facade on decrepit old
building?
b) Make a fresh start, learning from past mistakes?

15. IWMW2004 / Birmingham 15
Case 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”

16. IWMW2004 / Birmingham 16
Case 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)

17. IWMW2004 / Birmingham 17
Case 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)

18. IWMW2004 / Birmingham 18
Case 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

19. IWMW2004 / Birmingham 19
Case study: approach -
template
Ideal situation:
1. Create page structure
2. Style the structure

20. IWMW2004 / Birmingham 20
Case study: approach –
template page structure
• Concentrated on identifying “functional blocks”
– Branding (logo)
– Search box
– Navigation
– Breadcrumb trail
– Content
– Footer
• Tempting, but don’t 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

21. IWMW2004 / Birmingham 21
Case 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

22. IWMW2004 / Birmingham 22
Case 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?

23. IWMW2004 / Birmingham 23
Case 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)

24. IWMW2004 / Birmingham 24
Case 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

25. IWMW2004 / Birmingham 25
Case study: approach – let’s 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”

26. IWMW2004 / Birmingham 26
Case 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

27. IWMW2004 / Birmingham 27
Case 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)

28. IWMW2004 / Birmingham 28
Case study: does the design
solve original problems? (cont.)
Technical:
• Separation
content/presentation
• “lighter” code (20%-30%
saving or better)
• Templates far easier

29. IWMW2004 / Birmingham 29
Case study: does the design
solve original problems? (cont.)
• No need for “printer friendly” pages (print
stylesheet)

30. IWMW2004 / Birmingham 30
Case study: does the design
solve original problems? (cont.)
• No need for graphical buttons
• Navigation now pure list of links: accessible,
“spiderable”

31. IWMW2004 / Birmingham 31
Case 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

32. IWMW2004 / Birmingham 32
Case 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)?

33. IWMW2004 / Birmingham 33
That was easy…
…now for the hard part!

34. IWMW2004 / Birmingham 34
Hard 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 postcard…but in the meantime, this
is the approach we’re taking…

35. IWMW2004 / Birmingham 35
Hard 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

36. IWMW2004 / Birmingham 36
Hard 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…

37. IWMW2004 / Birmingham 37
Hard 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)

38. IWMW2004 / Birmingham 38
Conclusion
Brian Kelly: “People may be interested to know how
you managed to get your homepage to validate
as XHTML 1.0 Strict”
Hmmm…through hard work.
• No magic bullet
• steep initial learning curve
• “Paradigm shift”
• Continuous monitoring / QA

39. IWMW2004 / Birmingham 39
Doing 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

40. IWMW2004 / Birmingham 40
Contact
Patrick H. Lauke
Web Editor
Marketing & Communications
External Relations Division
University of Salford
E-mail: p.h.lauke@salford.ac.uk
Web: http://www.salford.ac.uk
Personal site (on web standards, css, experimental techniques,etc):
http://www.splintered.co.uk