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
How to Build a Responsive Website that Converts
#ResponsiveROI | May 14th, 2013
Igor FaletskiCEO at Mobify
@igorskee Peter McLachlan
Chief Architect at Mobify
@b1tr0t
#ResponsiveROI | @mobify
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
GOING MOBILEIN 2013
Responsive Web DesignAdaptive Web Design
One Web, One URL
WHAT DOES “GOING MOBILE” MEAN TODAY?
#ResponsiveROI
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
Image Credit: Brad Frost
WHAT IS ADAPTIVE WEB DESIGN?
#ResponsiveROI
RESPONSIVE& ADAPTIVESHOWCASE
skinnyties.com
#ResponsiveROI
indochino.com
#ResponsiveROI
aritzia.com
#ResponsiveROI
garmin.com
#ResponsiveROI
time.com
#ResponsiveROI
ReSS | nd.edu
#ResponsiveROI
Adaptive | brides.com
#ResponsiveROI
Adaptive | ctshirts.co.uk
#ResponsiveROI
UX DESIGN FOR CONVERSIONS
Simplify your forms
Image Credit: Smashing Magazine
#ResponsiveROI
Optimize for touch across devices
Image Credit: Luke Wroblewski
#ResponsiveROI
Bigger is (usually) better
Font sizeMinimum: 14px
Buttons & touch targetsMinimum: 45px by 45px
MarginsMinimum: 10px
#ResponsiveROI
Hint and reveal (aka progressive disclosure)
Common Icons
m Menu
s Search
g Settings
u Profile
#ResponsiveROI
Consider the interaction
Hover | Fly out Touch | Accordion
#ResponsiveROI
Create image carouselsthat can be swiped
#ResponsiveROI
Adapt for portrait and landscape viewing
#ResponsiveROI
PERFORMANCE FOR CONVERSIONS
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
Blocking JavaScript
#ResponsiveROI
Non-blocking resources
#ResponsiveROI
Bandwidth - seems ok, right?
#ResponsiveROI
Latency
Source: Ilya Grigorik (Google)
#ResponsiveROI
Latency
#ResponsiveROI
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
Oversized images
#ResponsiveROI
Large JavaScript - still slow
#ResponsiveROI
Parsing, tree building, layout & painting
#ResponsiveROI
Layout reflow + Painting
#ResponsiveROI
Repaint (redo layout+paint)
#ResponsiveROI
CSS Complexity
#ResponsiveROI
What can you do about these challenges?
#ResponsiveROI
Remove unneeded resources
#ResponsiveROI
Conditional JS loading
#ResponsiveROI
Compress assets
#ResponsiveROI
Pre-fetching
#ResponsiveROI
Pre-fetching
#ResponsiveROI
Other optimizations
Make use of localStorage and “smart” caching Intelligent radio warmup
CDNReduce number of DNS lookups
Set good caching headersCookie-less domains
#ResponsiveROI
WHICH APPROACHIS RIGHT FOR YOU?
Achieving One Web, One URL
Build from scratchReSS
Adaptive TemplatingGet crafty
#ResponsiveROI
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
#ResponsiveROI
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
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
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
@mobify | mobify.com | [email protected]
#ResponsiveROI | Any Questions?
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
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