Responsive web design allows websites to automatically adjust their layout and content presentation based on the screen size of the device used to access the site. It began as a way to create flexible and adaptive designs for different devices without needing separate mobile sites. Key techniques include flexible grids, flexible images, and media queries. Separating content from design and functionality leads to more flexible and innovative solutions that can be delivered across different technologies and devices through responsive techniques and APIs.

1. Understanding
Responsive Web Design
Ryan LaBouve

2. Ryan LaBouve
@RyanLaBouve | ryanlabouve.com
WHO AM I?

3. University of Oklahoma
College of Arts & Sciences
WHERE I WORK
Advise®
The University of Oklahoma

4. HolyArchers
holyarchers.com

5. Why am I talking about RWD? [1/2]
DESIGNER
DEVELOPER
+
#RWD, Recurring problem with many sides

6. As much as “Internet” is a buzzword
IS THIS JUST
ANOTHER
BUZZWORD?
#RWD

7. Buzzword Slide 1
SOCIAL MEDIA SEAMLESSLY POWERING
GAME CHANGING GLOBAL EVENTS CAUSI
TRENDING TWITTER PARADIGMS MOBILI
CLOUD TECHNOLOGIES TO FROM WIN-WI
ROCK STAR RESPONSIVE WEB DESIGN AT
SERVICE LEVEL DELIVERABLES FOR MULT
BLEEDING EDGE START UP CULTURE FOR
LOW HANGING FRUIT AS THE MISSION ST
CREATIVE AND COLLABORATIVE SOLUTIO
BIG DATA LEVERAGING ANALYTIC FOUND
MOBILE WEB VIRTULIZATIONS DE DUPING
JSON REST API THAT OAUTH WILL AUTHO

8. Buzzword Slide 2

9. Obligatory Slide with Statistics [1/2]
http://www.dotcominfoway.com/blog/responsive-web-design-infographic

10. Obligatory Slide with Statistics [2/2]
http://www.splio.com/responsive/

11. Why am I talking about RWD? [2/2]
IT’S HAPPENING
USERS DEMAND IT
WE MUST ADVOCATE

12. Today’s Agenda
• Users and the Internet
• History of Responsive Web Design
• Separating Ideas from Technology
• Getting Responsive
Understanding
Responsive
Web Design
Why?
What?
How Pt. I
How Pt. II

13. Users and
The Internet

14. HOW DO YOU
THINK ABOUT
THE INTERNET?
Users and the Internet

18. Integration and Abstraction
Users and the Internet
HOW DO YOU SEE THE
INTERNET?

19. How I See The Internet
Users and the Internet

20. This is a lot of us
Users and the Internet
SOUND FAMILIAR?

21. WHAT ABOUT
YOUR USERS?
Users and the Internet
It’s easy to think everyone
knows the internet like you do…

22. Users and the Internet
The Elderly?

23. Users and the Internet
Kid with tablet?

24. Users and the Internet
Teenagers on Cellphones?

25. Users and the Internet
Someone who’s lost and driving?

26. Users and the Internet
Extreme Vision Impairment?

27. SAME STORY
!
DIFFERENT WAYS
TO TELL IT
Users and the Internet
Getting your site to all these
people in a way they get it?

28. Users and the Internet
Same Story, told different
ways.
vs

29. History of
Responsive Web
Design

30. My Vastly Oversimplified
History of the Computer,
Internet, and Possible
the World
History of Responsive Web Design
First…

31. History of Responsive Web Design
Tower PC Era
800x600

32. History of Responsive Web Design
Rise of Laptops
1024x768… mostly

33. History of Responsive Web Design
Mobile Age
… now what?

34. History of Responsive Web Design
Common Resolutions

35. History of Responsive Web Design
Responsive Web Design
Flexible Grid
Flexible Images
Media Queries

36. History of Responsive Web Design
Responsive Web Design

37. History of Responsive Web Design
What’s Next?
A Few Techniques
A New Web

38. History of Responsive Web Design
Whole New Challenges
Native VS Web
Android VS iPhone
Mobile Version VS Multiple Sites

39. Separating
Ideas from
Technology

40. History of Responsive Web Design
We can’t hire specialists for
everything…
• Web Sites
• App
• iPhone App
• Android App
• Mobile Web Site
• XBox Integration
• Apple TV, Roku, etc.
• AT Compatible
• etc…
WHERE
DO WE
FOCUS?

41. Separating Ideas From Technology
What’s Next?
START WITH
CONTENT

43. Separating Ideas From Technology
Focusing on Content is the Key
http://dribbble.com/shots/978690-Content-is-like-water

44. Separating Ideas From Technology
Starts with Separating Content
from Design from Functionality

45. Separating Ideas From Technology
What’s Next?
THIS LEADS TO
FLEXIBILITY

46. Separating Ideas From Technology
http://trentwalton.com/2011/07/14/content-choreography/
Trent
Walton

47. Separating Ideas From Technology
What’s Next?
WHICH LEADS TO
INNOVATION

48. Separating Ideas From Technology
http://bradfrostweb.com/blog/post/atomic-web-design/
Brad Frost

49. Separating Ideas From Technology
What’s Next?
HOW DOES THIS
LOOK?

50. Separating Ideas From Technology
Functionality Delivered Via
API

51. Separating Ideas From Technology

52. Separating Ideas From Technology
New wave of API driven
companies

53. Separating Ideas From Technology
What’s Next?
WHERE DOES THIS
LEAD?

54. Separating Ideas From Technology
Next Wave Responsive
Touch
Voice
Auxiliary
Smart Watches,
Google Glass
Siri
XBox Kinect

55. Separating Ideas From Technology
A New Frontier
Internet of Things
Everything can get on the internet
New Data Sources
Bio Feedback * Home Integration * Location Awareness
Super-connected Users
Always on. Never off. More and more integration

56. Getting
Responsive

57. Getting Responsive
Not One Right Way
SOME CONSISTENT
WINS

58. Getting Responsive
Learning the Basics
Flexible Grid
Flexible Images
Media Queries

59. Getting Responsive
Using the Right Tools
Designers
Developers
Style Tiles
Element Collages
Learning a little code
Bootstrap
Foundation
jQuery Plugins
-FlexVid.js
-Fittext.js
@beep
@brad_frost
@samkap
@davatron5000
@chriscoyier
@trentwalton
@leaverou
Many others…
Other People

60. Getting Responsive
Bootstrap or FoundationDevelopers
All the Basics
Full of Best Practices
Solid Community
Great Starting Point
Open Source

61. Getting Responsive
Style Tiles or Element CollagesDesigners
Define a Visual Language
Think Outside of Pixels
Flexible Deliverables
Iteration

62. Getting Responsive
Not One Right Way
REVISING PROCESSES

63. VS
Waterfall
Iteration

64. Getting Responsive
There Will Always Be Changes
FOCUS ON USERS

65. Getting Responsive
It doesn’t matter where you are
in the process
DON’T GIVE UP

66. THANKS!