Successfully reported this slideshow.

SMM Webinar - Responsive Design

2

Share

Loading in …3
×
1 of 32
1 of 32

SMM Webinar - Responsive Design

2

Share

Download to read offline

The presentation slides correspond with the Social Media Monthly November Webinar on Responsive Design, which focused on the web design approach from a marketer's point of view. The presentation serves as a quick but thorough introduction to responsive design and includes informative graphics that help illustrate the concept in an attempt to answer the 5 W's: Who, What, When, Where, Why as well as the How.

For more information, please visit http://www.r2integrated.com

The presentation slides correspond with the Social Media Monthly November Webinar on Responsive Design, which focused on the web design approach from a marketer's point of view. The presentation serves as a quick but thorough introduction to responsive design and includes informative graphics that help illustrate the concept in an attempt to answer the 5 W's: Who, What, When, Where, Why as well as the How.

For more information, please visit http://www.r2integrated.com

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

SMM Webinar - Responsive Design

  1. 1. Social Media Monthly November Webinar Responsive Design: A Marketer’s POV
  2. 2. What
  3. 3. Responsive Design: The What Optimization Across Devices •Put simply: Responsive design provides an optimal viewing experience across all devices. •Four breakpoints are considered when building a responsive site: mobile phone, tablet, small screen/laptop and wide screen. Both portrait and landscape view are considered for tablets and smartphones •Websites and Microsites are a 1 for 1 meaning users are viewing the exact same site regardless of device (different than a mobile optimized site) •Technically put: through the use of CSS, pixel widths are converted to percentages. With percentage values in place, resizing the browser window creates a fluid layout that scales to the window.
  4. 4. Responsive Design: The What Mobile Optimized vs Responsive Mobile Optimized Responsive Content Top 5-7 pages Full replicaof desktop version Design Differentlook/feel/UX Same look/feel/UX Analytics Recommended separateview in GA (distinguish desktop/table vs mobile) No separate view required (use mobilefilter) Maintenance Separate site to maintain Edits are made in 1 place SEO Googlenon-preferred Google preferred Build Levelof Effort Minimal Medium-High
  5. 5. Responsive
  6. 6. Mobile Optimized
  7. 7. Responsive Design: The What What Responsive is NOT: •A 100% replica of a desktop site: elements can be hidden based on breakpoint •A friend to outdated browsers, particularly IE7 and IE8 •A TREND
  8. 8. Why
  9. 9. Responsive Design: The Why Mobile-Only Users In a November 2013 eMarketer report titled “Redefining ‘Mobile-Only’ Users: Millions Selectively Avoid the Desktop,” the authors cite that “mobile device usage has already surpassed desktop in terms of time spent” going on to say that users will spend 2 hours and 19 minutes per day on desktops and laptops, “while mobile will rise to 2 hours and 21 minutes” per day. Consider those who don’t sit at a desk everyday: • Police/Fire/EMT Professionals • Teachers • Healthcare Professionals • Teens/Young Adults/College Students • Airline Industry Professionals • Military Consider those who are always on the go: • Everyone Time Spent on Device Per Day Desktop/Laptop Mobile
  10. 10. Responsive Design: The Why Expectations 85% of adults think that a company’s mobile website should be as good or better than their desktop website [Visual.ly Website, December 2013]
  11. 11. Responsive Design: The Why •Pinching/pulling •Hard to find/touch navigation •Menu is hard to locate and read •No click to call •No easy path to book a reservation Cork Wine Bar DC vs. Old EbbittGrill, DC •Accessible and easy-to- use navigation •Easy-to-read pages •Click to call enabled •Menus are easy-to-read and scannable •Events calendar well scaled to mobile device, easy to digest
  12. 12. Responsive Design: The Why •Impossible to read HP (pinching/pulling) •Challenging to select main navigation/tertiary navigation elements •Text way too small •Imagery does not scale •Simple forms very challenging to complete, ieRequest Information •Easy to read •and consume •Images scale well and are removed strategically on various pages vs desktop •Navigation easy to use •Search feature prominent and accessible •Use of color and scale makes long pages easy- to-scan and consume, eg. Studies page •All phone numbers leverage click-to-call •Map feature optimized and integrated with Google Maps Moravian College vs. University of South Carolina
  13. 13. “69% of tablet users have shopped via their tablet device in the last 30 days” [Visual.ly Website, December 2013] Responsive Design: The Why •Navigation and tertiary pages hard to navigate •Images not scaled correctly –cannot properly view inventory •Impossible to navigate between inventory options within a given category without really pulling on the screen •Contact/Find Showroom hard to use •Imagery well scaled and easy-to-view •Click to call enabled •Navigation extremely easy-to-use •Filter options within a category nice size and easy to touch •Search results pages offer well sized imagery and typography •Product detail pages scannablewith excellent use of accordions Ashley Furniture vs. Raymourand Flanigan
  14. 14. Move the Needle •Increase visitor time on site •Increase page views and engagement •Convert more leads •Increase your sales •Make search engines happy = move up in those search rankings •Meet customer expectations •Raise those repeat visitors •Make sharing your site effortless “ If you plan on sharing content or links to your website socially or through blogs, you need a mobile-friendly site, otherwise you will have high bounce rates, low conversion rates, etc. ” [HubSpotResponsive Design Article] Responsive Design: The Why
  15. 15. Who
  16. 16. Responsive Design: The Who Industries Financial Services Media/News Outlets Healthcare/Pharma Consumer Products Education Travel Real Estate Sports/Entertainment Professional Services Food Services
  17. 17. Responsive Design: The Who Missing the Mark •United Healthcare •TCF Bank •Bristol-Myers Squibb •USAJobs.com
  18. 18. Responsive Design: The Who Retail/e-Commerce Mobile Optimized is sometimes a better bet •Macy’s •Lowe’s •DSW Show Warehouse •Barnes and Noble •Nordstrom’s •Target •WalMart
  19. 19. Minimal Mobile Traffic? Are you garnering less than 5% mobile visits to your website? If so, it might not be worth the investment until you see an up-tick in mobile traffic. Mobile Visits < 5% Other Visits Responsive Design: The Who
  20. 20. Where
  21. 21. Responsive Design: The Where Websites, Microsites & Email Hershey’s Chocolate World Responsive Website Hershey’s Chocolate World Responsive Email
  22. 22. When
  23. 23. Responsive Design: The When November 2014SMTWTFS129162330310172441118255121926613202771421288152229
  24. 24. How
  25. 25. Responsive Design: The How IT vs Outsourcing IF YOUR IT DEPARTMENT IS: •Comprised of networking and telecommunications team members •Are the people you call to order a new laptop or phone •Focused on company telephony and Internet infrastructure needs •Forcing you to use IE7 or IE8 •Sparingly helping you out with the company website but more for bug resolution THAN improvements/enhancements/redesigns THE WRITING IS ON THE WALL: They are not website designers and developers
  26. 26. Digital Agencies • Staffed with specialized team members who play an integral role in responsive design: • Website strategists • Information Architects • User Experience Designs • Designers • Front-End Developers • Software Architects • SEO Specialists • QA Engineers • Stay abreast of trends • Gain efficiencies in responsive design due to years of experience (yes, years) Responsive Design: The How
  27. 27. Responsive Design: The How Cost •Take your full website redesign budget and add 30-40% •Full = IA, UX, design, front-end dev, engineering, launch •It’s cheaper to do it all together versus going responsive after you launch a new site
  28. 28. Responsive Design: The How Time Need your website launched before a certain date? Consider that responsive requires an additional level of effort and time to cut up all your page templates against those breakpoints. Take your development timeline and add about 15-20% more time.
  29. 29. THANK YOU! Let’s get started. Tracy Pogue tpogue@r2integrated.com 410.369.3769
  30. 30. Appendix
  31. 31. R2integrated (r2i) is a nationally recognized and award-winning digital marketing agency with one goal in mind. Our mission is to develop innovative, memorable, meaningful and results-oriented online customer experiences for our clients. 11 100+ YEARS OLD TEAM MEMBERS STUFF WE All Things Digital Integration/Platforms Analytics & Reporting : AT-A-GLANCE: 0 10101 01 101 1 110 100 010 10 1 Who are we?
  32. 32. Awards

×