Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Beyond responsive: Mobile Websites with HTML5 that convert

824 views

Published on

Creating mobile websites with more than just a responsive template set. Use RESS and tracking to provide the best user experience. Here is the overview, some basic infos how to do it and some links to tools you will need as a developer to create nice websites.

Published in: Internet
  • Be the first to comment

Beyond responsive: Mobile Websites with HTML5 that convert

  1. 1. Beyond Responsive Ralf Schwoebel www.tradebit.com
  2. 2. Hi, I am Ralf • eCommerce Zombie since 1995 • SEO since 2001 • Pubcon since 2006 • CEO of a German/American Company • Developer, System Admin, Online Enthusiast, German • App development since early 2014: www.secryptor.com
  3. 3. Responsive has more aspects! We have to rethink „traffic & conversion“, because: •The device and its usage is different •The process of conversion is different (no keyboard!) •The speed of the browser is different Plain template based „responsive“ is not enough: What about the content? @mobile__martin puts it like:
  4. 4. Where is the money?
  5. 5. How most peole use responsive bad, really bad!
  6. 6. How do the big guys do it? iPhone: 74 requests 490 Kilobytes 1.04 seconds Chrome: 250 requests 1.1 Megabytes 2.14 seconds
  7. 7. How do the big guys do it? iPhone: 44 requests 1.4 Megabytes 1.06 seconds Chrome: 218 requests 2.4 Megabytes 4.78 seconds
  8. 8. Conversion, Conversion Mobile converts better (for me):
  9. 9. RESS(T) : done right! REsponsive design and Server Side components and Tracking •Responsive Templateset •Dynamic page creation •Use cookies & HTML5 storage db to track the user (asynchronous JS!) •In detail user agent analytics on the fly •IP analysis and language (cultural content) There is also a vineyard called RESS
  10. 10. We need to optimize content and layout! Visitor Source User Agent OS, language, IP Cookies Source User Agent OS, language, IP Cookies Your Server Template & CSS Content Call(s) to action Tracking The Page The Page & AJAX & AJAX tracking RESS HTML5 Storage for HTML5 Storage for tracking
  11. 11. RESS(T) : the logic for coders $defaultTemplate= ... $header = ... $introBlock = ... $call2action1 = ... $textBlock1 = ... $adBlock1 = ... $footer = ... $page = sum of above... • Check cookies • Check useragent (lang, OS, etc.) • Check IP -> Build Page • Asynchronous Javascript: check resolution, maybe add call 2 action • Set Cookie, set local storage DB for tracking Useful: • User agents and resolutions • IP database with origins • Templates
  12. 12. RESS(T) : with Amazon Same page, Chrome
  13. 13. RESS(T) : with Amazon Emulating the iPhone4 Logged in I see 1 call to action and one more thing...
  14. 14. Conclusion For maximum efficiency of your content to perform (aka attract users and convert them) on all platforms: •Mutate the content, not just the layout •Do it with RESS, bandwidth is less than you think •Track the user to satisfy, not just to upsell •Use the „Conversion philosophies“ (search for Tim Ash or Roger Dooley on slideshare) => focus on the minimum! „Hopefully there will be framesets soon to ease the pain of development and maintenance!“
  15. 15. Thank you very much! Ralf Schwoebel Tradebit, Inc. www.tradebit.com E-mail: puzzler@tradebit.com Twitter: @trabit „... let‘s code something great!“ This is online at: http://www.slideshare.net/extremelongusername

×