• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Webinar: How to Build a Responsive Website that Converts
 

Webinar: How to Build a Responsive Website that Converts

on

  • 686 views

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 ...

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.

Statistics

Views

Total Views
686
Views on SlideShare
686
Embed Views
0

Actions

Likes
1
Downloads
31
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Webinar: How to Build a Responsive Website that Converts Webinar: How to Build a Responsive Website that Converts Presentation Transcript

    • How to Build a ResponsiveWebsite that Converts#ResponsiveROI | May 14th, 2013
    • Igor FaletskiCEO at Mobify@igorskeePeter McLachlanChief Architect at Mobify@b1tr0t#ResponsiveROI | @mobify
    • 1. GOING MOBILE IN 20132. RESPONSIVE & ADAPTIVE SHOWCASE3. UX DESIGN FOR CONVERSIONS4. PERFORMANCE FOR CONVERSIONS5. WHICH APPROACH IS RIGHT FOR YOU?6. Q&AIN TODAY’S WEBINAR#ResponsiveROI
    • GOINGMOBILEIN 2013
    • Responsive Web DesignAdaptive Web DesignOne Web, One URLWHAT DOES “GOING MOBILE”MEAN TODAY?#ResponsiveROI
    • WHAT IS RESPONSIVE WEB DESIGN?FLUID GRIDS MEDIA QUERIESFLEXIBLE MEDIAImage Credit: Luke Wroblewski, CSS-Tricks...are the 3 technical ingredients for responsive web design.- Ethan Marcotte#ResponsiveROI
    • Image Credit: Brad FrostWHAT 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 FORCONVERSIONS
    • Simplify your formsImage Credit: Smashing Magazine#ResponsiveROI
    • Optimize for touch across devicesImage Credit: Luke Wroblewski#ResponsiveROI
    • Bigger is (usually) betterFont sizeMinimum: 14pxButtons & touch targetsMinimum: 45px by 45pxMarginsMinimum: 10px#ResponsiveROI
    • Hint and reveal (aka progressivedisclosure)Common Iconsm Menus Searchg Settingsu Profile#ResponsiveROI
    • Consider the interactionHover | Fly out Touch | Accordion#ResponsiveROI
    • Create image carouselsthat can be swiped#ResponsiveROI
    • Adapt for portrait andlandscape viewing#ResponsiveROI
    • PERFORMANCE FORCONVERSIONS
    • 1. BLOCKING JAVASCRIPT2. BANDWIDTH & LATENCY3. OVERSIZED OR POORLY COMPRESSED IMAGES4. JAVASCRIPT EXECUTION5. BROWSER RENDER OPERATIONS6. CSS PARSINGMost wanted performanceoffenders#ResponsiveROI
    • Blocking JavaScript#ResponsiveROI
    • Non-blocking resources#ResponsiveROI
    • Bandwidth - seems ok, right?#ResponsiveROI
    • LatencySource: 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#eCommercesaleslostduetoload.meSource: 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 thesechallenges?#ResponsiveROI
    • Remove unneeded resources#ResponsiveROI
    • Conditional JS loading#ResponsiveROI
    • Compress assets#ResponsiveROI
    • Pre-fetching#ResponsiveROI
    • Pre-fetching#ResponsiveROI
    • Other optimizationsMake use of localStorage and “smart” cachingIntelligent radio warmupCDNReduce number of DNS lookupsSet good caching headersCookie-less domains#ResponsiveROI
    • WHICHAPPROACHIS RIGHTFOR YOU?
    • Achieving One Web, One URLBuild from scratchReSSAdaptive TemplatingGet crafty#ResponsiveROI
    • Adapt any website for mobile devices—smartphones,tablets and more—with our open platform, tools, andservices that enable amazingly fastand 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-developmentor get full service#ResponsiveROI
    • FAST, RESPONSIVE IMAGES• Dramatically reduce page load time andincrease user engagement• Accelerate performance of asset rendering inresponsive websites• Reduce bandwidth costs result in a betterbottom line for your business#ResponsiveROI
    • PERFORMANCEOPTIMIZATIONJavaScript and CSS Acceleration• Improve mobile load times byreducing the number of HTTPrequests• Use the Mobify API to specifywhich resources are optimized#ResponsiveROI
    • @mobify | mobify.com | hello@mobify.com#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/#OneWebOn UX Designhttp://www.mobify.com/blog/mobile-design-tip-hint-reveal/http://www.lukew.com/ff/entry.asp?1691http://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-designhttp://www.mobify.com/blog/mobile-web-design-for-content-heavy-websites/On Performancehttps://developers.google.com/speed/http://www.igvita.com/ (Gregorik Ilya, Google Performance team)http://stevesouders.com/ (Author of "High Performance Websites, Oreilly & Associates" ) (author of YSlow)MOREhttp://www.google.com/think/perspectives/make-website-work-across-multiple-devices.htmlhttp://mobify.comRESOURCES#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 andmaintenance?10. Is your solution future-proof?Top 10 Questions: Going Responsive#ResponsiveROI