#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
#minnebar #html5
Why?http://oldblueprints.com/waters-house-bakery-marblehead-ma-elevation-roof-sections-plans.html
#minnebar #html5
Compatibility
Maintainability
Accessibility
Flexibility
Extensibility
http://images4.fanpop.com/image/photos/20300000/Old-Ben-obi-wan-kenobi-20375221-1600-1200.jpg
#minnebar #html5
HTML5http://oldblueprints.com/waters-house-bakery-marblehead-ma-elevation-roof-sections-plans.html
#minnebar #html5
DocType
Semantic Markup
HTML5 Shim
Input Types
Audio / Video Tags
http://upload.wikimedia.org/wikipedia/commons/a/a9/Berg_van_stenen.jpg
#minnebar #html5
<!DOCTYPE html>
#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
#minnebar #html5<footer/>
<header/>
<nav/>
<aside/><article/>
<article/>
<section/>
#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/
#minnebar #html5
color
datetime
datetime-local
month
number
range
search
tel
time
url
http://www.flickr.com/photos/22809952@N03/5480132725/
<input type=”date” name=”bday” />
#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>
#minnebar #html5
CSS3http://oldblueprints.com/waters-house-bakery-marblehead-ma-elevation-roof-sections-plans.html
#minnebar #html5
Rounded Corners
Shadows
Gradients
Webfonts
Selectors
Reset vs. Normalizehttp://upload.wikimedia.org/wikipedia/commons/a/a9/Berg_van_stenen.jpg
#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/
#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/
#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/
#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
#minnebar #html5
What about IE?
css3pie.com
http://www.scenicreflections.com/download/411954/Neon_IE_Logo_Wallpaper/
#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
#minnebar #html5
Icon Fonts
http://it.123rf.com/photo_12115422_grunge-newspaper-alphabet-with-torn-edges-isolated-on-black.html
#minnebar #html5
“...that����������� ������������������ don’t����������� ������������������ resize����������� ������������������
or����������� ������������������ scale”
http://gallery44.deviantart.com/art/Doctor-Who-regeneration-nesting-dolls-348271523
#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)
#minnebar #html5
reset vs.
normalizehttp://www.flickr.com/photos/rrphotography101/5338711868/sizes/l/
#minnebar #html5
Responsive����������� ������������������ Design
http://oldblueprints.com/waters-house-bakery-marblehead-ma-elevation-roof-sections-plans.html
#minnebar #html5
Fluid Grids
Media Queries
Frameworks
Alternate Navigation
Tables Are Evil
http://1800recycling.com/2010/07/recycled-shipping-container-buildings/
#minnebar #html5
100% = 1em
~= 16px ~= 14pt
http://www.ecs.umass.edu/mie/tcfd/Programs.html
#minnebar #html5
“...that����������� ������������������ can����������� ������������������ resize����������� ������������������ and/or����������� ������������������ scale”
http://www.stretcharmstrongworld.com/photo3_5.html
#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
#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/
#minnebar #html5
HTML5 Boilerplate
Fluid Baseline Grid
960grid
966grid
Blue Print
Bootstraphttp://www.websitedimensions.com/guidelines-css-large.png
#minnebar #html5
Alternate Navigation
http://dreamplango.com
#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>
#minnebar #html5
Remodel����������� ������������������ vs.����������� ������������������
Teardownhttp://oldblueprints.com/waters-house-bakery-marblehead-ma-elevation-roof-sections-plans.html
#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
#minnebar #html5
Teardown Backend rewrite Major redesign
Device / screen size support
http://www.flickr.com/photos/maureendidde/3384264044/
#minnebar #html5
Q&Ahttp://oldblueprints.com/waters-house-bakery-marblehead-ma-elevation-roof-sections-plans.html
#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
#minnebar #html5
HTML5 Resourceshttp://html5please.com http://caniuse.com http://mediaelementjs.com/#installation http://html5doctor.com/element-index/
#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/
#minnebar #html5
Webfontshttp://www.google.com/fonts/ https://typekit.com/ http://www.fontsquirrel.com/ http://icomoon.io/
#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