Would you like to make your website work on a variety of screens, from tiny mobile devices to enormous desktops? In this session, we'll demonstrate how to retrofit a fixed-width site with basic responsive design features. You'll learn about tools and techniques for previewing your responsive site, find out how to create scalable images, discover ways to plan flexible and consistent web typography, and see the latest design approaches for responsive menu systems. Some experience with HTML and CSS will help you get the most out of this session.

1. Retro Responsive
From Fixed-width to Flexible
in Fifty-five Minutes
p Rachel chartoff
Web designer
Engineering IT shared services

4. Rchartoff
ravelry.com

7. 2013
Edible Book Festival

8. 2013
Edible Book Festival
“As I Lay Frying”

9. Engineering ITSHARED SERVICES
Josh Potts
Laura Hayden
Rachel Chartoff
Amy Adams
Amy Hurst
David Kees
YOU?

10. responsive design IS:
“Design for the ebb and flow of things.”
– Ethan Marcotte
² Device independence
² Visual flexibility
² Performance
A

11. responsive design
IS design for
_______.

12. REACHYOUR AUDIENCE
American Adults (Jan 2014)
² 90% have a cell phone
² 58% have a smartphone
² 42% own a tablet computer
34% OF cell internet users go online
mostly using their phones
Source: pewinternet.org/fact-sheets/mobile-technology-fact-sheet/
(updated regularly)
A

13. A

14. A

15. A

16. A

18. AWWW!

20. PHABLET

21. PHashion challenge?
si.wsj.net
www.abricocotier.fr

23. SPACE IS NOTTHERETO BE FILLED
² Viewable angle
² Line length
² 960px still standard

24. HelpfulTools
p

25. Firefox:
Responsive Design View
Tools > Web Developer > Responsive Design View

29. CHROME: DEVTOOL RULERS
² View > Developer > Developer Tools
² Resize window to view dimensions

30. ² Subscription-based tool
² Interact with (almost) any browser
² Simulate mobile devices
² browserstack.com

33. Getting Started
i

34. an existing site
² Header and footer
² Header navigation bar
² 960-pixel container
² Horizontally centered
G

35. A

36. container

37. container
header

38. container
header
content

39. container
header
content
footer

40. A FEW HTML ADDITIONS
Y

41. ADD A VIEWPORTMETATAG
<meta name="viewport"
content="width=device-width, initial-scale=1">
² sizes content to the device’s viewport width
² ensures layout is not zoomed out on load
² Use both rules to ensure maximum compatibility

42. ADD A VIEWPORTCSS RULE,TOO
@viewport, @-ms-viewport {
zoom: 1.0;
width: extend-to-zoom;
}

43. SAVE US FROM compatibilityMODE
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
² Ensures content is displayed with the most recent
IE rendering engine
² Unless it’s an “intranet”
² Google “Compatibility view and
‘Smart Defaults’” for more info
p

44. MEDIA QUERIES
w

45. Uh oh, browser support
² No media query support in <IE 8, Safari 2,
Firefox 1,2
² Include css3-mediaqueries.js
by Wouter van der Graff
² code.google.com/p/css3-mediaqueries-js/

46. SMALLESTOR LARGESTsizes FIRST?
² Putting smallest sizes first utilizes the cascade,
gets around IE8 issues
² I write largest to smallest, then re-arrange
before launch

47. MULTIPLE CSS FILES?
Your choice. I separate them for side-by-side viewing.
<link rel="stylesheet" type="text/css" href=“/style.css">
<link rel="stylesheet" type="text/css" href=“/responsive.css">

48. BASIC MEDIA QUERYFoRMAT
#container { width: 960px; }
@media only screen and (max-width: 960px ) {
#container { width: 100%; }
}
style.css
responsive.css

49. STARTWITH large containers
² Change px or em widths to percentages
² Remove floats
² Check padding – may not need as much

50. Responsive containers
@media only screen and ( max-width: 960px ) {
#container, #header, #content, #footer {
width: 100%;
float: none;
padding: 0px;
}
}
responsive.css

51. BASIC LAYOUT

52. SAME LAYOUT,
SIZED IN
PERCENTAGES
803 px

53. Size Down until itbreaks down
² When layout breaks, note pixel width
² Make a new @media query with rules for
that max-width

54. REMOVE
FLOATS,
Stack nav
ITEMS
672 px

55. Alter font
sizes
320 px

56. HTML Source Order
² Put important content first so it stacks
at the top on smaller screens
² Slide-out navigation can be anywhere
in the source

57. A

58. Examine padding
² Use less vertical padding to save mobile
users from scrolling
² Don’t remove too much space
² Keep targets big

