Responsive Design Heaven & Hell

Responsive Design
      Heaven & Hell*

                Clarissa Peterson
                  clarissapeterson.com
                         @clarissa


*Someone else chose the title, not me.... I’m not quite so dramatic.
UX & Mobile Creatives Meetup
    September 25, 2012
"So you’re going to make websites
work better on mobile phones?
Because right now they mostly all suck."
              - my friend who's not a web designer
Mobile
It’s Not About
     Mobile
It’s About the Web
Responsive Web Design
Responsive Web Design
Responsive Web Design

 A collection of techniques that allow
your website to respond to the device
      that it is being viewed on.


This allows all users to have an optimal experience
without creating separate sites for different devices.
Options
1. Design for the Desktop
2. Separate Mobile Site
 3. Native Mobile App
  4. Responsive Design
Advantages of
Responsive Design
Consistent experience
Content parity
No zooming
Single code base
Device agnostic
URL management
Disadvantages of
Responsive Design
Context of use
Speed/bandwidth
Advertising
Workflow
We aren’t good at it yet.
"It's not like our industry nailed web
design before we started doing
responsive design. It's still a work in
progress."
                                 - Dan Willis
                                   @uxcrank
How do you choose?
Content sites vs. transactional sites
Context of use
Resources
Your CMS might decide for you
Don’t do a native app just
because your boss wants one.
Things to Consider when Doing
      Responsive Design
Device/browser support
Test on real devices
Brief promo:
 Device Lab DC
devicelabdc.com
 @devicelabdc
Speed/bandwidth
Small-screen first
Let content determine design
Let design determine breakpoints
Consider user experience
  & business goals first
Communicate with your clients
Responsive workflow
Questions
Resources
A Few Examples of Responsive Design

              Boston Globe      http://www.bostonglobe.com
        Smashing Magazine       http://www.smashingmagazine.com
               People (mobile site)     http://m.people.com
        United Pixelworkers    http://www.unitedpixelworkers.com/
             World Wildlife Fund      http://worldwildlife.org/
         Stuff & Nonsense      http://www.stuffandnonsense.co.uk/
        Emeril’s Restaurants    http://www.emerilsrestaurants.com/
       Andersson-Wise Architects      http://www.anderssonwise.com
                    AIDS.gov (HHS)      http://aids.gov
WordPress Theme: Twenty Twelve     http://twentytwelvedemo.wordpress.com/
Books

Ethan Marcotte - Responsive Web Design (2011)
http://www.abookapart.com/products/responsive-web-design/


     Luke Wroblewski - Mobile First (2011)
     http://www.abookapart.com/products/mobile-first



                    Websites

             @RWD (Ethan Marcotte)
                 https://twitter.com/RWD



                   Future Friendly
                  http://futurefriend.ly/



                      Brad Frost
              http://bradfrostweb.com/blog/
Articles

             Responsive Web Design - Ethan Marcotte (May 2010)
                   http://www.alistapart.com/articles/responsive-web-design/



How to Approach a Responsive Design (Boston Globe) - Tito Bottitta (Jan. 2012)
          http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/



      Design Process In The Responsive Age - Drew Clemens (May 2012)
       http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/



    Making of: People Magazine's Responsive Mobile Website (July 2012)
                  http://globalmoxie.com/blog/making-of-people-mobile.shtml



        Presidential Smackdown Edition: Separate Mobile Website Vs.
                 Responsive Website - Brad Frost (Aug. 2012)
                     http://mobile.smashingmagazine.com/2012/08/22/
                  separate-mobile-responsive-website-presidential-smackdown/
1 of 46

Recommended

UX & Responsive Design by
UX & Responsive DesignUX & Responsive Design
UX & Responsive DesignClarissa Peterson
30.7K views94 slides
Content Strategy for Responsive Websites by
Content Strategy for Responsive WebsitesContent Strategy for Responsive Websites
Content Strategy for Responsive WebsitesClarissa Peterson
10.5K views94 slides
Responsive Design Essentials by
Responsive Design EssentialsResponsive Design Essentials
Responsive Design EssentialsClarissa Peterson
17.3K views125 slides
Responsive Design by
Responsive Design Responsive Design
Responsive Design Clarissa Peterson
12.7K views162 slides
Responsive Web Design by
Responsive Web DesignResponsive Web Design
Responsive Web DesignTung Dang
1.4K views66 slides
Responsive Design for Non-Techies by
Responsive Design for Non-TechiesResponsive Design for Non-Techies
Responsive Design for Non-TechiesMalcolm Jones
6.7K views22 slides

