retro responsive: from fixed-width to flexible in 55 minutes
TRANSCRIPT
![Page 1: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/1.jpg)
Retro Responsive From Fixed-width to Flexible
in Fifty-five Minutes
p Rachel chartoff Web designer
Engineering IT shared services
![Page 2: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/2.jpg)
![Page 3: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/3.jpg)
![Page 4: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/4.jpg)
Rchartoff
ravelry.com
![Page 5: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/5.jpg)
![Page 6: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/6.jpg)
![Page 7: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/7.jpg)
2013 Edible Book Festival
![Page 8: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/8.jpg)
2013 Edible Book Festival
“As I Lay Frying”
![Page 9: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/9.jpg)
Engineering IT SHARED SERVICES
Josh Potts Laura Hayden Rachel Chartoff Amy Adams Amy Hurst David Kees YOU?
![Page 10: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/10.jpg)
responsive design IS:
“Design for the ebb and flow of things.” – Ethan Marcotte ² Device independence ² Visual flexibility ² Performance A
![Page 11: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/11.jpg)
responsive design
IS design for
_______.
![Page 12: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/12.jpg)
REACH YOUR 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
![Page 13: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/13.jpg)
A
![Page 14: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/14.jpg)
A
![Page 15: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/15.jpg)
A
![Page 16: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/16.jpg)
A
![Page 17: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/17.jpg)
![Page 18: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/18.jpg)
AWWW!
![Page 19: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/19.jpg)
![Page 20: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/20.jpg)
PHABLET
![Page 21: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/21.jpg)
PHashion challenge?
si.wsj.net www.abricocotier.fr
![Page 22: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/22.jpg)
![Page 23: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/23.jpg)
SPACE IS NOT THERE TO BE FILLED
² Viewable angle ² Line length ² 960px still standard
![Page 24: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/24.jpg)
Helpful Tools
p
![Page 25: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/25.jpg)
Firefox:
Responsive Design View
Tools > Web Developer > Responsive Design View
![Page 26: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/26.jpg)
![Page 27: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/27.jpg)
![Page 28: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/28.jpg)
![Page 29: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/29.jpg)
CHROME: DEV TOOL RULERS
² View > Developer > Developer Tools ² Resize window to view dimensions
![Page 30: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/30.jpg)
² Subscription-based tool ² Interact with (almost) any browser ² Simulate mobile devices ² browserstack.com
![Page 31: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/31.jpg)
![Page 32: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/32.jpg)
![Page 33: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/33.jpg)
Getting Started
i
![Page 34: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/34.jpg)
an existing site
² Header and footer ² Header navigation bar ² 960-pixel container ² Horizontally centered
G
![Page 35: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/35.jpg)
A
![Page 36: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/36.jpg)
container
![Page 37: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/37.jpg)
container
header
![Page 38: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/38.jpg)
container
header
content
![Page 39: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/39.jpg)
container
header
content
footer
![Page 40: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/40.jpg)
A FEW HTML ADDITIONS
Y
![Page 41: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/41.jpg)
ADD A VIEWPORT META TAG
<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
![Page 42: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/42.jpg)
ADD A VIEWPORT CSS RULE, TOO
@viewport, @-ms-viewport { zoom: 1.0; width: extend-to-zoom;
}
![Page 43: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/43.jpg)
SAVE US FROM compatibility MODE
<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
![Page 44: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/44.jpg)
MEDIA QUERIES
w
![Page 45: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/45.jpg)
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/
![Page 46: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/46.jpg)
SMALLEST OR LARGEST sizes FIRST?
² Putting smallest sizes first utilizes the cascade, gets around IE8 issues
² I write largest to smallest, then re-arrange before launch
![Page 47: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/47.jpg)
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">
![Page 48: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/48.jpg)
BASIC MEDIA QUERY FoRMAT
#container { width: 960px; }
@media only screen and (max-width: 960px ) { #container { width: 100%; }
}
style.css
responsive.css
![Page 49: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/49.jpg)
START WITH large containers
² Change px or em widths to percentages ² Remove floats ² Check padding – may not need as much
![Page 50: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/50.jpg)
Responsive containers
@media only screen and ( max-width: 960px ) { #container, #header, #content, #footer { width: 100%; float: none; padding: 0px; }
}
responsive.css
![Page 51: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/51.jpg)
BASIC LAYOUT
![Page 52: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/52.jpg)
SAME LAYOUT,
SIZED IN
PERCENTAGES
803 px
![Page 53: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/53.jpg)
Size Down until it breaks down
² When layout breaks, note pixel width ² Make a new @media query with rules for
that max-width
![Page 54: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/54.jpg)
REMOVE
FLOATS,
Stack nav
ITEMS
672 px
![Page 55: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/55.jpg)
Alter font
sizes
320 px
![Page 56: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/56.jpg)
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
![Page 57: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/57.jpg)
A
![Page 58: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/58.jpg)
Examine padding
² Use less vertical padding to save mobile users from scrolling
² Don’t remove too much space ² Keep targets big
![Page 59: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/59.jpg)
Responsive typography
• 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
![Page 60: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/60.jpg)
TRY using 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
![Page 61: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/61.jpg)
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
![Page 62: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/62.jpg)
RESPONSIVE NAVIGATION
q
![Page 63: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/63.jpg)
Responsive nav CHECKLIST
² Offer same options as full-size site ² Use established design patterns ² There is no “hover”
![Page 64: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/64.jpg)
Stacked
![Page 65: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/65.jpg)
Stacked in
columns
Code and examples: www.hongkiat.com/blog/responsive-web-nav/
![Page 66: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/66.jpg)
HAMBURGER
SLIDE-OUT:
FROM SIDE
![Page 67: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/67.jpg)
HAMBURGER
SLIDE-OUT:
FROM TOP
![Page 68: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/68.jpg)
SLICKNAV
² Keyboard Accessible
² Degrades gracefully without JavaScript
² Creates ARIA compliant menu
![Page 69: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/69.jpg)
RESPONSIVE IMAGES
b
![Page 70: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/70.jpg)
Please, think of the BANDWIDTH.
² display: none hides the problem ² Browsers load all images anyway ² Detect smaller screens, load smaller images
![Page 71: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/71.jpg)
HTML5 PICTURE TAG - 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>
![Page 72: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/72.jpg)
IN THE MEANTIME, choose...
² HiSRC – jQuery plugin ² Adaptive Images – server-side PHP ² Sencha.io Src – third-party processor ² Picturefill - JavaScript
Z
![Page 73: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/73.jpg)
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
![Page 74: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/74.jpg)
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>
![Page 75: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/75.jpg)
IMAGE SIZE COMPARISON
264K
79K 179K
![Page 76: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/76.jpg)
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
![Page 77: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/77.jpg)
960 px image
![Page 78: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/78.jpg)
790 px image
![Page 79: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/79.jpg)
500 px image
![Page 80: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/80.jpg)
FINAL STEP: TEST!
F
![Page 81: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/81.jpg)
![Page 82: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/82.jpg)
CROSS-BROWSER TESTING IS IMPORTANT.
![Page 83: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/83.jpg)
Basic user testing
² 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!
![Page 84: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/84.jpg)
![Page 85: Retro Responsive: From Fixed-Width to Flexible in 55 Minutes](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a4efec1a28ab36408b47dd/html5/thumbnails/85.jpg)
GO BUILD SOMETHING AWESOME.
THANK YOU!
² @rachelchartoff ² slideshare.net/rachelchartoff ² [email protected]