this old website: : applying html5, css3, and responsive design to an existing project

42
#minnebar #html5 Website This Old Applying HTML5, CSS3, & Responsive Design to an Existing Project http://oldblueprints.com/waters-house-bakery-marblehead-ma-elevation-roof-sections-plans.html

Upload: wolf-loescher

Post on 27-Jun-2015

931 views

Category:

Technology


1 download

DESCRIPTION

You've heard the buzz words, you've drunk the Kool-Aid™, now you're ready to bring your existing web site kicking and screaming into the Century of the Fruit Bat. Join Wolf Loescher and Bertine Buchan as they magically transform a clunky, hack ridden site into a standards compliant, SEO-friendly, accessible, cross-browser compatible, model web citizen...right before your very eyes! Attendees should have a basic working knowledge of HTML, CSS, and JavaScript. Brought to you by the number 5 and the letter W. See the presentation captured live on YouTube: https://www.youtube.com/watch?v=WN_ViAKjS7U

TRANSCRIPT

Page 1: This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project

#minnebar #html5

WebsiteThis Old

Applying����������� ������������������  HTML5,����������� ������������������  CSS3,����������� ������������������  &����������� ������������������  Responsive����������� ������������������  Design����������� ������������������  to����������� ������������������  an����������� ������������������  Existing����������� ������������������  Project

http://oldblueprints.com/waters-house-bakery-marblehead-ma-elevation-roof-sections-plans.html

Page 2: This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project

#minnebar #html5

Why?http://oldblueprints.com/waters-house-bakery-marblehead-ma-elevation-roof-sections-plans.html

Page 3: This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project

#minnebar #html5

Compatibility

Maintainability

Accessibility

Flexibility

Extensibility

http://images4.fanpop.com/image/photos/20300000/Old-Ben-obi-wan-kenobi-20375221-1600-1200.jpg

Page 4: This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project

#minnebar #html5

HTML5http://oldblueprints.com/waters-house-bakery-marblehead-ma-elevation-roof-sections-plans.html

Page 5: This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project

#minnebar #html5http://html5test.com/results/desktop.html

Page 6: This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project

#minnebar #html5

DocType

Semantic Markup

HTML5 Shim

Input Types

Audio / Video Tags

http://upload.wikimedia.org/wikipedia/commons/a/a9/Berg_van_stenen.jpg

Page 7: This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project

#minnebar #html5

<!DOCTYPE html>

Page 8: This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project

#minnebar #html5

You have just taken your

first step into a much

larger world. B.����������� ������������������  Kenobi

http://images4.fanpop.com/image/photos/20300000/Old-Ben-obi-wan-kenobi-20375221-1600-1200.jpg

Page 9: This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project

#minnebar #html5<footer/>

<header/>

<nav/>

<aside/><article/>

<article/>

<section/>

Page 10: This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project

#minnebar #html5

HTML5 ShimBring����������� ������������������  your����������� ������������������  old,����������� ������������������  broken����������� ������������������  down,����������� ������������������  

non-compliant����������� ������������������  browser����������� ������������������  kicking����������� ������������������  and����������� ������������������  screaming����������� ������������������  into����������� ������������������  

the����������� ������������������  Century����������� ������������������  of����������� ������������������  the����������� ������������������  Fruit����������� ������������������  Bat

http://www.scenicreflections.com/download/411954/Neon_IE_Logo_Wallpaper/

Page 11: This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project

#minnebar #html5

color

datetime

datetime-local

email

month

number

range

search

tel

time

url

http://www.flickr.com/photos/22809952@N03/5480132725/

<input type=”date” name=”bday” />

Page 12: This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project

#minnebar #html5http://audiodimensions.net/wp-content/uploads/2011/10/Home-theater1.jpg

<audio controls>   <source src="sound.ogg" type="audio/ogg">   <source src="sound.mp3" type="audio/mpeg"> Your browser does not support the audio tag. </audio> !!<video width="320" height="240" controls>   <source src="movie.mp4" type="video/mp4">   <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>

Page 13: This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project

#minnebar #html5

