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

More Related Content

What's hot

Doag wysiwyg
Doag wysiwygDoag wysiwyg
Doag wysiwygLuc Bors
 
Responsive Web Design - Tom Robertshaw
Responsive Web Design - Tom RobertshawResponsive Web Design - Tom Robertshaw
Responsive Web Design - Tom RobertshawMeet Magento Spain
 
Mobile SEO Geekout: Learn what to do and how to plan for mobile search
Mobile SEO Geekout: Learn what to do and how to plan for mobile searchMobile SEO Geekout: Learn what to do and how to plan for mobile search
Mobile SEO Geekout: Learn what to do and how to plan for mobile searchSuzzicks
 
Cssfounder.com website designing company in delhi
Cssfounder.com website designing company in delhiCssfounder.com website designing company in delhi
Cssfounder.com website designing company in delhiCss Founder
 
Responsive Web Design (RWD) vs Adaptive Web Design (AWD)
Responsive Web Design (RWD) vs Adaptive Web Design (AWD)Responsive Web Design (RWD) vs Adaptive Web Design (AWD)
Responsive Web Design (RWD) vs Adaptive Web Design (AWD)Jamshaid (Jam) Hashmi
 
Responsive design SharePoint
Responsive design SharePointResponsive design SharePoint
Responsive design SharePointspdlabs
 

What's hot (8)

Doag wysiwyg
Doag wysiwygDoag wysiwyg
Doag wysiwyg
 
Responsive Web Design - Tom Robertshaw
Responsive Web Design - Tom RobertshawResponsive Web Design - Tom Robertshaw
Responsive Web Design - Tom Robertshaw
 
Mobile SEO Geekout: Learn what to do and how to plan for mobile search
Mobile SEO Geekout: Learn what to do and how to plan for mobile searchMobile SEO Geekout: Learn what to do and how to plan for mobile search
Mobile SEO Geekout: Learn what to do and how to plan for mobile search
 
Sherry-LinkedIn
Sherry-LinkedInSherry-LinkedIn
Sherry-LinkedIn
 
Sitecore and Responsive Web Design
Sitecore and Responsive Web Design Sitecore and Responsive Web Design
Sitecore and Responsive Web Design
 
Cssfounder.com website designing company in delhi
Cssfounder.com website designing company in delhiCssfounder.com website designing company in delhi
Cssfounder.com website designing company in delhi
 
Responsive Web Design (RWD) vs Adaptive Web Design (AWD)
Responsive Web Design (RWD) vs Adaptive Web Design (AWD)Responsive Web Design (RWD) vs Adaptive Web Design (AWD)
Responsive Web Design (RWD) vs Adaptive Web Design (AWD)
 
Responsive design SharePoint
Responsive design SharePointResponsive design SharePoint
Responsive design SharePoint
 

Viewers also liked (15)

Ley 0516 promocion de inversiones
Ley 0516 promocion de inversionesLey 0516 promocion de inversiones
Ley 0516 promocion de inversiones
 
2 internet, word
2  internet, word2  internet, word
2 internet, word
 
Excel 2
Excel 2Excel 2
Excel 2
 
Ti kaye pledwaye
Ti kaye pledwayeTi kaye pledwaye
Ti kaye pledwaye
 
Sbir Presentation July 2012
Sbir Presentation July 2012Sbir Presentation July 2012
Sbir Presentation July 2012
 
1 office, word
1 office, word1 office, word
1 office, word
 
Excel 1
Excel 1Excel 1
Excel 1
 
Excel 1
Excel 1Excel 1
Excel 1
 
Ordinateur
OrdinateurOrdinateur
Ordinateur
 
Excel 2
Excel 2Excel 2
Excel 2
 
Exemple de Communique
Exemple de CommuniqueExemple de Communique
Exemple de Communique
 
Zouti Kanpay
Zouti KanpayZouti Kanpay
Zouti Kanpay
 
Search Engine Marketing Strategies for Hotels - Hummingbird, Schema's, author...
Search Engine Marketing Strategies for Hotels - Hummingbird, Schema's, author...Search Engine Marketing Strategies for Hotels - Hummingbird, Schema's, author...
Search Engine Marketing Strategies for Hotels - Hummingbird, Schema's, author...
 
Korean art
Korean artKorean art
Korean art
 
