The document discusses converting an existing website to HTML5, CSS3, and responsive design standards. It covers why such an update is important for compatibility, maintainability and accessibility. It then details specifics of implementing HTML5 features like semantic markup, forms, multimedia elements, and the HTML5 shim. CSS3 techniques like rounded corners, shadows, gradients and animations are also covered. The document concludes with topics like responsive design, frameworks, and whether a site remodel or teardown is more appropriate.

1. Website This Old
Applying

2. HTML5,

3. CSS3,

5. Responsive

6.
#minnebar #html5
Design

7. to

8. an

9. Existing

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

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

12. #minnebar #html5
Compatibility
Maintainability
Accessibility
Flexibility
Extensibility
http://images4.fanpop.com/image/photos/20300000/Old-Ben-obi-wan-kenobi-20375221-1600-1200.jpg

13. HTML5
#minnebar #html5
http://oldblueprints.com/waters-house-bakery-marblehead-ma-elevation-roof-sections-plans.html

14. #minnebar #html5
http://html5test.com/results/desktop.html

15. #minnebar #html5
DocType
Semantic Markup
HTML5 Shim
Input Types
Audio / Video Tags
http://upload.wikimedia.org/wikipedia/commons/a/a9/Berg_van_stenen.jpg

16. !DOCTYPE html
#minnebar #html5

17. #minnebar #html5
You have just
taken your
first step
into a much
larger world.
B.

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

19. header/
nav/
section/
#minnebar #html5 footer/
aside/
article/
article/

20. #minnebar #html5
HTML5 Shim
Bring

21. your

22. old,

23. broken

24. down,

25.
non-compliant

26. browser

27.
kicking

28. and

29. screaming

30. into

31.
the

32. Century

33. of

34. the

35. Fruit

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

37. input type=”date” name=”bday” /
color
datetime
datetime-local
#minnebar #html5
email
month
number
range
search
tel
time
url
http://www.flickr.com/photos/22809952@N03/5480132725/

38. 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
http://audiodimensions.net/wp-content/uploads/2011/10/Home-theater1.jpg

39. #minnebar #html5
CSS3
http://oldblueprints.com/waters-house-bakery-marblehead-ma-elevation-roof-sections-plans.html

40. #minnebar #html5
Rounded Corners
Shadows
Gradients
Webfonts
Selectors
Reset vs. Normalize
http://upload.wikimedia.org/wikipedia/commons/a/a9/Berg_van_stenen.jpg

41. .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;
}
#minnebar #html5
http://css-tricks.com/almanac/properties/b/border-radius/
http://www.flickr.com/photos/blujaguar/7907516644/

42. .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;
}
#minnebar #html5
http://css-tricks.com/almanac/properties/b/box-shadow/
http://www.flickr.com/photos/65839294@N03/8343399288/

43. #minnebar #html5
http://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/

44. Additional CSS3 Properties
Border-Image
Multiple
Background Images
RGBA
Opacity
Text-Shadow
#minnebar #html5
Transition
Transform
Box-Sizing
Column Count
Animation
And more!
http://commons.wikimedia.org/wiki/File:20060513_toolbox.jpg

45. What about IE?
css3pie.com
#minnebar #html5
http://www.scenicreflections.com/download/411954/Neon_IE_Logo_Wallpaper/

46. #minnebar #html5
http://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

47. Icon Fonts
#minnebar #html5
http://it.123rf.com/photo_12115422_grunge-newspaper-alphabet-with-torn-edges-isolated-on-black.html

48. “...that

49. don’t

50.
#minnebar #html5
resize

51.
or

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

53. #minnebar #html5
http://www.sweetwater.com/store/detail/Selector
.class
#id
element
element,element
elementelement
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)

54. #minnebar #html5
reset
vs.
normalize
http://www.flickr.com/photos/rrphotography101/5338711868/sizes/l/

55. Responsive

56.
Design
#minnebar #html5
http://oldblueprints.com/waters-house-bakery-marblehead-ma-elevation-roof-sections-plans.html

57. #minnebar #html5
Fluid Grids
Media Queries
Frameworks
Alternate Navigation
Tables Are Evil
http://1800recycling.com/2010/07/recycled-shipping-container-buildings/

58. #minnebar #html5
100%
= 1em
~= 16px
~= 14pt
http://www.ecs.umass.edu/mie/tcfd/Programs.html

59. “...that

60. can

61. resize

62.
and/or

63. scale”
#minnebar #html5
http://www.stretcharmstrongworld.com/photo3_5.html

64. Media Query Breakpoint Guidelines
#minnebar #html5
iPhone
Portrait
300x356
iPhone Landscape
http://www.websitedimensions.com/guidelines-css-large.png
380x208
iPad Landscape
1000x690
iPad Portrait : 740x916
Screen Height = 768
1240x540
Screen Height = 900
1240x650
Screen Height = 1050 : 1640x800
Screen Height = 1200
1880x1000

65. Target browsers between
#minnebar #html5
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/

66. #minnebar #html5
HTML5 Boilerplate
Fluid Baseline Grid
960grid
966grid
Blue Print
Bootstrap
http://www.websitedimensions.com/guidelines-css-large.png

67. Alternate Navigation
#minnebar #html5
http://dreamplango.com

68. #minnebar #html5
Tables are evil.
http://www.flickr.com/photos/77790305@N02/8329280923/
table
tr
tdContent A/td
tdContent B/td
/tr
tr
tdContent C/td
tdContent D/td
/tr
tr
tdContent E/td
tdContent F/td
/tr
/table
ul
liContent A/li
liContent B/li
liContent C/li
liContent D/li
liContent E/li
liContent F/li
/ul

69. Remodel

70.
vs.

71.
Teardown
#minnebar #html5
http://oldblueprints.com/waters-house-bakery-marblehead-ma-elevation-roof-sections-plans.html

72. #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

73. #minnebar #html5
Teardown
Backend rewrite
Major redesign
Device / screen size support
http://www.flickr.com/photos/maureendidde/3384264044/

74. #minnebar #html5
QA
http://oldblueprints.com/waters-house-bakery-marblehead-ma-elevation-roof-sections-plans.html

75. Wolf Loescher
#minnebar #html5
@wloescher
brandpoint.com
Bertine Buchan
@bertine
gage.com
Download the slides
bit.ly/Xuqj3g
http://oldblueprints.com/waters-house-bakery-marblehead-ma-elevation-roof-sections-plans.html

76. HTML5 Resources
http://html5please.com
http://caniuse.com
http://mediaelementjs.com/
#installation
http://html5doctor.com/element-index/
#minnebar #html5

77. #minnebar #html5
CSS3 Resources
http://css3please.com
http://css3generator.com
http://prefixr.com
http://border-radius.com/
http://www.colorzilla.com/
gradient-editor/
http://necolas.github.com/

78. #minnebar #html5
Webfonts
http://www.google.com/fonts/
https://typekit.com/
http://www.fontsquirrel.com/
http://icomoon.io/

79. Responsive Design
#minnebar #html5
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