SlideShare a Scribd company logo
Optimizing User Experience
      Across Devices with
Responsive Web Design
    User Focus - October 19, 2012

           Clarissa Peterson
              @clarissa
Captions have been added for those of
  you viewing this online. So you can
pretend like you were actually there…
Responsive Web Design


Before starting, I want to make sure everyone knows what responsive design is.
If you’ve visited websites on a smartphone like an iPhone, you’re
probably used to seeing the regular desktop version of a website shrunk
   down to a small size.You have to zoom in to read any of the text.
And you’ve seen websites that have a separate mobile version.
 You don’t have to zoom on your mobile phone, but you also
   may not get all of the content that’s on the full website.
One Website


   On a responsive website, the browser responds to the size of the screen and
displays the content in a way that it is appropriate for that screen size. But it’s only
     one website, one set of code, one set of content. Not separate websites.
It makes more sense if I show you. This is The Boston Globe
website, which launched a responsive redesign in 2011. At the
time, it was the largest responsive web design project to date.
This is the site at the narrowest width: what you would see on your
smartphone. The text is all full size, you don’t need to zoom in to read.
As you make the website wider, the content expands to fill the space.
Now there’s enough room for the content to move
into two columns. It’s the exact same content, though.
At desktop width, there is now room for everything to rearrange
into three columns.You can see a lot more without scrolling, but it’s
          the same content as you see on a mobile phone.
Looking at the site in more detail, you’ll notice that
 there isn’t a full navigation at the top of the page.
But if you click on “Sections,” you’ll get a drop-
  down menu of the sections of the website.
Click it again and the Sections menu goes away.
At this slightly wider size, the content has expanded to make use
  of the full screen, and you can also see that the items in the
 header have been rearranged to take advantage of the space.
There’s still a drop-down menu for the Sections navigation,
but now the navigation items are in two columns instead of
  one. Again, this is to take advantage of the extra space.
There isn’t enough room for the search box to appear at the top of
the page. So instead there’s a search icon, and when you click on it…
Your search box appears.
Click it again and it goes away.
Now we’re at about the size of a tablet, and there’s enough room
for two columns. Additionally, the search box in the header now
      appears by default, you don’t need to click to get it.
You still need to click the Sections link to see the navigation.
At this width, there’s enough room for three columns. Additionally, the full Sections
 navigation appears at the top; you don’t need to click to see the navigation items.
As we go even wider, things expand to take advantage of the extra
room, including the picture at the top left. The picture continues to
  be the full width of the column even as the column gets wider.
At a full desktop width, there is plenty of room for a detailed layout, but we still
have the exact same content as we started with at the narrowest screen width.
Before I tell you how responsive design improves the user experience of a site, I’m
    first going to tell you a little bit about how responsive design came about.
Before
Before mobile, computers and phones were totally separate. Our jobs as UX
designers were much easier. And we couldn’t have even imagined what was coming.
After
Now there are all these different devices that we can use to access the
internet: smartphones, feature phones, tablets, laptops, eReaders. Who
would have thought you can carry a computer around in your pocket?
       Photo credit: Brad Frost via Creative Commons http://flic.kr/p/cfQwL7
Nobody could have predicted the way things are now. So we need to
 understand we can’t predict the way things may be in the future.
Fixed-width Site


When we first started designing for mobile phones, there were two main options.
 The first was to just leave the site the way it was.You could still access the site
  from your mobile phone, you just had to zoom in and out to see everything.
This is what I get when I visit The New York Times website. I imagine
   they have a mobile site, but I can’t find a link from this page.
It seems okay, other than everything being really tiny.
But when I zoom in so that the text is actually large enough
  for me to read, this is what I get. It’s pretty hard to read
    when you can’t even see a full line of text all at once.
Separate Mobile Site


 The other option was to create a separate mobile website. It had
separate code, and often separate content, from your main website.
This mobile site from USA.gov doesn’t look too bad. It’s
  very clean and the navigation is easy to understand.
But when I go to the main USA.gov website, there’s all this content that isn’t
 on the mobile site. If I’m viewing the mobile site, I won’t have access to it.
Neither of those options was the right answer. Web designers tried
  out a lot of different ideas and techniques, looking for a better
     solution to the challenge of designing for mobile phones.
Responsive Design


In 2010, web designer Ethan Marcotte put together a few different techniques
  into something he called “Responsive Web Design.” It started to catch on.
He described it in an article for A List Apart later that year,
     then wrote a book about it in 2011. This is a great book to
      read if you want to learn more about responsive design.
Responsive Web Design http://www.abookapart.com/products/responsive-web-design/
Responsive web design offers us a way
forward, finally allowing us to “design for
the ebb and flow of things.”


                         - Ethan Marcotte
Future-Friendly


One of the great things about responsive design is it allows us to plan for
what might be coming in the future. We can’t predict the future and make
our websites future-proof, but we can make our websites future-friendly.
Content Parity


An important user experience issue that we need to think about is content
 parity, which is the idea that everybody should have access to the same
    content, no matter what device they’ve using to access the website.
For example, on the Consumer Reports site, the Recalls & Safety section
   is very important if you need information about recalled products.
But when I try to find that content on the mobile
     Consumer Reports site, I don’t see it.
At the bottom of the page, there’s a helpful-sounding link, “Can’t
 find what you’re looking for?” Perhaps it will lead me to a site
   map or something else that will help me find what I need.
