• Like
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Pragmatic Responsive Web Design

  • 132 views
Published

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

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

Published in Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
132
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
3
Comments
0
Likes
0

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. PragmaticResponsiveWeb DesignFrom /John Tsevdos @tsevdos
  • 2. hi Im John and Imsocial...tsevdos.comphrappe.com@tsevdosgithub.com/tsevdoslinkedin.com/in/tsevdosjohn
  • 3. agendawhy rwdhow rwdrwd tips and techniques
  • 4. why responsive?and not nativeand not mobile site
  • 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. responsive web designprinciplesflexible layout (grid)media queriesflexible media (images, videos, etc.)
  • 7. thats all bye, bye...
  • 8. ...but I promisepragmatic responsiveweb design!
  • 9. being pragmaticthink differentsupport as many devices/browsers your budgetallowssolve problems with simple solutions
  • 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. mobile firstmobile first content?mobile first stylesquestion : why mobile first?
  • 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. 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. question : does it make sense tocreate a break point (and makeadjustments) for every knowndevice?
  • 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. 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. 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. CSSthe restset a good base (typography, colors, helpers, etc.)use CSS preprocessors (SASS, LESS, etc.)normalize
  • 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. 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. responsive web designis great, but youll needmoreunobtrusive javascriptfeature detectionenrich touch devices (tablets/mobiles)navigationtouch events (on image galleries, etc.)geolocationmodernizr
  • 22. hand-code orframeworksthats a tough one, it dependsbudgettimeproject scale
  • 23. responsive web designframeworksBootstrapFoundation
  • 24. responsive web designpatterns(all images arefrom the post)Multi-Device Layout Patterns
  • 25. mostly fluid
  • 26. column drop
  • 27. layout shifter
  • 28. tiny tweaks
  • 29. off canvas
  • 30. responsive web designpatternsResponsive Patterns
  • 31. toolboxtext editor / IDEChrome / FirefoxiPadiPhoneAdobe Edge Inspect
  • 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. thank you
  • 34. questions ?