NERDERY WEBINAR
PLANNING FOR
RESPONSIVE DESIGN
#NERDERYWEBINAR @THE_NERDERY
Thanks for joining us for the pre-show discussion
We’ll be starting in just a few minutes
YOU...
#NERDERYWEBINAR @THE_NERDERY
THE NERDERY
WE PARTNER WITH CREATIVE MINDS AND BIG
THINKERS TO ENGINEER AND EXECUTE THEIR
INT...
#NERDERYWEBINAR @THE_NERDERY
#NERDERYWEBINAR @THE_NERDERY
HOW TO PARTICIPATE
Use the questions panel in the GoToMeeting app
Send us an email at webinar...
#NERDERYWEBINAR @THE_NERDERY
All registered viewers will receive a link
to the full recording later this week
#NERDERYWEBI...
#NERDERYWEBINAR @THE_NERDERY
Additional Q&A will be
featured on our podcast
BLOG.NERDERY.COM
NERDERY WEBINAR
PLANNING FOR
RESPONSIVE DESIGN
#NERDERYWEBINAR @THE_NERDERY
YOUR HOSTS
Ryan Carlson
Technology Evangelist
@ryancarlson
Erica Tava
Business Analyst
@emtjo...
#NERDERYWEBINAR @THE_NERDERY
1
2
3
4
5
6
Why Plan For Responsive?
OVERVIEW
How the web has been adapting to change
Nuts an...
#NERDERYWEBINAR @THE_NERDERY
DISCLAIMER
THIS IS NOT A TECH TALK
#NERDERYWEBINAR @THE_NERDERY
WHY PLAN FOR
RESPONSIVE DESIGN?
CHAPTER
1 OF 6
#NERDERYWEBINAR @THE_NERDERY
THE STATE OF
THE WEB
Mobile Usage Trends and
Expectations
How decisions are made
The growing ...
#NERDERYWEBINAR @THE_NERDERY
Mobile Consumer Report for 2013 – The Nielson Company
AMERICANS THAT OWN A 

