Responsive vs. Adaptive

482
-1

Published on

My presentation on Responsive vs Adaptive sites from ClickZ NY 2014

Published in: Marketing
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

No notes for slide

Responsive vs. Adaptive

  1. 1. Responsive,   Adap.ve,  Mobile   Which  Path  is  Right   for  Me?  
  2. 2. Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Agenda   •  Mobile Trends •  Types of mobile sites •  Adaptive Web Design verses Client Side Responsive •  Closing Notes
  3. 3. Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Milestone  at  a  glance   Drive online revenue and profitability for our clients Silicon Valley ~ Chicago ~ India 180 employees ~1500 Clients Digital marketing software and services for hospitality
  4. 4. Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Mobile  Internet  is   growing  fast!  
  5. 5. Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Understand  the  user   intent…   §  Desktop User §  Office hours §  Research about property, specials, events, reviews and detailed information §  Mobile User §  Lunch breaks/Starbucks §  Looking for property location, maps and directions, click to call reservations, local area guide §  Tablet User §  Evening hours §  Looking for visual content about property and destination
  6. 6. Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Mobile  search  and   hospitality  industry   •  Global smartphone use will reach 2 billion by 2015 (Bloomberg) •  Across all industries, mobile traffic is increasing by 3.5 percent per month (Televox) •  Of the estimated 30 billion annual mobile searches, about 12 billion are local searches (Search Engine Land) – hotel search is a local search •  Local mobile searches (85.9 billion) are projected to exceed desktop searches (84 billion) for the fist time in 2015 (eMarketer)
  7. 7. Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg What  are  mobile  users   doing?   Desktop is a Cash Cow, Mobile is the Rising Star
  8. 8. Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Mobile  conversions   can  be  big!   •  Multi screen search behavior
  9. 9. Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Mobile  visitor   behavior   Use Google Analytics 1. Go into Traffic > Search Queries 2. Select Mobile Filter
  10. 10. Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg 3  op@ons  for  your   mobile  sites   RESPONSIVE CLIENT SIDE 1.  Same website & URL 2.  Different layout but same elements resized 3.  Same content for desktop, mobile & iPad 4.  Sites are download heavy Adaptive Responsive (RESS) 1.  Same URL and website 2.  Different layout, different elements 3.  Different content /same content served according to device for desktop, mobile and I-pad. 4.  Site speed is good and server side caching is effective SEPARATE MOBILE SITE 1.  Different URL 2.  Different layout 3.  Different content for desktop and different for mobile. 4.  Sites are download heavy 5.  Need canonical and rel=alternate tags to be implemented 1 2 3
  11. 11. Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Breakpoints:   Responsive  vs.   Dynamic  serving   Client side Responsive/RWD/ Adaptive /Dynamic Server side/RESS Responsive design is client-side, meaning the whole page is delivered to the device browser (the client), and the browser then changes how the page appears in relation to the dimensions of the browser window Adaptive design is server-side, meaning before the page is even delivered, the server (where the site is hosted) detects the attributes of the device, and loads a version of the site that is optimized for device type Same web URL consistent across all devices Same web URL consistent across all devices. Content stays the same across all devices Same content can be shown across all devices or ability to customize meta and content shown per device Both desktop and mobile devices download the entire web page Render only those components viewable on requested device With responsive, the device itself does the work with media queries to display the re-sized images and optimized layout With adaptive, the server does the work and delivers the page already optimized. Small images are loaded first and then replace with larger images designed for broadband/desktop experience. Images can be further optimized for mobile and tablet experience Page load time is high Page Loading time can be controlled based on device type CSS/JS changes require to make site compactable for new devices RESS leaves the heavy lifting to the server rather than requiring relatively low powered device to do all the work Require 25-30% more development (compare to RESS) to build and maintain The server side approach saves on development time
  12. 12. Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Adaptive Responsive •  Same URL with two options •  Same Content •  Different Content •  Different elements based on device type •  Server-side content optimization to reduce download time •  Integrated with CMS and analytics Separate Mobile •  Different URL •  Different layout •  Different content for desktop and different for mobile •  Integrated with CMS
  13. 13. Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Search  engines  are  focusing  on     mobile  experience   http://googlewebmastercentral.blogspot.in/2013/06/changes-in-rankings-of-smartphone_11.html
  14. 14. Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Separate  mobile  site     •  Desktop Pages – Rel Alternate (assuming every desktop page has mobile equivalent) •  Mobile Page – Rel Canonical tag on the mobile site pointing back to desktop site •  Selectively do 301 redirect for pages which do not exist on the mobile site
  15. 15. Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Responsive  Site     Mobile Tablet Desktop
  16. 16. Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Client  side  responsive   design   •  Requires multiple CSS stylesheets so that site displays correctly on the following viewports: •  320 × 480 Phone (portrait) •  480 × 320 Phone (landscape) •  480 × 800 Small Tablet (portrait) •  800 × 480 Small Tablet (landscape) •  768 × 1024 Large Tablet (portrait) •  1024 × 768 Large Tablet (landscape) •  1280 × 800 Desktop
  17. 17. Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Adap@ve  Responsive     •  New Gestures •  Jquery Swiping (photo gallery) •  Pixel Width of average finger DESKTOP SITE TABLET SITE MOBILE SITE
  18. 18. Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Wireframes  for   Different  Devices  
  19. 19. Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg How  Does  Adap@ve   Works?     User goes to website Server-side script renders HTML referencing the JavaScript and CSS files for device Server-side script detects user’s device type Tablet.css Tablet.js Phone.css Phone.js Desktop.css Desktop.js We serve appropriate JS and CSS based on users browsing device
  20. 20. Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Adap@ve  Responsive  is  preferred   Impact  of  download  @me  on  conversion     Just One Second Delay In Page-Load Can Cause 7% Loss In Customer Conversions 1sec = 7%Load Delay Conversion Drop
  21. 21. Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Using  Page  speed   Insights  to  test   http://developers.google.com/speed/pagespeed/insights/
  22. 22. Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Mobile  Integra@on   •  Manage desktop, mobile, tablet from one interface •  Device-specific preview option •  Option to manage meta tags based on device type Mobile integration
  23. 23. Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Key  Take  Aways     •  Know your audience search behavior •  Decide best mobile solution for your business •  Do not 301 redirect all pages to mobile home •  If you decide to do separate mobile site, do rel alternate and rel cononical •  Do performance testing •  Adaptive Responsive (RESS) can be good if done carefully
  24. 24. Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Know  Great  People?   http://jobs.milestoneinternet.com •  Director of Client Services (Chicago) •  Recruiter (Chicago) •  Sr. Manager, Paid Search (Chicago) •  Account Managers (Chicago and Santa Clara) •  Social Media Team Lead (Santa Clara) •  Social Media Account Manager (Chicago) Top Reasons to Work for Milestone •  Great place to learn with phenomenal growth opportunity •  Work with a fun, amazing, talented team •  Benefits: Medical, dental, vision, 401K, vacation, sick and holiday pay •  Exciting and innovative work environment •  Breakfast and Happy hour every Friday •  Monthly events and quarterly outings
  25. 25. Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Thank  You   Questions? Benu Aggarwal benu@milestoneinternet.com www.milestoneinternet.com blog.milestoneinternet.com twitter.com/milestonemktg facebook.com/MilestoneInc google.com/+MilestoneInternet
  26. 26. Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Back  up  
  27. 27. Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Page  speed  insights   for  mobile   •  PAGE ABOVE THE FOLD MUST RENDER UNDER A SECOND on a mobile network. •  Majority of users access the page from a 3G network. Typical breakdown of a second while accessing a page •  Research shows any delay longer than a second will not keep user engaged
  28. 28. Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg To  meet  the  1  sec   criteria   1.  Reliable hosting provider Server must render the response (< 200 ms) – This is the server response time that it takes the server to return the HTML. This factors in the network transport time 2.  Minimize redirects Number of redirects should be minimized – One additional HTTP request can add one or two extra network round trips (A good time to look into all the redirects we are doing) 3.  Use inline CSS above the fold Avoid external blocking JavaScript and CSS above-the-fold content 4.  Browser layout and rendering (200 ms) This is the time required to parsing the HTML, CSS & JS. 5. Optimize JavaScript execution and rendering time
  29. 29. Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Java  Script  and  CSS   comparison  
  30. 30. Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Mobile  website  QA   tools   •  Other tools are used for testing •  User agent switcher for Firefox & Chrome •  http://quirktools.com/screenfly/  •  http://responsivetools.com/site-url/ •  Mobilizer •  Physical devices Ipad & Iphone
  31. 31. Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg hTp://quirktools.com/ screenfly/  

×