iwmw 2004: implementing web standards across the institution - trials and tribulations of a redesign...
Post on 14-Feb-2017
106 Views
Preview:
TRANSCRIPT
Date or reference
Implementing Web Standards across the institution:Trials and tribulations of a redesignPatrick H. Lauke, Web Editor, University of Salford
Institutional Web Management Workshop / Birmingham - July 2004
IWMW2004 / Birmingham 2
Workshop programme
Time Topic16: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 experienceQuestions
16:50 Exercise 2: Implementing web standards – identifying common problems and possible solutionsReport backFinal discussions and conclusion
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
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
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!)
IWMW2004 / Birmingham 7
Case study: trials and tribulations of a redesign – the Salford experience
“How we got from there…
IWMW2004 / Birmingham 8
… to here”
Case study: trials and tribulations of a redesign – the Salford experience (cont.)
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)
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?”
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
IWMW2004 / Birmingham 12
Case study: problems with the site (cont.)
• Pages didn’t print well• Need for “printer friendly”
versions
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…
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?
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”
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)
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)
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
IWMW2004 / Birmingham 19
Case study: approach - template
Ideal situation:1. Create page structure2. Style the structure
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
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
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?
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)
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
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”
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
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)
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
IWMW2004 / Birmingham 29
Case study: does the design solve original problems? (cont.)
• No need for “printer friendly” pages (print stylesheet)
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”
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
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)?
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…
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
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…
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)
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
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
IWMW2004 / Birmingham 40
Contact
Patrick H. Lauke
Web EditorMarketing & CommunicationsExternal Relations DivisionUniversity of Salford
E-mail: p.h.lauke@salford.ac.ukWeb: http://www.salford.ac.uk
Personal site (on web standards, css, experimental techniques,etc):http://www.splintered.co.uk
top related