MOBILE PHONE
AME...
#NERDERYWEBINAR @THE_NERDERY
THE STATE OF
THE WEB
Mobile Usage Trends and
Expectations
How decisions are made
The growing ...
#NERDERYWEBINAR @THE_NERDERY
THE STATE OF
THE WEB
Mobile Usage Trends and
Expectations
How decisions are made
The growing ...
#NERDERYWEBINAR @THE_NERDERY
THE EVOLUTION OF THE MOBILE REVOLUTION
1994
PocketWeb for
Apple Newton
1997
HandWeb
1999
Blac...
#NERDERYWEBINAR @THE_NERDERY
THE WEB IS CONSTANTLY
CHANGING
CHAPTER
2 OF 6
#NERDERYWEBINAR @THE_NERDERY
WEB TRENDS HAVE
THE FOLLOWING IN
COMMON
¼ They all have been reactive to user
preference in t...
#NERDERYWEBINAR @THE_NERDERY
MOBILE
FRIENDLY
SITES
(NOW WITH 100% LESS FLASH)
#NERDERYWEBINAR @THE_NERDERY
M.DOMAIN
DESIGN
#NERDERYWEBINAR @THE_NERDERY
MOBILE-LAST
RESPONSIVE
DESIGN
(AHEAD OF ITS TIME)
#NERDERYWEBINAR @THE_NERDERY
ADAPTIVE
DESIGN
(PROGRESSIVE ENHANCEMENT)
#NERDERYWEBINAR @THE_NERDERY
MOBILE-FIRST
RESPONSIVE
DESIGN
(FLEXIBLE CONTENT)
#NERDERYWEBINAR @THE_NERDERY
SINGLE DESIGN
WITH MANY
BREAK POINTS
800px
645px
355px
510px
435px
400px
385px
350px
320px
#NERDERYWEBINAR @THE_NERDERY
HYBRID
APPROACH
DESKTOP EXPERIENCE
MOBILE EXPERIENCE
(A NEW DESIGN TREND)
TWO DESIGNS BASED O...
#NERDERYWEBINAR @THE_NERDERY
NUTS AND BOLTS OF
RESPONSIVE DESIGN
CHAPTER
3 OF 6
#NERDERYWEBINAR @THE_NERDERY
WHAT IS
RESPONSIVE?
Screen Size and Hardware Agnostic
Content First Design
Proactively assume...
#NERDERYWEBINAR @THE_NERDERY
WHAT IS
RESPONSIVE?
Screen Size and Hardware Agnostic
Content First Design
Proactively assume...
#NERDERYWEBINAR @THE_NERDERY
WHAT IS
RESPONSIVE?
Screen Size and Hardware Agnostic
Content First Design
Proactively assume...
#NERDERYWEBINAR @THE_NERDERY
QUESTION BREAK
UP NEXT: WHY PLAN FOR RESPONSIVE DESIGN?
#NERDERYWEBINAR @THE_NERDERY
CHAPTER
4 OF 6
WHY PLAN FOR
RESPONSIVE DESIGN?
#NERDERYWEBINAR @THE_NERDERY
OVERVIEW
Mobile First
Ground Up Flexibility
General Rules of Responsive Design
#NERDERYWEBINAR @THE_NERDERY
CREATING A MOBILE FIRST PLAN
ASSETS SCALE
UP FROM MOBILE
DESIGNS
CONTENT
HIERARCHY BASED
ON U...
#NERDERYWEBINAR @THE_NERDERY
PLANNING FOR GROUND UP FLEXIBILITY
ITERATIVE DESIGN
PROCESS
EMBEDDED
DEVELOPMENT DURING
UX AN...
#NERDERYWEBINAR @THE_NERDERY
GENERAL RULES
¼ Content stays in the same order
¼ Follow the same page structure
¼ Same funct...
#NERDERYWEBINAR @THE_NERDERY
MOBILE FRIENDLY
UX
1X
FE
1X
BE
3X
PM
.5X
QA
.5X
RESPONSIVE/ADAPTIVE
BEFEUX PM QA
1X 1X 3X .5X...
#NERDERYWEBINAR @THE_NERDERY
WHEN IS RESPONSIVE
DESIGN THE RIGHT FIT?
CHAPTER
5 OF 6
#NERDERYWEBINAR @THE_NERDERY
VIEWER POLL
#NERDERYWEBINAR @THE_NERDERY
FACTORS FOR
RESPONSIVE DESIGN
Budget
Timeline
Data Driven Decisions
Consistent User Experienc...
#NERDERYWEBINAR @THE_NERDERY
BUDGET VARIABLES
¼ Unique Device Support
¼ Overlapping OS / Browser Versions or
Required Supp...
#NERDERYWEBINAR @THE_NERDERY
FACTORS FOR
RESPONSIVE DESIGN
Budget
Timeline
Data Driven Decisions
Consistent User Experienc...
#NERDERYWEBINAR @THE_NERDERY
TIMELINE VARIABLES
¼ Desktop Experience is already complete.
¼ Project is on a tight deadline.
#NERDERYWEBINAR @THE_NERDERY
FACTORS FOR
RESPONSIVE DESIGN
Budget
Timeline
Data Driven Decisions
Consistent User Experienc...
#NERDERYWEBINAR @THE_NERDERY
SUPPORTED BY DATA
¼ Analytics from your existing websites
¼ User Research for new websites
¼ ...
#NERDERYWEBINAR @THE_NERDERY
FACTORS FOR
RESPONSIVE DESIGN
Budget
Timeline
Data Driven Decisions
Consistent User Experienc...
#NERDERYWEBINAR @THE_NERDERY
UX AND UI
CONSIDERATIONS
¼ Interactive Elements that don’t
translate to mobile experience
¼ T...
#NERDERYWEBINAR @THE_NERDERY
GOOD FIT FOR RESPONSIVE
#NERDERYWEBINAR @THE_NERDERY
POOR FIT FOR RESPONSIVE
#NERDERYWEBINAR @THE_NERDERY
CHAPTER
6 OF 6
THE FUTURE OF
RESPONSIVE DESIGN
#NERDERYWEBINAR @THE_NERDERY
RESPONDING TO CHANGES IN
EMERGING TECHNOLOGY
#NERDERYWEBINAR @THE_NERDERY
AS THINGS CHANGE SO 