But when I click it, I get this. (read #2 above)
The beauty of the web is its openness.
   Don’t arbitrarily lock people out because
   of browser, device or configuration.
                                                        - Brad Frost
                                                        @brad_frost

Something to think about:17% of cell phone owners in the United States access the
internet mostly from their phones.You can’t assume that people only do basic tasks
    on their phones, and do everything else from their desktop computers later.
Here’s another example. When I paid my car insurance bill recently, I found this
    helpful link on the front page of the Geico website, “make a payment.”
This next page was kind of unnecessary, but then...
I got to this page, where I discovered that I could access the payment
page by just entering my phone number and zip code. I didn’t need to
        remember my username, password, or account number.
It makes sense. Why have unnecessary security on a page
where the only option is to give them your money? Who is
     going to try to sneak in to pay someone else’s bill?
I thought I’d check whether I’d have the same option on Geico’s mobile site. First, I
 got redirected to a page that tried to convince me to download an app to pay my
  bill. It seemed a lot of effort to just pay a bill, so I clicked “No thanks,” and then...
I got this page, half of which is wasted on a photo of the night
sky. It seems like the only option for paying my bill is to log in.
I thought perhaps the “Explore GEICO” button would
 give me some of the other options from the website.
But no, that just gives me links to their social media
pages. I’m not sure what that has to do with exploring.
So my only option, if I didn’t want to log in to pay my bill, was to click
this tiny “Desktop Site” link all the way at the bottom of the screen. It’s
clear that they don’t care if I can find my way to the rest of the content.
Context of Use


Another important user experience consideration is context of use.
This refers to the conditions under which the website is being used.
You’ll hear people talk about “mobile context,” but it’s more complicated than
that. Not all people using mobile devices are out running around somewhere,
      and not all people using desktops/laptops are sitting behind a desk.
Some people actually are running around when they’re using their mobile device.

           Photo credit: Mith Huang via Creative Commons http://flic.kr/p/9B7A4c
But others might be sitting on the sofa at home,
   browsing the web or buying tickets to Disney World.

Photo credit: Kai Chan Vong via Creative Commons http://flic.kr/p/5c4Sfv
I’m not sure what these kids are doing, especially the one
   on the left, but they’re definitely not running around.

Photo credit: Carlos Smith via Creative Commons http://flic.kr/p/8tLb4P
It can be downright surprising where people are using their mobile devices.

        Photo credit: Pete Markham via Creative Commons http://flic.kr/p/2zvrrJ
Just as there isn’t only one context of use for people with mobile devices, there
      also isn’t only one context of use for desktop and laptop computers.
For example, you can’t assume someone on a phone has a slow connection, and
  someone on a laptop/desktop has a fast connection. Most of us have suffered
through slow hotel room wifi where it takes a couple minutes to load one page.
          Photo credit: Wendi Dunlap via Creative Commons http://flic.kr/p/vMJM6
So then why not make it faster for everybody, not just mobile users?
You also can’t make assumptions about screen size.
       An office worker may have a tiny screen...

Photo credit: Channy Yun via Creative Commons http://flic.kr/p/51QJr6
While a home user may have a huge monitor.

Photo credit: Matt Hamm via Creative Commons http://flic.kr/p/EyrLG
Responsive Design


 So you need a site that works for everyone.
  That’s where responsive design comes in.
Mobile First


There are different ways to put together a responsive design. The best way
is to use a mobile-first perspective. Designing for the smallest screen first
  forces you to focus on the content, and decide what’s really important.
Trying to fit everything from a desktop site into a
    mobile site often just doesn’t make sense.
The Washington Post realized this. Their mobile website is much simpler,
cleaner, and straightforward. It only has the information you actually want.
But then who do they think is actually going to want the rest of it? This is
their front page. I counted 184 text links (that’s not including images or ads).
Too much visual information thrown at me all at once makes my head hurt.
Mobile use case: I just transferred money
at my desk using my phone because
logging into my banking app requires
fewer steps.
                                    - Stephanie Rieger
                                     @stephanierieger
     Why is it easier to do a transaction on a mobile phone
          rather than on the bank’s regular website?
Make it work better for everybody.
Examples
United Pixelworkers is an ecommerce site. Not all responsive sites are
content-based rather than functionality-based.You can scroll down to
    see the various products that are featured on the front page.
When the screen gets wider, everything rearranges so you can see more at once.
At full width, you have a beautiful layout. But it’s the exact same
  content that you saw at the narrowest width.You won’t be
missing anything if you go to this site from your mobile phone.
The WWF site has beautiful photography. They don’t want to
   waste it by making the photos tiny on a small screen.
At desktop size, there’s space to make the main photo even bigger, but still room to
  show additional photos below.You’ll get the same content whether you’re on a
 mobile phone or a huge monitor, you’ll just be able to see more without scrolling.
This is a company that sells surfboards. Instead of making the picture change size...
They show more of the picture. Responsive design gives you a lot of options.
The University of Chicago has a lot of information on their website. By
 designing from the smallest screen size first, they were able to make
  sure the most important content appears at the top of the screen.
On a desktop screen, you see the same content, but there is room for some
additions, such as the sub-caption on the main photo. That text isn’t an integral part
       of the content, so it was hidden at the narrower width to save space.
You’ve probably noticed from these examples that responsive designs
tend to be very clean and uncluttered. Compare that to the Washington
      Post site we saw earlier. Which is a better user experience?
On responsive designs, since it’s the same website no matter what size
you’re viewing it at, the branding and the look & feel are consistent across
  devices. This often isn’t the case when you have a separate mobile site.
There’s more content on the page at this width, and you see additional elements
    such as the navigation. But it still looks and feels like the same website.
Emeril’s site does a great job of presenting menus so they’re
 easily viewable on a small screen.You have to scroll down
       quite a ways to see everything, but that’s okay.
At desktop width, the menu layout is different and they’ve added pictures for
the three menu types at the top, an enhancement. Mobile users don’t see the
pictures, but that’s okay because they aren’t an essential part of the message.
Responsive Web Design

1. Give everybody the same content
2. Displayed appropriately for their
   device
3. No matter what device they have
          Bottom line, it’s all about the user.
There is no Mobile Web. There is only
The Web, which we view in different
ways. There is also no Desktop Web. Or
Tablet Web.
                          - Stephen Hay
                           @stephenhay
Clarissa Peterson
   clarissapeterson.com
 mail@clarissapeterson.com
          @clarissa

More Related Content

What's hot

Mobile First Responsive Design
Mobile First Responsive DesignMobile First Responsive Design
Mobile First Responsive Design
Jason Grigsby
 
Responsive Design & Mobile First
Responsive Design & Mobile FirstResponsive Design & Mobile First
Responsive Design & Mobile First
Luke Brooker
 
Mobile First Responsive Web Design — BD Conf Oct 2013
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 Grigsby
 
Responsive Design Tools & Resources
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & Resources
Clarissa Peterson
 
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesignJensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jen Simmons
 
6 key learnings for responsive webdesign
6 key learnings for responsive webdesign6 key learnings for responsive webdesign
6 key learnings for responsive webdesign
Bart De Waele
 
Beyond Responsive Web Design
Beyond Responsive Web DesignBeyond Responsive Web Design
Beyond Responsive Web Design
arborwebsolutions
 
Adapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYCAdapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYC
Jason Grigsby
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web Design
Clarissa Peterson
 
When responsive web design meets the real world
When responsive web design meets the real worldWhen responsive web design meets the real world
When responsive web design meets the real world
Jason Grigsby
 
Responsive Images and Video
Responsive Images and VideoResponsive Images and Video
Responsive Images and Video
Jason Grigsby
 
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)
The Soul in The Machine - Developing for Humans (FrankenJS edition)
Christian Heilmann
 
