Nate Reusser recently spoke in front of 80+ advertising and marketing professionals during a luncheon held at the Fort Wayne Advertising Federation. Here are his slides, full of useful information and resources!

1. R S O SV
EP NI E
W BD SG
E EI N
Nate Reusser #AdFedRWD
@natereusser

2. W A I R D
H T S W
Approach to web design in which a site is crafted
to provide an optimal viewing experience
Provides easy reading and navigation with a
minimum of resizing, panning, and scrolling
Mix of flexible grids and layouts, images and an
intelligent use of CSS media queries
RESPONSIVE WEB DESIGN #AdFedRWD

3. W Y
H
F C SO
O U N
R D
W ?
RESPONSIVE WEB DESIGN #AdFedRWD

5. RESPONSIVE WEB DESIGN #AdFedRWD

6. 350 MILLION MILLION
MILLION
193 100
IPODS IPHONES IPADS

7. I 2 1 ..
N 0 2.
2.4
BILLION
INTERNET USERS
WORLDWIDE
31
PERCENT
USED A TABLET OR
E-READER (U.S. Internet Population)
1.3
EXABYTES
MOBILE DATA TRAFFIC
PER MONTH
RESPONSIVE WEB DESIGN #AdFedRWD

8. 2 1
00
Ethan Marcotte
coined the phrase
RESPONSIVE WEB DESIGN #AdFedRWD

9. 2 1
01
RESPONSIVE WEB DESIGN #AdFedRWD

10. 2 1
02
RESPONSIVE WEB DESIGN #AdFedRWD

11. R DB S C
W AI S
1. A Fluid Foundation
2. Flexible Content
3. Media Queries
RESPONSIVE WEB DESIGN #AdFedRWD

12. F UD
L I
F U D TO
O N A I N
• Basic Fluid Layout [EXAMPLE]
Content continually flows or adjusts in a word-wrap fashion. No distinct
content differences
• Adaptive Layout [ EXAMPLE]
Predefined break points where different layouts are triggered.
• Responsive Layout [EXAMPLE]
Combination of Fluid & Adaptive. Still have predefined break points,
however, content will flow to expand or contract
RESPONSIVE WEB DESIGN #AdFedRWD

13. F E I L
L XB E
C N E T
O T N
• Start with a solid Content Plan
• Gather content prior to design & dev
• Use a Content Priority Guide
RESPONSIVE WEB DESIGN #AdFedRWD

14. RESPONSIVE WEB DESIGN #AdFedRWD

15. M DA
E I
Q E I S
U RE
@media (min-width: 720px)
{
.logo {
float: none;
padding: 10px;
}
}
RESPONSIVE WEB DESIGN #AdFedRWD

16. B E K ON S
R A P I T
• 0-519 pixels Most all phones will see this in portrait
• 520-759 pixels
Phones with large resolutions, tablets with small
resolutions in portrait mode
• 760-959 pixels
iPad and most Android Tablets in portrait, most Android
phones in Landscape orientation, Resized Desktops
• 960-1140+ pixels
Desktop full width, Kindle Fire, iPad in Landscape
Mode, Flat Screen TVs
RESPONSIVE WEB DESIGN #AdFedRWD

17. I E ST
T M O
C NI E
O SD R

18. N VG TO
A I A I N
Single-Level Multi-Level
• Toggle [EXAMPLE] • Multi-Toggle [EXAMPLE]
• Footer Anchor [EXAMPLE]
• Select Menu [EXAMPLE]
RESPONSIVE WEB DESIGN #AdFedRWD

19. F A U E
E T R
S P O T
U P R
• Click to Call
• GeoLocation
• GeoFencing
• Native Device Functionality
RESPONSIVE WEB DESIGN #AdFedRWD

20. E F C I E
F E TV ?
• Better experience for mobile users
• “One-size” approach to web analytics
won’t work
• Google recommends RWD (June 2012)
• Less costly to maintain
RESPONSIVE WEB DESIGN #AdFedRWD

21. PROS CONS
• One Codebase • Problems with images,
javascript disabled
• Single URL
• Social Sharing • Advertising
• Device Agnostic • More development &
planning
• Future Proof
• Legacy Support
RESPONSIVE WEB DESIGN #AdFedRWD

22. N E F RR D
E D O W ?
• Depends on the project
• Target Audience Needs, need an app?
• Budget
RESPONSIVE WEB DESIGN #AdFedRWD

23. D M S
E O

24. G TS A T D
E T R E
Great responsive frameworks to get the hang of things:
• Foundation by ZURB
http://foundation.zurb.com
• Fluid Baseline Grid System
http://www.fluidbaselinegrid.com
• Twitter Bootstrap 2.0
http://twitter.github.com/bootstrap/
• 1140 Grid System
http://cssgrid.net/
• Skelton
http://www.getskeleton.com/
RESPONSIVE WEB DESIGN #AdFedRWD

25. R S U C S
EO R E
• Responsive Layouts & Patterns - Brad Frost
http://bit.ly/U4N5qH
• Device Agnostic Approach to RWD
http://bit.ly/GHjK2D
• Responsive Web Design (A List Apart)
http://bit.ly/bcKwQQ
• Media Queries
http://mediaqueri.es/
RESPONSIVE WEB DESIGN #AdFedRWD

26. S A TT I K N
T R HN I G
• Pixel Density (i.e. Touch Targets)
• Typekit / WebFont (Hosted Fonts)
• Retina Display
• Pictos / Font Glyphs / SVGs
RESPONSIVE WEB DESIGN #AdFedRWD

27. T EF T R
H U U E
• Screensize - Viewport, Orientation, Resolution
• Connection Speed - Adjusting bandwidth
during session
• Color - Poor Lighting, Monochrome, Retina
Display
• Interaction - Touch, Mouse, Voice, Keyboards
• Performance - Battery Life, Performance, CPU

28. T A K!
H N S
Slides will be posted to:
http://www.slideshare.net/reusserdesign
RESPONSIVE WEB DESIGN #AdFedRWD