More Related Content

What's hot

Mobile First Responsive Web Design — BD Conf Oct 2013 by
Mobile First Responsive Web Design — BD Conf Oct 2013Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013Jason Grigsby
54.4K views173 slides
Responsive Design Tools & Resources by
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & ResourcesClarissa Peterson
4.1K views177 slides
Delivering results: The State of Content Management and the Opportunity for D... by
Delivering results: The State of Content Management and the Opportunity for D...Delivering results: The State of Content Management and the Opportunity for D...
Delivering results: The State of Content Management and the Opportunity for D...John Eckman
3.3K views28 slides
Delivering the News on WordPress by
Delivering the News on WordPressDelivering the News on WordPress
Delivering the News on WordPressJohn Eckman
1.1K views23 slides
Introduction to Responsive Web Design by
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web DesignClarissa Peterson
23.5K views152 slides
Jensimmons html5live-responsivedesign by
Jensimmons html5live-responsivedesignJensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesignJen Simmons
1.9K views136 slides

What's hot(20)

Mobile First Responsive Web Design — BD Conf Oct 2013 by Jason Grigsby
Mobile First Responsive Web Design — BD Conf Oct 2013Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013
Jason Grigsby54.4K views
Delivering results: The State of Content Management and the Opportunity for D... by John Eckman
Delivering results: The State of Content Management and the Opportunity for D...Delivering results: The State of Content Management and the Opportunity for D...
Delivering results: The State of Content Management and the Opportunity for D...
John Eckman3.3K views
Delivering the News on WordPress by John Eckman
Delivering the News on WordPressDelivering the News on WordPress
Delivering the News on WordPress
John Eckman1.1K views
Introduction to Responsive Web Design by Clarissa Peterson
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web Design
Clarissa Peterson23.5K views
Jensimmons html5live-responsivedesign by Jen Simmons
Jensimmons html5live-responsivedesignJensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jen Simmons1.9K views
The Drop and The Word: Structured Content in WordPress and Drupal by John Eckman
The Drop and The Word: Structured Content in WordPress and DrupalThe Drop and The Word: Structured Content in WordPress and Drupal
The Drop and The Word: Structured Content in WordPress and Drupal
John Eckman1.8K views
Adapting to Responsive Design - London Web - Feb 2015 by Matt Gibson
Adapting to Responsive Design - London Web - Feb 2015 Adapting to Responsive Design - London Web - Feb 2015
Adapting to Responsive Design - London Web - Feb 2015
Matt Gibson28.6K views
Adapting to Input — Smashing Conference NYC by Jason Grigsby
Adapting to Input — Smashing Conference NYCAdapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYC
Jason Grigsby938 views
Responsive Design & Mobile First by Luke Brooker
Responsive Design & Mobile FirstResponsive Design & Mobile First
Responsive Design & Mobile First
Luke Brooker5.9K views
When responsive web design meets the real world by Jason Grigsby
When responsive web design meets the real worldWhen responsive web design meets the real world
When responsive web design meets the real world
Jason Grigsby4K views
Why the heck isnt word press a cms by John Eckman
Why the heck isnt word press a cmsWhy the heck isnt word press a cms
Why the heck isnt word press a cms
John Eckman2K views
Optimizing User Experience with Responsive Web Design by Clarissa Peterson
Optimizing User Experience with Responsive Web DesignOptimizing User Experience with Responsive Web Design
Optimizing User Experience with Responsive Web Design
Clarissa Peterson30.2K views
Responsive Design Tools & Resources by Clarissa Peterson
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & Resources
Clarissa Peterson83.3K views
web design by butest
web designweb design
web design
butest732 views
The Progressive Web and its New Challenges - Confoo Montréal 2017 by Christian Heilmann
The Progressive Web and its New Challenges - Confoo Montréal 2017The Progressive Web and its New Challenges - Confoo Montréal 2017
The Progressive Web and its New Challenges - Confoo Montréal 2017
Christian Heilmann1.9K views
The Soul in The Machine - Developing for Humans (FrankenJS edition) by Christian Heilmann
The Soul in The Machine - Developing for Humans (FrankenJS edition)The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)
Christian Heilmann916 views
Responsive web design by Russ Weakley
Responsive web designResponsive web design
Responsive web design
Russ Weakley27.9K views
The Soul in The Machine - Developing for Humans by Christian Heilmann
The Soul in The Machine - Developing for HumansThe Soul in The Machine - Developing for Humans
The Soul in The Machine - Developing for Humans
Christian Heilmann1.4K views