The Progressive Web and its New Challenges - Confoo Montréal 2017
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 Heilmann
 
Responsive webdesign
Responsive webdesignResponsive webdesign
Responsive webdesign
Bart De Waele
 
web design
web designweb design
web design
butest
 
RESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web DesignRESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web Design
Dave Olsen
 
The Soul in The Machine - Developing for Humans
The Soul in The Machine - Developing for HumansThe Soul in The Machine - Developing for Humans
The Soul in The Machine - Developing for Humans
Christian Heilmann
 
Responsive Design Tools & Resources
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & Resources
Clarissa Peterson
 
SearchLove Boston 2013_Bill Slawski_Future Search
SearchLove Boston 2013_Bill Slawski_Future SearchSearchLove Boston 2013_Bill Slawski_Future Search
SearchLove Boston 2013_Bill Slawski_Future Search
Distilled
 
The Browser is Dead, Long Live the Web!
The Browser is Dead, Long Live the Web!The Browser is Dead, Long Live the Web!
The Browser is Dead, Long Live the Web!
Jonathan Stark
 

What's hot (20)

Mobile First Responsive Design
Mobile First Responsive DesignMobile First Responsive Design
Mobile First Responsive Design
 
Responsive Design & Mobile First
Responsive Design & Mobile FirstResponsive Design & Mobile First
Responsive Design & Mobile First
 
Mobile First Responsive Web Design — BD Conf Oct 2013
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
 
Responsive Design Tools & Resources
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & Resources
 
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesignJensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
 
6 key learnings for responsive webdesign
6 key learnings for responsive webdesign6 key learnings for responsive webdesign
6 key learnings for responsive webdesign
 
Beyond Responsive Web Design
Beyond Responsive Web DesignBeyond Responsive Web Design
Beyond Responsive Web Design
 
Adapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYCAdapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYC
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web Design
 
When responsive web design meets the real world
When responsive web design meets the real worldWhen responsive web design meets the real world
When responsive web design meets the real world
 
Responsive Images and Video
Responsive Images and VideoResponsive Images and Video
Responsive Images and Video
 
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)
The Soul in The Machine - Developing for Humans (FrankenJS edition)
 
The Progressive Web and its New Challenges - Confoo Montréal 2017
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
 
Responsive webdesign
Responsive webdesignResponsive webdesign
Responsive webdesign
 
web design
web designweb design
web design
 
RESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web DesignRESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web Design
 
The Soul in The Machine - Developing for Humans
The Soul in The Machine - Developing for HumansThe Soul in The Machine - Developing for Humans
The Soul in The Machine - Developing for Humans
 
Responsive Design Tools & Resources
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & Resources
 
SearchLove Boston 2013_Bill Slawski_Future Search
SearchLove Boston 2013_Bill Slawski_Future SearchSearchLove Boston 2013_Bill Slawski_Future Search
SearchLove Boston 2013_Bill Slawski_Future Search
 
The Browser is Dead, Long Live the Web!
The Browser is Dead, Long Live the Web!The Browser is Dead, Long Live the Web!
The Browser is Dead, Long Live the Web!
 

Viewers also liked

Mobile App Optimizaiton for Acquisition, Activation, Retention
Mobile App Optimizaiton for Acquisition, Activation, Retention Mobile App Optimizaiton for Acquisition, Activation, Retention
Mobile App Optimizaiton for Acquisition, Activation, Retention
Optimizely
 
Testing Responsive Webdesign
Testing Responsive WebdesignTesting Responsive Webdesign
Testing Responsive Webdesign
Sven Wolfermann
 
A Better Ballot for New York State in 2012
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 Quesenbery
 
Can UX Save Elections
Can UX Save ElectionsCan UX Save Elections
Can UX Save Elections
Whitney Quesenbery
 
The User Experience of a Natural Disaster
The User Experience of a Natural DisasterThe User Experience of a Natural Disaster
The User Experience of a Natural Disaster
Amy Silvers
 
Ergonomic Safety Tips DM
Ergonomic Safety Tips DMErgonomic Safety Tips DM
Ergonomic Safety Tips DM
Dawn Marchiondo
 
Hci foundation for interaction design
Hci foundation for interaction designHci foundation for interaction design
Hci foundation for interaction design
pico start
 
Useful, Usable, and Desirable: Designing for People
Useful, Usable, and Desirable: Designing for PeopleUseful, Usable, and Desirable: Designing for People
Useful, Usable, and Desirable: Designing for People
Jessica Ivins
 
Introducing UX Into a Culture: A Case Study
Introducing UX Into a Culture: A Case StudyIntroducing UX Into a Culture: A Case Study
Introducing UX Into a Culture: A Case Study
Jessica Ivins
 
Red Bend Software: Optimizing the User Experience with Over-the-Air Updates
Red Bend Software: Optimizing the User Experience with Over-the-Air UpdatesRed Bend Software: Optimizing the User Experience with Over-the-Air Updates
Red Bend Software: Optimizing the User Experience with Over-the-Air Updates
Red Bend Software
 
