Web Design Redux

•Download as PPTX, PDF•

0 likes•478 views

John Griffiths

taster of HTML5, CSS3 and offline storage

Technology Design

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

Viewers also liked

Advice from an Account ManagerJoyce Cowles

Cloud 5 context and behavioursJohn Griffiths

10 Things I’Ve Learned As A PlannerJohn Griffiths

Baby SimplifyJohn Griffiths

The world doesn't need another account manager 4 as talk july 2012Gino Borromeo

Key-Account-Manager vs. WebStefan Nickel

Do's and Don'ts for the Account Manager of tomorrow. Jef Leysen

Rawnet Lightning talk - 'A Day in the Life of an Account Manager'Rawnet

Rethinking Information Architecture for SEO and Content MarketingJoe Hall

Viewers also liked (9)

Advice from an Account Manager

Cloud 5 context and behaviours

10 Things I’Ve Learned As A Planner

Baby Simplify

The world doesn't need another account manager 4 as talk july 2012

Key-Account-Manager vs. Web

Do's and Don'ts for the Account Manager of tomorrow.

Rawnet Lightning talk - 'A Day in the Life of an Account Manager'

Rethinking Information Architecture for SEO and Content Marketing

Similar to Web Design Redux

Html5Satoshi Kikuchi

Introduccion a HTML5Pablo Garaizar

html5NebberCracker01

HTML5 y CSS3InterGraphicDESIGNS

C3 웹기술로만드는모바일앱NAVER D2

Implementing Awesome: An HTML5/CSS3 WorkshopShoshi Roberts

Html5 introWilfred Nas

HTML5: A primer on the web's present and futureDaniel Stout

Html5 ux londonTodd Zaki Warfel

HTML5, the new buzzwordFrédéric Harper

Familiar HTML5 - 事例とサンプルコードから学ぶ身近で普通に使わているHTML5Sadaaki HIRAI

HTML 5 - OverviewMarcelio Leal

HTML Web Devlopment presentation css.pptraghavanp4

css.pptDakshPratapSingh1

css.pptSana903754

Using HTML5 and CSS3 todaythebeebs

Creating Art with Codes - CSS3Sayanee Basu

5 ways to embrace HTML5 todayDaniel Ryan

Basics of html5, data_storage, css3Sreejith Nair

HTML5+CSS3 (入門編)博史高木

Similar to Web Design Redux (20)

Html5

Introduccion a HTML5

html5

HTML5 y CSS3

C3 웹기술로만드는모바일앱

Implementing Awesome: An HTML5/CSS3 Workshop

Html5 intro

HTML5: A primer on the web's present and future

Html5 ux london

HTML5, the new buzzword

Familiar HTML5 - 事例とサンプルコードから学ぶ身近で普通に使わているHTML5

HTML 5 - Overview

HTML Web Devlopment presentation css.ppt

css.ppt

Using HTML5 and CSS3 today

Creating Art with Codes - CSS3

5 ways to embrace HTML5 today

Basics of html5, data_storage, css3

HTML5+CSS3 (入門編)

Recently uploaded

DevEX - reference for building teams, processes, and platformsSergiu Bodiu

Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson

"Federated learning: out of reach no matter how close",Oleksandr LapshynFwdays

My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar

Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB

Designing IA for AI - Information Architecture Conference 2024Enterprise Knowledge

Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106

Commit 2024 - Secret Management made easyAlfredo García Lavilla

SAP Build Work Zone - Overview L2-L3.pptxNavinnSomaal

Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited

Vector Databases 101 - An introduction to the world of Vector DatabasesZilliz

Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst

Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi

Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software

Artificial intelligence in cctv survelliance.pptxhariprasad279825

Anypoint Exchange: It’s Not Just a Repo!Manik S Magar

Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren

"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays

E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxnull - The Open Security Community

DMCC Future of Trade Web3 - Special EditionDubai Multi Commodity Centre

Recently uploaded (20)

DevEX - reference for building teams, processes, and platforms

Are Multi-Cloud and Serverless Good or Bad?

"Federated learning: out of reach no matter how close",Oleksandr Lapshyn

My Hashitalk Indonesia April 2024 Presentation

Developer Data Modeling Mistakes: From Postgres to NoSQL

Designing IA for AI - Information Architecture Conference 2024

Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics

Commit 2024 - Secret Management made easy

SAP Build Work Zone - Overview L2-L3.pptx

Ensuring Technical Readiness For Copilot in Microsoft 365

Vector Databases 101 - An introduction to the world of Vector Databases

Human Factors of XR: Using Human Factors to Design XR Systems

Vertex AI Gemini Prompt Engineering Tips

Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation

Artificial intelligence in cctv survelliance.pptx

Anypoint Exchange: It’s Not Just a Repo!

Advanced Test Driven-Development @ php[tek] 2024

"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack

E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx

DMCC Future of Trade Web3 - Special Edition

Web Design Redux

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

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

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

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

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

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

8. <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

9. Support? Working Firefox Safari Google Chrome Opera Fails IE 9

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

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

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

13. 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