Hindex: Secondary indexes for faster HBase queries
Hindex: Secondary indexes for faster HBase queriesHindex: Secondary indexes for faster HBase queries
Hindex: Secondary indexes for faster HBase queries
 

Similar to Responsive vs. Adaptive

Clear as mud: Explaining Web Apps, Mobile Apps, Cloud Computing and Design "t...
Clear as mud: Explaining Web Apps, Mobile Apps, Cloud Computing and Design "t...Clear as mud: Explaining Web Apps, Mobile Apps, Cloud Computing and Design "t...
Clear as mud: Explaining Web Apps, Mobile Apps, Cloud Computing and Design "t...Shannon Lewis
 
SES Berlin OMCap 2013
SES Berlin OMCap 2013SES Berlin OMCap 2013
SES Berlin OMCap 2013Rachel Pasqua
 
The Magic of Mobile SEO - ##CZLNY
The Magic of Mobile SEO - ##CZLNYThe Magic of Mobile SEO - ##CZLNY
The Magic of Mobile SEO - ##CZLNYJohn Shehata
 
Conductor-Webinar-Google-Mobile-Algorithm-Change
Conductor-Webinar-Google-Mobile-Algorithm-ChangeConductor-Webinar-Google-Mobile-Algorithm-Change
Conductor-Webinar-Google-Mobile-Algorithm-ChangeSheridan Orr
 
Google Mobile Algorithm Change
Google Mobile Algorithm ChangeGoogle Mobile Algorithm Change
Google Mobile Algorithm ChangeBrian McDowell
 
A night at the spa
A night at the spaA night at the spa
A night at the spaChris Love
 
Best Practices for Mobile Sites
Best Practices for Mobile SitesBest Practices for Mobile Sites
Best Practices for Mobile SitesNavneet Kaushal
 
Mobile Web Overview https://www.edocr.com/v/k52p5vj4/
Mobile Web Overview https://www.edocr.com/v/k52p5vj4/Mobile Web Overview https://www.edocr.com/v/k52p5vj4/
Mobile Web Overview https://www.edocr.com/v/k52p5vj4/Jack Zheng
 
Demystifying Mobile SEO - 2014 Search Engine Strategies Atlanta Session
Demystifying Mobile SEO - 2014 Search Engine Strategies Atlanta SessionDemystifying Mobile SEO - 2014 Search Engine Strategies Atlanta Session
Demystifying Mobile SEO - 2014 Search Engine Strategies Atlanta SessionTim Cannon
 
IJSRED-V2I5P23
IJSRED-V2I5P23IJSRED-V2I5P23
IJSRED-V2I5P23IJSRED
 
Clear As Mud Part 1: Mobile, Responsive and Adaptive Websites Explained
Clear As Mud Part 1: Mobile, Responsive and Adaptive Websites ExplainedClear As Mud Part 1: Mobile, Responsive and Adaptive Websites Explained
Clear As Mud Part 1: Mobile, Responsive and Adaptive Websites ExplainedShannon Lewis
 
C3 2014 Main Stage John Shehata
C3 2014 Main Stage John ShehataC3 2014 Main Stage John Shehata
C3 2014 Main Stage John ShehataConductor
 
Mobilegeddon Is Coming!
Mobilegeddon Is Coming!Mobilegeddon Is Coming!
Mobilegeddon Is Coming!Bhoomi Patel
 
User Focus 2014 - Choosing The Right Mobile Approach
User Focus 2014 - Choosing The Right Mobile ApproachUser Focus 2014 - Choosing The Right Mobile Approach
User Focus 2014 - Choosing The Right Mobile ApproachJasper Liu
 
How to mobilize your SharePoint and BI
How to mobilize your  SharePoint and BIHow to mobilize your  SharePoint and BI
How to mobilize your SharePoint and BINetwoven Inc.
 
Mobile SEO Considerations
Mobile SEO ConsiderationsMobile SEO Considerations
Mobile SEO ConsiderationsReva McPollom
 

Similar to Responsive vs. Adaptive (20)

Clear as mud: Explaining Web Apps, Mobile Apps, Cloud Computing and Design "t...
Clear as mud: Explaining Web Apps, Mobile Apps, Cloud Computing and Design "t...Clear as mud: Explaining Web Apps, Mobile Apps, Cloud Computing and Design "t...
Clear as mud: Explaining Web Apps, Mobile Apps, Cloud Computing and Design "t...
 
