Lanyard Schmaniard! Spruce Up Your Existing Website With HTML5, CSS3, and Responsive Design

You can't tie knots, you hate leeches, you're allergic to flannel, and you get lost on the way to the outhouse. But your one ace-in-the-hole is Arts and Crafts. They speak of your ceramic ashtrays in awed and hushed tones. Your friendship bracelets are highly coveted . Your Escher-inspired bird house took first place last year (and sold on eBay for a small fortune). And you're really looking forward to an epic lanyard creation experience this year.

Sorry sunshine, but not this time.

You're going to sit your pasty, asthma-ridden carcass in that chair while we teach you how to transform your clunky, hack ridden website into a standards compliant, SEO-friendly, accessible, cross-browser compatible, model web citizen...right before your very eyes! Wolf Loescher (@wloescher) and Bertine Buchan (@bertine) will present the latest best-practices, tips, tricks, and frameworks that will not only earn you an extra S'more, but might even catch the eye of that cute guy or girl at the camp across the lake. (You know, the camp for cheerleaders.)

Kumbaya, my lord. Kumbaya.

Attendees should have a basic working knowledge of HTML, CSS, and JavaScript.

Transcript

1. #thatconference #html5 @wloescher @bertine http://www.rockbrookcamp.com/files/2007/01/5_cabin.jpg Lanyard Schmanyard! Spruce Up Your Existing Website With HTML5, CSS3, and Responsive Design 1
2. #thatconference #html5 @wloescher @bertine Photo Credit Bertine Buchan @bertine Download the slides - bit.ly/17MKoRc Wolf Loescher @wloescher 2
3. #thatconference #html5 @wloescher @bertine Meatballs - CAD. 1979 It just doesn’t matter! 3
4. #thatconference #html5 @wloescher @bertine berkshirehathaway.com 320px wide 800px wide 4
5. #thatconference #html5 @wloescher @bertine Except when it does. 5
6. #thatconference #html5 @wloescher @bertine thatconference.com 320px wide 800px wide 6
7. #thatconference #html5 @wloescher @bertine Compatibility Maintainability Accessibility Extensibility Semantic (ability) 7
8. #thatconference #html5 @wloescher @bertine HTML5 8
9. #thatconference #html5 @wloescher @bertine http://html5test.com/results/desktop.html html5test.com August, 2013 9
10. #thatconference #html5 @wloescher @bertine Photo Credit IE6 is dead! Wizard of Oz - Warner Bros. 1939 10
11. #thatconference #html5 @wloescher @bertine DocType Semantic Markup HTML5 Shim Input Types Audio / Video Tags 11
12. #thatconference #html5 @wloescher @bertine <!DOCTYPE html> 12
13. #thatconference #html5 @wloescher @bertine http://images4.fanpop.com/image/photos/20300000/Old-Ben-obi-wan-kenobi-20375221-1600-1200.jpg You have just taken your first step into a much larger world. B. Kenobi 13
14. #thatconference #html5 @wloescher @bertine <footer/> <header/> <nav/> <aside/> <article/> <article/> <section/> 14
15. #thatconference #html5 @wloescher @bertine http://www.scenicreflections.com/download/411954/Neon_IE_Logo_Wallpaper/ HTML5 Shim Bring your old, broken down, non- compliant browser kicking and screaming into the Century of the Fruit Bat 15
16. #thatconference #html5 @wloescher @bertine color datetime datetime-local email month number range search tel time url Input Types <input type=”date” name=”bday” /> 16
17. #thatconference #html5 @wloescher @bertine http://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> 17
18. #thatconference #html5 @wloescher @bertine CSS3 18
19. #thatconference #html5 @wloescher @bertine http://bit.ly/123S2b9 Rounded Corners Shadows Gradients Webfonts Selectors Reset vs. Normalize 19
20. #thatconference #html5 @wloescher @bertine http://www.flickr.com/photos/blujaguar/7907516644/ http://css-tricks.com/almanac/properties/b/border-radius/ .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; } 20
21. #thatconference #html5 @wloescher @bertine http://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, FF 4+, Chrome 6+, iOS 5 */ box-shadow: 3px 3px 5px 6px #ccc; } http://css-tricks.com/almanac/properties/b/box-shadow/ 21
22. #thatconference #html5 @wloescher @bertine 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/ 22
23. #thatconference #html5 @wloescher @bertine http://commons.wikimedia.org/wiki/File:20060513_toolbox.jpg Border-Image Multiple Background Images RGBA Opacity Text-Shadow Background-Size Transition Transform Box-Sizing Column Count Animation And more! Additional CSS3 Properties 23
24. #thatconference #html5 @wloescher @bertine http://www.scenicreflections.com/download/411954/Neon_IE_Logo_Wallpaper/ What about IE? css3pie.com 24
25. #thatconference #html5 @wloescher @bertine 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 25
26. #thatconference #html5 @wloescher @bertine http://it.123rf.com/photo_12115422_grunge-newspaper-alphabet-with-torn-edges-isolated-on-black.html Icon Fonts 26
27. #thatconference #html5 @wloescher @bertine http://gallery44.deviantart.com/art/Doctor-Who-regeneration-nesting-dolls-348271523 “...that don’t resize or scale” 27
28. #thatconference #html5 @wloescher @bertine http://2.bp.blogspot.com/-3U2LXCVPXv4/TyOPApd7KuI/AAAAAAAAf8M/zfhxp3HDpag/s1600/Anthony +Hopkins+as+Hannibal+Lecter+in+the+1991+film+of+The+Silence+of+the+Lambs.jpg CSS3 Lecter Selectors 28
29. #thatconference #html5 @wloescher @bertine .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) http://www.sweetwater.com/store/detail/Selector 29
30. #thatconference #html5 @wloescher @bertine http://static.hometheaterforum.com/imgrepo/7/74/74a5c237_godzilla01.jpeg Reset vs. Normalize 30
31. #thatconference #html5 @wloescher @bertine Responsive Design 31
32. #thatconference #html5 @wloescher @bertine Fluid Grids Media Queries Frameworks Alternate Navigation Tables Are Evil 32
33. #thatconference #html5 @wloescher @bertine http://www.ecs.umass.edu/mie/tcfd/Programs.html Target / Context = Result 700px / 960px = 72.916667% Header - 700px Body - 960px Fluid Grids 33
34. #thatconference #html5 @wloescher @bertine http://www.stretcharmstrongworld.com/photo3_5.html “...that can resize or scale” 34
35. #thatconference #html5 @wloescher @bertine http://www.websitedimensions.com/guidelines-css-large.png Media Query Breakpoints 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 35
36. #thatconference #html5 @wloescher @bertine http://www.flickr.com/photos/rafers/5619234395/ Target browsers between 768px and 701px @media all and (max-width: 768px) and (min-width: 701px) { header { width: 70.85%; } } 36
37. #thatconference #html5 @wloescher @bertine How to Test BrowserStack.com Firefox Responsive Design View Actual Devices 37
38. #thatconference #html5 @wloescher @bertine Photo Credit BERTINE 38
39. #thatconference #html5 @wloescher @bertine http://www.websitedimensions.com/guidelines-css-large.png Twitter Bootstrap HTML5 Boilerplate Fluid Baseline Grid 960grid Blue Print 39
40. #thatconference #html5 @wloescher @bertine Photo Credit Alternate Navigation 40
41. #thatconference #html5 @wloescher @bertine 41
42. #thatconference #html5 @wloescher @bertine Photo Credit 42
43. #thatconference #html5 @wloescher @bertine “Good artists copy, great artists steal.” Pablo Picasso http://www.newyorker.com/online/blogs/photobooth/Picasso01_1500.jpg 43
44. #thatconference #html5 @wloescher @bertine http://www.flickr.com/photos/77790305@N02/8329280923/ Tables are evil. <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> 44
45. #thatconference #html5 @wloescher @bertine Photo Credit Remodel vs. Teardown 45
46. #thatconference #html5 @wloescher @bertine http://www.flickr.com/photos/maureendidde/3384264044/ Pixel perfect Insufficient budget Legacy browser support Continuous development Remodel 46
47. #thatconference #html5 @wloescher @bertine http://www.flickr.com/photos/maureendidde/3384264044/ Teardown Backend rewrite Major redesign Device / screen size support 47
48. #thatconference #html5 @wloescher @bertine Photo Credit Be brave. Be creative. Collaborate. 48
49. #thatconference #html5 @wloescher @bertine Platinum Sponsors Gold Sponsors 49
50. #thatconference #html5 @wloescher @bertine August 11th – 13th 2014 Same Place, Same Time 50
51. #thatconference #html5 @wloescher @bertine Photo Credit Bertine Buchan @bertine Download the slides - bit.ly/17MKoRc Wolf Loescher @wloescher 51
52. #thatconference #html5 @wloescher @bertine Q&A 52
53. #thatconference #html5 @wloescher @bertine HTML5 Resources html5please.com caniuse.com html5doctor.com 53
54. #thatconference #html5 @wloescher @bertine CSS3 Resources css3please.com css3generator.com prefixr.com border-radius.com colorzilla.com/gradient-editor necolas.github.com/normalize.css 54
55. #thatconference #html5 @wloescher @bertine Webfonts google.com/fonts typekit.com fontsquirrel.com icomoon.io 55
56. #thatconference #html5 @wloescher @bertine Responsive Design Resources cssmediaqueries.com css-tricks.com/snippets/css/media- queries-for-standard-devices css-tricks.com/responsive-data-tables responsivepx.com 56
57. #thatconference #html5 @wloescher @bertine Responsive Design Testing browserstack.com modern.ie 57
58. #thatconference #html5 @wloescher @bertine Responsive Design Examples FindBacon.com ResponsiveWebDesign.com ABookApart.com BostonGlobe.com CssTricks.com GleanAg.com (@wloescher) 58