83
CSS3+ HTML5 RACHEL McCLUNG | 10.21.11 A User’s Perspective

css3, html5

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: css3, html5

CSS3+ HTML5

RACHEL McCLUNG | 10.21.11

A User’sPerspective

Page 2: css3, html5

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

Page 3: css3, html5

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

Page 4: css3, html5

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

Page 5: css3, html5

FORM + FUNCTION

Page 6: css3, html5

FORM ≈ CSS FUNCTION ≈ HTML

Page 7: css3, html5

GOOD DESIGNIdeal is to have a balance of

form and function to produce a

positive user experience.

Page 8: css3, html5
Page 9: css3, html5
Page 10: css3, html5
Page 11: css3, html5

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”>

Page 12: css3, html5

3

HTML5 PAGE STRUCTURE

<header>

<nav>

<article>

<sidebar>

<footer>

<section>

Page 13: css3, html5

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;

}

Page 14: css3, html5

BROWSER SUPPORT

340 313 293 141

Try it out: http://html5test.com4

Page 15: css3, html5

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?

Page 16: css3, html5

HTML5

Page 17: css3, 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.

Page 18: css3, html5

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.

Page 19: css3, html5
Page 20: css3, html5

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.

Page 21: css3, html5
Page 22: css3, html5
Page 23: css3, html5
Page 24: css3, html5
Page 25: css3, html5

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.

Page 26: css3, html5
Page 27: css3, html5
Page 28: css3, html5
Page 29: css3, html5
Page 30: css3, html5
Page 31: css3, html5
Page 32: css3, html5
Page 33: css3, html5

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

Page 34: css3, html5
Page 35: css3, html5
Page 36: css3, html5
Page 37: css3, html5
Page 38: css3, html5
Page 39: css3, html5

DOES ANYONE WANT THIS?

Page 40: css3, html5

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

Page 41: css3, html5

EMERGING APPLICATIONS + Mobile commerce

+ Gather group wisdom for location-based decisions

+ Localized advertising

NO GAME CHANGING USE YET.

Page 42: css3, html5

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

Page 43: css3, html5

CSS3

Page 44: css3, html5

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

Page 45: css3, html5

WHAT CAN YOUR BROWSER DO? + Shadows

+ Gradients

+ Opacity

+ Rounded corners

+ Multiple backgrounds

+ Live type using non-web fonts

Page 46: css3, html5
Page 47: css3, html5
Page 48: css3, html5
Page 49: css3, html5
Page 50: css3, html5
Page 51: css3, html5
Page 52: css3, html5
Page 53: css3, html5
Page 54: css3, html5
Page 55: css3, html5
Page 56: css3, html5
Page 57: css3, html5
Page 58: css3, html5
Page 59: css3, html5
Page 60: css3, html5
Page 61: css3, html5
Page 62: css3, html5

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.

Page 63: css3, html5
Page 64: css3, html5
Page 65: css3, html5
Page 66: css3, html5
Page 67: css3, html5

CASE STUDIES

Page 68: css3, html5

AP NEWS

Page 69: css3, html5

SLIDESHARE

Page 70: css3, html5

FINANCIAL TIMES

Page 71: css3, html5

FACEBOOK

Page 72: css3, html5
Page 73: css3, html5

PAYPAL

Page 74: css3, html5
Page 75: css3, html5

AMAZON

Page 76: css3, html5
Page 77: css3, html5

WHAT’S NEXT?

Page 78: css3, html5

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.

Page 79: css3, html5

GO FOR IT!+ ASK YOUR DEVELOPER

+ ENCOURAGE YOUR DESIGNER

+ TEST WITH YOUR USERBASE

+ OBSERVE APPLICATIONS

Page 80: css3, html5

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/

Page 81: css3, html5

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/

Page 82: css3, html5

- 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/

Page 83: css3, html5

THANK YOU!RESOURCES: urli.st/zQjVTO CONNECT: @rachelmc