Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
PragmaticResponsiveWeb DesignFrom /John Tsevdos @tsevdos
Hi Im John and Im social...tsevdos.comphrappe.com@tsevdosgithub.com/tsevdoslinkedin.com/in/tsevdosjohn
Responsive Web Designwhy?how?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.)
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 and minorbreak pointsthe first break point is the no "break point"primary (mobile first) stylesset break po...
Set your major and minorbreak 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?
CSS : Flexible layoutThe % waydo the right math (target ÷ context = result)flexible margin / paddingstip: use % for fonts ...
CSS : Flexible layoutThe em waysame as above, but with emshow much is 1em?tip: use ems for fonts as well1em = 100% from 16...
CSS : Flexible mediaimg { max-width:100%; }img, object, embed, video { max-width:100%; }img { max-width:100%; height:auto ...
CSS : The 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:...
MarkupEasy mobile-friendly inputs<!-- Default Keyboard --><input type="text" /><!-- Numeric Keyboard --><input type="numbe...
Responsive web design isgreat, 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 are fromthe 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 ?
Upcoming SlideShare
Loading in …5
×

Pragmatic Responsive Web Design

430 views

Published on

This presentation was given at the 1st Joomlafrappe (http://joomlafrappe.gr/) conference at 12/3/2013.

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

Pragmatic Responsive Web Design

  1. 1. PragmaticResponsiveWeb DesignFrom /John Tsevdos @tsevdos
  2. 2. Hi Im John and Im social...tsevdos.comphrappe.com@tsevdosgithub.com/tsevdoslinkedin.com/in/tsevdosjohn
  3. 3. Responsive Web Designwhy?how?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 browsersand because we love the "one site to rule them all"attitude
  6. 6. Responsive web designprinciplesflexible layout (grid)media queriesflexible media (images, videos, etc.)
  7. 7. Being pragmaticthink differentsupport as many devices/browsers your budgetallowssolve problems with simple solutions
  8. 8. First things firstthink out of the box, think responsivlyforget pixel-perfectionlayout (wireframe it)forget colors, images, logos etc.prototype it (browser-ready protype)
  9. 9. Mobile firstmobile first content?mobile first stylesQuestion : why mobile first?
  10. 10. Set your major and minorbreak 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)
  11. 11. Set your major and minorbreak 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) {}
  12. 12. Question : does it make sense tocreate a break point (and makeadjustments) for every knowndevice?
  13. 13. CSS : Flexible layoutThe % 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.666666%; /* 20 / 1200 */ }
  14. 14. CSS : Flexible layoutThe 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
  15. 15. CSS : Flexible mediaimg { max-width:100%; }img, object, embed, video { max-width:100%; }img { max-width:100%; height:auto !important; /* just in case, to forcecorrect aspect ratio */ }img { -ms-interpolation-mode: bicubic; } /* IE scaling fix */fluid images from unstoppable robot ninja postfitvids.js
  16. 16. CSS : The restset a good base (typography, colors, helpers, etc.)use CSS preprocessors (SASS, LESS, etc.)normalize
  17. 17. 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
  18. 18. 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" />
  19. 19. MarkupEasy mobile-friendly inputs<!-- Default Keyboard --><input type="text" /><!-- Numeric Keyboard --><input type="number" /><!-- Pattern Keyboard --><input pattern="[0-9]*" type="text" /><!-- Number Keyboard --><input type="tel" /><!-- URL Keyboard --><input type="url" /><!-- e-mail Keyboard --><input type="email" />
  20. 20. Responsive web design isgreat, but youll needmoreunobtrusive javascriptfeature detectionenrich touch devices (tablets/mobiles)navigationtouch events (on image galleries, etc.)geolocationmodernizr
  21. 21. Hand-code orframeworksthats a tough one, it dependsbudgettimeproject scale
  22. 22. Responsive web designframeworksBootstrapFoundation
  23. 23. Responsive web designpatterns(all images are fromthe post)Multi-Device Layout Patterns
  24. 24. Mostly fluid
  25. 25. Column drop
  26. 26. Layout shifter
  27. 27. Tiny tweaks
  28. 28. Off canvas
  29. 29. Responsive web designpatternsResponsive Patterns
  30. 30. Toolboxtext editor / IDEChrome / FirefoxiPadiPhoneAdobe Edge Inspect
  31. 31. Testingdont rely on emulators and other desktop toolstry to test to as many devices / browsers / OS youcanyoure not magician, it may not work on your mumsmobile...
  32. 32. Thank you
  33. 33. Questions ?

×