The document discusses responsive web design (RWD) which uses a single code base that adapts layout and functionality based on screen size. RWD uses flexible layouts with percentages instead of pixels, flexible images that scale proportionally, and media queries to apply different CSS styles based on screen width. This allows websites to automatically adapt to phones, tablets, laptops and other devices to provide the best possible viewing and interaction experience for the user. Testing across devices is important for RWD to ensure proper functionality and performance.

1. RESPONSIVE WEB DESIGN
SUPPLEMENT

2. THE MOBILE REVOLUTION

3. The Multi-Screen World
• Increasing number of devices we use per day
effects how we search and consume content.
– Phones
– Tablets
– Watches
– Desktops/Laptops
– TVs, DVD players
– Gaming Consoles
The New Multi-Screen World, Google 2012

4. How Do We Adapt to This New World?
Separate Mobile Website
A separate website is designed specifically for mobile. Results in two
code-bases with different functionality for each.
Adaptive Website Design
Websites adapt to the width of the browser at specific points. The
website is only concerned about the browser being a specific width, at
which point it adapts the layout.
Responsive Website Design
Websites respond to the size of the browser at any given point. No
matter what the browser width may be, the site adjusts its layout (and
perhaps functionality) in a way that is optimized to the screen.

5. Responsive Web Design (RWD)
Responsive Website Design uses a single HTML
code base for all platforms.
“Rather than creating disconnected designs, each
tailored to a particular device or browser, we should
instead treat them as facets of the same experience. In
other words, we can craft sites that are not only more
flexible, but that can adapt to the media that renders
them.”
- Ethan Marcotte, Author of Responsive Web Design

6. The Ingredients of RWD
1. Flexible/Fluid Layouts
2. Flexible Images and Media
3. Media Queries

7. FLEXIBLE LAYOUTS

8. Fluid Grid Layouts
• Rather than setting
our layouts in
pixels we use
percentages.
• We adjust our box
model math
accordingly

9. Responsive Typography
• We set type in percentages, em units, or rem units
• Type adjusts relative to a flexible baseline.
• Watch your line length for readability.
• Adjust font size to be larger on smaller screens

10. FLEXIBLE IMAGES AND MEDIA

11. Flexible Images
• Image widths are set to expand
to fill the size of their container
and maintain proportion.
• Capture at highest resolution &
let browser scale
img {
width: 100%;
height: auto;
}

12. Scalable Vector Graphics (SVGs)
• Vector based graphics rendered by the browser.
– Can scale up/down without loss of quality
– Low file sizes
– Can be modified via css to change size, color, etc...
• If you have a flat illustration,
An icon, a logo, just about
anything that can be
displayed as an SVG, then
SVG is the way to go.

13. What About High Resolution Screens?
• Some techniques use new HTML elements or attributes to
account for multiple versions of the image to fit the correct
resolution determined by the browser.
– <picture> element
– “srcset” attribute on <img> element
No agreed upon solution yet. Both techniques have their strengths/weaknesses and may
need additional javascripting or polyfills for true cross-browser support.

14. MEDIA QUERIES

15. What Are Media Queries?
• Media Queries are a CSS3 module allowing
content rendering to adapt to conditions such as
screen resolution (e.g. smartphone screen vs.
computer screen).
• It became a W3C recommended standard in
June 2012, and is a cornerstone technology of
Responsive web design.
• http://mediaqueri.es/

16. Common Media Queries
• max-width
• max-device-width
• min-width
• min-device-width
• vw (viewport width)
• vh (viewport height)

17. Responsive Web Design Kittens

18. Graceful Degradation vs Progressive Enhancement

19. THINGS TO CONSIDER

20. Test! Test! Test!

21. Keep In Mind
• Performance/Load times
• Accessibility
• Imagery
• Scripts
• Typography - web fonts, font stack fallbacks on
devices (standard desktop typefaces not
available on mobile)

22. A successful responsive design bends,
flexes, and breaks the right way to make the
best use of the available space.
- Jamie Neely, Typecast