This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project
4 likes1,425 views
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.
More Related Content
Viewers also liked (6)
Similar to This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project (20)
![[convergese] Adaptive Images in Responsive Web Design](https://cdn.slidesharecdn.com/ss_thumbnails/2012-adaptive-images-convergese-120509135732-phpapp01-thumbnail.jpg?width=560&fit=bounds)
Recently uploaded (20)
This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existing Project
- 1. Website This Old Applying
- 2. ?HTML5,
- 3. ?CSS3,
- 4. ?
- 5. ?Responsive
- 6. ? #minnebar #html5 Design
- 7. ?to
- 8. ?an
- 9. ?Existing
- 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
- 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.
- 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
- 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=/slideshow/this-oldwebsite/39801292/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(/slideshow/this-oldwebsite/39801292/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(/slideshow/this-oldwebsite/39801292/¡®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. ¡°...³Ù³ó²¹³Ù
- 49. ?»å´Ç²Ô¡¯³Ù
- 50. ? #minnebar #html5 resize
- 51. ? or
- 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. ¡°...³Ù³ó²¹³Ù
- 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