J.Stam's HTML5 & CSS3 Development Sandbox

Proof of Concepts

Introduction

The following is a list of examples and prototypes that could be used to further enhance and optimize web applications using the latest HTML, CSS and JavaScript coding practices. In general web applications are moving away from the old paradigm of information retrieval, in which users are expecting to seek information using search engines and links. Using standard and descriptive mark-up throughout web applications will have the benefit of delivering consistent output across platforms and devices. That, along with the extended capabilities of HTML5 to deliver media, animation and local storage, make HTML5, CSS3 & jQuery a great choice for portable applications.

HTML5 & CSS3 Techniques

HTML5 brings a new level of semantic markup to HTML. Combined with JavaScript, CSS3 and new browser-based communication protocols it allows for feature-rich web applications never seen before.

This page itself uses HTML5 elements (header, nav & footer) as well as a number of CSS3 effects. At any time you may view the page source to see in-code comments and documentation justifying and explaining many of the techniques used. Another excellent example of the potential of HTML5 & CSS3 can be found here: http://desandro.com/articles/opera-logo-css/, where the developer recreated a replica of the Opera browser logo.

Graceful Degradation

Graceful degradation means that your web application continues to operate even when viewed with less-than-optimal software in which advanced effects don't work (e.g. no CSS in Netscape 3, no images in speech browsers). Add whatever special effects you like, just make sure the web application is usable without them. Usable is defined as the ability to view and/or perform foundational design and/or functionality which could include viewing main branding, accessing main navigation, viewing main page content, etc.

Specifying fallbacks and default interface styles for legacy (but still supported) browsers is key to maintaining successful degradation. It's the developer's responsibility to know which browsers and operating systems the web application targets for primary support as well as the legacy browsers that the application maintains a secondary support status. See the Opera logo link in the section above for an example of graceful degradation.

This file uses IE conditional comments to append a class name to the BODY element that allows for IE exceptions using CSS specificity. Take a closer look at the markup and in-line documentation in the source code.

Lighter Application Load

There are new styling techniques available in CSS3 that could significantly lighten the interface load on a web application, including rounded corners (border radius), gradient (linear and radial) image backgrounds, drop shadows (box shadow), RGB colors and alpha transparencies. Not only can many of these techniques cut down on physical file sizes (due to less markup, sprites with fewer images, etc.) but they also save HTTP requests. The web browser no long needs to go get background images from the server if CSS renders them itself. It also lets the client render the graphics which should assist in the battle for resolution independence.

Future Enhancements

Web applications should embrace the flexibility of the web rather than trying to set boundaries for the available technologies. If we continue to wait for older browsers to become outdated we sell ourselves and web application's potential short. If we can adjust our way of thinking and accept that code will not render the same in every browser we'll be able to produce an overall improved user experience while theoretically doing less work (because we don't need the many hacks and workarounds we've used before).

Functionality Examples

The follow examples show some of the latest JavaScript and CSS libraries and techniques that could be utilized to enhance a user interface in our web applications.

Tempo JS

This is an example of the JSON rendering engine, Tempo, a nice HTML-templating, JSON data mapper. The example below is pulling a live feed from twitter searching for the term "html5 css3".

Twitter Search for "html5 css3"

{{from_user}}

{{text}}
Sorry, but you sort of need JavaScript for this one!

Google Web Fonts

Google (and similar services like TypeKit) offer a savvy JS solution for using non-standard fonts in websites and applications. For more info check out http://www.google.com/webfonts.

The headings and quote (at the bottom of the page) are examples of this service.

Other Useful JS Libraries and Tools

Smashing Magazine's Useful JavaScript and jQuery Tools, Libraries, Plugins article (updated 2011-04-07) is a nice list of recent resources including Tempo and SlickGrid that could provide benefits to any web UI.

Resources & Inspiration

"Ever tried. Ever failed. No matter. Try again. Fail again. Fail better."
- Samuel Beckett