59. Responsivetypography
• More than just resizing the container and
letting text reflow
• Use resizable units: em or rem, not px
• Keep line height flexible too – and specify it

60. TRYusing REM UNITS
• REM = Relative EM
• Sizes text from the context of the root
element (html), not the container
• Avoids extra math
• Not supported by <IE8, so use px as backup

61. Sizing in PX and rem
@media only screen and ( max-width: 500px ) {
body { font-size: 62.5%; }
#site-name h1 {
font-size: 24px; font-size: 2.4rem;
line-height: 24px; line-height: 2.4rem;
}
}
responsive.css

62. RESPONSIVE NAVIGATION
q

63. Responsive nav CHECKLIST
² Offer same options as full-size site
² Use established design patterns
² There is no “hover”

64. Stacked

65. Stacked in
columns
Code and examples:
www.hongkiat.com/blog/responsive-web-nav/

66. HAMBURGER
SLIDE-OUT:
FROM SIDE

67. HAMBURGER
SLIDE-OUT:
FROM TOP

68. SLICKNAV
² Keyboard Accessible
² Degrades gracefully
without JavaScript
² Creates ARIA
compliant menu

69. RESPONSIVE IMAGES
b

70. Please,think ofthe BANDWIDTH.
² display: none hides the problem
² Browsers load all images anyway
² Detect smaller screens, load smaller images

71. HTML5 PICTURETAG - SOMEDAY...
² Draft specification
² Not supported, but awesome
<picture>
<source srcset="mobile.png, mobile-hd.png 2x">
<source media="(min-width: 480px)" srcset="tablet.png, tablet-hd.png 2x">
<source media="(min-width: 1024px)" srcset="desktop.png, desktop-hd.png 2x">
<img src="tablet.png" alt="A photo of London by night">
</picture>

72. INTHE MEANTIME, choose...
² HiSRC – jQuery plugin
² Adaptive Images – server-side PHP
² Sencha.io Src – third-party processor
² Picturefill - JavaScript
Z

73. PICTUREFILL
² Serves up images based on screen size
² A little extra markup and a tiny JavaScript
² Includes support for IE8 and <noscript>
² Can be called programmatically
² github.com/scottjehl/picturefill
N

74. PICTUREFILL EXAMPLE
<span
data-­‐picture
data-­‐alt="Jell-­‐O">
<span
data-­‐src="images/retrofood-­‐feature-­‐500.jpg"></span>
<span
data-­‐src="images/retrofood-­‐feature-­‐790.jpg"
data-­‐media="(min-­‐width:
500px)"></span>
<span
data-­‐src="images/retrofood-­‐feature.jpg"
data-­‐media="(min-­‐width:
790px)"></span>
<!-­‐-­‐
Fallback
content
for
non-­‐JS
browsers.
Same
img
src
as
the
iniMal
img.
-­‐-­‐>
<noscript><img
src="images/retrofood-­‐feature-­‐500.jpg"
alt="Jell-­‐O"></noscript>
</span>
N<script>
//
Picture
element
HTML
shim|v
it
for
old
IE
(pairs
with
Picturefill.js)
document.createElement(
"picture"
);
</script>
<script
async="true"
src="scripts/picturefill.js"></script>

75. IMAGE SIZE COMPARISON
264K
79K179K

76. PICTUREFILL EXAMPLE
N<span
data-­‐picture
data-­‐alt="Jell-­‐O">
<span
data-­‐src="images/retrofood-­‐feature-­‐500.jpg"></span>
<span
data-­‐src="images/retrofood-­‐feature-­‐790.jpg"
data-­‐media="(min-­‐width:
500px)"></span>
<span
data-­‐src="images/retrofood-­‐feature.jpg"
data-­‐media="(min-­‐width:
790px)"></span>
<!-­‐-­‐
Fallback
content
for
non-­‐JS
browsers.
Same
img
src
as
the
iniMal
img.
-­‐-­‐>
<noscript><img
src="images/retrofood-­‐feature-­‐500.jpg"
alt="Jell-­‐O"></noscript>
</span>
@media only screen and ( max-width: 960px ) {
.photo-feature img { width: 100%; height: auto; }
}
responsive.css

77. 960 px image

78. 790 px image

79. 500 px image

80. FINAL STEP:TEST!
F

82. CROSS-BROWSERTESTING IS IMPORTANT.

83. Basic usertesting
² Ask someone else to use it
² Load it over a slow connection
² Try lots of devices
² Utilize testing software (BrowserStack.com)
² Cheap and worth it!

85. GO BUILD SOMETHING AWESOME.
THANKYOU!
² @rachelchartoff
² slideshare.net/rachelchartoff
² rachelchartoff@gmail.com