Your SlideShare is downloading. ×
0
Responsive vs. Adaptive
Responsive vs. Adaptive
Responsive vs. Adaptive
Responsive vs. Adaptive
Responsive vs. Adaptive
Responsive vs. Adaptive
Responsive vs. Adaptive
Responsive vs. Adaptive
Responsive vs. Adaptive
Responsive vs. Adaptive
Responsive vs. Adaptive
Responsive vs. Adaptive
Responsive vs. Adaptive
Responsive vs. Adaptive
Responsive vs. Adaptive
Responsive vs. Adaptive
Responsive vs. Adaptive
Responsive vs. Adaptive
Responsive vs. Adaptive
Responsive vs. Adaptive
Responsive vs. Adaptive
Responsive vs. Adaptive
Responsive vs. Adaptive
Responsive vs. Adaptive
Responsive vs. Adaptive
Responsive vs. Adaptive
Responsive vs. Adaptive
Responsive vs. Adaptive
Responsive vs. Adaptive
Responsive vs. Adaptive
Responsive vs. Adaptive
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Responsive vs. Adaptive

334

Published on

My presentation on Responsive vs Adaptive sites from ClickZ NY 2014

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
334
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Responsive,   Adap.ve,  Mobile   Which  Path  is  Right   for  Me?  
  • 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. 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. Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Mobile  Internet  is   growing  fast!  
  • 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. 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. 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. Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Mobile  conversions   can  be  big!   •  Multi screen search behavior
  • 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. 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. 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. 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. 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. 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. Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Responsive  Site     Mobile Tablet Desktop
  • 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. 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. Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Wireframes  for   Different  Devices  
  • 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. 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. Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Using  Page  speed   Insights  to  test   http://developers.google.com/speed/pagespeed/insights/
  • 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. 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. 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. 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. Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Back  up  
  • 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. 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. Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Java  Script  and  CSS   comparison  
  • 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. Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg hTp://quirktools.com/ screenfly/  

×