webinar: how to build a responsive website that converts
DESCRIPTION
Learn how top ranking e-commerce, publishing and enterprise websites are tackling current mobile web development challenges, and see which approach will allow you to meet your business needs while creating the best experience for your users — and ultimately drive conversions.TRANSCRIPT
![Page 1: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/1.jpg)
How to Build a Responsive Website that Converts
#ResponsiveROI | May 14th, 2013
![Page 2: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/2.jpg)
Igor FaletskiCEO at Mobify
@igorskee Peter McLachlan
Chief Architect at Mobify
@b1tr0t
#ResponsiveROI | @mobify
![Page 3: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/3.jpg)
1. GOING MOBILE IN 2013
2. RESPONSIVE & ADAPTIVE SHOWCASE
3. UX DESIGN FOR CONVERSIONS
4. PERFORMANCE FOR CONVERSIONS
5. WHICH APPROACH IS RIGHT FOR YOU?
6. Q&A
IN TODAY’S WEBINAR
#ResponsiveROI
![Page 4: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/4.jpg)
GOING MOBILEIN 2013
![Page 5: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/5.jpg)
Responsive Web DesignAdaptive Web Design
One Web, One URL
WHAT DOES “GOING MOBILE” MEAN TODAY?
#ResponsiveROI
![Page 6: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/6.jpg)
WHAT IS RESPONSIVE WEB DESIGN?
FLUID GRIDS MEDIA QUERIESFLEXIBLE MEDIA
Image Credit: Luke Wroblewski, CSS-Tricks
...are the 3 technical ingredients for responsive web design.- Ethan Marcotte
#ResponsiveROI
![Page 7: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/7.jpg)
Image Credit: Brad Frost
WHAT IS ADAPTIVE WEB DESIGN?
#ResponsiveROI
![Page 8: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/8.jpg)
RESPONSIVE& ADAPTIVESHOWCASE
![Page 9: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/9.jpg)
skinnyties.com
#ResponsiveROI
![Page 10: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/10.jpg)
indochino.com
#ResponsiveROI
![Page 11: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/11.jpg)
aritzia.com
#ResponsiveROI
![Page 12: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/12.jpg)
garmin.com
#ResponsiveROI
![Page 13: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/13.jpg)
time.com
#ResponsiveROI
![Page 14: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/14.jpg)
ReSS | nd.edu
#ResponsiveROI
![Page 15: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/15.jpg)
Adaptive | brides.com
#ResponsiveROI
![Page 16: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/16.jpg)
Adaptive | ctshirts.co.uk
#ResponsiveROI
![Page 17: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/17.jpg)
UX DESIGN FOR CONVERSIONS
![Page 18: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/18.jpg)
Simplify your forms
Image Credit: Smashing Magazine
#ResponsiveROI
![Page 19: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/19.jpg)
Optimize for touch across devices
Image Credit: Luke Wroblewski
#ResponsiveROI
![Page 20: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/20.jpg)
Bigger is (usually) better
Font sizeMinimum: 14px
Buttons & touch targetsMinimum: 45px by 45px
MarginsMinimum: 10px
#ResponsiveROI
![Page 21: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/21.jpg)
Hint and reveal (aka progressive disclosure)
Common Icons
m Menu
s Search
g Settings
u Profile
#ResponsiveROI
![Page 22: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/22.jpg)
Consider the interaction
Hover | Fly out Touch | Accordion
#ResponsiveROI
![Page 23: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/23.jpg)
Create image carouselsthat can be swiped
#ResponsiveROI
![Page 24: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/24.jpg)
Adapt for portrait and landscape viewing
#ResponsiveROI
![Page 25: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/25.jpg)
PERFORMANCE FOR CONVERSIONS
![Page 26: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/26.jpg)
1. BLOCKING JAVASCRIPT
2. BANDWIDTH & LATENCY
3. OVERSIZED OR POORLY COMPRESSED IMAGES
4. JAVASCRIPT EXECUTION
5. BROWSER RENDER OPERATIONS
6. CSS PARSING
Most wanted performanceoffenders
#ResponsiveROI
![Page 27: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/27.jpg)
Blocking JavaScript
#ResponsiveROI
![Page 28: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/28.jpg)
Non-blocking resources
#ResponsiveROI
![Page 29: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/29.jpg)
Bandwidth - seems ok, right?
#ResponsiveROI
![Page 30: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/30.jpg)
Latency
Source: Ilya Grigorik (Google)
#ResponsiveROI
![Page 31: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/31.jpg)
Latency
#ResponsiveROI
![Page 32: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/32.jpg)
What does this mean?
0%#
10%#
20%#
30%#
40%#
50%#
60%#
70%#
80%#
90%#
100%#
100ms# 1s# 2s# 3s# 4s# 5s# 6s# 7s# 8s# 9s# 10s#
eCommerce'sales'lost'due'to'load'.me'
Source: Amazon web team (1% conversion loss per 100ms)
#ResponsiveROI
![Page 33: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/33.jpg)
Oversized images
#ResponsiveROI
![Page 34: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/34.jpg)
Large JavaScript - still slow
#ResponsiveROI
![Page 35: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/35.jpg)
Parsing, tree building, layout & painting
#ResponsiveROI
![Page 36: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/36.jpg)
Layout reflow + Painting
#ResponsiveROI
![Page 37: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/37.jpg)
Repaint (redo layout+paint)
#ResponsiveROI
![Page 38: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/38.jpg)
CSS Complexity
#ResponsiveROI
![Page 39: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/39.jpg)
What can you do about these challenges?
#ResponsiveROI
![Page 40: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/40.jpg)
Remove unneeded resources
#ResponsiveROI
![Page 41: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/41.jpg)
Conditional JS loading
#ResponsiveROI
![Page 42: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/42.jpg)
Compress assets
#ResponsiveROI
![Page 43: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/43.jpg)
Pre-fetching
#ResponsiveROI
![Page 44: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/44.jpg)
Pre-fetching
#ResponsiveROI
![Page 45: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/45.jpg)
Other optimizations
Make use of localStorage and “smart” caching Intelligent radio warmup
CDNReduce number of DNS lookups
Set good caching headersCookie-less domains
#ResponsiveROI
![Page 46: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/46.jpg)
WHICH APPROACHIS RIGHT FOR YOU?
![Page 47: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/47.jpg)
Achieving One Web, One URL
Build from scratchReSS
Adaptive TemplatingGet crafty
#ResponsiveROI
![Page 48: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/48.jpg)
Adapt any website for mobile devices—smartphones, tablets and more—with our open platform, tools, and
services that enable amazingly fast and responsive websites.
WHAT IS MOBIFY?
#ResponsiveROI
![Page 49: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/49.jpg)
#ResponsiveROI
![Page 50: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/50.jpg)
ADAPTIVE TEMPLATING
• Customize your site uniquely for a specific device
• One URL on desktops, smartphones and tablets alike
• All CMS supported - simply paste a Mobify tag into your HTML
• Keep your workflows the same
• Maintain control - build it yourself, engage in co-development or get full service
#ResponsiveROI
![Page 51: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/51.jpg)
FAST, RESPONSIVE IMAGES• Dramatically reduce page load time and
increase user engagement
• Accelerate performance of asset rendering in responsive websites
• Reduce bandwidth costs result in a better bottom line for your business
#ResponsiveROI
![Page 52: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/52.jpg)
PERFORMANCEOPTIMIZATION
JavaScript and CSS Acceleration
• Improve mobile load times by reducing the number of HTTP requests
• Use the Mobify API to specify which resources are optimized
#ResponsiveROI
![Page 54: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/54.jpg)
On Responsive, Adaptive and One WEbhttp://alistapart.com/article/responsive-web-designhttp://bradfrostweb.com/blog/post/beyond-squishy-the-principles-of-adaptive-design/http://www.w3.org/TR/mobile-bp/#OneWeb
On UX Designhttp://www.mobify.com/blog/mobile-design-tip-hint-reveal/ http://www.lukew.com/ff/entry.asp?1691 http://www.magazine.org/timecom-gm-craig-ettinger-bringing-responsive-web-design-iconic-brandhttp://mobile.smashingmagazine.com/2012/07/12/elements-mobile-user-experience/http://www.mobilexweb.com/blog/ui-guidelines-mobile-tablet-design http://www.mobify.com/blog/mobile-web-design-for-content-heavy-websites/
On Performance https://developers.google.com/speed/ http://www.igvita.com/ (Gregorik Ilya, Google Performance team) http://stevesouders.com/ (Author of "High Performance Websites, O'reilly & Associates" ) (author of YSlow)
MOREhttp://www.google.com/think/perspectives/make-website-work-across-multiple-devices.htmlhttp://mobify.com
RESOURCES
#ResponsiveROI
![Page 55: Webinar: How to Build a Responsive Website that Converts](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b795174a795978578b4578/html5/thumbnails/55.jpg)
1. How are your visitors using your site?2. What is your current mobile experience like?3. What kind of content are you serving up?4. What resources do you have available?5. How much is not being optimized on mobile costing you?6. What will happen to your SEO and social sharing?7. Is your solution secure?8. What about A/B testing and web tracking?9. How much control do you want over development and
maintenance? 10. Is your solution future-proof?
Top 10 Questions: Going Responsive
#ResponsiveROI