HTML5 and CSS3: Ready for Prime Time?

February 8, 2013 (Online)

We have been hearing about HTML5 for a number of years; CSS3 for just a bit less. It seems that new modules appear often and changes to modules even more frequently. How will we know when they are ready to use? Will the changes ever end so these recommendations become stable?

Yes – and soon! The feature set for HTML5 is now complete; with more testing, this W3C recommendation should become an official Web standard in 2014. As for CSS3, some modules are already Web standards and ready to be used; others in candidate status are very stable and should become Web standards soon.

But are they ready to be used now? Many say yes and have websites to support their claims. Join us as a few of your colleagues demonstrate that yes, both HTML5 and CSS3 can be used today to help you provide a device-independent, responsive website.

We are fortunate to have Christopher Schmitt, web designer, speaker, and author, to provide our keynote address. Christopher has been active on the Web since 1993, focusing on web design and standards. Well-known for titles such as the HTML Cookbook, the CSS Cookbook, and Adapting to Web Standards, he also is a member of the Web Standards Project and has founded Heat Vision, a small new media publishing and design firm. He will give us an overview of where we’ve been, where we are . . . and where we’re going!

Friday February 8, 2013
Times-CST	Session	Speaker(s)
9:00 a.m.	Keynote	Christopher Schmitt
10:00 a.m.	Making the Website More Accessible (show session description) Session Description: When the website was moved to a Content Management System, I updated our template to use HTML5 and CSS3. In particular, I used media queries to make the website responsive, and to fulfill some of the web accessibility guidelines. I also used some CSS3 to do some of the basic styling of the site, such as tables. Problems presented themselves, particularly with Internet Explorer. I spent a fair amount of time fixing IE issues, but left others to "degrade nicely".	Cynthia Ng
	Use HTML5 & CSS3 Today with Modernizr (show session description) Session Description: The biggest impediment to implementing HTML5 and CSS3 today is not the standards themselves, most of which are quite mature, but older browsers with mixed support. In this session, participants will learn how to employ the superlative Modernizr JavaScript library to feature detect and provide fallbacks when the new and shiny isn't available. They will avoid the evil patchwork of user-agent sniffing while progressively enhancing their sites. Web designers may not be able to control how many of their site's visitors use IE7, but they can responsibly serve up a good experience to everyone. Modernizr is the right tool for this job and makes it easy to fork a site's appearance based on browser capabilities.	Eric Phetteplace
11:00 a.m.	Welcome to the Machine: Making digital library collections findable by people and bots using SEO, schema.org, and HTML5 microdata (show session description) Session Description: In this session we’ll take a closer look at how new markup tags and additional classification vocabularies and semantic components can be applied to make digital collections more visible in search results and more readable by machines. The session will focus specifically on how these new technologies have lowered the barrier for web authors to build the semantic web. Primary questions to be answered during the session include: What is microdata? Where does microdata fit with regards to other approaches like RDFa and microformats? How can implementing microdata and schema.org aid in search engine optimization? What tools are available to test and troubleshoot microdata? How can you add the new markup to your pages? Come learn how to work with this new toolset, build smart markup for your web site, and make your content findable in search engine and semantic web settings.	Scott Young and Jason Clark
	Mobile or Immobile? (responsive design, cookies and kiosks) (show session description) Session Description: When recently tasked with simultaneously developing both mobile web and iPad kiosk interfaces we turned to responsive design, jQuery Mobile and some javascript trickery to make one web app both mobile and immobile. This session will talk about some of the user driven design process we used, the flexibility of jQM and how we used the canvas tag to power our book locator.	Bill Helman
12:00 p.m.	Lunch
1:00 p.m.	From Content to Code, How Responsive Design Supports the Core Business/OCLC (show session description) Session Description: OCLC has developed a new Web interface for the FirstSearch product using responsive design techniques. We have previewed this new interface with 19 institutions and in early 2013 we will go into open beta with the thousands of libraries currently subscribing to FirstSearch. We will describe the project from its beginning to the present and share what we have learned throughout the process. The majority of our presentation will focus on the technical aspects of implementing a mission-critical Web interface for desktop, tablet, and mobile devices using HTML5 and CSS3, including how we leveraged this emerging technology to meet the core principles of our business: performance and accessibility. We will discuss: The importance of understanding your content in order to build the semantic structure of pages and use microformats to extend your reach across the Web. WCAG and ARIA accessibility guidelines within our application. The use of progressive enhancement and CSS3 media queries to design interfaces that fit various device capabilities and viewports. How to support a rich user experience by using CSS3 hardware accelerations, as opposed to JavaScript, to improve transitions and animations. How to off-load data requests to improve performance.	Bob Robertson-Boyd, Hany Elemary, and Aaron Ganci
	From Bandwagon to Volkswagen: How to Transition to the Future Friendly Web (show session description) Session Description: More than any other institution, Libraries--forever dealing with budget crises and too-few web people to go around--need to weather device complexity and touch-enabled everything to meet patrons at their point of need - no longer just hands, but even web-ready refrigerators. Librarians need to be smart about their web presence or risk a loop of never-ending redesigns for phones and tablets and mini-tablets and netbooks and game consoles (etc). Mobile-first, responsive, future-friendly websites [keywords!] are a solution, but libraries cannot afford to trash huge, disparate websites and start from scratch. The Alvin Sherman Library, Research, and Information Technology Center made the #FFLY and mobile-first commitment with just a two-person web team and we are still transitioning from more than 150 static HTML files to a data-liberated, DRY presence that looks passable and performs well on any screen. Let me present our strategy--and how it could have been stronger--as well as tips, tricks, hacks, and tools for pursuing a future friendly web. We'll discuss progressive enhancement, client and server-side feature detection, CSS pre-processors like SASS (with Compass), modular styles, and object-oriented CSS.	Michael Schofield
