RACHEL McCLUNG | 10.21.11
What sites employ HTML5 and CSS3 to effectively shape
the user experience, and how can we create interactive
content in a responsible way?
++ Visual designer with technical abilities
++ Overarching principles and practical applications
WHAT IS HTML5?
HTML5 is a language for structuring and presenting
content for the World Wide Web. It is the fifth revision of
the HTML standard and is still under development.1
WHAT IS CSS3?
Cascading Style Sheets is a style sheet language used
to describe the look and formatting of an HTML
document. CSS3 is the third specification of CSS and
is still under development.2
Ideal is to have a balance of
form and function to produce a
positive user experience.
The very start of the source code looks like this:
Previously, it was more verbose:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0
-webkit-box-shadow: 0px 0px 20px 2px #333;
-moz-box-shadow: 0px 0px 20px 2px #333;
box-shadow: 0px 0px 20px 2px #333;
340 313 293 141
Try it out: http://html5test.com4
++ There are a lot of amazing sample sites out there that
push the boundaries of HTML5 and CSS3.
++ Some aren’t practical for day-to-day work.
++ Clean code is great, and will make your site run
++ How do these technologies work in tandem to
enhance every day web experiences?
++ Intended to reflect a more modern, cohesive web.
++ Comes with a host of features that make building web
++ Gives a consistent experience across browsers
++ It’s faster.
OFFLINE STORAGE + APP CACHING
++ What happens when a you can’t go online?
++ Caching refers to elements related the logic side
of an application, while offline storage is for data files.5
++ Convenience, no interruption to workflow.
++ Can speed up applications when you are online.
VIDEO + AUDIO
++ Flash has two key uses on the web: animation and
encoding for video and audio.
++ HTML5 has provisions for embedding this content
directly into a webpage.
++ No plugin required.
++ Smaller files, faster load time.
++ More accessible content.
++ Canvas: pixel-based graphics drawn by browser.
Useful for drawing lots of complex images for games
++ SVG: scalable vector graphics. Good for charts and
graphs. Can be created in Illustrator.
++ WebGL: brings 3D graphics to the browser. Early uses
include 3D games and interactive art.
++ Used primarily for maps and localized search results.
++ Determines location by signal strength, router, IP
address and distance from wireless access points.8, 9
++ Mobile apps using location-based services rely on
GPS to locate, while apps that run in browser can use
++ Location by IP is different from geolocation.10
++ Better directions
++ More relevant search results
++ Ability to connect with local users
++ Privacy — potential to inadvertently disclose location
++ Segmentation from hyperlocalization of content
++ Mobile commerce
++ Gather group wisdom for location-based decisions
++ Localized advertising
NO GAME CHANGING USE YET.
OTHER HTML5 FEATURES
++ Mobile inputs, touch events and device orientation
++ Editable content fields
++ Better form control 11
++ Widgets for apps (spinners, color pickers, calendars)
++ WAI-ARIA accessibility 12
++ The list goes on and on 13
THE VISUAL EXPERIENCE
++ Visual enhancement for site experience
++ Can degrade gracefully for older browsers
++ Replaces need for image-heavy design elements
++ Faster, more efficient
++ Avoid Photoshop maintenance routines
WHAT CAN YOUR BROWSER DO?
++ Rounded corners
++ Multiple backgrounds
++ Live type using non-web fonts
++ Intended to overcome the web’s limitations.
++ Requires a plugin and can’t degrade gracefully.
++ Known to be processor-intensive.
++ Can be implemented now but best to keep it simple.
++ Authoring tools are under development.