A 23 slide presentation discussing the benefits, challenges, and technical methods of implementing responsive web views.

1. Responsive Web
Design & Development
John Fitzgerald

2. Overview
What is Responsive Web Design
Benefits of adoption
Challenges of adoption
Responsive methods (The Technical Part)
Helper Tools

3. What is RWD?
A method of building web views which
adapt to the display of the device on
which they are viewed

4. Benefits of Building
Responsively
Allows the development of a consolidated front-
end codebase for use on all devices
Improves maintainability of codebase
Reduces frequency of app submissions and allows
apps to be updated transparently, without forcing
users to download from iTunes or Android
Marketplace
Reduces expense of maintaining separate teams
to maintain codebases for different devices

5. The Challenges of
Becoming Responsive
More thought must go into designs
Designer and developer learning curve
Responsive views take more time to build than
fixed views*
Responsive views require more testing than fixed
views*
* but not more than 3 separate views.

6. Responsive Methods
Reset CSS
Percentage Widths
Responsive Font Sizing
Responsive Image Sizing
Viewport Control
CSS Media Queries

7. Reset CSS
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
text-decoration:none;
list-style:none;
}

8. Percentage Widths

9. The Most Important
Equation in the
Responsive Web World
TARGET / CONTEXT = RESULT

10. Typical % Calculation
445px / 898px = 0.495545657

11. Commenting % Widths
#header #btn-homepage{
position:absolute;
width:16.17977528%; /* 144 / 890 */
min-width: 100px;
bottom:20px;
right:0;
}

12. Hazards of Percentages
Margin:
Calculated based on width of parent of the
element to which they’re assigned.
Padding:
Calculated based on the width of the element to
which they’re assigned.

13. Responsive Font Sizing
em units rather than pixels
Default font size in browsers: 16 pixels

14. Responsive Images

15. Responsive Images
max-width: 100%;
Constrains image width to a maximum of the size
of the containing element
Supported in all modern browsers
Images sized in this way are downloaded at native
size, even if displayed at far smaller scale.
Background images and sprites have limited
usefulness in responsive web design, due to
currently-supported browser feature-sets.

16. Viewport Control
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes"/>
Property Description
Width of the viewport in pixels (or device-width).
width
If width isn’t set, it defaults to a desktop size (980px on mobile Safari).
Height of the viewport in pixels (or device-height).
height
Generally you don’t need to worry about setting this property.
(0 to 10.0) Multiplier that sets the scale of the page after its initial display.
initial-scale Safe bet: if you need to set it, set it to 1.0.
Larger values = zoomed in, smaller values = zoomed out
minimum- (0 to 10.0) The minimum multiplier the user can “zoom out” to.
scale Defaults to 0.25 on mobile Safari.
maximum- (0 to 10.0) The minimum multiplier the user can “zoom in” to.
scale Defaults to 1.6 on mobile Safari.
(yes/no) Whether to allow a user from scaling in/out (zooming in/out).
user-scalable
Default to “yes” on mobile Safari.

17. CSS Media Queries
Two ways to use media queries:
<link rel="stylesheet" href="screen.css"
media="screen and (min-width: 1024px)" /
>
@media screen and (min-width: 1024px) {}
The logical “and” can be used to join multiple
queries
@media screen and (min-width: 1024px)
and (max-width: 1228px) {}

18. Media Query Features
Media queries test for the existence or extent of
device features to conditionally load CSS or apply
styles.
“Rendering Surface” is the device’s entire screen.
“Display Area” is the browser window on the
device.

19. HAS min- AND
FEATURE DEFINITION
max- PREFIXES
width The width of the display area YES
height The height of the display area YES
device-width The width of the device’s rendering surface YES
device-height The Height of the device’s rendering surface YES
orientation Accepts portrait or landscape value NO
Ratio of the display area’s width over its height. For example: on a desktop,
aspect-ratio YES
you’d be able to query if the browser window is at a 16:9 aspect ratio.
device-aspect- Ratio of the device’s rendering surface width over its height. For example: on
YES
ratio a desktop, you’d be able to query if the screen is at a 16:9 aspect ratio.
The number of bits per color component of the device. For example, an 8-bit
color color device would successfully pass a query of (color: 8). Non-color devices YES
should return a value of 0.
The number of entries in the color lookup table of the output device. For
color-index YES
example, @media screen and (min-color-index: 256).
The number of bits per pixel on a monochrome device If the device is not a
monochrome YES
monochrome device, the output device value will be 0.
Tests the density of the pixels in the device, such as:
resolution YES
screen and (resolution: 72dpi) or screen and (max-resolution: 300dpi).
For tv-based browsing, measures whether the scanning process is either
scan NO
progressive or scan.
Tests whether the device is a grid-based display, like feature phones with one
grid NO
fixed-width font. Can be expressed simply as (grid).

20. Device-specific Queries
/* Smartphones (portrait and landscape) */ /* iPads (portrait) */
@media only screen @media only screen
and (min-device-width : 320px) and (min-device-width : 768px)
and (max-device-width : 480px) { and (max-device-width : 1024px)
/* Styles */ and (orientation : portrait) {
} /* Styles */
}
/* Smartphones (landscape) */
@media only screen /* Desktops and laptops */
and (min-width : 321px) { @media only screen
/* Styles */ and (min-width : 1224px) {
} /* Styles */
}
/* Smartphones (portrait) */
@media only screen /* Large screens */
and (max-width : 320px) { @media only screen
/* Styles */ and (min-width : 1824px) {
} /* Styles */
}
/* iPads (portrait and landscape) */
@media only screen /* iPhone 4 */
and (min-device-width : 768px) @media
and (max-device-width : 1024px) { only screen and (-webkit-min-device-pixel-ratio :
/* Styles */ 1.5),
} only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
/* iPads (landscape) ----------- */ }
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

21. Helper Tools
Modernizr:
A JavaScript Library which allows web views
which take advantage of less-fully supported
features to display properly on older browsers.
modernizr.com
Skeleton:
A library of JavaScript and CSS files meant to
allow fast creation of responsive web views.
getskeleton.com

22. Final Thoughts
To achieve the best results, front-end devs and
designers should collaborate when creating
responsive mocks/templates.
Responsiveness is a mindset. When approaching
a new view, resist the urge to lock things down
and, instead, think fluidly.
Responsive Web Design is evolving as standards
and browser adoption of those standards change.
There is no substitute for looking at a view on the
devices on which users will be viewing it.

23. ?’s