Skip to main content
UploadLanguage (EN)Support
BusinessMobileSocial MediaMarketingTechnologyArt & PhotosCareerDesignEducationPresentations & Public SpeakingGovernment & NonprofitHealthcareInternetLawLeadership & ManagementAutomotiveEngineeringSoftwareRecruiting & HRRetailSalesServicesScienceSmall Business & EntrepreneurshipFoodEnvironmentEconomy & FinanceData & AnalyticsInvestor RelationsSportsSpiritualNews & PoliticsTravelSelf ImprovementReal EstateEntertainment & HumorHealth & MedicineDevices & HardwareLifestyle
Yiannis Konstantakopoulos, profile picture
Uploaded byYiannis Konstantakopoulos
1,155 views

Responsive Web Design & the state of the Web

The document discusses responsive web design, which is an approach where design and development respond to the user's behavior and environment based on screen size, platform, and orientation. It involves flexible grids and layouts, images, and media queries to automatically adjust the website for different devices like laptops and iPads. The goal is for the website to have technology that automatically responds to the user's preferences as they switch devices.

Design◦Technology◦Business◦
Related topics:
Web Design Insights•
Downloaded 35 times
Responsive Web Design & the state of the Web porcupine.gr @yiannis_k
“Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. “ - Kayla Knight on Smashing Magazine
“The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries.“ - Kayla Knight on Smashing Magazine
As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. - Kayla Knight on Smashing Magazine
Why?
Because this world is changing. Rapidly. http://www.flickr.com/photos/nasamarshall/5404263213/
http://www.flickr.com/photos/thomashawk/76170826/
http://www.flickr.com/photos/thomashawk/76170826/
http://www.flickr.com/photos/nasamarshall/5404263213/
http://www.flickr.com/photos/nasamarshall/5404263213/
http://www.flickr.com/photos/emeryjl/520109861/
http://www.flickr.com/photos/emeryjl/520109861/
http://www.flickr.com/photos/jonathanharford/5217423633/
http://www.flickr.com/photos/jonathanharford/5217423633/
(Not so) boring numbers
August 2011 72.2 million Americans accessed social networking sites or blogs on their mobile device (+37% since 2010) Luke Wroblewski http://www.flickr.com/photos/pamhule/5709324762/
May 2012 79% of US smartphone and tablet owners have used their mobile devices for shopping- related activities. Luke Wroblewski http://www.flickr.com/photos/polvero/3422530445/
May 2011 iPad users spend 30% of their time on the device in front of television. Smartphone users spend 20% of their time on the device in front of the television. Luke Wroblewski
What are you gonna do about it? *
What are you gonna do about it? * * Romeo & Juliet - Dire Straits
Create the best experience for your audience no matter the device
WTF. RWD, FTW!
WTF. RWD, FTW! What the Frak. Responsive Web Design, For The Win!
Hicksdesign
Andersson-Wise Architects
Forefathers Group
Food Sense
Food Sense
Food Sense
HTML
HTML Quick ’n’ dirty
HTML <link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" href="mobile.css" /> Quick ’n’ dirty
HTML
HTML Let’s tide things up
HTML <meta name="viewport" content="width=device-width; initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="global.css" /> <link rel="stylesheet" type="text/css" href="media.css" /> Let’s tide things up
CSS /*320px =iPhone portrait */ @media only screen and (max-width: 320px){ ... } /*480px =iPhone landscape */ @media only screen and (min-width: 320px) and (max-width: 480px) { ... } /*768px =iPad portrait */ @media only screen and (min-width: 768px) { ... } /*1024px =iPad landscape */ @media only screen and (min-width: 768px) and (max-width: 1024px) { ... } /*1280px =Medium screens */ @media only screen and (min-width: 1025px) and (max-width: 1280px) { }
Flexible Multimedia
Flexible Multimedia img, object { max-width: 100%; }
Flexible Multimedia img, object { max-width: 100%; } FitVid.js
Flexible Grid
Flexible Grid Golden Grid System
Browser Support
Browser Support
(Far from) Browser Support
(Far from) Browser Support 7 8
(Far from) Browser Support 7 8 Kill these agents
Approaches & Techniques
Responsive vs. Adaptive vs. Mobile vs. whatevah
Mobile first!
The art of hiding
The designer and the front end developer must be one person: you
“Good mobile user experience requires a different design than what’s needed to satisfy desktop users. Two designs, two sites, and cross-linking to make it all work.” - Jacob Nielsen
“Good mobile user experience requires a different design than what’s needed to satisfy desktop users. Two designs, two sites, and cross-linking to make it all work.” “You never know better than your users what - Jacob Nielsen content they want.” - Bruce Lawson
“Good mobile user Separate mobile websites? experience requires a different design than what’s needed to satisfy desktop users. Two designs, two sites, and cross-linking to make it all work.” “You never know better than your users what - Jacob Nielsen content they want.” - Bruce Lawson
“Responsive design might work for uncomplicated, one-off websites, he said, but for applications or networks, responsive design is actually bad.” Kiran Prasad Director of Engineering Mobile at LinkedIn
“Responsive design might work for uncomplicated, one-off websites, he said, but for applications or networks, responsive design is actually bad.” Kiran Prasad Director of Engineering Mobile at LinkedIn
“Responsive design might When is-no-good? work for uncomplicated, one-off websites, he said, but for applications or networks, responsive design is actually bad.” Kiran Prasad Director of Engineering Mobile at LinkedIn
Evaluation
All you need is your good old CSS
http://blog.digidave.org/2009/10/lessons-in-web-development-good-fast-and-cheap-pick-two
One step closer to Utopia* * When the project is fairly simple and when compared with a separate mobile website http://blog.digidave.org/2009/10/lessons-in-web-development-good-fast-and-cheap-pick-two
http://www.flickr.com/photos/lenscrack/5165225746/
One place to focus and update http://www.flickr.com/photos/lenscrack/5165225746/
No separate websites, no duplicate content
http://www.flickr.com/photos/jfisher/3769846083/
Still fresh. Things are a changin* Could be a Bob Dylan’s song http://www.flickr.com/photos/jfisher/3769846083/
http://www.flickr.com/photos/lwr/5044331262/
Think twice! http://www.flickr.com/photos/lwr/5044331262/
Tools & Resources
Testing
Testing Aptus
Testing Screenqueri.es Responsive.is Gallery Media Queries
Grids & Boilerplates Golden Grid System Responsive Grid System 320 and Up JavaScript & Multimedia Adapt.js Adaptive Images Responsive Images Fitvid.js FitText
Articles Tips and best practices to develop responsive websites Responsive CSS that scales Preserving vertical rhythm with CSS and jQuery Build a responsive site in a week: designing responsively (part 1) Build a responsive site in a week: typography and grids (part 2) What’s next Responsive Images and Web Standards at the Turning Point HTML5 adaptive images: end of round one Content Choreography
Wait, there’s more!
Wait, there’s more! Thank you!