Webinar: How to Build a Responsive Website that Converts
•
0 gefällt mir•1,399 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 creating the best experience for your users — and ultimately drive conversions.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Webinar: How to Build a Responsive Website that Converts
Ähnlich wie Webinar: How to Build a Responsive Website that Converts (20)
Mehr von Mobify
Mehr von Mobify (6)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Webinar: How to Build a Responsive Website that Converts
- 1. How to Build a Responsive Website that Converts #ResponsiveROI | May 14th, 2013
- 2. Igor Faletski CEO at Mobify @igorskee Peter McLachlan Chief Architect at Mobify @b1tr0t #ResponsiveROI | @mobify
- 3. 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
- 5. Responsive Web Design Adaptive Web Design One Web, One URL WHAT DOES “GOING MOBILE” MEAN TODAY? #ResponsiveROI
- 6. 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
- 7. Image Credit: Brad Frost WHAT IS ADAPTIVE WEB DESIGN? #ResponsiveROI
- 18. Simplify your forms Image Credit: Smashing Magazine #ResponsiveROI
- 19. Optimize for touch across devices Image Credit: Luke Wroblewski #ResponsiveROI
- 20. Bigger is (usually) better Font size Minimum: 14px Buttons & touch targets Minimum: 45px by 45px Margins Minimum: 10px #ResponsiveROI
- 21. Hint and reveal (aka progressive disclosure) Common Icons m Menu s Search g Settings u Profile #ResponsiveROI
- 22. Consider the interaction Hover | Fly out Touch | Accordion #ResponsiveROI
- 23. Create image carousels that can be swiped #ResponsiveROI
- 24. Adapt for portrait and landscape viewing #ResponsiveROI
- 26. 1. BLOCKING JAVASCRIPT 2. BANDWIDTH & LATENCY 3. OVERSIZED OR POORLY COMPRESSED IMAGES 4. JAVASCRIPT EXECUTION 5. BROWSER RENDER OPERATIONS 6. CSS PARSING Most wanted performance offenders #ResponsiveROI
- 29. Bandwidth - seems ok, right? #ResponsiveROI
- 30. Latency Source: Ilya Grigorik (Google) #ResponsiveROI
- 32. 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
- 34. Large JavaScript - still slow #ResponsiveROI
- 35. Parsing, tree building, layout & painting #ResponsiveROI
- 36. Layout reflow + Painting #ResponsiveROI
- 39. What can you do about these challenges? #ResponsiveROI
- 45. Other optimizations Make use of localStorage and “smart” caching Intelligent radio warmup CDN Reduce number of DNS lookups Set good caching headers Cookie-less domains #ResponsiveROI
- 47. Achieving One Web, One URL Build from scratch ReSS Adaptive Templating Get crafty #ResponsiveROI
- 48. 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
- 49. #ResponsiveROI
- 50. 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
- 51. 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
- 52. PERFORMANCE OPTIMIZATION 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
- 53. @mobify | mobify.com | hello@mobify.com #ResponsiveROI | Any Questions?
- 54. On Responsive, Adaptive and One WEb http://alistapart.com/article/responsive-web-design http://bradfrostweb.com/blog/post/beyond-squishy-the-principles-of-adaptive-design/ http://www.w3.org/TR/mobile-bp/#OneWeb On UX Design http://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-brand http://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) MORE http://www.google.com/think/perspectives/make-website-work-across-multiple-devices.html http://mobify.com RESOURCES #ResponsiveROI
- 55. 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