Viewers also liked

Responsive Color by
Responsive ColorResponsive Color
Responsive ColorClarissa Peterson
21.6K views139 slides
Responsive Typography II by
Responsive Typography IIResponsive Typography II
Responsive Typography IIClarissa Peterson
46.8K views106 slides
UX & Responsive Design by
UX & Responsive DesignUX & Responsive Design
UX & Responsive DesignClarissa Peterson
3.9K views99 slides
Can UX Save Elections by
Can UX Save ElectionsCan UX Save Elections
Can UX Save ElectionsWhitney Quesenbery
2.3K views14 slides
Ergonomic Safety Tips DM by
Ergonomic Safety Tips DMErgonomic Safety Tips DM
Ergonomic Safety Tips DMDawn Marchiondo
603 views32 slides
The User Experience of a Natural Disaster by
The User Experience of a Natural DisasterThe User Experience of a Natural Disaster
The User Experience of a Natural DisasterAmy Silvers
3K views52 slides

Viewers also liked(20)

The User Experience of a Natural Disaster by Amy Silvers
The User Experience of a Natural DisasterThe User Experience of a Natural Disaster
The User Experience of a Natural Disaster
Amy Silvers3K views
A Better Ballot for New York State in 2012 by Whitney Quesenbery
A Better Ballot for New York State in 2012A Better Ballot for New York State in 2012
A Better Ballot for New York State in 2012
Whitney Quesenbery2.2K views
Hci foundation for interaction design by pico start
Hci foundation for interaction designHci foundation for interaction design
Hci foundation for interaction design
pico start796 views
Useful, Usable, and Desirable: Designing for People by Jessica Ivins
Useful, Usable, and Desirable: Designing for PeopleUseful, Usable, and Desirable: Designing for People
Useful, Usable, and Desirable: Designing for People
Jessica Ivins2.3K views
Introducing UX Into a Culture: A Case Study by Jessica Ivins
Introducing UX Into a Culture: A Case StudyIntroducing UX Into a Culture: A Case Study
Introducing UX Into a Culture: A Case Study
Jessica Ivins2.5K views
"We're Not Worthy": Overcoming and Escaping Impostor Syndrome by Amy Silvers
"We're Not Worthy": Overcoming and Escaping Impostor Syndrome"We're Not Worthy": Overcoming and Escaping Impostor Syndrome
"We're Not Worthy": Overcoming and Escaping Impostor Syndrome
Amy Silvers3.3K views
Virtual Seminar: Cross-Channel Design: Magic Mobile Moments by DesignCaffeine, Inc.
Virtual Seminar: Cross-Channel Design: Magic Mobile MomentsVirtual Seminar: Cross-Channel Design: Magic Mobile Moments
Virtual Seminar: Cross-Channel Design: Magic Mobile Moments
DesignCaffeine, Inc.11.9K views
Creating Beautiful, Accessible, and User-Friendly Forms by Clarissa Peterson
Creating Beautiful, Accessible, and User-Friendly FormsCreating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Clarissa Peterson27K views
Understanding User Experience Design & Why It Matters by Christina Wodtke
Understanding User Experience Design & Why It MattersUnderstanding User Experience Design & Why It Matters
Understanding User Experience Design & Why It Matters
Christina Wodtke42.4K views
Design Thinking With Persona by Franki Chamaki
Design Thinking With PersonaDesign Thinking With Persona
Design Thinking With Persona
Franki Chamaki59.9K views
How UX Design Has Changed The World by BuiltByHQ
How UX Design Has Changed The WorldHow UX Design Has Changed The World
How UX Design Has Changed The World
BuiltByHQ98.2K views

Similar to Responsive Design Heaven & Hell

Mullennax p fwd_w4_presentation5 by
Mullennax p fwd_w4_presentation5Mullennax p fwd_w4_presentation5
Mullennax p fwd_w4_presentation5Phillip Mullennax
263 views17 slides
Pros and Cons of Responsive Web Design by
Pros and Cons of Responsive Web DesignPros and Cons of Responsive Web Design
Pros and Cons of Responsive Web DesignBohyun Kim
1.6K views17 slides
Mullennax p fwd_w4_presentation4 by
Mullennax p fwd_w4_presentation4Mullennax p fwd_w4_presentation4
Mullennax p fwd_w4_presentation4Phillip Mullennax
366 views17 slides
MIMA 2014 - Changing your Responsive Design Workflow by
MIMA 2014 - Changing your Responsive Design WorkflowMIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design Workfloweaselsolutions
1.3K views44 slides
Context-Aware and User-Centered Design: The Lost Battle Between Desktop and M... by
Context-Aware and User-Centered Design: The Lost Battle Between Desktop and M...Context-Aware and User-Centered Design: The Lost Battle Between Desktop and M...
Context-Aware and User-Centered Design: The Lost Battle Between Desktop and M...UX Riga
1.1K views69 slides
A Mobile Solution for #TheUnderdog by
A Mobile Solution for #TheUnderdogA Mobile Solution for #TheUnderdog
A Mobile Solution for #TheUnderdogSylvia Navarro Nicosia
544 views38 slides

