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.
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
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
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?
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
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