SES Berlin OMCap 2013
SES Berlin OMCap 2013SES Berlin OMCap 2013
SES Berlin OMCap 2013
 
The Magic of Mobile SEO - ##CZLNY
The Magic of Mobile SEO - ##CZLNYThe Magic of Mobile SEO - ##CZLNY
The Magic of Mobile SEO - ##CZLNY
 
Conductor-Webinar-Google-Mobile-Algorithm-Change
Conductor-Webinar-Google-Mobile-Algorithm-ChangeConductor-Webinar-Google-Mobile-Algorithm-Change
Conductor-Webinar-Google-Mobile-Algorithm-Change
 
Google Mobile Algorithm Change
Google Mobile Algorithm ChangeGoogle Mobile Algorithm Change
Google Mobile Algorithm Change
 
A night at the spa
A night at the spaA night at the spa
A night at the spa
 
Mobile web
Mobile webMobile web
Mobile web
 
Best Practices for Mobile Sites
Best Practices for Mobile SitesBest Practices for Mobile Sites
Best Practices for Mobile Sites
 
Mobile Web Overview https://www.edocr.com/v/k52p5vj4/
Mobile Web Overview https://www.edocr.com/v/k52p5vj4/Mobile Web Overview https://www.edocr.com/v/k52p5vj4/
Mobile Web Overview https://www.edocr.com/v/k52p5vj4/
 
Demystifying Mobile SEO - 2014 Search Engine Strategies Atlanta Session
Demystifying Mobile SEO - 2014 Search Engine Strategies Atlanta SessionDemystifying Mobile SEO - 2014 Search Engine Strategies Atlanta Session
Demystifying Mobile SEO - 2014 Search Engine Strategies Atlanta Session
 
IJSRED-V2I5P23
IJSRED-V2I5P23IJSRED-V2I5P23
IJSRED-V2I5P23
 
Clear As Mud Part 1: Mobile, Responsive and Adaptive Websites Explained
Clear As Mud Part 1: Mobile, Responsive and Adaptive Websites ExplainedClear As Mud Part 1: Mobile, Responsive and Adaptive Websites Explained
Clear As Mud Part 1: Mobile, Responsive and Adaptive Websites Explained
 
C3 2014 Main Stage John Shehata
C3 2014 Main Stage John ShehataC3 2014 Main Stage John Shehata
C3 2014 Main Stage John Shehata
 
Responsive
ResponsiveResponsive
Responsive
 
Mobilegeddon Is Coming!
Mobilegeddon Is Coming!Mobilegeddon Is Coming!
Mobilegeddon Is Coming!
 
User Focus 2014 - Choosing The Right Mobile Approach
User Focus 2014 - Choosing The Right Mobile ApproachUser Focus 2014 - Choosing The Right Mobile Approach
User Focus 2014 - Choosing The Right Mobile Approach
 
How to mobilize your SharePoint and BI
How to mobilize your  SharePoint and BIHow to mobilize your  SharePoint and BI
How to mobilize your SharePoint and BI
 
Going mobile
Going mobileGoing mobile
Going mobile
 
Going mobile
Going mobileGoing mobile
Going mobile
 
Mobile SEO Considerations
Mobile SEO ConsiderationsMobile SEO Considerations
Mobile SEO Considerations
 

More from Benu Aggarwal

Local Search in 2023 - Must-Know and Must-Do Tactics
Local Search in 2023 - Must-Know and Must-Do TacticsLocal Search in 2023 - Must-Know and Must-Do Tactics
Local Search in 2023 - Must-Know and Must-Do TacticsBenu Aggarwal
 
ENGAGE2022-PPT-keynote.pptx
ENGAGE2022-PPT-keynote.pptxENGAGE2022-PPT-keynote.pptx
ENGAGE2022-PPT-keynote.pptxBenu Aggarwal
 
Working in Harmony - UI/UX- SEO
Working in Harmony - UI/UX- SEO Working in Harmony - UI/UX- SEO
Working in Harmony - UI/UX- SEO Benu Aggarwal
 
