Making Your Responsive Website a Success

  • Published on
    27-Jan-2015

  • View
    104

  • Download
    0

DESCRIPTION

 

Transcript

  • 1. NERDERY WEBINAR PLANNING FOR RESPONSIVE DESIGN

2. #NERDERYWEBINAR @THE_NERDERY Thanks for joining us for the pre-show discussion Well 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. #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. #NERDERYWEBINAR @THE_NERDERY 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. #NERDERYWEBINAR @THE_NERDERY All registered viewers will receive a link to the full recording later this week #NERDERYWEBINAR @THE_NERDERY 7. #NERDERYWEBINAR @THE_NERDERY Additional Q&A will be featured on our podcast BLOG.NERDERY.COM 8. NERDERY WEBINAR PLANNING FOR RESPONSIVE DESIGN 9. #NERDERYWEBINAR @THE_NERDERY YOUR HOSTS Ryan Carlson Technology Evangelist @ryancarlson Erica Tava Business Analyst @emtjohnson Anthony Lukes Senior Front End Developer @anthonyLukes 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. #NERDERYWEBINAR @THE_NERDERY DISCLAIMER THIS IS NOT A TECH TALK 12. #NERDERYWEBINAR @THE_NERDERY WHY PLAN FOR RESPONSIVE DESIGN? CHAPTER 1 OF 6 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. #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. #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. #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. #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. #NERDERYWEBINAR @THE_NERDERY THE WEB IS CONSTANTLY CHANGING CHAPTER 2 OF 6 19. #NERDERYWEBINAR @THE_NERDERY WEB TRENDS HAVE THE FOLLOWING IN COMMON They all have been reactive to user preference in technology. 20. #NERDERYWEBINAR @THE_NERDERY MOBILE FRIENDLY SITES (NOW WITH 100% LESS FLASH) 21. #NERDERYWEBINAR @THE_NERDERY M.DOMAIN DESIGN 22. #NERDERYWEBINAR @THE_NERDERY MOBILE-LAST RESPONSIVE DESIGN (AHEAD OF ITS TIME) 23. #NERDERYWEBINAR @THE_NERDERY ADAPTIVE DESIGN (PROGRESSIVE ENHANCEMENT) 24. #NERDERYWEBINAR @THE_NERDERY MOBILE-FIRST RESPONSIVE DESIGN (FLEXIBLE CONTENT) 25. #NERDERYWEBINAR @THE_NERDERY SINGLE DESIGN WITH MANY BREAK POINTS 800px 645px 355px 510px 435px 400px 385px 350px 320px 26. #NERDERYWEBINAR @THE_NERDERY HYBRID APPROACH DESKTOP EXPERIENCE MOBILE EXPERIENCE (A NEW DESIGN TREND) TWO DESIGNS BASED ON TWO USER EXPERIENCES 27. #NERDERYWEBINAR @THE_NERDERY NUTS AND BOLTS OF RESPONSIVE DESIGN CHAPTER 3 OF 6 28. #NERDERYWEBINAR @THE_NERDERY WHAT IS RESPONSIVE? Screen Size and Hardware Agnostic Content First Design Proactively assumes change in the future. 29. #NERDERYWEBINAR @THE_NERDERY WHAT IS RESPONSIVE? Screen Size and Hardware Agnostic Content First Design Proactively assumes change in the future. 30. #NERDERYWEBINAR @THE_NERDERY WHAT IS RESPONSIVE? Screen Size and Hardware Agnostic Content First Design Proactively assumes change in the future. 31. #NERDERYWEBINAR @THE_NERDERY QUESTION BREAK UP NEXT: WHY PLAN FOR RESPONSIVE DESIGN? 32. #NERDERYWEBINAR @THE_NERDERY CHAPTER 4 OF 6 WHY PLAN FOR RESPONSIVE DESIGN? 33. #NERDERYWEBINAR @THE_NERDERY OVERVIEW Mobile First Ground Up Flexibility General Rules of Responsive Design 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. #NERDERYWEBINAR @THE_NERDERY PLANNING FOR GROUND UP FLEXIBILITY ITERATIVE DESIGN PROCESS EMBEDDED DEVELOPMENT DURING UX AND DESIGN EMBEDDED QA TO UNCOVER ISSUES EARLY 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. #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. #NERDERYWEBINAR @THE_NERDERY WHEN IS RESPONSIVE DESIGN THE RIGHT FIT? CHAPTER 5 OF 6 39. #NERDERYWEBINAR @THE_NERDERY VIEWER POLL 40. #NERDERYWEBINAR @THE_NERDERY FACTORS FOR RESPONSIVE DESIGN Budget Timeline Data Driven Decisions Consistent User Experience or Workflow 41. #NERDERYWEBINAR @THE_NERDERY BUDGET VARIABLES Unique Device Support Overlapping OS / Browser Versions or Required Support of Legacy Browsers Too many content types. 42. #NERDERYWEBINAR @THE_NERDERY FACTORS FOR RESPONSIVE DESIGN Budget Timeline Data Driven Decisions Consistent User Experience or Workflow 43. #NERDERYWEBINAR @THE_NERDERY TIMELINE VARIABLES Desktop Experience is already complete. Project is on a tight deadline. 44. #NERDERYWEBINAR @THE_NERDERY FACTORS FOR RESPONSIVE DESIGN Budget Timeline Data Driven Decisions Consistent User Experience or Workflow 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. #NERDERYWEBINAR @THE_NERDERY FACTORS FOR RESPONSIVE DESIGN Budget Timeline Data Driven Decisions Consistent User Experience or Workflow 47. #NERDERYWEBINAR @THE_NERDERY UX AND UI CONSIDERATIONS Interactive Elements that dont translate to mobile experience Touch Interactions Specific Screen Needs (games) Hardware Intensive Visuals Mobile experience better served by native App 48. #NERDERYWEBINAR @THE_NERDERY GOOD FIT FOR RESPONSIVE 49. #NERDERYWEBINAR @THE_NERDERY POOR FIT FOR RESPONSIVE 50. #NERDERYWEBINAR @THE_NERDERY CHAPTER 6 OF 6 THE FUTURE OF RESPONSIVE DESIGN 51. #NERDERYWEBINAR @THE_NERDERY RESPONDING TO CHANGES IN EMERGING TECHNOLOGY 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. #NERDERYWEBINAR @THE_NERDERY NEXT STEPS 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. #NERDERYWEBINAR @THE_NERDERY VIEWER POLL 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. #NERDERYWEBINAR @THE_NERDERY Topic suggestions or questions? webinar@nerdery.com More answers online at http://nerdery.com Questions & Answers will air on The Nerderys podcast THANK YOU FOR ATTENDING 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

Recommended

View more >