Your SlideShare is downloading. ×
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Responsive design

5,121

Published on

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

No Downloads
Views
Total Views
5,121
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
125
Comments
0
Likes
8
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. RESPONSIVE DESIGN @doxaras @niobiumlabs
  • 2. RESPONSIVE WEB DESIGN
  • 3. TH EN EED
  • 4. APPLE IS EVIL
  • 5. HTML5 APPS
  • 6. SCREEN FRAGMENTATION http://sender11.typepad.com/sender11/2008/04/mobile-screen-s.html
  • 7. JSFIDDLE DEMO http://jsfiddle.net/doxaras/nCGUu/
  • 8. GOOGLE’S APPROACHhttp://androidandme.com/2012/02/applications/goodbye-old-browser-chrome-to-become-the-standard-browser-on-android-4-0-and-above/
  • 9. BROWSER GRADING “Any device that doesn’t support media queries will receive the basic C- grade experience
  • 10. AN OLD STORY REVIVINGhttp://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html
  • 11. LETS GET THING FROM THE BEGINNING
  • 12. fluid elastic fixed
  • 13. VIEWPORTS<meta name=”viewport” content=”width:device-width”> always use it for mobile and fluid designs
  • 14. MEDIA QUERIES CSS 2.1<link rel="stylesheet" type="text/css" href="core.css"media="screen" /><link rel="stylesheet" type="text/css" href="print.css"media="print" /> CSS3<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" />
  • 15. WAIT THERE IS MORE!!<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) and(resolution: 163dpi)" href="shetland.css" />@media screen and (max-device-width: 480px) { .column { float: none; }} @import url("shetland.css") screen and (max-device-width: 480px);
  • 16. AND MORE@media only screen and (min-device-width : 320px) (max-device-width : 569px) {...}
  • 17. AND MORE@media only screen and (min-width : 480px) { .box{ width:200px; height:200px;background:yellow; } }@media only screen and (max-width : 320px) { .box{width:200px; height:200px; background:red; } }
  • 18. DEVICE-WIDTH Question:Is max/min-width the same as max/min-device-width? Answer:If you set width=device-width, then max/min-width is the sameas max/min-device-width in portrait mode, and different whenin landscape mode. In short, the difference is max/min-widthwill update when you rotate the screen, whereas, max/min-device-width wont.
  • 19. DEVICE-PIXELdevice-pixel-ratio could help you know the resolution of the devicescreen, iPhone 4 and certain other smartphones have pixel ration equalor higher than 1.5, so if you want to target high resolution devices, youcan use the media query below:@media only screenand (-webkit-min-device-pixel-ratio : 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio : 1.5) { .imagebox {background:(url:"images/high/demo.jpg");}} image will be downloaded even if the page doesnt fit the rule above!!
  • 20. ORIENTATIONiPad introduced orientation to help with detecting orientation change, belowis how you can specify landscape and portrait style/* iPads (landscape) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */}/* iPads (portrait) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */}
  • 21. IT OT I G KO
  • 22. US ET HE FO RC E
  • 23. JSFIDDLE DEMO http://jsfiddle.net/doxaras/LeB47/
  • 24. TYPOGRAPHY
  • 25. 62.5% RULE (EM2PX)• modern browsers have a 16px font default size*•body{font-size:62.5%}• 16x62.5=10px•p{font-size:1.3em;} add html{font-size:16px; } just to be sure
  • 26. IMAGES
  • 27. SIZING.figure { float: right; margin-bottom: 0.5em; margin-left: 2.53164557%; /* 12px / 474px */ width: 48.7341772%; /* 231px / 474px */} img { max-width: 100%; }http://www.alistapart.com/articles/fluid-images/
  • 28. SIZINGimg { max-width: 100%; }<img src="smallRes.jpg"data-fullsrc="largeRes.jpg">
  • 29. JSFIDDLE DEMO http://jsfiddle.net/doxaras/T66wQ/
  • 30. DESIGN PATTERNS
  • 31. COLUMN MERGING
  • 32. DEALING WITH TABLEShttp://css-tricks.com/examples/ResponsiveTables/responsive.php
  • 33. DISPLAY:NONEhttp://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
  • 34. IMAGEShttp://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
  • 35. http://css-tricks.com/convert-menu-to-dropdown/
  • 36. JSFIDDLE DEMO http://jsfiddle.net/doxaras/CKPnJ/
  • 37. THE TOOLS
  • 38. WEB DEVELOPER
  • 39. PIXEL 2 EM
  • 40. APART.JS
  • 41. LETTERING.JS
  • 42. FITTEXT.JS
  • 43. FLUID 960
  • 44. MODERNIZR
  • 45. RESPOND.JS• really small script < 1kb• enabling old browsers IE7 IE8• responsive is not just a mobile problem• backwords compatibility of your designs
  • 46. LESS FRAMEWORK
  • 47. TIPS & TRICKS
  • 48. APPLE VIEWPORT<meta name="viewport" content="width=device-width; initial-scale=1.0">
  • 49. SELECTORS SHOULD BE PRESENT ALSO IN THE PLAIN CSS DOCUMENTS
  • 50. EM’S AND PX’S• local DOM scope overrides the default 62.5% rule• left and right• top and line-height should be em’s• avoid nested em definitions
  • 51. TRANSITIONSbody { transition:all .2s linear; -o-transition:all .2s linear; -moz-transition:all .2s linear; -webkit-transition:all .2s linear;}
  • 52. RETINA DISPLAY SELECTORS<link rel="stylesheet"media="only screen and (-webkit-min-device-pixel-ratio: 2)"type="text/css"href="../iphone4.css" />
  • 53. HIDE NAVIGATION// When ready...window.addEventListener("load",function() { // Set a timeout... setTimeout(function(){ // Hide the address bar! window.scrollTo(0, 1); }, 0);});
  • 54. META TAG FOR NAME<meta name="apple-mobile-web-app-capable"content="yes" />
  • 55. KNOW THY DIMENSIONS
  • 56. THAT’S ALL FOLKS DROP ME AN EMAIL ATYIANNIS@NIOBIUMLABS.COM

×