Digital Marketing Trends and Must Have for 2023
Digital Marketing Trends and Must Have for 2023 Digital Marketing Trends and Must Have for 2023
Digital Marketing Trends and Must Have for 2023 Benu Aggarwal
 
Developing An SEO-First Content Management System
Developing An SEO-First Content Management SystemDeveloping An SEO-First Content Management System
Developing An SEO-First Content Management SystemBenu Aggarwal
 
SMX2022-Milestone-0512.pdf
SMX2022-Milestone-0512.pdfSMX2022-Milestone-0512.pdf
SMX2022-Milestone-0512.pdfBenu Aggarwal
 
10 Must-Haves for Your SEO-First CMS
10 Must-Haves for Your SEO-First CMS10 Must-Haves for Your SEO-First CMS
10 Must-Haves for Your SEO-First CMSBenu Aggarwal
 
EntitySearchbrighton2022.pptx
EntitySearchbrighton2022.pptxEntitySearchbrighton2022.pptx
EntitySearchbrighton2022.pptxBenu Aggarwal
 
Why Entity-Led Growth Can Be Your Competitive Advantage in 2021
Why Entity-Led Growth Can Be Your  Competitive Advantage  in 2021 Why Entity-Led Growth Can Be Your  Competitive Advantage  in 2021
Why Entity-Led Growth Can Be Your Competitive Advantage in 2021 Benu Aggarwal
 
Webinar 2020 Digital Trends & Amp; Must Haves
Webinar 2020 Digital Trends & Amp; Must HavesWebinar 2020 Digital Trends & Amp; Must Haves
Webinar 2020 Digital Trends & Amp; Must HavesBenu Aggarwal
 
Keynote 7 Steps For Digital Transformation 2021
Keynote 7 Steps For Digital Transformation 2021Keynote 7 Steps For Digital Transformation 2021
Keynote 7 Steps For Digital Transformation 2021Benu Aggarwal
 
Experts Tips For Creating Killer Cross-Channel Reports
Experts Tips For Creating Killer  Cross-Channel ReportsExperts Tips For Creating Killer  Cross-Channel Reports
Experts Tips For Creating Killer Cross-Channel ReportsBenu Aggarwal
 
2021 Business and Digital Marketing Trends
2021 Business and Digital  Marketing Trends2021 Business and Digital  Marketing Trends
2021 Business and Digital Marketing TrendsBenu Aggarwal
 
Webinar Recap: Leadership lessons by Chip Conley
Webinar Recap: Leadership lessons by Chip ConleyWebinar Recap: Leadership lessons by Chip Conley
Webinar Recap: Leadership lessons by Chip ConleyBenu Aggarwal
 
Milestone Recovery Framework
Milestone Recovery Framework Milestone Recovery Framework
Milestone Recovery Framework Benu Aggarwal
 
Milestone Recovery Framework 6-23
Milestone Recovery Framework 6-23Milestone Recovery Framework 6-23
Milestone Recovery Framework 6-23Benu Aggarwal
 
Covid- 19 - Crisis - Recovery- Growth
Covid- 19 - Crisis - Recovery- Growth Covid- 19 - Crisis - Recovery- Growth
Covid- 19 - Crisis - Recovery- Growth Benu Aggarwal
 

More from Benu Aggarwal (20)

Local Search in 2023 - Must-Know and Must-Do Tactics
Local Search in 2023 - Must-Know and Must-Do TacticsLocal Search in 2023 - Must-Know and Must-Do Tactics
Local Search in 2023 - Must-Know and Must-Do Tactics
 
ENGAGE2022-PPT-keynote.pptx
ENGAGE2022-PPT-keynote.pptxENGAGE2022-PPT-keynote.pptx
ENGAGE2022-PPT-keynote.pptx
 
Working in Harmony - UI/UX- SEO
Working in Harmony - UI/UX- SEO Working in Harmony - UI/UX- SEO
Working in Harmony - UI/UX- SEO
 
SEO First CMS
SEO First CMS SEO First CMS
SEO First CMS
 
Digital Marketing Trends and Must Have for 2023
Digital Marketing Trends and Must Have for 2023 Digital Marketing Trends and Must Have for 2023
Digital Marketing Trends and Must Have for 2023
 
Developing An SEO-First Content Management System
Developing An SEO-First Content Management SystemDeveloping An SEO-First Content Management System
Developing An SEO-First Content Management System
 