2:00 p.m.	The Development of A Stacks Map Program Using the HTML5 <canvas> Tag (show session description) Session Description: At the 2012 LITA conference, Geoffrey Timms and Jeremy Brown from Mercer University gave a talk detailing the development of collection maps integrated with their OPAC. Based on their description, we became interested in developing a similar project. Because we were a much smaller library with fewer resources, we assessed how we might best develop a map to suit our own needs. Instead of using server-side scripting, we developed a dynamic map using Javascript and HTML5. The <canvas> tag allowed easy manipulation and creation of graphics, which made it possible to construct a map dynamically. This talk will cover the advantages and disadvantages of using HTML5 for this project, and detail the current state of the project.	Tamara Metz
	Transitioning to a Responsive Web Site (show session description) Session Description: The proliferation of web-capable devices has created a need for web sites that will work on any device. Responsive web sites meet that need, responding to viewport size and displaying content in a way that makes sense for that device. Responsive design depends on the use of CSS3 media queries. We have recently brought up a new, Bootstrap-based responsive web site at Ithaca College Library. This presentation will outline the process that we went through and the challenges that we faced along the way. We will discuss the use of media queries (both in general and in the context of Bootstrap), and the institutional and workflow issues involved in moving to a responsive paradigm.	Ron Gilmour
3:00 p.m.	Customizing KOHA with HTML5 and CSS3 (show session description) Session Description: Although the KOHA template still states that the pages are XHTML 1.0, the system preference allows for HTML5. There are very few sites implementing HTML5 at this point but there is nothing preventing it from being used. Along these lines the KOHA system preference also allows for CSS3. The use of CSS3 is more common and growing.	Ed Veal
	It's Not the Size of the Screen, It's How Responsive the Code (show session description) Session Description: From smartphones to tablets, our customers are accessing our sites from a large variety of devices. Is your website ready? Learn how to design and build an appealing functional website that responds and adapts to the patrons' demands. This session focuses on transforming websites so that a single design will adapt and respond to the user's device. Explore using Foundation, a CSS framework, to craft an appealing functional design to meet your patron's needs.	Roy Degler

Keynote Speaker: Christopher Schmitt, founder of Heat Vision, a small new media publishing and design firm

Speaker Bio: Christopher Schmitt is an award-winning Web designer and speaker who has been working with the Web since 1993, Christopher interned for both David Siegel and Lynda Weinman in the mid-90s while he was an undergraduate at Florida State University working on a fine arts degree with an emphasis on graphic design.

Afterward, he earned a master’s in communication for Interactive and New Communication Technologies while obtaining a graduate certificate in project management from FSU’s College of Communication.

In 2000, he led a team to victory in the Cool Site in a Day competition, where he and five other talented developers built a fully functional, well-designed Web site for a nonprofit organization in eight hours.

Author of numerous Web design and digital imaging books, including CSS Cookbook and Adapting to Web Standards: CSS and Ajax for Big Sites, Christopher has also written for New Architect Magazine, A List Apart, Digital Web, and Web Reference. At conferences such as Web Visions and SXSW, Christopher has given talks demonstrating the use and benefits of practical standards-based designs. He is the list moderator for Babble, a mailing list community devoted to advanced Web design and development topics.

As co-founder of Environments for Humans, he produces online and face-to-face conferences like AIGA In Control> and CSS Summit.

He is 6’7? and does not play professional basketball but wouldn’t mind a good game of chess.

Speaker: Roy Degler, Librarian, Digital Library Services Division at Oklahoma State University

Session Title: I'ts Not the Size of the Screen, It's How Responsive the Code

Session Description: From smartphones to tablets, our customers are accessing our sites from a large variety of devices. Is your website ready? Learn how to design and build an appealing functional website that responds and adapts to the patrons' demands. This session focuses on transforming websites so that a single design will adapt and respond to the user's device. Explore using Foundation, a CSS framework, to craft an appealing functional design to meet your patron's needs.