Similar to Responsive Design Heaven & Hell(20)

Pros and Cons of Responsive Web Design by Bohyun Kim
Pros and Cons of Responsive Web DesignPros and Cons of Responsive Web Design
Pros and Cons of Responsive Web Design
Bohyun Kim1.6K views
MIMA 2014 - Changing your Responsive Design Workflow by easelsolutions
MIMA 2014 - Changing your Responsive Design WorkflowMIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design Workflow
easelsolutions1.3K views
Context-Aware and User-Centered Design: The Lost Battle Between Desktop and M... by UX Riga
Context-Aware and User-Centered Design: The Lost Battle Between Desktop and M...Context-Aware and User-Centered Design: The Lost Battle Between Desktop and M...
Context-Aware and User-Centered Design: The Lost Battle Between Desktop and M...
UX Riga1.1K views
Beyond Branding SharePoint - SharePoint and Today's Web by Eric Overfield
Beyond Branding SharePoint - SharePoint and Today's WebBeyond Branding SharePoint - SharePoint and Today's Web
Beyond Branding SharePoint - SharePoint and Today's Web
Eric Overfield797 views
Responsive Web Design - more than just a buzzword by Russ Weakley
Responsive Web Design - more than just a buzzwordResponsive Web Design - more than just a buzzword
Responsive Web Design - more than just a buzzword
Russ Weakley7.1K views
Responsive web design & mobile web development - a technical and business app... by Atos_Worldline
Responsive web design & mobile web development - a technical and business app...Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...
Atos_Worldline2K views
Skill Session - Web Multi Device by filirom1
Skill Session - Web Multi DeviceSkill Session - Web Multi Device
Skill Session - Web Multi Device
filirom1412 views
Responsive Web Design vs Mobile Web App by Sheeraz Qurban
Responsive Web Design  vs  Mobile Web AppResponsive Web Design  vs  Mobile Web App
Responsive Web Design vs Mobile Web App
Sheeraz Qurban641 views
Alexander michael project4 by Malexander34
Alexander michael project4Alexander michael project4
Alexander michael project4
Malexander34221 views
Workshop 11: Trendy web designs & prototyping by Visual Engineering
Workshop 11: Trendy web designs & prototypingWorkshop 11: Trendy web designs & prototyping
Workshop 11: Trendy web designs & prototyping
Visual Engineering823 views
Theming for mobile devices recent by Artem Shymko
Theming for mobile devices recentTheming for mobile devices recent
Theming for mobile devices recent
Artem Shymko894 views
Responsive Web Design at UCR by Randal Maile
Responsive Web Design at UCRResponsive Web Design at UCR
Responsive Web Design at UCR
Randal Maile475 views
Homer michelle mobile_presentation by Michelle Homer
Homer michelle mobile_presentationHomer michelle mobile_presentation
Homer michelle mobile_presentation
Michelle Homer417 views
Mobile Web Overview https://www.edocr.com/v/k52p5vj4/ by Jack Zheng
Mobile Web Overview https://www.edocr.com/v/k52p5vj4/Mobile Web Overview https://www.edocr.com/v/k52p5vj4/
Mobile Web Overview https://www.edocr.com/v/k52p5vj4/
Jack Zheng4.7K views

Recently uploaded