CSS3http://oldblueprints.com/waters-house-bakery-marblehead-ma-elevation-roof-sections-plans.html

Page 14: This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project

#minnebar #html5

Rounded Corners

Shadows

Gradients

Webfonts

Selectors

Reset vs. Normalizehttp://upload.wikimedia.org/wikipedia/commons/a/a9/Berg_van_stenen.jpg

Page 15: This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project

#minnebar #html5http://www.flickr.com/photos/blujaguar/7907516644/

.round { /* Safari 3-4, iOS 1-3.2, Android 1.6- */ -webkit-border-radius: 12px; ! /* Firefox 1-3.6 */ -moz-border-radius: 12px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */ border-radius: 12px; }

http://css-tricks.com/almanac/properties/b/border-radius/

Page 16: This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project

#minnebar #html5http://www.flickr.com/photos/65839294@N03/8343399288/

.shadow { /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */ -webkit-box-shadow: 3px 3px 5px 6px #ccc; /* Firefox 3.5 - 3.6 */ -moz-box-shadow: 3px 3px 5px 6px #ccc; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */ box-shadow: 3px 3px 5px 6px #ccc; }

http://css-tricks.com/almanac/properties/b/box-shadow/

Page 17: This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project

#minnebar #html5http://www.flickr.com/photos/crevisio/7568025270/

.gradient-bg { /* fallback/image non-cover color */ background-color: #1a82f7; ! /* Safari 4+, Chrome 1-9 */ background-image: -webkit-gradient(linear, 0% 0%, 0% 100% , from(#2F2727), to(#1a82f7)); ! /* Safari 5.1+, Mobile Safari, Chrome 10+ */ background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7); ! /* Firefox 3.6+ */ background-image: -moz-linear-gradient(top, #2F2727, #1a82f7); /* IE 10+ */ background-image: -ms-linear-gradient(top, #2F2727, #1a82f7); ! /* Opera 11.10+ */ background-image: -o-linear-gradient(top, #2F2727, #1a82f7); ! /* fallback image */ background-image: url(images/fallback-gradient.png); }

http://css-tricks.com/css3-gradients/

Page 18: This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project

#minnebar #html5

Border-Image

Multiple Background Images

RGBA

Opacity

Text-Shadow

Transition

Transform

Box-Sizing

Column Count

Animation

And more!

Additional CSS3 Properties

http://commons.wikimedia.org/wiki/File:20060513_toolbox.jpg

Page 19: This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project

#minnebar #html5

What about IE?

css3pie.com

http://www.scenicreflections.com/download/411954/Neon_IE_Logo_Wallpaper/

Page 20: This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project

#minnebar #html5http://it.123rf.com/photo_12115422_grunge-newspaper-alphabet-with-torn-edges-isolated-on-black.html

@font-face { font-family: Georgia, serif; font-weight: bold; src: url(‘Georgia.otf’); } !

h1 { font-family: Georgia, serif; }

google.com/fonts

Page 21: This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project

#minnebar #html5

Icon Fonts

http://it.123rf.com/photo_12115422_grunge-newspaper-alphabet-with-torn-edges-isolated-on-black.html

Page 22: This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project

#minnebar #html5

“...that����������� ������������������  don’t����������� ������������������  resize����������� ������������������  

or����������� ������������������  scale”

http://gallery44.deviantart.com/art/Doctor-Who-regeneration-nesting-dolls-348271523

Page 23: This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project

#minnebar #html5http://www.sweetwater.com/store/detail/Selector

.class #id element element,element element>element element+element attribute attribute=value attribute~=value :link :hover :first-letter

:first-line :first-child :before :after :only-child :nth-child(n) :nth-of-type(n) :empty :enabled :disabled :checked :not(selector)

Page 24: This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project

#minnebar #html5

reset vs.

normalizehttp://www.flickr.com/photos/rrphotography101/5338711868/sizes/l/

Page 25: This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project

#minnebar #html5

Responsive����������� ������������������  Design

http://oldblueprints.com/waters-house-bakery-marblehead-ma-elevation-roof-sections-plans.html

Page 26: This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project

#minnebar #html5

Fluid Grids

Media Queries

Frameworks

Alternate Navigation

Tables Are Evil

http://1800recycling.com/2010/07/recycled-shipping-container-buildings/

Page 27: This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project

#minnebar #html5

100% = 1em

~= 16px ~= 14pt

http://www.ecs.umass.edu/mie/tcfd/Programs.html

Page 28: This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project

#minnebar #html5

“...that����������� ������������������  can����������� ������������������  resize����������� ������������������  and/or����������� ������������������  scale”

http://www.stretcharmstrongworld.com/photo3_5.html

Page 29: This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project

#minnebar #html5http://www.websitedimensions.com/guidelines-css-large.png

iPhone Portrait 300x356

iPhone Landscape 380x208

iPad Landscape 1000x690

iPad Portrait : 740x916

Screen Height = 768 1240x540

Screen Height = 900 1240x650

Screen Height = 1050 : 1640x800

Screen Height = 1200 1880x1000

Media Query Breakpoint Guidelines

Page 30: This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project

#minnebar #html5

Target browsers between 768px and 701px

@media all and (max-width: 768px) and (min-width: 701px) {   body {

font-size:0.8861111111111111em; }

}

http://www.flickr.com/photos/rafers/5619234395/

Page 31: This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project

#minnebar #html5

HTML5 Boilerplate

Fluid Baseline Grid

960grid

966grid

Blue Print

Bootstraphttp://www.websitedimensions.com/guidelines-css-large.png

Page 32: This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project

#minnebar #html5

Alternate Navigation

http://dreamplango.com

Page 33: This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project

#minnebar #html5

Tables are evil.

http://www.flickr.com/photos/77790305@N02/8329280923/

<table>  <tr>    <td>Content A</td>    <td>Content B</td>  </tr>  <tr>    <td>Content C</td>    <td>Content D</td>  </tr>  <tr>    <td>Content E</td>    <td>Content F</td>  </tr></table>

<ul>  <li>Content A</li>  <li>Content B</li>  <li>Content C</li>  <li>Content D</li>  <li>Content E</li>  <li>Content F</li></ul>

Page 34: This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project

#minnebar #html5

Remodel����������� ������������������  vs.����������� ������������������  

Teardownhttp://oldblueprints.com/waters-house-bakery-marblehead-ma-elevation-roof-sections-plans.html

Page 35: This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project

#minnebar #html5

Remodel Pixel perfect

Insufficient budget Legacy browser support

Continuous development

http://oldblueprints.com/waters-house-bakery-marblehead-ma-elevation-roof-sections-plans.html

Page 36: This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project

#minnebar #html5

Teardown Backend rewrite Major redesign

Device / screen size support

http://www.flickr.com/photos/maureendidde/3384264044/

Page 37: This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project

#minnebar #html5

Q&Ahttp://oldblueprints.com/waters-house-bakery-marblehead-ma-elevation-roof-sections-plans.html

Page 38: This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project

#minnebar #html5

Bertine Buchan @bertine gage.com

Wolf Loescher @wloescher

brandpoint.com

http://oldblueprints.com/waters-house-bakery-marblehead-ma-elevation-roof-sections-plans.html

Download the slides bit.ly/Xuqj3g

Page 39: This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project

#minnebar #html5

HTML5 Resourceshttp://html5please.com http://caniuse.com http://mediaelementjs.com/#installation http://html5doctor.com/element-index/

Page 40: This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project

#minnebar #html5

CSS3 Resourceshttp://css3please.com http://css3generator.com http://prefixr.com http://border-radius.com/ http://www.colorzilla.com/gradient-editor/ http://necolas.github.com/

Page 41: This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project

#minnebar #html5

Webfontshttp://www.google.com/fonts/ https://typekit.com/ http://www.fontsquirrel.com/ http://icomoon.io/

Page 42: This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project

#minnebar #html5

Responsive Design Resources

http://cssmediaqueries.com/ http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ http://css-tricks.com/responsive-data-tables/ http://responsivepx.com