Standards covered: HTML5 and CSS3 (through the use of Responsive Grid-based Frameworks)

Speaker Bio: Roy Degler is a librarian in the Digital Library Services Division at Oklahoma State University. Roy Degler earned his BS in Special Education/Physical Education from New Mexico State University and his MLIS from the University of Oklahoma. Before becoming a Humanities and Social Sciences librarian at Oklahoma State University, he taught Special Education for 22 years and microcomputer technology classes at a community college for 10 years. His academic and professional interests include creative technological solutions in the library, online education, reference services, and information literacy. In addition to his computer and information knowledge, he is an avid foosball player.

Speaker: Ron Gilmour, Web Services Librarian, Ithaca College Library

Session Title: Transitioning to a Responsive Web Site

Session Description: The proliferation of web-capable devices has created a need for web sites that will work on any device. Responsive web sites meet that need, responding to viewport size and displaying content in a way that makes sense for that device. Responsive design depends on the use of CSS3 media queries. We have recently brought up a new, Bootstrap-based responsive web site at Ithaca College Library. This presentation will outline the process that we went through and the challenges that we faced along the way. We will discuss the use of media queries (both in general and in the context of Bootstrap), and the institutional and workflow issues involved in moving to a responsive paradigm.

Standards covered: CSS3

Speaker Bio: Ron Gilmour is Web Services Librarian at Ithaca College Library in upstate New York. His interests include web usability, responsive web design, and jQuery.

Speaker: Bill Helman, Digital Services Librarian, University of Baltimore

Session Title: Mobile or Immobile? (responsive design, cookies and kiosks)

Session Description: When recently tasked with simultaneously developing both mobile web and iPad kiosk interfaces we turned to responsive design, jQuery Mobile and some javascript trickery to make one web app both mobile and immobile. This session will talk about some of the user driven design process we used, the flexibility of jQM and how we used the canvas tag to power our book locator.

Standards covered: HTML5 - as used in jQM

Speaker Bio: An adventurer in the Zork sort of way, Bill is the Digital Services Librarian at the University of Baltimore and an urban cyclist. He is passionate about user-driven design, and his wife and son.

Speaker: Tamara Metz, Systems Librarian, Diné College

Session Title: The Development of A Stacks Map Program Using The HTML5 <canvas> Tag

Session Description: At the 2012 LITA conference, Geoffrey Timms and Jeremy Brown from Mercer University gave a talk detailing the development of collection maps integrated with their OPAC. Based on their description, we became interested in developing a similar project.

Because we were a much smaller library with fewer resources, we assessed how we might best develop a map to suit our own needs. Instead of using server-side scripting, we developed a dynamic map using Javascript and HTML5. The <canvas> tag allowed easy manipulation and creation of graphics, which made it possible to construct a map dynamically. This talk will cover the advantages and disadvantages of using HTML5 for this project, and detail the current state of the project.

Standards covered: HTML5

Speaker Bio: Tamara is the Systems Librarian at Diné College, which serves students on the Navajo Reservation in north-eastern Arizona and north-western New Mexico.

Speaker: Cynthia Ng, Web Services Librarian, Ryerson University Library and Archives

Session Title: Making the Website More Accessible

Session Description: When the website was moved to a Content Management System, I updated our template to use HTML5 and CSS3. In particular, I used media queries to make the website responsive, and to fulfill some of the web accessibility guidelines. I also used some CSS3 to do some of the basic styling of the site, such as tables. Problems presented themselves, particularly with Internet Explorer. I spent a fair amount of time fixing IE issues, but left others to "degrade nicely".

Standards covered: HTML5 and CSS3

Speaker Bio: Cynthia Ng is currently the Web Services Librarian at Ryerson University Library and Archives. Her focus is on integrating technology to best serve its users. Blog & Contact: http://about.me/cynthiang

Speaker: Eric Phetteplace, Emerging Technologies Librarian, Chesapeake College

Session Title: Use HTML5 & CSS3 Today with Modernizr

Session Description: The biggest impediment to implementing HTML5 and CSS3 today is not the standards themselves, most of which are quite mature, but older browsers with mixed support. In this session, participants will learn how to employ the superlative Modernizr JavaScript library to feature detect and provide fallbacks when the new and shiny isn't available. They will avoid the evil patchwork of user-agent sniffing while progressively enhancing their sites. Web designers may not be able to control how many of their site's visitors use IE7, but they can responsibly serve up a good experience to everyone. Modernizr is the right tool for this job and makes it easy to fork a site's appearance based on browser capabilities.

Standards covered: HTML5 and CSS3

Speaker Bio: Eric Phetteplace is the Emerging Technologies Librarian at Chesapeake College in Wye Mills, Maryland. He's passionate about community colleges, assessment, and the latest web standards (of course!).

