Embed Size (px)
DESCRIPTION
Citation preview
CSS3+ HTML5
RACHEL McCLUNG | 10.21.11
A User’sPerspective
TODAY’S DISCUSSIONWhat sites employ HTML5 and CSS3 to effectively shape
the user experience, and how can we create interactive
content in a responsible way?
MY PERSPECTIVE + 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
FORM + FUNCTION
FORM ≈ CSS FUNCTION ≈ HTML
GOOD DESIGNIdeal is to have a balance of
form and function to produce a
positive user experience.
IDENTIFYING HTML5The very start of the source code looks like this:<!doctype html>
Previously, it was more verbose:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0
Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd”>
3
HTML5 PAGE STRUCTURE
<header>
<nav>
<article>
<sidebar>
<footer>
<section>
CSS3 STRUCTURE
.box
.box {
background: #FFF;
width: 460px;
-webkit-box-shadow: 0px 0px 20px 2px #333;
-moz-box-shadow: 0px 0px 20px 2px #333;
box-shadow: 0px 0px 20px 2px #333;
}
BROWSER SUPPORT
340 313 293 141
Try it out: http://html5test.com4
TAKEAWAYS + 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 more efficiently.
+ How do these technologies work in tandem to enhance every day web experiences?
HTML5
FEATURE OVERVIEW + Intended to reflect a more modern, cohesive web.
+ Comes with a host of features that make building web applications better.4
+ Gives a consistent experience across browsers and platforms.
+ 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
BENEFITS + 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.
BENEFITS + No plugin required.
+ Smaller files, faster load time.
+ More accessible content.
GRAPHICS + Canvas: pixel-based graphics drawn by browser. Useful for drawing lots of complex images for games or animations.7
+ 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.
GEOLOCATION + 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 HTML5 geolocation.
+ Location by IP is different from geolocation.10
DOES ANYONE WANT THIS?
BENEFITS + Better directions
+ More relevant search results
+ Ability to connect with local users
CONCERNS + Privacy — potential to inadvertently disclose location
+ Segmentation from hyperlocalization of content
EMERGING APPLICATIONS + 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
CSS3
THE VISUAL EXPERIENCE + Visual enhancement for site experience
+ Can degrade gracefully for older browsers
+ Replaces need for image-heavy design elements
BENEFITS + Faster, more efficient
+ Avoid Photoshop maintenance routines
WHAT CAN YOUR BROWSER DO? + Shadows
+ Gradients
+ Opacity
+ Rounded corners
+ Multiple backgrounds
+ Live type using non-web fonts
FLASH ANIMATION + Intended to overcome the web’s limitations.
+ Requires a plugin and can’t degrade gracefully.
+ Known to be processor-intensive.
CSS3 ANIMATION + Can be implemented now but best to keep it simple.
+ Authoring tools are under development.
CASE STUDIES
AP NEWS
SLIDESHARE
FINANCIAL TIMES
PAYPAL
AMAZON
WHAT’S NEXT?
RECURRING THEMES + Faster and lighter
+ Cross-platform
+ Open ecosystem
EXPECTATIONS + Will keep pushing us toward cloud computing
+ This is only the beginning — check back in 2022.
GO FOR IT!+ ASK YOUR DEVELOPER
+ ENCOURAGE YOUR DESIGNER
+ TEST WITH YOUR USERBASE
+ OBSERVE APPLICATIONS
REFERENCES1 http://en.wikipedia.org/wiki/HTML52 http://en.wikipedia.org/wiki/CSS33 http://www.alistapart.com/articles/previewofhtml54 http:// html5test.com5 http://joehewitt.com/2011/09/26/what-the-web-is-and-is-not6 http://www.html5rocks.com/en/tutorials/offline/whats-offline/7 http://html5doctor.com/html5-briefing-notes-journalists-analysts/8 http://stackoverflow.com/questions/4213410/how-does-html5-geolocation-work9 http://isgeolocationpartofhtml5.com/10 http://www.google.com/support/websearch/bin/answer.py?hl=en&answer=9370411 http://www.quora.com/User-Experience/How-will-HTML5-change-the-user-
experience-of-websites12 http://dev.opera.com/articles/view/introduction-to-wai-aria/
13 http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-
and-techniques-you-must-know/14 http://www.beautyoftheweb.com/15 http://engineering.slideshare.net/2011/09/slideshare-ditches-flash-for-html5/16 http://www.readwriteweb.com/archives/financial_times_proves_html5_can_
beat_native_mobil.php17 http://www.zdnet.com/blog/btl/paypal-jumps-onto-html5-bandwagon-also-
heading-for-consoles/6068518 http://latimesblogs.latimes.com/technology/2011/08/a-look-at-html5-apps-vs-
native-apps.html
- http://html5test.com
- http://upload.wikimedia.org/wikipedia/commons/6/6c/Trajans-Column-lower-
animated.svgv
- http://mugtug.com/sketchpad/
- http://lights.elliegoulding.com/
- http://npdoty.name/location/
- http://html5demos.com/geo
- https://developer.mozilla.org/en-US/demos/tag/tech:geolocation/
- https://support.twitter.com/articles/78525-about-the-tweet-location-feature
- http://www.facebook.com/about/location
- http://www.apple.com/html5/
- http://www.htmlfivewow.com/
- http://radar.oreilly.com/2011/07/what-is-html5.html
- http://cognition.happycog.com/article/are-doctypes-the-new-lunch-tables
- http://meyerweb.com/eric/thoughts/2011/04/14/my-own-private-html5-survey/
- http://www.beautyoftheweb.com/
THANK YOU!RESOURCES: urli.st/zQjVTO CONNECT: @rachelmc
