Your SlideShare is downloading. ×

Responsive Web Design

477
views

Published on

These are the slides I used in a three hour presentation/workshop about responsive web design. The audience consisted of students wanting to get up to speed with responsive web design techniques.

These are the slides I used in a three hour presentation/workshop about responsive web design. The audience consisted of students wanting to get up to speed with responsive web design techniques.

Published in: Design

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
477
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. hi
  • 2. These are the slides I used for athree hour presentation/workshopabout responsive web design.While most of the session waspractical, I hope these slides comein handy for some of you.
  • 3. LET’S CONNECT• http://www.linkedin.com/in/jorishens• @goodbytes• http://www.goodbytes.be
  • 4. RESPONSIVEWEB DESIGN
  • 5. WHY RESPONSIVE?http://www.youtube.com/watch?v=qn7RfQU1MJg
  • 6. WHY RESPONSIVE?http://www.youtube.com/watch?v=qn7RfQU1MJg
  • 7. NO MORESAFE CANVAS
  • 8. IPHONE 320px / 480px IPAD 768px / 1024px DESKTOP 1224px LARGE 1824px http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
  • 9. +ANYTHING IN BETWEEN
  • 10. MISTAKES TO AVOID
  • 11. SEPARATEWEBSITES
  • 12. HTTP://M.SITE.COM
  • 13. 14
  • 14. DUPLICATE CONTENT
  • 15. DUPLICATEMAINTENANCE
  • 16. SHARING CONTENT BECOMES HARD
  • 17. JUST DON’T DO IT IT SUCKS
  • 18. UNLESS...
  • 19. 21
  • 20. RESPONSIVE DESIGN
  • 21. h%p://www.space150.com/
  • 22. mediaqueri.es
  • 23. RESPONSIVE GRID
  • 24. 25% 25% 25% 25% float: left;
  • 25. 50% 50% 100%
  • 26. RESPONSIVE MEDIA
  • 27. image 600px?
  • 28. ADAPT TO AVAILABLE SCREEN SPACE
  • 29. MEDIA QUERIESTO THE RESCUE
  • 30. max-width min-widthmax-device-widthmin-device-width
  • 31. source: http://goo.gl/qeog4
  • 32. ADAPT TO LAYOUT, NOT TO DEVICE
  • 33. USING HTML5 in IE6+7+8?<header> <nav> <section> ...
  • 34. IE6+7+89failworks9in9modern9browsers 45
  • 35. HTMLSHIV
  • 36. BEATINGBORDERS
  • 37. http://designshack.net/articles/css/beating-borders-the-bane-of-responsive-layout/
  • 38. border: 2% solid white;
  • 39. 50% + 1px50% + 1px> 100%
  • 40. BORDERS ONLY KNOW PIXELS
  • 41. outline
  • 42. border-box
  • 43. A BETTER GRID
  • 44. 1000 ISTHE NEW 960
  • 45. http://static.elliotjaystocks.com/responsive-grid/html-demo/
  • 46. VIEWPORT
  • 47. WE CAN CONTROL THEVIEWPORT A USER SEES
  • 48. TIPS
  • 49. Sketchh%p://jeremypalford.com/archDjournal/responsiveDwebDdesignDsketchDsheets
  • 50. TESTING IS NOT THIS
  • 51. EMULATORS
  • 52. iOS emulator
  • 53. Test on a real device! 68
  • 54. FRAMEWORKS SAVE TIME...
  • 55. Mobile first?• start from mobile• http://stuffandnonsense.co.uk/ projects/320andup/
  • 56. http://lessframework.com/
  • 57. http://kubeframework.com/
  • 58. http://getskeleton.com/
  • 59. http://cssgrid.net/
  • 60. http://twitter.github.com/bootstrap/
  • 61. http://html5boilerplate.com/
  • 62. BUT, DO IT YOURSELF TO LEARN FIRST !
  • 63. RETINA /HIGH DEFINITION
  • 64. 80
  • 65. 81
  • 66. A Pixel is Not a Pixelh%p://coding.smashingmagazine.com/2012/08/20/towardsDreJnaDweb/
  • 67. BETTER GRAPHICS vs BANDWIDTH
  • 68. h%p://coding.smashingmagazine.com/2012/08/20/towardsDreJnaDweb/
  • 69. logo@2x.png 85
  • 70. Problem: Pixelation 86
  • 71. SOLUTIONS
  • 72. Down-samplingthe image really is 600x300px (@2x) but we’ll display it at half its size 88
  • 73. CSS background-size 89
  • 74. CSS background-size 89
  • 75. 90
  • 76. SVG+Modernizr
  • 77. 92
  • 78. IE6+7+89failworks9in9modern9browsers 93
  • 79. 94
  • 80. 95
  • 81. 96
  • 82. SVG + PNG Fallback• http://www.toddmotto.com/mastering- svg-use-for-a-retina-web-fallbacks- with-png-script 97
  • 83. RESPONSIVE RE-CAP• no more safe canvas• goodbye pixels, hello %• optimize for any device or resolution• duplicate content & url’s are evil• ingredients: flexible grid + media queries + flexible images & video• test on real devices
  • 84. NEED HELP?@goodbytes
  • 85. SOURCES / RESPONSIVE• http://mediaqueri.es/• http://www.slideshare.net/maxdesign/css3-media-queries• http://reference.sitepoint.com/css/mediaqueries• http://www.alistapart.com/articles/responsive-web-design/• http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a- mobile-version-of-your-website/• http://www.netmagazine.com/features/21-top-tools-responsive-web-design• http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/• http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/• http://www.webdesignerdepot.com/2011/09/the-ultimate-responsive-web-design-roundup/• http://www.slideshare.net/netlash/responsive-webdesign-10048132