14
Web Design Redux

Web Design Redux

Embed Size (px)

DESCRIPTION

taster of HTML5, CSS3 and offline storage

Citation preview

Page 1: Web Design Redux

Web Design Redux

Page 2: Web Design Redux

Rounded Corners

border-radius: 10em;-moz-border-radius: 10em;-webkit-border-radius: 10em;

CSS3

Page 3: Web Design Redux

Text-shadow

text-shadow: #color x-coord y-coord blur-radius;text-shadow: #0084d7 1px 1px 2px;

Hello

CSS3 – cont.

Page 4: Web Design Redux

Web Fonts@font-face “Neutraface”, Helvetica

Providers:TypeKit FontDeckTypothequeKernest Google

CSS3 – cont.

Page 5: Web Design Redux

-moz-transform: rotate(7deg);   

-webkit-transform: rotate(7deg);

-o-transform: rotate(7deg);

CSS3 – cont.

LOST

Page 6: Web Design Redux

<!DOCTYPE html>

<html>

<head>

<meta content='text/html; charset=utf-8' http-equiv='Content-Type' />

<title>demo</title>

</head>

<body>

<header></header>

<nav></nav>

<article>

<header></header>

<section></section>

<aside></aside>

<footer></footer>

</article>

<footer></footer>

</body>

</html>

HTML5 <structure>

Page 7: Web Design Redux

<video src=“inception.m4v" controls>Sorry, we’re going to have to fallback to Flash

</video>

HTML5 Video

Page 8: Web Design Redux

<html manifest=“cache.manifest”>

CACHE MANIFEST

# version 1.5

# All other resources (e.g. sites) require the user to be online.

NETWORK: *

# fallback.html will be displayed if the user is offline

FALLBACK:

/ /fallback.html

# Additional resources to cache

CACHE:

/css/html5reset-1.6.css

/css/screen.css

/css/mobile.css

/images/eagle_40.png

/images/feed-icon-28x28.png

http://somewhere.outthere/img/favicon.ico

Offline Cache

Page 9: Web Design Redux

Support?

WorkingFirefoxSafariGoogle ChromeOpera

FailsIE 9

Offline Cache – cont.

Page 10: Web Design Redux

1. Determine High-level Requirements2. Find Browser baseline3. Degrade accordingly

Building the future…

Page 11: Web Design Redux

1. Augment your reset stylesheet for HTML52. Use modernizr to test browser capabilities3. Use navigator.onLine to enhance chat,

forums, etc.

Pointers..

Page 12: Web Design Redux

offline.atompad.com

www.themaninblue.com/experiment/wds10

futureofwebdesign.com/404

www.p01.org/releases/Tilt-shift_photo_effect_in_Canvas

Demos

Page 13: Web Design Redux

caniuse.comhtml5boilerplate.comhtml5doctor.comHtml5rocks.com (Google)

html5-reset.cssmodernizr

www.stevesouders.com/blog/2010/02/15/browser-performance-wishlist

www.accessibleculture.org/research-files/html5-aria/html5Aria.html

Further Reading

Page 14: Web Design Redux

Q & A