Responsive Design

375 views
316 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
375
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • “Responsive Design” is a term that has been getting a lot of buzz lately, both internally and from our clients.We thought it might be a good idea to put a presentation together to describe what it is and what it means for us.
  • First, a little background.We’ve been saying for years that “mobile is coming.” It is finally here.We are on the edge of a fundamental shift in customer contact.It is no longer a question of IF you have a mobile presence. Rather, it is a question of HOW WELL you do it.Let me give you some numbers that put this into perspective.
  • According to a new study by Deloitte, in-store smartphone use currently influences 5.1 percent of annual retail store sales, translating into $158 billion. This is expected to nearly quadruple by 2016.
  • Not only do we have this tremendous shift in consumer behavior, we also have an explosion in devices and their capabilities.
  • Just a few years ago, it was standard practice to design a single version of a site that worked on a typical 1024 x 768 desktop screen. If we were feeling especially generous, we would make sure it was also usable on an 800 x 600 browser.
  • Today there are over 25 screen resolutions.This doesn’t take into non-traditional Web devices like TVs and internet-ready appliances. Nor does it address future devices
  • Behavior patterns are distinctly different on mobile devices, and our experiences should be tailored accordingly.Swipe vs. clickSmaller screen sizeShorter, more focused sessions
  • If the device sizes and user needs are different between mobile and desktop, we should be modifying the design to account for this.
  • Behavior patterns are distinctly different on mobile devices, and our experiences should be tailored accordingly..Behavioral studies have shown that people surf and explore on a desktop PC (longer sessions, multiple sites). They look for discrete information on an phone (shorter sessions, more focused)
  • There are valid reasons to take any of these four approaches, but our default approach should be #4: Responsive Design
  • There are valid reasons to take any of these four approaches, but our default approach should be #4: Responsive Design
  • So, back to our initial question…
  • Responsive design has been around for a couple of years.Coined by Ethan Marcotte in 2010.Built on technology that we use today, but I’m not going to go into detail about that this morning.
  • benefits
  • benefits
  • Responsive design is as much about the in-between as it is the end points.The designer, developer and client need to understand what happens to the content as it flexes between the two.This requires a new approach and some new tools
  • Content-focusedBefore doing any design, define content priority and hierarchyGives designer an objective set of communication guidelines and developers a clear outline for developmentMobile firstStart with the simplest form and expand from there.Much easier to expand design than it is to shrink it.
  • Content-focusedBefore doing any design, define content priority and hierarchyGives designer an objective set of communication guidelines and developers a clear outline for developmentMobile firstStart with the simplest form and expand from there.Much easier to expand design than it is to shrink it.
  • CollaborativeDesigners can’t always predict what is going to happen as their layouts flex to different widthsThey need to be able to effectively work with their project teammates to handle issues as they come up.
  • Responsive Design

    1. 1. What isResponsiveDesign?
    2. 2. The mobilebrowser has arrived
    3. 3. 50.4% of US cell phone owners use smartphones.Source: Nielsen, Mobile Insights, Q1 2012
    4. 4. 17% of US cell phone users go online using their phones more than their desktops, laptops or tablets.Source: Pew Research Center’s Internet & American Life Project, March 15-April 3 2012 Tracking Survey
    5. 5. 58% of US smartphone owners have used their phone for store-related shopping.Source: Deloitte Mobile Influence Survey, May 2012
    6. 6. $158B of estimated 2012 in-store sales will be influenced by in-store mobile use.Source: Deloitte Mobile Influence Survey, May 2012
    7. 7. Devices are evolving
    8. 8. 2010
    9. 9. 2012
    10. 10. Mobile user needs are different fromdesktop user needs
    11. 11. Mobile designsare different fromdesktop designs
    12. 12. One sizedoesn’t fit all.
    13. 13. Four ways to approach this:1. Do nothing2. Build separate desktop and mobile sites3. Supplement desktop site with mobile apps4. Responsive design
    14. 14. Four ways to approach this:1. Do nothing2. Build separate desktop and mobile sites3. Supplement desktop site with mobile apps4. Responsive design
    15. 15. What isResponsiveDesign?
    16. 16. PhilosophyDeliver a single, flexible designthat adapts to display properly onwhatever device is used to viewyour site.
    17. 17. Advantages• Eliminates maintenance redundancies• Better for social & linking strategies• Search engines like it• Seamless experience• Future-ready• Full site is accessible from mobile
    18. 18. Disadvantages• Additional design & dev costs (but similar to other solutions)• Customer needs may be different for mobile• Requires adjustments to creative process• Some design limitations
    19. 19. In-between
    20. 20. Content-focusedBefore you design, define thecontent, priority and hierarchy appropriatefor the audience
    21. 21. Content-focusedBefore you design, define thecontent, priority and hierarchy appropriatefor the audienceMobile firstStart with the simplest form and expandfrom there
    22. 22. CollaborativeRequires close communication andcollaboration between Design, UI andDevelopment
    23. 23. Customer
    24. 24. Customer+ Content
    25. 25. Customer Content+ Context
    26. 26. Customer Content+ Context Optimizedexperience
    27. 27. Thank You.

    ×