Pragmatic Responsive Web Design

338 views
289 views

Published on

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

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
338
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 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 ?

×