Embed Size (px)
DESCRIPTION
Optimizing the user experience for mobile devices is no longer a luxury—it's a must. Businesses have the option of building dedicated mobile sites for smartphones and tablets, or implementing responsive design techniques to serve all screen sizes. But how do the different options affect the user experience and SEO? How do you determine which is right for your company? In this webinar, you’ll find out: - What is responsive design? - Google's recommendations for building mobile-optimized websites. - What you need to understand before going responsive. - Lessons learned and results from companies who have gone responsive. This webinar is brought to you in collaboration with Elastic Path.
Citation preview
Is Responsive Web Design Right for Your Business?
#RWDwebinar | July 30th, 2013
+
Join the conversation at #RWDwebinar
Igor FaletskiCEO & Co-Founder
@igorskee @mobify | mobify.com
Linda BustosDirector of E-Commerce Research
@elasticpath | getelastic.com
Meet Our Hosts
In today’s webinar1. Mobile Web: The Big Picture
2. What is Responsive Web Design
3. PROs & CONs of Different Approaches
4. How to Build a Google-Friendly Mobile Site
5. What You Need to Consider
6. Q&A with Igor and Linda
#RWDwebinar
We provide the fastest, most secure way of optimizing your website for mobile experiences on a global scale.
Adapt your website for smartphones, tablets and more with our open platform and services, and speed up your
responsive or mobile website with our automated performance optimization features.
Mobify is used by leading Fortune 500 companies and drives hundreds of millions of dollars in mobile revenue:
#RWDwebinar
Commerce Everywhere
We provide ecommerce software that powers the next generation of digital experience and allows you to bring the combined power of all of your technology to websites, apps, and other touchpoints
for the ultimate customer buying experience.
#1 ecommerce blog www.getelastic.com
Market leaders depend on Elastic Path to drive billions of dollars in digital commerce annually:
#RWDwebinar
+
We work together to help businesses deliver amazing mobile and digital commerce experiences that drive
conversions and maximize revenues.
MOBILE WEB:THE BIG PICTURE
#RWDwebinar
#RWDwebinar
#RWDwebinar
#RWDwebinar
Mobile as a Percentage of Retail Sales
#RWDwebinar
2012 2013 2016
Retail Sales
#RWDwebinar
#RWDwebinar
BEFORE AFTER
WHAT IS RESPONSIVE WEB DESIGN?
#RWDwebinar
ONE URLCSS OR
JAVASCRIPTSAME HTML
Google says RWD is 3 configurations
#RWDwebinar
Ethan Marcotte says RWD is 3 front-end techniques
FLUID GRIDS MEDIA QUERIESFLEXIBLE MEDIA
Image Credit: Luke Wroblewski, CSS-Tricks
#RWDwebinar
RWD is understanding users and breakpoints
#RWDwebinar
PROS & CONS IN DIFFERENT
APPROACHES
Three approaches to mobile web development1. Device-specific sites
(aka m-dot or proxy)
2. Server-side solutions
3. Responsive web design
#RWDwebinar
Device-Specific ApproachWith a device-specific approach (aka m-dot or proxy solution), you develop separate versions of their site for each type of device, each with a separate URL.
#RWDwebinar
Server-Side Adaptive
In this setup, the server responds with different HTML (and CSS) on the same
URL depending on the user agent requesting the page.
#RWDwebinar
Responsive Web Design
Rather than building separate sites for each device, responsive design uses a single
website that intelligently adjusts its layout and features based on breakpoints.
#RWDwebinar
Device-Specific ApproachYour site is found at different URLs, based on device:
Desktop: www.example.comMobile: m.example.comTablet: t.example.com
Watch: w.example.com?
Redirects are done through proxy.
#RWDwebinar
You can customize per device
PRO: Device-Specific Approach
#RWDwebinar
Light code = fast to load(but you have to maintain several code bases)
PRO: Device-Specific Approach
#RWDwebinar
Fast to market(but this isn’t a future-friendly solution)
PRO: Device-Specific Approach
#RWDwebinar
You must redirect your users, which is bad for conversions, social sharing, SEO, scalability...
#RWDwebinar
CON: Device-Specific Approach
Multiple code bases to maintain
#RWDwebinar
CON: Device-Specific Approach
Duplicate content
#RWDwebinar
CON: Device-Specific Approach
Extra work is required in order for mobile content to be discovered and properly indexed
by Google (more on this later)
#RWDwebinar
CON: Device-Specific Approach
Server-Side Approach
Your site is always found at one URL:
www.example.com
on desktop, mobile, tablet, etc.
#RWDwebinar
PRO: Server-Side Approach
One URL
#RWDwebinar
PRO: Server-Side Approach
Gain development control
#RWDwebinar
CON: Server-Side Approach
Multiple code bases to maintain
#RWDwebinar
CON: Server-Side Approach
Higher risk in servers
#RWDwebinar
CON: Server-Side Approach
Strong developer skills needed
#RWDwebinar
Responsive Web DesignYour site is always found at one URL:
www.example.com
on desktop, mobile, tablet, etc.
#RWDwebinar
Responsive Web Design
Image Credit: Peter Sheldon, Forrester Research
#RWDwebinar
Google is happy (SEO best practice)
PRO: Responsive Web Design
#RWDwebinar
Performance is not guaranteed
CON: Responsive Web Design
#RWDwebinar
A lot of labour, money, testing and risk is required to build a responsive
website from scratch
CON: Responsive Web Design
#RWDwebinar
Conversions+66% Apple, +400% Android
Transactions +113% Apple, +333% Android
Revenue+100% Apple, +590% Android
Non-mobileconversion +20.3%, revenue +41%
Responsive Test Results: O’Neill
#RWDwebinar
Responsive Results: Time Magazine
#RWDwebinar
Homepage unique visitsincreased 15%
Time spent on siteincreased 7.5%
Mobile bounce ratedecreased 26%
Garmin worked with Mobify to get all the benefits and none of the drawbacks of RWD.
Mobile sales performance+ 55% month-over-month+391% year-over-year
Average order value+ 16% month-over-month+ 70% year-over-year
Responsive Results: Garmin
#RWDwebinar
HOW TO BUILD A GOOGLE-FRIENDLY
MOBILE SITE
#RWDwebinar
Use a device-specific or server-side solution but beware:
• Google ranks these sites lower
• Extra work is needed in order for mobile content to be detected by Google
• Most vendors provide partial or no implementation of the required annotations
#RWDwebinar
Use responsive web design
Google recommends this approach.
Responsive sites built from scratch or adapted by Mobify are automatically crawled and
indexed, and preferentially ranked by Google.
#RWDwebinar
Google: how to fix your mobile SEO
Responsive Configurations Device-Specific Server-Side
Adaptive Adaptive (Mobify)
One URL No (Separate Sites) One URL One URL
Same HTML No No (Different HTML) Same HTML
CSS for Adaptations No No CSS + JavaScript for
Adaptations
Additional Configurations
Canonical and Alternate Tags Vary HTTP Header Not needed (100%
Compliant)
#RWDwebinar
Mobify is the only enterprise-ready multi-screen platform vendor that is officially recommended
by Google and fully compliant with all of Google’s SEO and responsive web design best practices.
#RWDwebinar
WHAT YOU NEED TO CONSIDER
Business considerations1. Time to market
2. $$$
3. Marketing ROI
4. Branding
5. Organizational structure
6. Risk and security
7. Scalability
#RWDwebinar
Technology considerations1. Development resources and skill
2. Development and maintenance process
3. Technology stack and vendors
4. Risk and security
5. Scalability
#RWDwebinar
User considerations1. User experience
2. Context
3. Layout and functionality
4. Localization and personalization
5. Performance
#RWDwebinar
Any questions?
Igor FaletskiCEO & Co-Founder
@igorskee @mobify | mobify.com
Linda BustosDirector of E-Commerce Research
@elasticpath | getelastic.com
Thanks for joining us for #RWDwebinar
![[Webinar] Delivering the Right Content to the Right Customer at the Right Time](https://img.dokumen.tips/doc/110x75/5a6624647f8b9a04148b4a73/webinar-delivering-the-right-content-to-the-right-customer-at-the-right-time.jpg)
![What's the Right Mobile Move? Responsive Design, Apps, Tablets and More [Webinar Replay]](https://img.dokumen.tips/doc/110x75/54c6c6b64a795938448b4569/whats-the-right-mobile-move-responsive-design-apps-tablets-and-more-webinar-replay.jpg)
