1. 1
Responsive web design:
Our perspective and approach

2. 2

3. 3
Responsive web design: overview
"Responsive Web Design" is a web design and
development approach that enables a site's design
to change dynamically based on the size of the
browser window in order to enable an optimized
experience on different devices — e.g. desktop,
tablet, mobile — without creating separate,
bespoke sites or apps for those devices.

4. 4
Responsive web design: overview
Comprised of three core design & technology
approaches:
• Fluid grids — creates breakpoints that allow
designs to switch seamlessly between browser
widths
• Flexible images — enables images to scale.
• Media queries — creates rules that ensure that
the font sizes, layouts and so forth get delivered
appropriately.

5. 5
Responsive web design: browsers
• Internet Explorer 9+
• Chrome 4+
• Firefox 3.5+
• Opera 9.5+
• iOS 3.2+
• Android 2.1+

6. 1024px
320px 480px 768px
iPad (L)
iPhone (P) iPhone (L) iPad (P)
Android Tablets (L)
Android (P) Android (L) Android Tablets (P)
Desktop

7. 7
Responsive web design: process
• Lead with content and functional requirements,
and select a mobile, desktop, or tablet resolution
to ratify a design direction before designing
cross-platform variations
• Consider overall mobile strategy vis-a-vis the
mobile “version”
• Embrace elasticity and the fact that 100% of all
scenarios cannot be precisely anticipated
• Don’t focus on the transitions between states
— few users will see them
• Tightly integrate technology prototyping into the
design process