Responsive Color
Responsive ColorResponsive Color
Responsive Color
Clarissa Peterson
 
Responsive Typography II
Responsive Typography IIResponsive Typography II
Responsive Typography II
Clarissa Peterson
 
"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
"We're Not Worthy": Overcoming and Escaping Impostor Syndrome
Amy Silvers
 
Virtual Seminar: Cross-Channel Design: Magic Mobile Moments
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.
 
Understanding User Experience Design & Why It Matters
Understanding User Experience Design & Why It MattersUnderstanding User Experience Design & Why It Matters
Understanding User Experience Design & Why It Matters
Christina Wodtke
 
Mobile App Optimization for User Acquisition, Activation, and Retention
Mobile App Optimization for User Acquisition, Activation, and RetentionMobile App Optimization for User Acquisition, Activation, and Retention
Mobile App Optimization for User Acquisition, Activation, and Retention
Kissmetrics on SlideShare
 
The Principles of Interface
The Principles of InterfaceThe Principles of Interface
The Principles of Interface
Christina Wodtke
 
How to Teach UX Design
How to Teach UX DesignHow to Teach UX Design
How to Teach UX Design
Christina Wodtke
 
GE User Experience Playbook
GE User Experience PlaybookGE User Experience Playbook
GE User Experience Playbook
Melinda Belcher
 
Design Thinking With Persona
Design Thinking With PersonaDesign Thinking With Persona
Design Thinking With Persona
Franki Chamaki
 

Viewers also liked (20)

Mobile App Optimizaiton for Acquisition, Activation, Retention
Mobile App Optimizaiton for Acquisition, Activation, Retention Mobile App Optimizaiton for Acquisition, Activation, Retention
Mobile App Optimizaiton for Acquisition, Activation, Retention
 
Testing Responsive Webdesign
Testing Responsive WebdesignTesting Responsive Webdesign
Testing Responsive Webdesign
 
A Better Ballot for New York State in 2012
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
 
Can UX Save Elections
Can UX Save ElectionsCan UX Save Elections
Can UX Save Elections
 
The User Experience of a Natural Disaster
The User Experience of a Natural DisasterThe User Experience of a Natural Disaster
The User Experience of a Natural Disaster
 
Ergonomic Safety Tips DM
Ergonomic Safety Tips DMErgonomic Safety Tips DM
Ergonomic Safety Tips DM
 
Hci foundation for interaction design
Hci foundation for interaction designHci foundation for interaction design
Hci foundation for interaction design
 
Useful, Usable, and Desirable: Designing for People
Useful, Usable, and Desirable: Designing for PeopleUseful, Usable, and Desirable: Designing for People
Useful, Usable, and Desirable: Designing for People
 
Introducing UX Into a Culture: A Case Study
Introducing UX Into a Culture: A Case StudyIntroducing UX Into a Culture: A Case Study
Introducing UX Into a Culture: A Case Study
 
Red Bend Software: Optimizing the User Experience with Over-the-Air Updates
Red Bend Software: Optimizing the User Experience with Over-the-Air UpdatesRed Bend Software: Optimizing the User Experience with Over-the-Air Updates
Red Bend Software: Optimizing the User Experience with Over-the-Air Updates
 
Responsive Color
Responsive ColorResponsive Color
Responsive Color
 
Responsive Typography II
Responsive Typography IIResponsive Typography II
Responsive Typography II
 
"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
"We're Not Worthy": Overcoming and Escaping Impostor Syndrome
 
Virtual Seminar: Cross-Channel Design: Magic Mobile Moments
Virtual Seminar: Cross-Channel Design: Magic Mobile MomentsVirtual Seminar: Cross-Channel Design: Magic Mobile Moments
Virtual Seminar: Cross-Channel Design: Magic Mobile Moments
 
Understanding User Experience Design & Why It Matters
Understanding User Experience Design & Why It MattersUnderstanding User Experience Design & Why It Matters
Understanding User Experience Design & Why It Matters
 
Mobile App Optimization for User Acquisition, Activation, and Retention
Mobile App Optimization for User Acquisition, Activation, and RetentionMobile App Optimization for User Acquisition, Activation, and Retention
Mobile App Optimization for User Acquisition, Activation, and Retention
 
The Principles of Interface
The Principles of InterfaceThe Principles of Interface
The Principles of Interface
 
How to Teach UX Design
How to Teach UX DesignHow to Teach UX Design
How to Teach UX Design
 
GE User Experience Playbook
GE User Experience PlaybookGE User Experience Playbook
GE User Experience Playbook
 
Design Thinking With Persona
Design Thinking With PersonaDesign Thinking With Persona
Design Thinking With Persona
 

Similar to Optimizing User Experience with Responsive Web Design

Hoke cheri project4
Hoke cheri project4Hoke cheri project4
Hoke cheri project4
cherihoke33
 
9 worst practices in ux design
9 worst practices in ux design9 worst practices in ux design
9 worst practices in ux design
Sachin Khatiwoda
 
Pierson lisa mobile_presentation
Pierson lisa mobile_presentationPierson lisa mobile_presentation
Pierson lisa mobile_presentation
lrpierson
 
Designing Websites With a Mobile First Approach
Designing Websites With a Mobile First ApproachDesigning Websites With a Mobile First Approach
Designing Websites With a Mobile First Approach
Dan Moriarty
 
Benefits of Mobile Website
Benefits of Mobile WebsiteBenefits of Mobile Website
Benefits of Mobile Website
Web Takers
 
Android Material Design Quick Presentation
Android Material Design Quick PresentationAndroid Material Design Quick Presentation
Android Material Design Quick Presentation
Deimantas Brandišauskas
 
Josh Clark - Designing for Touch
Josh Clark - Designing for TouchJosh Clark - Designing for Touch
Josh Clark - Designing for Touch
Healthcare Experience Design Conference
 
Responsive website
Responsive websiteResponsive website
Responsive website
borjanshoes
 
