Web Design Redux

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

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

Web Fonts
@font-face “Neutraface”, Helvetica
Providers:
TypeKit
FontDeck
Typotheque
Kernest
Google

-moz-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-o-transform: rotate(7deg);

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

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

<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

Support?
Working
Firefox
Safari
Google Chrome
Opera
Fails
IE 9

1. Determine High-level Requirements
2. Find Browser baseline
3. Degrade accordingly

1. Augment your reset stylesheet for HTML5
2. Use modernizr to test browser capabilities
3. Use navigator.onLine to enhance chat, forums, etc.

offline.atompad.com
www.themaninblue.com/experiment/wds10
futureofwebdesign.com/404
www.p01.org/releases/Tilt-shift_photo_effect_in_Canvas

caniuse.com
html5boilerplate.com
html5doctor.com
Html5rocks.com (Google)
html5-reset.css
modernizr
www.stevesouders.com/blog/2010/02/15/browser-performance-wishlist
www.accessibleculture.org/research-files/html5-aria/html5Aria.html

Web Design Redux

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (9)

Similar to Web Design Redux

Similar to Web Design Redux (20)

Recently uploaded

Recently uploaded (20)

Web Design Redux