slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Institutional Web Management Workshop / Birmingham - July 2004 PowerPoint Presentation
Download Presentation
Institutional Web Management Workshop / Birmingham - July 2004

Loading in 2 Seconds...

play fullscreen
1 / 40

Institutional Web Management Workshop / Birmingham - July 2004 - PowerPoint PPT Presentation


  • 112 Views
  • Uploaded on

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. Workshop programme. Workshop aims. At the end of the session participants will:

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Institutional Web Management Workshop / Birmingham - July 2004' - emmet


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide1

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

workshop aims
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
so why am i here
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
setting the scene what do we mean by web standards
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!)
case study trials and tribulations of a redesign the salford experience
Case study: trials and tribulations of a redesign – the Salford experience

“How we got from there…

case study trials and tribulations of a redesign the salford experience cont
Case study: trials and tribulations of a redesign – the Salford experience (cont.)

… to here”

case study background
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)
case study problems with the site
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?”
case study problems with the site cont
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
case study problems with the site cont1
Case study: problems with the site (cont.)
  • Pages didn’t print well
  • Need for “printer friendly” versions
case study problems with the site cont2
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…

case study fast forward 2 years
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:

  • Simply slap new facade on decrepit old building?
  • Make a fresh start, learning from past mistakes?
case study why web standards
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”
case study why xhtml specifically
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)
case study why abandon tables
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)
case study approach structure
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
case study approach template
Case study: approach - template

Ideal situation:

  • Create page structure
  • Style the structure
case study approach template page structure
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
case study approach template style
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
case study approach template style cont
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?

case study approach populating the template
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)
case study approach populating the template cont
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
case study approach let s get dynamic
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”
case study launch
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
case study does the design solve original problems
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)
case study does the design solve original problems cont
Case study: does the design solve original problems? (cont.)

Technical:

  • Separation content/presentation
  • “lighter” code (20%-30% saving or better)
  • Templates far easier
case study does the design solve original problems cont1
Case study: does the design solve original problems? (cont.)
  • No need for “printer friendly” pages (print stylesheet)
case study does the design solve original problems cont2
Case study: does the design solve original problems? (cont.)
  • No need for graphical buttons
  • Navigation now pure list of links: accessible, “spiderable”
case study problems experienced
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
case study what would i have done differently
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)?
that was easy
That was easy…

…now for the hard part!

hard part getting web authors to follow
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…

hard part approach
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
hard part approach cont
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…

hard part continuous qa
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)
conclusion
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
doing it for yourselves exercise
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
contact
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