SMX2022-Milestone-0512.pdf
SMX2022-Milestone-0512.pdfSMX2022-Milestone-0512.pdf
SMX2022-Milestone-0512.pdf
 
10 Must-Haves for Your SEO-First CMS
10 Must-Haves for Your SEO-First CMS10 Must-Haves for Your SEO-First CMS
10 Must-Haves for Your SEO-First CMS
 
EntitySearchbrighton2022.pptx
EntitySearchbrighton2022.pptxEntitySearchbrighton2022.pptx
EntitySearchbrighton2022.pptx
 
Trends2022
Trends2022Trends2022
Trends2022
 
Why Entity-Led Growth Can Be Your Competitive Advantage in 2021
Why Entity-Led Growth Can Be Your  Competitive Advantage  in 2021 Why Entity-Led Growth Can Be Your  Competitive Advantage  in 2021
Why Entity-Led Growth Can Be Your Competitive Advantage in 2021
 
Webinar 2020 Digital Trends & Amp; Must Haves
Webinar 2020 Digital Trends & Amp; Must HavesWebinar 2020 Digital Trends & Amp; Must Haves
Webinar 2020 Digital Trends & Amp; Must Haves
 
Keynote 7 Steps For Digital Transformation 2021
Keynote 7 Steps For Digital Transformation 2021Keynote 7 Steps For Digital Transformation 2021
Keynote 7 Steps For Digital Transformation 2021
 
Experts Tips For Creating Killer Cross-Channel Reports
Experts Tips For Creating Killer  Cross-Channel ReportsExperts Tips For Creating Killer  Cross-Channel Reports
Experts Tips For Creating Killer Cross-Channel Reports
 
2021 Business and Digital Marketing Trends
2021 Business and Digital  Marketing Trends2021 Business and Digital  Marketing Trends
2021 Business and Digital Marketing Trends
 
Engage2021sept
Engage2021septEngage2021sept
Engage2021sept
 
Webinar Recap: Leadership lessons by Chip Conley
Webinar Recap: Leadership lessons by Chip ConleyWebinar Recap: Leadership lessons by Chip Conley
Webinar Recap: Leadership lessons by Chip Conley
 
Milestone Recovery Framework
Milestone Recovery Framework Milestone Recovery Framework
Milestone Recovery Framework
 
Milestone Recovery Framework 6-23
Milestone Recovery Framework 6-23Milestone Recovery Framework 6-23
Milestone Recovery Framework 6-23
 
Covid- 19 - Crisis - Recovery- Growth
Covid- 19 - Crisis - Recovery- Growth Covid- 19 - Crisis - Recovery- Growth
Covid- 19 - Crisis - Recovery- Growth
 

Recently uploaded

Crafting High-Converting eCommerce Landing Pages
Crafting High-Converting eCommerce Landing PagesCrafting High-Converting eCommerce Landing Pages
Crafting High-Converting eCommerce Landing PagesVWO
 
Unifying feature management with experiments - Server Side Webinar (1).pdf
Unifying feature management with experiments - Server Side Webinar (1).pdfUnifying feature management with experiments - Server Side Webinar (1).pdf
Unifying feature management with experiments - Server Side Webinar (1).pdfVWO
 
Converting with Comedy: Research Parallels for CRO
Converting with Comedy: Research Parallels for CROConverting with Comedy: Research Parallels for CRO
Converting with Comedy: Research Parallels for CROVWO
 
Friends of Search Future Proof Accounts.pptx
Friends of Search Future Proof Accounts.pptxFriends of Search Future Proof Accounts.pptx
Friends of Search Future Proof Accounts.pptxNavah Hopkins
 
The best Crypto Marketing Strategies pdf
The best Crypto Marketing Strategies pdfThe best Crypto Marketing Strategies pdf
The best Crypto Marketing Strategies pdfShifali roy
 
Podvertise.fm - Podcast Advertising Marketplace - Startup Pitch Deck
Podvertise.fm - Podcast Advertising Marketplace - Startup Pitch DeckPodvertise.fm - Podcast Advertising Marketplace - Startup Pitch Deck
Podvertise.fm - Podcast Advertising Marketplace - Startup Pitch DeckNedko Nedkov
 