What Is Responsive website
What Is Responsive websiteWhat Is Responsive website
What Is Responsive website
borjanshoes
 
Know thy interaction – How interaction is changing what we create on the web
Know thy interaction – How interaction is changing what we create on the webKnow thy interaction – How interaction is changing what we create on the web
Know thy interaction – How interaction is changing what we create on the web
nolly00
 
Web 1 2 3
Web 1 2 3Web 1 2 3
Web 1 2 3
londoncall
 
Web 1 2 3
Web 1 2 3Web 1 2 3
Web 1 2 3
londoncall
 
This is the web platform
This is the web platformThis is the web platform
This is the web platform
Paul Kinlan
 
Carousel30: Optimizing for the mobile user experience whitepaper
Carousel30: Optimizing for the mobile user experience whitepaperCarousel30: Optimizing for the mobile user experience whitepaper
Carousel30: Optimizing for the mobile user experience whitepaper
Carousel30
 
Website vs web app
Website vs web appWebsite vs web app
Website vs web app
Immortal Technologies
 
Responsive Web Design vs Mobile Web App
Responsive Web Design  vs  Mobile Web AppResponsive Web Design  vs  Mobile Web App
Responsive Web Design vs Mobile Web App
Sheeraz Qurban
 
optimize website for mobile marketing
optimize website for mobile marketingoptimize website for mobile marketing
optimize website for mobile marketing
Olatunji Adetunji
 
13 Signs Your UX Needs an Exorcism
13 Signs Your UX Needs an Exorcism13 Signs Your UX Needs an Exorcism
13 Signs Your UX Needs an Exorcism
Crystal Beasley
 
How to Create a Great Mobile App Experience
How to Create a Great Mobile App ExperienceHow to Create a Great Mobile App Experience
How to Create a Great Mobile App Experience
Chris Beaman
 
Conyers tiffany mobile_presenation
Conyers tiffany mobile_presenationConyers tiffany mobile_presenation
Conyers tiffany mobile_presenation
tiffnicole
 

Similar to Optimizing User Experience with Responsive Web Design (20)

Hoke cheri project4
Hoke cheri project4Hoke cheri project4
Hoke cheri project4
 
9 worst practices in ux design
9 worst practices in ux design9 worst practices in ux design
9 worst practices in ux design
 
Pierson lisa mobile_presentation
Pierson lisa mobile_presentationPierson lisa mobile_presentation
Pierson lisa mobile_presentation
 
Designing Websites With a Mobile First Approach
Designing Websites With a Mobile First ApproachDesigning Websites With a Mobile First Approach
Designing Websites With a Mobile First Approach
 
Benefits of Mobile Website
Benefits of Mobile WebsiteBenefits of Mobile Website
Benefits of Mobile Website
 
Android Material Design Quick Presentation
Android Material Design Quick PresentationAndroid Material Design Quick Presentation
Android Material Design Quick Presentation
 
Josh Clark - Designing for Touch
Josh Clark - Designing for TouchJosh Clark - Designing for Touch
Josh Clark - Designing for Touch
 
Responsive website
Responsive websiteResponsive website
Responsive website
 
What Is Responsive website
What Is Responsive websiteWhat Is Responsive website
What Is Responsive website
 
Know thy interaction – How interaction is changing what we create on the web
Know thy interaction – How interaction is changing what we create on the webKnow thy interaction – How interaction is changing what we create on the web
Know thy interaction – How interaction is changing what we create on the web
 
Web 1 2 3
Web 1 2 3Web 1 2 3
Web 1 2 3
 
Web 1 2 3
Web 1 2 3Web 1 2 3
Web 1 2 3
 
This is the web platform
This is the web platformThis is the web platform
This is the web platform
 
Carousel30: Optimizing for the mobile user experience whitepaper
Carousel30: Optimizing for the mobile user experience whitepaperCarousel30: Optimizing for the mobile user experience whitepaper
Carousel30: Optimizing for the mobile user experience whitepaper
 
Website vs web app
Website vs web appWebsite vs web app
Website vs web app
 
Responsive Web Design vs Mobile Web App
Responsive Web Design  vs  Mobile Web AppResponsive Web Design  vs  Mobile Web App
Responsive Web Design vs Mobile Web App
 
optimize website for mobile marketing
optimize website for mobile marketingoptimize website for mobile marketing
optimize website for mobile marketing
 
13 Signs Your UX Needs an Exorcism
13 Signs Your UX Needs an Exorcism13 Signs Your UX Needs an Exorcism
13 Signs Your UX Needs an Exorcism
 
How to Create a Great Mobile App Experience
How to Create a Great Mobile App ExperienceHow to Create a Great Mobile App Experience
How to Create a Great Mobile App Experience
 
Conyers tiffany mobile_presenation
Conyers tiffany mobile_presenationConyers tiffany mobile_presenation
Conyers tiffany mobile_presenation
 

More from Clarissa Peterson

Alt Text Is Your Superpower
Alt Text Is Your SuperpowerAlt Text Is Your Superpower
Alt Text Is Your Superpower
Clarissa Peterson
 
Designing for Users: How to Create a Better User Experience
Designing for Users: How to Create a Better User ExperienceDesigning for Users: How to Create a Better User Experience
Designing for Users: How to Create a Better User Experience
Clarissa Peterson
 
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly FormsCreating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Clarissa Peterson
 
Making the Web Easy
Making the Web EasyMaking the Web Easy
Making the Web Easy
Clarissa Peterson
 
Responsive Design Workshop
Responsive Design WorkshopResponsive Design Workshop
Responsive Design Workshop
Clarissa Peterson
 
UX & Responsive Design
UX & Responsive DesignUX & Responsive Design
UX & Responsive Design
Clarissa Peterson
 
Designing Responsive Websites
Designing Responsive WebsitesDesigning Responsive Websites
Designing Responsive Websites
Clarissa Peterson
 
Responsive Design in the Real World
Responsive Design in the Real WorldResponsive Design in the Real World
Responsive Design in the Real World
Clarissa Peterson
 

