Upload
charla-white
View
212
Download
0
Embed Size (px)
Citation preview
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 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 experienceQuestions
16:50 Exercise 2: Implementing web standards – identifying common problems and possible solutions
Report back
Final 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 5
Why are you here?
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 structure
2. 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 33
That was easy…
…now for the hard part!
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 Editor
Marketing & Communications
External Relations Division
University of Salford
E-mail: [email protected]
Web: http://www.salford.ac.uk
Personal site (on web standards, css, experimental techniques,etc):
http://www.splintered.co.uk