This document discusses responsive web design techniques including: - Using viewports and media queries to adapt layouts for different screen sizes. - Sizing images fluidly using max-width: 100% so they are responsive. - Design patterns for responsive tables, hiding/showing content, and converting menus to dropdowns. - Tools like Modernizr, Respond.js, and frameworks like LESS to support responsive design goals. - Tips like using relative units (ems/percentages) over fixed pixels and transitions for visual changes.

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 APPROACH
http://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 REVIVING
http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html

12. LETS GET THING FROM THE
BEGINNING

13. fluid elastic fixed

14. VIEWPORTS
<meta name=”viewport” content=”width:device-width”>
always use it for mobile and fluid designs

15. 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" />

16. 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);

17. AND MORE
@media only screen and (min-device-width : 320px)
(max-device-width : 569px) {...}

18. 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; } }

19. 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 same
as max/min-device-width in portrait mode, and different when
in landscape mode. In short, the difference is max/min-width
will update when you rotate the screen, whereas, max/min-
device-width won't.

20. DEVICE-PIXEL
device-pixel-ratio could help you know the resolution of the device
screen, iPhone 4 and certain other smartphones have pixel ration equal
or higher than 1.5, so if you want to target high resolution devices, you
can use the media query below:
@media only screen
and (-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 doesn't fit the rule above!!

21. ORIENTATION
iPad introduced 'orientation' to help with detecting orientation change, below
is 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 */
}

22. IT
OT
I G
K
O

23. US
ET
HE
FO
RC
E

24. JSFIDDLE DEMO
http://jsfiddle.net/doxaras/LeB47/

25. TYPOGRAPHY

27. 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

28. IMAGES

29. 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/

30. SIZING
img { max-width: 100%; }
<img src="smallRes.jpg"
data-fullsrc="largeRes.jpg">

31. JSFIDDLE DEMO
http://jsfiddle.net/doxaras/T66wQ/

32. DESIGN PATTERNS

33. COLUMN MERGING

34. DEALING WITH TABLES
http://css-tricks.com/examples/ResponsiveTables/responsive.php

35. DISPLAY:NONE
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

36. IMAGES
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

37. http://css-tricks.com/convert-menu-to-dropdown/

38. JSFIDDLE DEMO
http://jsfiddle.net/doxaras/CKPnJ/

39. THE TOOLS

40. WEB DEVELOPER

42. PIXEL 2 EM

43. APART.JS

44. LETTERING.JS

45. FITTEXT.JS

47. FLUID 960

48. MODERNIZR

49. RESPOND.JS
• really small script < 1kb
• enabling old browsers IE7 IE8
• responsive is not just a mobile problem
• backwords compatibility of your designs

50. LESS FRAMEWORK

51. TIPS & TRICKS

52. APPLE VIEWPORT
<meta name="viewport" content="width=device-width; initial-scale=1.0">

53. SELECTORS SHOULD BE PRESENT ALSO IN THE
PLAIN CSS DOCUMENTS

54. 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

55. TRANSITIONS
body {
transition:all .2s linear;
-o-transition:all .2s linear;
-moz-transition:all .2s linear;
-webkit-transition:all .2s linear;
}

56. RETINA DISPLAY SELECTORS
<link rel="stylesheet"
media="only screen and (-webkit-
min-device-pixel-ratio: 2)"
type="text/css"
href="../iphone4.css" />

57. HIDE NAVIGATION
// When ready...
window.addEventListener("load",function() {
// Set a timeout...
setTimeout(function(){
// Hide the address bar!
window.scrollTo(0, 1);
}, 0);
});

58. META TAG FOR NAME
<meta name="apple-mobile-
web-app-capable"
content="yes" />

59. KNOW THY DIMENSIONS

60. THAT’S ALL FOLKS
DROP ME AN EMAIL AT
YIANNIS@NIOBIUMLABS.COM