More from Clarissa Peterson (8)

Alt Text Is Your Superpower
Alt Text Is Your SuperpowerAlt Text Is Your Superpower
Alt Text Is Your Superpower
 
Designing for Users: How to Create a Better User Experience
Designing for Users: How to Create a Better User ExperienceDesigning for Users: How to Create a Better User Experience
Designing for Users: How to Create a Better User Experience
 
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly FormsCreating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
 
Making the Web Easy
Making the Web EasyMaking the Web Easy
Making the Web Easy
 
Responsive Design Workshop
Responsive Design WorkshopResponsive Design Workshop
Responsive Design Workshop
 
UX & Responsive Design
UX & Responsive DesignUX & Responsive Design
UX & Responsive Design
 
Designing Responsive Websites
Designing Responsive WebsitesDesigning Responsive Websites
Designing Responsive Websites
 
Responsive Design in the Real World
Responsive Design in the Real WorldResponsive Design in the Real World
Responsive Design in the Real World
 

Recently uploaded

一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理
一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理
一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理
qa8dk1wm
 
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
p74xokfq
 
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
t34zod9l
 
一比一原版英国伦敦大学毕业证(London学位证)如何办理
一比一原版英国伦敦大学毕业证(London学位证)如何办理一比一原版英国伦敦大学毕业证(London学位证)如何办理
一比一原版英国伦敦大学毕业证(London学位证)如何办理
k4krdgxx
 
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
k4krdgxx
 
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
aonx8o5f
 
The Color of Life Slideshow by: Kal-el Go
The Color of Life Slideshow by: Kal-el GoThe Color of Life Slideshow by: Kal-el Go
The Color of Life Slideshow by: Kal-el Go
Kal-el Shows
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
881evgn0
 
一比一原版澳洲莫纳什大学毕业证(Monash学位证)如何办理
一比一原版澳洲莫纳什大学毕业证(Monash学位证)如何办理一比一原版澳洲莫纳什大学毕业证(Monash学位证)如何办理
一比一原版澳洲莫纳什大学毕业证(Monash学位证)如何办理
10h6bbc4
 
一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理
一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理
一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理
oabn3692
 
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
hw2xf1m
 
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
f22b6g9c
 
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
yqyquge
 
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
i990go7o
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
3vgr39kx
 
The Power to Battle! Slideshow by: Kal-el
The Power to Battle! Slideshow by: Kal-elThe Power to Battle! Slideshow by: Kal-el
The Power to Battle! Slideshow by: Kal-el
Kal-el Shows
 
Value based approach to heritae conservation -.docx
Value based approach to heritae conservation -.docxValue based approach to heritae conservation -.docx
Value based approach to heritae conservation -.docx
JIT KUMAR GUPTA
 
一比一原版(ucb毕业证书)英国伯明翰大学学院毕业证如何办理
一比一原版(ucb毕业证书)英国伯明翰大学学院毕业证如何办理一比一原版(ucb毕业证书)英国伯明翰大学学院毕业证如何办理
一比一原版(ucb毕业证书)英国伯明翰大学学院毕业证如何办理
qbydc
 
一比一原版美国明尼苏达大学双城分校毕业证(UMTC学位证)如何办理
一比一原版美国明尼苏达大学双城分校毕业证(UMTC学位证)如何办理一比一原版美国明尼苏达大学双城分校毕业证(UMTC学位证)如何办理
一比一原版美国明尼苏达大学双城分校毕业证(UMTC学位证)如何办理
sf3cfttw
 
一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理
一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理
一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理
67n7f53
 

Recently uploaded (20)

一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理
一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理
一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理
 
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
 
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
 
一比一原版英国伦敦大学毕业证(London学位证)如何办理
一比一原版英国伦敦大学毕业证(London学位证)如何办理一比一原版英国伦敦大学毕业证(London学位证)如何办理
一比一原版英国伦敦大学毕业证(London学位证)如何办理
 
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
 
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
 
The Color of Life Slideshow by: Kal-el Go
The Color of Life Slideshow by: Kal-el GoThe Color of Life Slideshow by: Kal-el Go
The Color of Life Slideshow by: Kal-el Go
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
 
一比一原版澳洲莫纳什大学毕业证(Monash学位证)如何办理
一比一原版澳洲莫纳什大学毕业证(Monash学位证)如何办理一比一原版澳洲莫纳什大学毕业证(Monash学位证)如何办理
一比一原版澳洲莫纳什大学毕业证(Monash学位证)如何办理
 
一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理
一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理
一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理
 
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
 
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
 
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
 
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
 
The Power to Battle! Slideshow by: Kal-el
The Power to Battle! Slideshow by: Kal-elThe Power to Battle! Slideshow by: Kal-el
The Power to Battle! Slideshow by: Kal-el
 
Value based approach to heritae conservation -.docx
Value based approach to heritae conservation -.docxValue based approach to heritae conservation -.docx
Value based approach to heritae conservation -.docx
 
一比一原版(ucb毕业证书)英国伯明翰大学学院毕业证如何办理
一比一原版(ucb毕业证书)英国伯明翰大学学院毕业证如何办理一比一原版(ucb毕业证书)英国伯明翰大学学院毕业证如何办理
一比一原版(ucb毕业证书)英国伯明翰大学学院毕业证如何办理
 
一比一原版美国明尼苏达大学双城分校毕业证(UMTC学位证)如何办理
一比一原版美国明尼苏达大学双城分校毕业证(UMTC学位证)如何办理一比一原版美国明尼苏达大学双城分校毕业证(UMTC学位证)如何办理
一比一原版美国明尼苏达大学双城分校毕业证(UMTC学位证)如何办理
 
一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理
一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理
一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理
 