CAN OUR WEBSITE
TRANSMITTED USER
PREFERENCES
(THINK ACCESSIBILITY)
EXTE...
#NERDERYWEBINAR @THE_NERDERY
NEXT STEPS
#NERDERYWEBINAR @THE_NERDERY
NEXT STEPS
3
2
1
Identify Business Goals and Implement a Content
Strategy
Look at the Data to...
#NERDERYWEBINAR @THE_NERDERY
VIEWER POLL
#NERDERYWEBINAR @THE_NERDERY
OVERVIEW
1
2
3
4
5
6
Why Plan For Responsive?
How the web has been adapting to change
Nuts an...
#NERDERYWEBINAR @THE_NERDERY
Topic suggestions or questions? webinar@nerdery.com
More answers online at http://nerdery.com...
#NERDERYWEBINAR @THE_NERDERY
Tweet with the #nerderywebinar hashtag
Check your inbox for upcoming webinar news
THANK YOU F...
Upcoming SlideShare
Loading in …5
×

Making Your Responsive Website a Success

269
-1

Published on

Published in: Internet, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
269
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Making Your Responsive Website a Success

  1. 1. NERDERY WEBINAR PLANNING FOR RESPONSIVE DESIGN
  2. 2. #NERDERYWEBINAR @THE_NERDERY Thanks for joining us for the pre-show discussion We’ll be starting in just a few minutes YOUR HOSTS Ryan CarlsonErica TavaAnthony Lukes Senior Front End Developer Business Analyst Technology Evangelist @anthonyLukes @ryancarlson@emtjohnson
  3. 3. #NERDERYWEBINAR @THE_NERDERY THE NERDERY WE PARTNER WITH CREATIVE MINDS AND BIG THINKERS TO ENGINEER AND EXECUTE THEIR INTERACTIVE PROJECTS HTTP://NERDERY.COM
 2,262,193 7,770 HOURS WORKED SINCE 2003 PROJECTS COMPLETED DOGS IN OUR OFFICE BIKE COMMUTERS HOURS WORKED, LAST 12 MONTHS PEOPLE WHO WORK AT THE NERDERY AVERAGE JANUARY TEMPERATURE FOUR HUNDRED SIXTY-SEVEN TWENTY- EIGHT 80 FOUR º
  4. 4. #NERDERYWEBINAR @THE_NERDERY
  5. 5. #NERDERYWEBINAR @THE_NERDERY HOW TO PARTICIPATE Use the questions panel in the GoToMeeting app Send us an email at webinar@nerdery.com Fill out the survey at the end of the webinar Tweet with the #nerderywebinar hashtag #NERDERYWEBINAR @THE_NERDERY
  6. 6. #NERDERYWEBINAR @THE_NERDERY All registered viewers will receive a link to the full recording later this week #NERDERYWEBINAR @THE_NERDERY
  7. 7. #NERDERYWEBINAR @THE_NERDERY Additional Q&A will be featured on our podcast BLOG.NERDERY.COM
  8. 8. NERDERY WEBINAR PLANNING FOR RESPONSIVE DESIGN
  9. 9. #NERDERYWEBINAR @THE_NERDERY YOUR HOSTS Ryan Carlson Technology Evangelist @ryancarlson Erica Tava Business Analyst @emtjohnson Anthony Lukes Senior Front End Developer @anthonyLukes
  10. 10. #NERDERYWEBINAR @THE_NERDERY 1 2 3 4 5 6 Why Plan For Responsive? OVERVIEW How the web has been adapting to change Nuts and bolts of responsive design Planning for Responsive Design The Future of Responsive Design Is Responsive Design the Right Fit?
  11. 11. #NERDERYWEBINAR @THE_NERDERY DISCLAIMER THIS IS NOT A TECH TALK
  12. 12. #NERDERYWEBINAR @THE_NERDERY WHY PLAN FOR RESPONSIVE DESIGN? CHAPTER 1 OF 6
  13. 13. #NERDERYWEBINAR @THE_NERDERY THE STATE OF THE WEB Mobile Usage Trends and Expectations How decisions are made The growing cost of a fragmented mobile market
  14. 14. #NERDERYWEBINAR @THE_NERDERY Mobile Consumer Report for 2013 – The Nielson Company AMERICANS THAT OWN A 
 MOBILE PHONE AMERICANS THAT OWN A SMARTPHONE SMARTPHONE OWNERS FOR AGES 25-34 94% 64% 78% MOBILE TREND DATA SHOPPING/RETAIL 56%
  15. 15. #NERDERYWEBINAR @THE_NERDERY THE STATE OF THE WEB Mobile Usage Trends and Expectations How decisions are made The growing cost of a fragmented mobile market
  16. 16. #NERDERYWEBINAR @THE_NERDERY THE STATE OF THE WEB Mobile Usage Trends and Expectations How decisions are made The growing cost of a fragmented mobile market
  17. 17. #NERDERYWEBINAR @THE_NERDERY THE EVOLUTION OF THE MOBILE REVOLUTION 1994 PocketWeb for Apple Newton 1997 HandWeb 1999 Blackberry OS on Pager 2002 Blackberry Smartphone 2007 First iPhone “mobile web” 2008 iPhone SDK Released
  18. 18. #NERDERYWEBINAR @THE_NERDERY THE WEB IS CONSTANTLY CHANGING CHAPTER 2 OF 6
  19. 19. #NERDERYWEBINAR @THE_NERDERY WEB TRENDS HAVE THE FOLLOWING IN COMMON ¼ They all have been reactive to user preference in technology.
  20. 20. #NERDERYWEBINAR @THE_NERDERY MOBILE FRIENDLY SITES (NOW WITH 100% LESS FLASH)
  21. 21. #NERDERYWEBINAR @THE_NERDERY M.DOMAIN DESIGN
  22. 22. #NERDERYWEBINAR @THE_NERDERY MOBILE-LAST RESPONSIVE DESIGN (AHEAD OF ITS TIME)
  23. 23. #NERDERYWEBINAR @THE_NERDERY ADAPTIVE DESIGN (PROGRESSIVE ENHANCEMENT)
  24. 24. #NERDERYWEBINAR @THE_NERDERY MOBILE-FIRST RESPONSIVE DESIGN (FLEXIBLE CONTENT)
  25. 25. #NERDERYWEBINAR @THE_NERDERY SINGLE DESIGN WITH MANY BREAK POINTS 800px 645px 355px 510px 435px 400px 385px 350px 320px
  26. 26. #NERDERYWEBINAR @THE_NERDERY HYBRID APPROACH DESKTOP EXPERIENCE MOBILE EXPERIENCE (A NEW DESIGN TREND) TWO DESIGNS BASED ON TWO USER EXPERIENCES
  27. 27. #NERDERYWEBINAR @THE_NERDERY NUTS AND BOLTS OF RESPONSIVE DESIGN CHAPTER 3 OF 6
  28. 28. #NERDERYWEBINAR @THE_NERDERY WHAT IS RESPONSIVE? Screen Size and Hardware Agnostic Content First Design Proactively assumes change in 
 the future.
  29. 29. #NERDERYWEBINAR @THE_NERDERY WHAT IS RESPONSIVE? Screen Size and Hardware Agnostic Content First Design Proactively assumes change in 
 the future.
  30. 30. #NERDERYWEBINAR @THE_NERDERY WHAT IS RESPONSIVE? Screen Size and Hardware Agnostic Content First Design Proactively assumes change in 
 the future.
  31. 31. #NERDERYWEBINAR @THE_NERDERY QUESTION BREAK UP NEXT: WHY PLAN FOR RESPONSIVE DESIGN?
  32. 32. #NERDERYWEBINAR @THE_NERDERY CHAPTER 4 OF 6 WHY PLAN FOR RESPONSIVE DESIGN?
  33. 33. #NERDERYWEBINAR @THE_NERDERY OVERVIEW Mobile First Ground Up Flexibility General Rules of Responsive Design
  34. 34. #NERDERYWEBINAR @THE_NERDERY CREATING A MOBILE FIRST PLAN ASSETS SCALE UP FROM MOBILE DESIGNS CONTENT HIERARCHY BASED ON USE CASES NAVIGATION AND UI ELEMENTS
  35. 35. #NERDERYWEBINAR @THE_NERDERY PLANNING FOR GROUND UP FLEXIBILITY ITERATIVE DESIGN PROCESS EMBEDDED DEVELOPMENT DURING UX AND DESIGN EMBEDDED QA 
 TO UNCOVER ISSUES EARLY
  36. 36. #NERDERYWEBINAR @THE_NERDERY GENERAL RULES ¼ Content stays in the same order ¼ Follow the same page structure ¼ Same functionality and content throughout ¼ Design with progressive enhancement 
 in mind ¼ Effective use of hardware resources that scale across known devices
  37. 37. #NERDERYWEBINAR @THE_NERDERY MOBILE FRIENDLY UX 1X FE 1X BE 3X PM .5X QA .5X RESPONSIVE/ADAPTIVE BEFEUX PM QA 1X 1X 3X .5X .5X +.75X +.75X +.5X
  38. 38. #NERDERYWEBINAR @THE_NERDERY WHEN IS RESPONSIVE DESIGN THE RIGHT FIT? CHAPTER 5 OF 6
  39. 39. #NERDERYWEBINAR @THE_NERDERY VIEWER POLL
  40. 40. #NERDERYWEBINAR @THE_NERDERY FACTORS FOR RESPONSIVE DESIGN Budget Timeline Data Driven Decisions Consistent User Experience or Workflow
  41. 41. #NERDERYWEBINAR @THE_NERDERY BUDGET VARIABLES ¼ Unique Device Support ¼ Overlapping OS / Browser Versions or Required Support of Legacy Browsers ¼ Too many content types.
  42. 42. #NERDERYWEBINAR @THE_NERDERY FACTORS FOR RESPONSIVE DESIGN Budget Timeline Data Driven Decisions Consistent User Experience or Workflow
  43. 43. #NERDERYWEBINAR @THE_NERDERY TIMELINE VARIABLES ¼ Desktop Experience is already complete. ¼ Project is on a tight deadline.
  44. 44. #NERDERYWEBINAR @THE_NERDERY FACTORS FOR RESPONSIVE DESIGN Budget Timeline Data Driven Decisions Consistent User Experience or Workflow
  45. 45. #NERDERYWEBINAR @THE_NERDERY SUPPORTED BY DATA ¼ Analytics from your existing websites ¼ User Research for new websites ¼ Industry Demographic information ¼ Business to Business or Business to Consumer?
  46. 46. #NERDERYWEBINAR @THE_NERDERY FACTORS FOR RESPONSIVE DESIGN Budget Timeline Data Driven Decisions Consistent User Experience or Workflow
  47. 47. #NERDERYWEBINAR @THE_NERDERY UX AND UI CONSIDERATIONS ¼ Interactive Elements that don’t translate to mobile experience ¼ Touch Interactions ¼ Specific Screen Needs (games) ¼ Hardware Intensive Visuals ¼ Mobile experience better served by native App
  48. 48. #NERDERYWEBINAR @THE_NERDERY GOOD FIT FOR RESPONSIVE
  49. 49. #NERDERYWEBINAR @THE_NERDERY POOR FIT FOR RESPONSIVE
  50. 50. #NERDERYWEBINAR @THE_NERDERY CHAPTER 6 OF 6 THE FUTURE OF RESPONSIVE DESIGN
  51. 51. #NERDERYWEBINAR @THE_NERDERY RESPONDING TO CHANGES IN EMERGING TECHNOLOGY
  52. 52. #NERDERYWEBINAR @THE_NERDERY AS THINGS CHANGE SO 
 CAN OUR WEBSITE TRANSMITTED USER PREFERENCES (THINK ACCESSIBILITY) EXTERNAL SENSORS FOR DISTANCE FROM SCREEN OR LIGHTING CONDITIONS EXTERNAL SENSORS TO DETECT MOTION OR USER ORIENTATION. (EX. WALL SCREENS)
  53. 53. #NERDERYWEBINAR @THE_NERDERY NEXT STEPS
  54. 54. #NERDERYWEBINAR @THE_NERDERY NEXT STEPS 3 2 1 Identify Business Goals and Implement a Content Strategy Look at the Data to inform Technology Choices and meeting User Needs and/or perform User Research Engage Development and QA early in the decision making process to reduce development time and costly design decisions from the beginning.
  55. 55. #NERDERYWEBINAR @THE_NERDERY VIEWER POLL
  56. 56. #NERDERYWEBINAR @THE_NERDERY OVERVIEW 1 2 3 4 5 6 Why Plan For Responsive? How the web has been adapting to change Nuts and bolts of responsive design Planning for Responsive Design The Future of Responsive Design Is Responsive Design the Right Fit?
  57. 57. #NERDERYWEBINAR @THE_NERDERY Topic suggestions or questions? webinar@nerdery.com More answers online at http://nerdery.com Questions & Answers will air on The Nerdery’s podcast THANK YOU FOR ATTENDING
  58. 58. #NERDERYWEBINAR @THE_NERDERY Tweet with the #nerderywebinar hashtag Check your inbox for upcoming webinar news THANK YOU FOR ATTENDING Fill out the survey at the end of the webinar
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×