Product Demo: HubSpot's Coolest AI Tools for B2B Tech Companies
Product Demo: HubSpot's Coolest AI Tools for B2B Tech CompaniesProduct Demo: HubSpot's Coolest AI Tools for B2B Tech Companies
Product Demo: HubSpot's Coolest AI Tools for B2B Tech CompaniesKiwi Creative
 
SEO Trends in 2024: What You Need to Know to Succeed
SEO Trends in 2024: What You Need to Know to SucceedSEO Trends in 2024: What You Need to Know to Succeed
SEO Trends in 2024: What You Need to Know to SucceedMumbai Pixels
 
2024 Google SERP Features: New Strategies To Gain Visibility
2024 Google SERP Features: New Strategies To Gain Visibility2024 Google SERP Features: New Strategies To Gain Visibility
2024 Google SERP Features: New Strategies To Gain VisibilitySearch Engine Journal
 
Podvertise.fm - Founder.University - Pitch Deck 2024
Podvertise.fm - Founder.University - Pitch Deck 2024Podvertise.fm - Founder.University - Pitch Deck 2024
Podvertise.fm - Founder.University - Pitch Deck 2024Nedko Nedkov
 
Voltas turnaround strategy management case
Voltas turnaround strategy management caseVoltas turnaround strategy management case
Voltas turnaround strategy management caseAnkit Sarkar
 
Increase Your Website Sales & Leads Webinar
Increase Your Website Sales & Leads WebinarIncrease Your Website Sales & Leads Webinar
Increase Your Website Sales & Leads WebinarSEO Optimizers
 
Friends of Search '24 - Scaling SEO_ Lessons for All Types of Sites.pptx
Friends of Search '24 - Scaling SEO_ Lessons for All Types of Sites.pptxFriends of Search '24 - Scaling SEO_ Lessons for All Types of Sites.pptx
Friends of Search '24 - Scaling SEO_ Lessons for All Types of Sites.pptxGregory Edwards
 
Top 15 Emerging Technologies for the Modern World
Top 15 Emerging Technologies for the Modern WorldTop 15 Emerging Technologies for the Modern World
Top 15 Emerging Technologies for the Modern WorldD Cloud Solutions
 
Digital Marketing Services like SEO, SMM, SEM
Digital Marketing Services like SEO, SMM, SEMDigital Marketing Services like SEO, SMM, SEM
Digital Marketing Services like SEO, SMM, SEMNazal Digital
 
Ppt regarding of Digital Marketing cours
Ppt regarding of Digital Marketing coursPpt regarding of Digital Marketing cours
Ppt regarding of Digital Marketing courstegveersingh09
 
Digital Marketing Analytics: Driving Hotel Success (2016 May report)
Digital Marketing Analytics: Driving Hotel Success (2016 May report)Digital Marketing Analytics: Driving Hotel Success (2016 May report)
Digital Marketing Analytics: Driving Hotel Success (2016 May report)yaeyukimoto
 
Run more experiments with fewer resources
Run more experiments with fewer resourcesRun more experiments with fewer resources
Run more experiments with fewer resourcesVWO
 
TAM AdEx-A Pixelated view into Digital Advertising Trends for Y 2023.pdf
TAM AdEx-A Pixelated view into Digital Advertising Trends for Y 2023.pdfTAM AdEx-A Pixelated view into Digital Advertising Trends for Y 2023.pdf
TAM AdEx-A Pixelated view into Digital Advertising Trends for Y 2023.pdfSocial Samosa
 
Marketing Team of 1, A Framework To Win!
Marketing Team of 1, A Framework To Win!Marketing Team of 1, A Framework To Win!
Marketing Team of 1, A Framework To Win!Joseph Skibbie
 

Recently uploaded (20)

Crafting High-Converting eCommerce Landing Pages
Crafting High-Converting eCommerce Landing PagesCrafting High-Converting eCommerce Landing Pages
Crafting High-Converting eCommerce Landing Pages
 
Unifying feature management with experiments - Server Side Webinar (1).pdf
Unifying feature management with experiments - Server Side Webinar (1).pdfUnifying feature management with experiments - Server Side Webinar (1).pdf
Unifying feature management with experiments - Server Side Webinar (1).pdf
 
Converting with Comedy: Research Parallels for CRO
Converting with Comedy: Research Parallels for CROConverting with Comedy: Research Parallels for CRO
Converting with Comedy: Research Parallels for CRO
 
