Daniel M. Frommelt from The University of Wisconsin – Platteville shared his experience in converting his university website to web standards and gave a few very good tips on how to proceed in a session held yesterday at HighEdWebDev05 and titled “Conversion to Web Standards: Tips, Tricks, and Methods.”
After attending this session, Brian Phelps, who agreed to be our very-own correspondent at the conference, filed the following report.
You’re sold on the “Benefits of Web Standards”: reducing file size, minimizing bandwidth, generating printer-friendly pages, optimizing search engine placement, and achieving greater accessibility. Now learn how to take a common site and walk through the conversion. This presentation walks through the methods of rebuilding a site with XHTML and CSS. We will focus on the transition of a Web site that was built with a table structure and converted to a new structure using XHTML and CSS and focus on the benefits of Web standards: reduction of markup, separate CSS files to control design, printer-friendly CSS pages, and increased accessibility. We will also discuss how to optimize a site for search engines using semantic markup, plus some general tips and tricks for making the CSS layout behave in a more predictable manner among numerous browsers. Sample files will be made available for the participants to review.
Daniel described some of the standards affecting accessibility and the benefits of implementing accessible web pages. He demonstrated how, without altering the layout of a sample universities home page, he reduced the total HTTP requests from 51 to 25, and total size of the page from 113.3kb to 58kb.
Much of this was accomplished by putting images into the CSS, which is then cached by all browsers. HTML, which is fetched repeatedly with each HTTP get, was reduced to 8.9kb from 45kb, and HTML images were reduced to 25.2kb from 65kb.
He showed how he used advanced features of CSS to enhance accessibility, including image replacement and list items, to accomplish this feat. For example, he marked an H1 tag with a margin left of -999em, and added a background GIF in its place. He showed how to use list items for any time two or more like items are listed and how they could be successfully manipulated the home page to appear correctly in a browser and degrade successfully on devices liked PDAs, cell phones, and other readers.