Web Standards at the
Lawrence Journal-World

Simon Willison

21st January 2005

The Lawrence Journal-World?

Local newspaper for Lawrence, a small town in Kansas
Award winning collection of web sites:
- www.lawrence.com
- www.ljworld.com
- www.6newslawrence.com
- www.kusports.com (still tag soup)
Small team: 1 designer, 2 programmers, 3-5 content producers

Awards:
- 2004 Lawrence.com named best entertainment site in the nation Newspaper Association of America.
- 2003 Best overall newspaper Internet service (LJWorld.com); Best Internet news service (LJWorld.com); Best Internet sports service (KUsports.com; Best Internet entertainment service (Lawrence.com) - Editor & Publisher and Mediaweek magazines.
- 2003 KUsports.com named best sports site in the nation; the Lawrence Journal-World was the only newspaper in the nation to be a finalist in every single Digital Edge category - Newspaper Association of America.

Web standards we use

HTML 4.01
- Best browser support
- More forgiving of mistakes
CSS
- As much presentational information as is practical
XHTML
- Ideal for storing content
- All content in our database is marked up using XML...
- ... which means we can use XML tools to process it

You don't have to use XHTML to be "standards compliant" - HTML 4 is supported by every browser under the sun, doesn't have any complicated mime-type issues, doesn't introduce unexpected JavaScript difficulties and won't cause your site not to render if a typo slips in to production code.

The learning curve

www.6newslawrence.com/weather/
↓
www.6newslawrence.com
↓
www.ljworld.com
↓
www.lawrence.com

The weather site

6newslawrence.com/weather/

The weather site (structure)

6newslawrence.com/weather/ with outlined divs

The weather site (no CSS)

6newslawrence.com/weather/ with no CSS

www.6newslawrence.com

6newslawrence.com

www.6newslawrence.com (structure)

6newslawrence.com with outlined divs

www.6newslawrence.com (no CSS)

6newslawrence.com with no CSS

www.ljworld.com (old)

ljworld.com before redesign

www.ljworld.com (new)

ljworld.com now

www.ljworld.com (topography)

ljworld.com topography

www.ljworld.com (no CSS)

ljworld.com with no CSS

www.ljworld.com page weight

Before:
- Total Code Weight: 44330 bytes
- Content Weight: 6323 bytes
- Percent Markup: 84%
- Percent Content: 16%
After:
- Total Code Weight: 27056 bytes
- Content Weight: 6399 bytes
- Percent Markup: 76%
- Percent Content: 24%
That's a 39% reduction in page weight

www.lawrence.com (old)

lawrence.com before redesign

www.lawrence.com (new)

lawrence.com now

www.lawrence.com page weight

Before:
- Total Code Weight: 42254 bytes
- Content Weight: 4549 bytes
- Percent Markup: 89%
- Percent Content: 11%
After:
- Total Code Weight: 33094 bytes
- Content Weight: 6254 bytes
- Percent Markup: 81%
- Percent Content: 19%
That's a 22% reduction in page weight

Benefits of... CSS

Reduced page size = less bandwidth, better loading times
Rules based design means...
- Visual consistency: it's easy to create a consistent brand
Reduces the amount of template fiddling needed for new sites
- Instead of tweaking dozens of templates on a new site...
- ... change on CSS file that affects all of them
- This is a real benefit when you're redeploying a CMS

Benefits of... XHTML

For serving pages... not a lot
For storing content... plenty
- You can "look inside" the content; it's no longer a blob of text
- Content can be easily processed using XML tools
- Example: moving from our old CMS to our new one is seamless
- Compare that to cleaning up 130,000 pages of invalid HTML
XHTML mobile: mobile.lawrence.com

Lessons learnt

CSS is not a silver bullet
- Complete separation of content from presentation isn't possible yet - at least not on the client-side
- You still need intelligent server-side code
Start small
- Each project we took on taught us valuable lessons for the next
- By slowly increasing the size of the sites we tackled we managed to minimise the affect of the problems we faced
CSS really isn't that hard, provided you understand
- Margins
- Floats
- and the horrible things Internet Explorer can do to them
The more important someone is, the greater the chance that they'll be running an obscure browser
- Our boss ran IE5/Mac
- His boss ran Mozilla with the text size set to 200%

That's all, folks

http://simon.incutio.com/slides/2005/bbc/
Credits:
- Site designs: Dan Cox <dcox@ljworld.com>
- Presentation software: s5 <http://www.meyerweb.com/eric/tools/s5/>
Any questions?

Web Standards at the Lawrence Journal-World