Optimizing User Experience with Responsive Web Design

  • 1. Optimizing User Experience Across Devices with Responsive Web Design User Focus - October 19, 2012 Clarissa Peterson @clarissa
  • 2. Captions have been added for those of you viewing this online. So you can pretend like you were actually there…
  • 3. Responsive Web Design Before starting, I want to make sure everyone knows what responsive design is.
  • 4. If you’ve visited websites on a smartphone like an iPhone, you’re probably used to seeing the regular desktop version of a website shrunk down to a small size.You have to zoom in to read any of the text.
  • 5. And you’ve seen websites that have a separate mobile version. You don’t have to zoom on your mobile phone, but you also may not get all of the content that’s on the full website.
  • 6. One Website On a responsive website, the browser responds to the size of the screen and displays the content in a way that it is appropriate for that screen size. But it’s only one website, one set of code, one set of content. Not separate websites.
  • 7. It makes more sense if I show you. This is The Boston Globe website, which launched a responsive redesign in 2011. At the time, it was the largest responsive web design project to date.
  • 8. This is the site at the narrowest width: what you would see on your smartphone. The text is all full size, you don’t need to zoom in to read.
  • 9. As you make the website wider, the content expands to fill the space.
  • 10. Now there’s enough room for the content to move into two columns. It’s the exact same content, though.
  • 11. At desktop width, there is now room for everything to rearrange into three columns.You can see a lot more without scrolling, but it’s the same content as you see on a mobile phone.
  • 12. Looking at the site in more detail, you’ll notice that there isn’t a full navigation at the top of the page.
  • 13. But if you click on “Sections,” you’ll get a drop- down menu of the sections of the website.
  • 14. Click it again and the Sections menu goes away.
  • 15. At this slightly wider size, the content has expanded to make use of the full screen, and you can also see that the items in the header have been rearranged to take advantage of the space.
  • 16. There’s still a drop-down menu for the Sections navigation, but now the navigation items are in two columns instead of one. Again, this is to take advantage of the extra space.
  • 17. There isn’t enough room for the search box to appear at the top of the page. So instead there’s a search icon, and when you click on it…
  • 18. Your search box appears.
  • 19. Click it again and it goes away.
  • 20. Now we’re at about the size of a tablet, and there’s enough room for two columns. Additionally, the search box in the header now appears by default, you don’t need to click to get it.
  • 21. You still need to click the Sections link to see the navigation.
  • 22. At this width, there’s enough room for three columns. Additionally, the full Sections navigation appears at the top; you don’t need to click to see the navigation items.
  • 23. As we go even wider, things expand to take advantage of the extra room, including the picture at the top left. The picture continues to be the full width of the column even as the column gets wider.
  • 24. At a full desktop width, there is plenty of room for a detailed layout, but we still have the exact same content as we started with at the narrowest screen width.
  • 25. Before I tell you how responsive design improves the user experience of a site, I’m first going to tell you a little bit about how responsive design came about.
  • 27. Before mobile, computers and phones were totally separate. Our jobs as UX designers were much easier. And we couldn’t have even imagined what was coming.
  • 28. After
  • 29. Now there are all these different devices that we can use to access the internet: smartphones, feature phones, tablets, laptops, eReaders. Who would have thought you can carry a computer around in your pocket? Photo credit: Brad Frost via Creative Commons http://flic.kr/p/cfQwL7
  • 30. Nobody could have predicted the way things are now. So we need to understand we can’t predict the way things may be in the future.
  • 31. Fixed-width Site When we first started designing for mobile phones, there were two main options. The first was to just leave the site the way it was.You could still access the site from your mobile phone, you just had to zoom in and out to see everything.
  • 32. This is what I get when I visit The New York Times website. I imagine they have a mobile site, but I can’t find a link from this page.
  • 33. It seems okay, other than everything being really tiny.
  • 34. But when I zoom in so that the text is actually large enough for me to read, this is what I get. It’s pretty hard to read when you can’t even see a full line of text all at once.
  • 35. Separate Mobile Site The other option was to create a separate mobile website. It had separate code, and often separate content, from your main website.
  • 36. This mobile site from USA.gov doesn’t look too bad. It’s very clean and the navigation is easy to understand.
  • 37. But when I go to the main USA.gov website, there’s all this content that isn’t on the mobile site. If I’m viewing the mobile site, I won’t have access to it.
  • 38. Neither of those options was the right answer. Web designers tried out a lot of different ideas and techniques, looking for a better solution to the challenge of designing for mobile phones.
  • 39. Responsive Design In 2010, web designer Ethan Marcotte put together a few different techniques into something he called “Responsive Web Design.” It started to catch on.
  • 40. He described it in an article for A List Apart later that year, then wrote a book about it in 2011. This is a great book to read if you want to learn more about responsive design. Responsive Web Design http://www.abookapart.com/products/responsive-web-design/
  • 41. Responsive web design offers us a way forward, finally allowing us to “design for the ebb and flow of things.” - Ethan Marcotte
  • 42. Future-Friendly One of the great things about responsive design is it allows us to plan for what might be coming in the future. We can’t predict the future and make our websites future-proof, but we can make our websites future-friendly.
  • 43. Content Parity An important user experience issue that we need to think about is content parity, which is the idea that everybody should have access to the same content, no matter what device they’ve using to access the website.
  • 44. For example, on the Consumer Reports site, the Recalls & Safety section is very important if you need information about recalled products.
  • 45. But when I try to find that content on the mobile Consumer Reports site, I don’t see it.
  • 46. At the bottom of the page, there’s a helpful-sounding link, “Can’t find what you’re looking for?” Perhaps it will lead me to a site map or something else that will help me find what I need.
  • 47. But when I click it, I get this. (read #2 above)
  • 48. The beauty of the web is its openness. Don’t arbitrarily lock people out because of browser, device or configuration. - Brad Frost @brad_frost Something to think about:17% of cell phone owners in the United States access the internet mostly from their phones.You can’t assume that people only do basic tasks on their phones, and do everything else from their desktop computers later.
  • 49. Here’s another example. When I paid my car insurance bill recently, I found this helpful link on the front page of the Geico website, “make a payment.”
  • 50. This next page was kind of unnecessary, but then...
  • 51. I got to this page, where I discovered that I could access the payment page by just entering my phone number and zip code. I didn’t need to remember my username, password, or account number.
  • 52. It makes sense. Why have unnecessary security on a page where the only option is to give them your money? Who is going to try to sneak in to pay someone else’s bill?
  • 53. I thought I’d check whether I’d have the same option on Geico’s mobile site. First, I got redirected to a page that tried to convince me to download an app to pay my bill. It seemed a lot of effort to just pay a bill, so I clicked “No thanks,” and then...
  • 54. I got this page, half of which is wasted on a photo of the night sky. It seems like the only option for paying my bill is to log in.
  • 55. I thought perhaps the “Explore GEICO” button would give me some of the other options from the website.
  • 56. But no, that just gives me links to their social media pages. I’m not sure what that has to do with exploring.
  • 57. So my only option, if I didn’t want to log in to pay my bill, was to click this tiny “Desktop Site” link all the way at the bottom of the screen. It’s clear that they don’t care if I can find my way to the rest of the content.
  • 58. Context of Use Another important user experience consideration is context of use. This refers to the conditions under which the website is being used.
  • 59. You’ll hear people talk about “mobile context,” but it’s more complicated than that. Not all people using mobile devices are out running around somewhere, and not all people using desktops/laptops are sitting behind a desk.
  • 60. Some people actually are running around when they’re using their mobile device. Photo credit: Mith Huang via Creative Commons http://flic.kr/p/9B7A4c
  • 61. But others might be sitting on the sofa at home, browsing the web or buying tickets to Disney World. Photo credit: Kai Chan Vong via Creative Commons http://flic.kr/p/5c4Sfv
  • 62. I’m not sure what these kids are doing, especially the one on the left, but they’re definitely not running around. Photo credit: Carlos Smith via Creative Commons http://flic.kr/p/8tLb4P
  • 63. It can be downright surprising where people are using their mobile devices. Photo credit: Pete Markham via Creative Commons http://flic.kr/p/2zvrrJ
  • 64. Just as there isn’t only one context of use for people with mobile devices, there also isn’t only one context of use for desktop and laptop computers.
  • 65. For example, you can’t assume someone on a phone has a slow connection, and someone on a laptop/desktop has a fast connection. Most of us have suffered through slow hotel room wifi where it takes a couple minutes to load one page. Photo credit: Wendi Dunlap via Creative Commons http://flic.kr/p/vMJM6
  • 66. So then why not make it faster for everybody, not just mobile users?
  • 67. You also can’t make assumptions about screen size. An office worker may have a tiny screen... Photo credit: Channy Yun via Creative Commons http://flic.kr/p/51QJr6
  • 68. While a home user may have a huge monitor. Photo credit: Matt Hamm via Creative Commons http://flic.kr/p/EyrLG
  • 69. Responsive Design So you need a site that works for everyone. That’s where responsive design comes in.
  • 70. Mobile First There are different ways to put together a responsive design. The best way is to use a mobile-first perspective. Designing for the smallest screen first forces you to focus on the content, and decide what’s really important.
  • 71. Trying to fit everything from a desktop site into a mobile site often just doesn’t make sense.
  • 72. The Washington Post realized this. Their mobile website is much simpler, cleaner, and straightforward. It only has the information you actually want.
  • 73. But then who do they think is actually going to want the rest of it? This is their front page. I counted 184 text links (that’s not including images or ads).
  • 74. Too much visual information thrown at me all at once makes my head hurt.
  • 75. Mobile use case: I just transferred money at my desk using my phone because logging into my banking app requires fewer steps. - Stephanie Rieger @stephanierieger Why is it easier to do a transaction on a mobile phone rather than on the bank’s regular website?
  • 76. Make it work better for everybody.
  • 78. United Pixelworkers is an ecommerce site. Not all responsive sites are content-based rather than functionality-based.You can scroll down to see the various products that are featured on the front page.
  • 79. When the screen gets wider, everything rearranges so you can see more at once.
  • 80. At full width, you have a beautiful layout. But it’s the exact same content that you saw at the narrowest width.You won’t be missing anything if you go to this site from your mobile phone.
  • 81. The WWF site has beautiful photography. They don’t want to waste it by making the photos tiny on a small screen.
  • 82. At desktop size, there’s space to make the main photo even bigger, but still room to show additional photos below.You’ll get the same content whether you’re on a mobile phone or a huge monitor, you’ll just be able to see more without scrolling.
  • 83. This is a company that sells surfboards. Instead of making the picture change size...
  • 84. They show more of the picture. Responsive design gives you a lot of options.
  • 85. The University of Chicago has a lot of information on their website. By designing from the smallest screen size first, they were able to make sure the most important content appears at the top of the screen.
  • 86. On a desktop screen, you see the same content, but there is room for some additions, such as the sub-caption on the main photo. That text isn’t an integral part of the content, so it was hidden at the narrower width to save space.
  • 87. You’ve probably noticed from these examples that responsive designs tend to be very clean and uncluttered. Compare that to the Washington Post site we saw earlier. Which is a better user experience?
  • 88. On responsive designs, since it’s the same website no matter what size you’re viewing it at, the branding and the look & feel are consistent across devices. This often isn’t the case when you have a separate mobile site.
  • 89. There’s more content on the page at this width, and you see additional elements such as the navigation. But it still looks and feels like the same website.
  • 90. Emeril’s site does a great job of presenting menus so they’re easily viewable on a small screen.You have to scroll down quite a ways to see everything, but that’s okay.
  • 91. At desktop width, the menu layout is different and they’ve added pictures for the three menu types at the top, an enhancement. Mobile users don’t see the pictures, but that’s okay because they aren’t an essential part of the message.
  • 92. Responsive Web Design 1. Give everybody the same content 2. Displayed appropriately for their device 3. No matter what device they have Bottom line, it’s all about the user.
  • 93. There is no Mobile Web. There is only The Web, which we view in different ways. There is also no Desktop Web. Or Tablet Web. - Stephen Hay @stephenhay
  • 94. Clarissa Peterson clarissapeterson.com mail@clarissapeterson.com @clarissa