Speakers: Bob Robertson-Boyd, Senior Product Analyst, OCLC; Hany Elemary, Software Engineer, OCLC; Aaron Ganci, Experience Designer, OCLC

Session Title: From Content to Code, How Responsive Design Supports the Core Business

portrait: Hany Elemary Session Description: OCLC has developed a new Web interface for the FirstSearch product using responsive design techniques. We have previewed this new interface with 19 institutions and in early 2013 we will go into open beta with the thousands of libraries currently subscribing to FirstSearch. We will describe the project from its beginning to the present and share what we have learned throughout the process. The majority of our presentation will focus on the technical aspects of implementing a mission-critical Web interface for desktop, tablet, and mobile devices using HTML5 and CSS3, including how we leveraged this emerging technology to meet the core principles of our business: performance and accessibility.

portrait: Aaron Ganci We will discuss:

The importance of understanding your content in order to build the semantic structure of pages and use microformats to extend your reach across the Web.
WCAG and ARIA accessibility guidelines within our application.
The use of progressive enhancement and CSS3 media queries to design interfaces that fit various device capabilities and viewports.
How to support a rich user experience by using CSS3 hardware accelerations, as opposed to JavaScript, to improve transitions and animations.
How to off-load data requests to improve performance.

Standards covered: HTML5 and CSS3

Speaker: Michael Schofield, Librarian of Web Services, Alvin Sherman Library, Research, and Information Technology Center, Nova Southeastern University

Session Title: From Bandwagon to Volkswagen: How to Transition to the Future Friendly Web

Session Description: More than any other institution, Libraries--forever dealing with budget crises and too-few web people to go around--need to weather device complexity and touch-enabled everything to meet patrons at their point of need - no longer just hands, but even web-ready refrigerators. Librarians need to be smart about their web presence or risk a loop of never-ending redesigns for phones and tablets and mini-tablets and netbooks and game consoles (etc). Mobile-first, responsive, future-friendly websites [keywords!] are a solution, but libraries cannot afford to trash huge, disparate websites and start from scratch.

The Alvin Sherman Library, Research, and Information Technology Center made the #FFLY and mobile-first commitment with just a two-person web team and we are still transitioning from more than 150 static HTML files to a data-liberated, DRY presence that looks passable and performs well on any screen. Let me present our strategy--and how it could have been stronger--as well as tips, tricks, hacks, and tools for pursuing a future friendly web. We'll discuss progressive enhancement, client and server-side feature detection, CSS pre-processors like SASS (with Compass), modular styles, and object-oriented CSS.

Standards covered: Mostly CSS3

Speaker Bio: An occasionally irreverent but well-meaning Front-End Librarian, mobile-first evangelist, sciFi enthusiast, optimistic futurist (the singularity!), and gamer. I am the Librarian of Web Services at the Alvin Sherman Library, Research, and Information Technology Center in Ft. Lauderdale, Florida, and I write about the web and libraries at www.ns4lib.com.

Speaker: Ed Veal - Development Support Specialist specializing in KOHA OPAC customization, Bywater Solutions

Session Title: Customizing KOHA with HTML5 and CSS3

Session Description: Although the KOHA template still states that the pages are XHTML 1.0, the system preference allows for HTML5. There are very few sites implementing HTML5 at this point but there is nothing preventing it from being used. Along these lines the KOHA system preference also allows for CSS3. The use of CSS3 is more common and growing.

Standards covered: HTML5 and CSS3

Speaker Bio: Ed has spent the last 20 years serving libraries, both public and academic, technical and non-technical. He started his career within the Lubbock Public library circulation department and transitioned to serve as their SirsiDynix Unicorn (Symphony) systems administrator, a position he held for 10 years. Ed then moved to the Texas Tech University Libraries to supervise the staff IT Support desk. Ed is currently serving as Development Support Specialist specializing in KOHA OPAC customization.

Speakers: Scott Young, Digital Initiatives Librarian, Montana State University Library and Jason Clark, Head of Digital Access and Web Services, Montana State University Library

Session Description: In this session we’ll take a closer look at how new markup tags and additional classification vocabularies and semantic components can be applied to make digital collections more visible in search results and more readable by machines. The session will focus specifically on how these new technologies have lowered the barrier for web authors to build the semantic web. Primary questions to be answered during the session include:
portrait: Jason Clark

What is microdata?
Where does microdata fit with regards to other approaches like RDFa and microformats?
How can implementing microdata and schema.org aid in search engine optimization?
What tools are available to test and troubleshoot microdata?
How can you add the new markup to your pages?

Come learn how to work with this new toolset, build smart markup for your web site, and make your content findable in search engine and semantic web settings.

You are here

HTML5 and CSS3: Ready for Prime Time?