Friends of Search Future Proof Accounts.pptx
Friends of Search Future Proof Accounts.pptxFriends of Search Future Proof Accounts.pptx
Friends of Search Future Proof Accounts.pptx
 
The best Crypto Marketing Strategies pdf
The best Crypto Marketing Strategies pdfThe best Crypto Marketing Strategies pdf
The best Crypto Marketing Strategies pdf
 
Podvertise.fm - Podcast Advertising Marketplace - Startup Pitch Deck
Podvertise.fm - Podcast Advertising Marketplace - Startup Pitch DeckPodvertise.fm - Podcast Advertising Marketplace - Startup Pitch Deck
Podvertise.fm - Podcast Advertising Marketplace - Startup Pitch Deck
 
Product Demo: HubSpot's Coolest AI Tools for B2B Tech Companies
Product Demo: HubSpot's Coolest AI Tools for B2B Tech CompaniesProduct Demo: HubSpot's Coolest AI Tools for B2B Tech Companies
Product Demo: HubSpot's Coolest AI Tools for B2B Tech Companies
 
SEO Trends in 2024: What You Need to Know to Succeed
SEO Trends in 2024: What You Need to Know to SucceedSEO Trends in 2024: What You Need to Know to Succeed
SEO Trends in 2024: What You Need to Know to Succeed
 
2024 Google SERP Features: New Strategies To Gain Visibility
2024 Google SERP Features: New Strategies To Gain Visibility2024 Google SERP Features: New Strategies To Gain Visibility
2024 Google SERP Features: New Strategies To Gain Visibility
 
Podvertise.fm - Founder.University - Pitch Deck 2024
Podvertise.fm - Founder.University - Pitch Deck 2024Podvertise.fm - Founder.University - Pitch Deck 2024
Podvertise.fm - Founder.University - Pitch Deck 2024
 
Voltas turnaround strategy management case
Voltas turnaround strategy management caseVoltas turnaround strategy management case
Voltas turnaround strategy management case
 
Increase Your Website Sales & Leads Webinar
Increase Your Website Sales & Leads WebinarIncrease Your Website Sales & Leads Webinar
Increase Your Website Sales & Leads Webinar
 
Friends of Search '24 - Scaling SEO_ Lessons for All Types of Sites.pptx
Friends of Search '24 - Scaling SEO_ Lessons for All Types of Sites.pptxFriends of Search '24 - Scaling SEO_ Lessons for All Types of Sites.pptx
Friends of Search '24 - Scaling SEO_ Lessons for All Types of Sites.pptx
 
Top 15 Emerging Technologies for the Modern World
Top 15 Emerging Technologies for the Modern WorldTop 15 Emerging Technologies for the Modern World
Top 15 Emerging Technologies for the Modern World
 
Digital Marketing Services like SEO, SMM, SEM
Digital Marketing Services like SEO, SMM, SEMDigital Marketing Services like SEO, SMM, SEM
Digital Marketing Services like SEO, SMM, SEM
 
Ppt regarding of Digital Marketing cours
Ppt regarding of Digital Marketing coursPpt regarding of Digital Marketing cours
Ppt regarding of Digital Marketing cours
 
Digital Marketing Analytics: Driving Hotel Success (2016 May report)
Digital Marketing Analytics: Driving Hotel Success (2016 May report)Digital Marketing Analytics: Driving Hotel Success (2016 May report)
Digital Marketing Analytics: Driving Hotel Success (2016 May report)
 
Run more experiments with fewer resources
Run more experiments with fewer resourcesRun more experiments with fewer resources
Run more experiments with fewer resources
 
TAM AdEx-A Pixelated view into Digital Advertising Trends for Y 2023.pdf
TAM AdEx-A Pixelated view into Digital Advertising Trends for Y 2023.pdfTAM AdEx-A Pixelated view into Digital Advertising Trends for Y 2023.pdf
TAM AdEx-A Pixelated view into Digital Advertising Trends for Y 2023.pdf
 
Marketing Team of 1, A Framework To Win!
Marketing Team of 1, A Framework To Win!Marketing Team of 1, A Framework To Win!
Marketing Team of 1, A Framework To Win!
 

Responsive vs. Adaptive

  • 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
  • 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/