Downloaded 47 times
Uploaded byMobify
Webinar: How to Build a Responsive Website that Converts
The document discusses how to build a responsive website to improve conversions, covering key topics like responsive vs. adaptive design, UX design elements, and performance optimization strategies. It emphasizes the importance of mobile friendliness, proper use of responsive techniques, and tools available for achieving fast and effective mobile experiences. Additionally, it provides resources and critical questions to consider when transitioning to a responsive web design approach.
More Related Content
Similar to Webinar: How to Build a Responsive Website that Converts
Webinar: How to Build a Responsive Website that Converts
- 1. How to Builda Responsive Website that Converts #ResponsiveROI | May 14th, 2013
- 2. Igor Faletski CEO atMobify @igorskee Peter McLachlan Chief Architect at Mobify @b1tr0t #ResponsiveROI | @mobify
- 3. 1. GOING MOBILEIN 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
- 4.
- 5. Responsive Web Design AdaptiveWeb Design One Web, One URL WHAT DOES “GOING MOBILE” MEAN TODAY? #ResponsiveROI
- 6. WHAT IS RESPONSIVEWEB 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: BradFrost WHAT IS ADAPTIVE WEB DESIGN? #ResponsiveROI
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18. Simplify your forms ImageCredit: Smashing Magazine #ResponsiveROI
- 19. Optimize for touchacross 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 thatcan be swiped #ResponsiveROI
- 24. Adapt for portraitand landscape viewing #ResponsiveROI
- 25.
- 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
- 27.
- 28.
- 29. Bandwidth - seemsok, right? #ResponsiveROI
- 30. Latency Source: Ilya Grigorik(Google) #ResponsiveROI
- 31.
- 32. What does thismean? 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
- 33.
- 34. Large JavaScript -still slow #ResponsiveROI
- 35. Parsing, tree building,layout & painting #ResponsiveROI
- 36. Layout reflow +Painting #ResponsiveROI
- 37.
- 38.
- 39. What can youdo about these challenges? #ResponsiveROI
- 40.
- 41.
- 42.
- 43.
- 44.
- 45. Other optimizations Make useof localStorage and “smart” caching Intelligent radio warmup CDN Reduce number of DNS lookups Set good caching headers Cookie-less domains #ResponsiveROI
- 46.
- 47. Achieving One Web,One URL Build from scratch ReSS Adaptive Templating Get crafty #ResponsiveROI
- 48. Adapt any websitefor 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.
- 50. ADAPTIVE TEMPLATING • Customizeyour 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 CSSAcceleration • 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, Adaptiveand 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 areyour 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