hi Im John and Imsocial...tsevdos.comphrappe.com@tsevdosgithub.com/tsevdoslinkedin.com/in/tsevdosjohn
agendawhy rwdhow rwdrwd tips and techniques
why responsive?and not nativeand not mobile site
because with aresponsive web site weprovide supportfor all devices, including tablets, phones and tvsfor all screen sizesf...
responsive web designprinciplesflexible layout (grid)media queriesflexible media (images, videos, etc.)
thats all bye, bye...
...but I promisepragmatic responsiveweb design!
being pragmaticthink differentsupport as many devices/browsers your budgetallowssolve problems with simple solutions
first things firstthink out of the box, think responsivlyforget pixel-perfectionlayout (wireframe it)forget colors, images...
mobile firstmobile first content?mobile first stylesquestion : why mobile first?
set your major andminor break pointsthe first break point is the no "break point"primary (mobile first) stylesset break po...
set your major andminor break points@media only screen and (min-width:480px) {}@media only screen and (min-width:768px) {}...
question : does it make sense tocreate a break point (and makeadjustments) for every knowndevice?
CSSthe % waydo the right math (target ÷ context = result)flexible margin / paddingstip: use % for fonts as well#container ...
CSSthe em waysame as above, but with emshow much is 1em?tip: use ems for fonts as well1em = 100% from 16px = 16px1.5em = 1...
CSSflexible mediaimg { max-width:100%; }img, object, embed, video { max-width:100%; }img { max-width:100%; height:auto !im...
CSSthe restset a good base (typography, colors, helpers, etc.)use CSS preprocessors (SASS, LESS, etc.)normalize
markupuse HTML5take controlbe nice to IE6-8use or<meta name="viewport" content="width=device-width, initial-scale=1" /><me...
markupEasy mobile-friendly enchantmentsTel:SMS:iPhone/iPad icon:<a href="tel:+306948123456">+306948123456</a><a href="sms:...
responsive web designis great, but youll needmoreunobtrusive javascriptfeature detectionenrich touch devices (tablets/mobi...
hand-code orframeworksthats a tough one, it dependsbudgettimeproject scale
responsive web designframeworksBootstrapFoundation
responsive web designpatterns(all images arefrom the post)Multi-Device Layout Patterns
mostly fluid
column drop
layout shifter
tiny tweaks
off canvas
responsive web designpatternsResponsive Patterns
toolboxtext editor / IDEChrome / FirefoxiPadiPhoneAdobe Edge Inspect
testingdont rely on emulators and other desktop toolstry to test to as many devices / browsers / OS youcanyoure not magici...
thank you
questions ?
Pragmatic Responsive Web Design
Upcoming SlideShare
Loading in...5
×

Pragmatic Responsive Web Design

162

Published on

Presentation I gave at the 1st UpNorth conference (1/12/2012). http://www.upnorthconf.gr

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

No notes for slide

Pragmatic Responsive Web Design

  1. 1. PragmaticResponsiveWeb DesignFrom /John Tsevdos @tsevdos
  2. 2. hi Im John and Imsocial...tsevdos.comphrappe.com@tsevdosgithub.com/tsevdoslinkedin.com/in/tsevdosjohn
  3. 3. agendawhy rwdhow rwdrwd tips and techniques
  4. 4. why responsive?and not nativeand not mobile site
  5. 5. because with aresponsive web site weprovide supportfor all devices, including tablets, phones and tvsfor all screen sizesfor all (modern?) browsersand because we love the "one site to rule themall" attitude
  6. 6. responsive web designprinciplesflexible layout (grid)media queriesflexible media (images, videos, etc.)
  7. 7. thats all bye, bye...
  8. 8. ...but I promisepragmatic responsiveweb design!
  9. 9. being pragmaticthink differentsupport as many devices/browsers your budgetallowssolve problems with simple solutions
  10. 10. first things firstthink out of the box, think responsivlyforget pixel-perfectionlayout (wireframe it)forget colors, images, logos etc.prototype it (browser-ready protype)
  11. 11. mobile firstmobile first content?mobile first stylesquestion : why mobile first?
  12. 12. set your major andminor break pointsthe first break point is the no "break point"primary (mobile first) stylesset break points where your content needsadjustingphones (320/480)tablets (768/1024)(small) desktop (1024)(large) desktop (1200 and over)
  13. 13. set your major andminor break points@media only screen and (min-width:480px) {}@media only screen and (min-width:768px) {}@media only screen and (min-width:1024px) {}@media only screen and (min-width:1200px) {}
  14. 14. question : does it make sense tocreate a break point (and makeadjustments) for every knowndevice?
  15. 15. CSSthe % waydo the right math (target ÷ context = result)flexible margin / paddingstip: use % for fonts as well#container { width:100%; max-width:1200px; }#main { float:left; width:75%; } /* 900 / 1200 */#sidebar { float:right; width:25%; } /* 300 / 1200*/#main { float:left; width:71.666666%; /* 860 / 1200 */ padding:1.6666661200 */ }
  16. 16. CSSthe em waysame as above, but with emshow much is 1em?tip: use ems for fonts as well1em = 100% from 16px = 16px1.5em = 150% from 16px = 24px0.5em = 50% from 16px = 8px
  17. 17. CSSflexible mediaimg { max-width:100%; }img, object, embed, video { max-width:100%; }img { max-width:100%; height:auto !important; /* just in case, to force coratio */ }img { -ms-interpolation-mode: bicubic; } /* IE scaling fix */fluid images from unstoppable robot ninja postfitvids.js
  18. 18. CSSthe restset a good base (typography, colors, helpers, etc.)use CSS preprocessors (SASS, LESS, etc.)normalize
  19. 19. markupuse HTML5take controlbe nice to IE6-8use or<meta name="viewport" content="width=device-width, initial-scale=1" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">html5shiv modernizrrespond.js
  20. 20. markupEasy mobile-friendly enchantmentsTel:SMS:iPhone/iPad icon:<a href="tel:+306948123456">+306948123456</a><a href="sms:+306948123456">+306948123456</a><link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone-114.png" />
  21. 21. responsive web designis great, but youll needmoreunobtrusive javascriptfeature detectionenrich touch devices (tablets/mobiles)navigationtouch events (on image galleries, etc.)geolocationmodernizr
  22. 22. hand-code orframeworksthats a tough one, it dependsbudgettimeproject scale
  23. 23. responsive web designframeworksBootstrapFoundation
  24. 24. responsive web designpatterns(all images arefrom the post)Multi-Device Layout Patterns
  25. 25. mostly fluid
  26. 26. column drop
  27. 27. layout shifter
  28. 28. tiny tweaks
  29. 29. off canvas
  30. 30. responsive web designpatternsResponsive Patterns
  31. 31. toolboxtext editor / IDEChrome / FirefoxiPadiPhoneAdobe Edge Inspect
  32. 32. testingdont rely on emulators and other desktop toolstry to test to as many devices / browsers / OS youcanyoure not magician, it may not work on yourmums mobile...
  33. 33. thank you
  34. 34. questions ?

×