terms_2.pdf by
terms_2.pdfterms_2.pdf
terms_2.pdfJAWADIQBAL40
18 views8 slides
sample.potx by
sample.potxsample.potx
sample.potxMaryna Yurchenko
16 views3 slides
December 2023 - Meat on the Bones by
December 2023 - Meat on the BonesDecember 2023 - Meat on the Bones
December 2023 - Meat on the BonesNZSG
23 views11 slides
Amazing Opportunities: PCD Pharma Franchise in Kerala.pptx by
Amazing Opportunities: PCD Pharma Franchise in Kerala.pptxAmazing Opportunities: PCD Pharma Franchise in Kerala.pptx
Amazing Opportunities: PCD Pharma Franchise in Kerala.pptxSaphnixMedicure1
20 views11 slides
Pitch Deck Teardown: Scalestack's $1M AI sales tech Seed deck by
Pitch Deck Teardown: Scalestack's $1M AI sales tech Seed deckPitch Deck Teardown: Scalestack's $1M AI sales tech Seed deck
Pitch Deck Teardown: Scalestack's $1M AI sales tech Seed deckHajeJanKamps
502 views18 slides
Presentation on proposed acquisition of leading European asset manager Aermon... by
Presentation on proposed acquisition of leading European asset manager Aermon...Presentation on proposed acquisition of leading European asset manager Aermon...
Presentation on proposed acquisition of leading European asset manager Aermon...KeppelCorporation
210 views11 slides

Recently uploaded(20)

December 2023 - Meat on the Bones by NZSG
December 2023 - Meat on the BonesDecember 2023 - Meat on the Bones
December 2023 - Meat on the Bones
NZSG23 views
Amazing Opportunities: PCD Pharma Franchise in Kerala.pptx by SaphnixMedicure1
Amazing Opportunities: PCD Pharma Franchise in Kerala.pptxAmazing Opportunities: PCD Pharma Franchise in Kerala.pptx
Amazing Opportunities: PCD Pharma Franchise in Kerala.pptx
SaphnixMedicure120 views
Pitch Deck Teardown: Scalestack's $1M AI sales tech Seed deck by HajeJanKamps
Pitch Deck Teardown: Scalestack's $1M AI sales tech Seed deckPitch Deck Teardown: Scalestack's $1M AI sales tech Seed deck
Pitch Deck Teardown: Scalestack's $1M AI sales tech Seed deck
HajeJanKamps502 views
Presentation on proposed acquisition of leading European asset manager Aermon... by KeppelCorporation
Presentation on proposed acquisition of leading European asset manager Aermon...Presentation on proposed acquisition of leading European asset manager Aermon...
Presentation on proposed acquisition of leading European asset manager Aermon...
KeppelCorporation210 views
Bloomerang_Forecasting Your Fundraising Revenue 2024.pptx.pdf by Bloomerang
Bloomerang_Forecasting Your Fundraising Revenue 2024.pptx.pdfBloomerang_Forecasting Your Fundraising Revenue 2024.pptx.pdf
Bloomerang_Forecasting Your Fundraising Revenue 2024.pptx.pdf
Bloomerang134 views
davood_keshavarz_david_keshavarz_criminal_conviction_prison_sentence_judgemen... by morshedislam3
davood_keshavarz_david_keshavarz_criminal_conviction_prison_sentence_judgemen...davood_keshavarz_david_keshavarz_criminal_conviction_prison_sentence_judgemen...
davood_keshavarz_david_keshavarz_criminal_conviction_prison_sentence_judgemen...
morshedislam314 views
2023 Photo Contest.pptx by culhama
2023 Photo Contest.pptx2023 Photo Contest.pptx
2023 Photo Contest.pptx
culhama30 views
Navigating EUDR Compliance within the Coffee Industry by Peter Horsten
Navigating EUDR Compliance within the Coffee IndustryNavigating EUDR Compliance within the Coffee Industry
Navigating EUDR Compliance within the Coffee Industry
Peter Horsten43 views
CORPORATE COMMUNICATION.pdf by AKarthikeyan8
CORPORATE COMMUNICATION.pdfCORPORATE COMMUNICATION.pdf
CORPORATE COMMUNICATION.pdf
AKarthikeyan814 views
Top 10 IT Tasks Small Businesses Can Entrust to Offshore Professionals by altafhsayyednimetler
Top 10 IT Tasks Small Businesses Can Entrust to Offshore ProfessionalsTop 10 IT Tasks Small Businesses Can Entrust to Offshore Professionals
Top 10 IT Tasks Small Businesses Can Entrust to Offshore Professionals
Bloomerang Thank Yous Dec 2023.pdf by Bloomerang
Bloomerang Thank Yous Dec 2023.pdfBloomerang Thank Yous Dec 2023.pdf
Bloomerang Thank Yous Dec 2023.pdf
Bloomerang106 views
Coomes Consulting Business Profile by Chris Coomes
Coomes Consulting Business ProfileCoomes Consulting Business Profile
Coomes Consulting Business Profile
Chris Coomes50 views
NYKAA PPT .pptx by 125071081
NYKAA PPT .pptxNYKAA PPT .pptx
NYKAA PPT .pptx
12507108116 views

Responsive Design Heaven & Hell