SlideShare une entreprise Scribd logo
1  sur  15
Beyond Responsive 
Ralf Schwoebel 
www.tradebit.com
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
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:
Where is the money?
How most peole use responsive 
bad, really bad!
How do the big guys do it? 
iPhone: 
74 requests 
490 Kilobytes 
1.04 seconds 
Chrome: 
250 requests 
1.1 Megabytes 
2.14 seconds
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
Conversion, Conversion 
Mobile converts better 
(for me):
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
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
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
RESS(T) : with Amazon 
Same page, Chrome
RESS(T) : with Amazon 
Emulating the iPhone4 
Logged in 
I see 1 call to action 
and one more thing...
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!“
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

Contenu connexe

En vedette

Offline strategies for HTML5 web applications - frOSCon8
Offline strategies for HTML5 web applications - frOSCon8Offline strategies for HTML5 web applications - frOSCon8
Offline strategies for HTML5 web applications - frOSCon8Stephan Hochdörfer
 
HTML5 Offline Web Applications (Silicon Valley User Group)
HTML5 Offline Web Applications (Silicon Valley User Group)HTML5 Offline Web Applications (Silicon Valley User Group)
HTML5 Offline Web Applications (Silicon Valley User Group)robinzimmermann
 
Online / Offline
Online / OfflineOnline / Offline
Online / OfflinePeter Rozek
 
HTML5 AppCache: The Manifest
HTML5 AppCache: The ManifestHTML5 AppCache: The Manifest
HTML5 AppCache: The ManifestRalf Schwoebel
 
Anatomy of an HTML 5 mobile web app
Anatomy of an HTML 5 mobile web app Anatomy of an HTML 5 mobile web app
Anatomy of an HTML 5 mobile web app Ivano Malavolta
 
Html5 Offline Applications
Html5 Offline Applications Html5 Offline Applications
Html5 Offline Applications Sunny Sharma
 

En vedette (6)

Offline strategies for HTML5 web applications - frOSCon8
Offline strategies for HTML5 web applications - frOSCon8Offline strategies for HTML5 web applications - frOSCon8
Offline strategies for HTML5 web applications - frOSCon8
 
HTML5 Offline Web Applications (Silicon Valley User Group)
HTML5 Offline Web Applications (Silicon Valley User Group)HTML5 Offline Web Applications (Silicon Valley User Group)
HTML5 Offline Web Applications (Silicon Valley User Group)
 
Online / Offline
Online / OfflineOnline / Offline
Online / Offline
 
HTML5 AppCache: The Manifest
HTML5 AppCache: The ManifestHTML5 AppCache: The Manifest
HTML5 AppCache: The Manifest
 
Anatomy of an HTML 5 mobile web app
Anatomy of an HTML 5 mobile web app Anatomy of an HTML 5 mobile web app
Anatomy of an HTML 5 mobile web app
 
Html5 Offline Applications
Html5 Offline Applications Html5 Offline Applications
Html5 Offline Applications
 

Plus de Ralf Schwoebel

Pagespeed SEO 2018: Google Mobile Index Optimization
Pagespeed SEO 2018: Google Mobile Index OptimizationPagespeed SEO 2018: Google Mobile Index Optimization
Pagespeed SEO 2018: Google Mobile Index OptimizationRalf Schwoebel
 
APIconference London 2018: Turning code into wine
APIconference London 2018: Turning code into wineAPIconference London 2018: Turning code into wine
APIconference London 2018: Turning code into wineRalf Schwoebel
 
German: Softwareprodukte aus einem Source Code mit Javascript
German: Softwareprodukte aus einem Source Code mit JavascriptGerman: Softwareprodukte aus einem Source Code mit Javascript
German: Softwareprodukte aus einem Source Code mit JavascriptRalf Schwoebel
 
Mobile Convergence: Trends for Online Marketeers
Mobile Convergence: Trends for Online MarketeersMobile Convergence: Trends for Online Marketeers
Mobile Convergence: Trends for Online MarketeersRalf Schwoebel
 
Technologie und SEO: Cloud, Big Data und Mobile First angeschaut
Technologie und SEO: Cloud, Big Data und Mobile First angeschautTechnologie und SEO: Cloud, Big Data und Mobile First angeschaut
Technologie und SEO: Cloud, Big Data und Mobile First angeschautRalf Schwoebel
 
Mastering On-Site Search / Custom Site Search
Mastering On-Site Search / Custom Site SearchMastering On-Site Search / Custom Site Search
Mastering On-Site Search / Custom Site SearchRalf Schwoebel
 
German: SMX Munich - Twitter Marketing
German: SMX Munich - Twitter MarketingGerman: SMX Munich - Twitter Marketing
German: SMX Munich - Twitter MarketingRalf Schwoebel
 
German Online Roundtable Frankfurt (OSF)
German Online Roundtable Frankfurt (OSF)German Online Roundtable Frankfurt (OSF)
German Online Roundtable Frankfurt (OSF)Ralf Schwoebel
 
International and European SEO - Pubcon 2008
International and European SEO - Pubcon 2008International and European SEO - Pubcon 2008
International and European SEO - Pubcon 2008Ralf Schwoebel
 
SEOkomm 2012: Beyond SEO in German - Mehr Traffic ohne Google
SEOkomm 2012: Beyond SEO in German - Mehr Traffic ohne GoogleSEOkomm 2012: Beyond SEO in German - Mehr Traffic ohne Google
SEOkomm 2012: Beyond SEO in German - Mehr Traffic ohne GoogleRalf Schwoebel
 
German Intro: Strategische Markenberatung
German Intro: Strategische MarkenberatungGerman Intro: Strategische Markenberatung
German Intro: Strategische MarkenberatungRalf Schwoebel
 
German: Frankfurt im Überblick für Buchmesse-Besucher
German: Frankfurt im Überblick für Buchmesse-BesucherGerman: Frankfurt im Überblick für Buchmesse-Besucher
German: Frankfurt im Überblick für Buchmesse-BesucherRalf Schwoebel
 
MySQL Install for Replication - Real Life Tutorial
MySQL Install for Replication - Real Life TutorialMySQL Install for Replication - Real Life Tutorial
MySQL Install for Replication - Real Life TutorialRalf Schwoebel
 
Seven steps to great PC health (Windows)
Seven steps to great PC health (Windows)Seven steps to great PC health (Windows)
Seven steps to great PC health (Windows)Ralf Schwoebel
 
How to make your website IPv6 ready (quickly)
How to make your website IPv6 ready (quickly)How to make your website IPv6 ready (quickly)
How to make your website IPv6 ready (quickly)Ralf Schwoebel
 
Simple Site Speed Improvements (SMX 2010)
Simple Site Speed Improvements (SMX 2010)Simple Site Speed Improvements (SMX 2010)
Simple Site Speed Improvements (SMX 2010)Ralf Schwoebel
 
Hosting Issues and SEO
Hosting Issues and SEOHosting Issues and SEO
Hosting Issues and SEORalf Schwoebel
 
Pubcon 2012 Blog and Site performance
Pubcon 2012 Blog and Site performancePubcon 2012 Blog and Site performance
Pubcon 2012 Blog and Site performanceRalf Schwoebel
 

Plus de Ralf Schwoebel (18)

Pagespeed SEO 2018: Google Mobile Index Optimization
Pagespeed SEO 2018: Google Mobile Index OptimizationPagespeed SEO 2018: Google Mobile Index Optimization
Pagespeed SEO 2018: Google Mobile Index Optimization
 
APIconference London 2018: Turning code into wine
APIconference London 2018: Turning code into wineAPIconference London 2018: Turning code into wine
APIconference London 2018: Turning code into wine
 
German: Softwareprodukte aus einem Source Code mit Javascript
German: Softwareprodukte aus einem Source Code mit JavascriptGerman: Softwareprodukte aus einem Source Code mit Javascript
German: Softwareprodukte aus einem Source Code mit Javascript
 
Mobile Convergence: Trends for Online Marketeers
Mobile Convergence: Trends for Online MarketeersMobile Convergence: Trends for Online Marketeers
Mobile Convergence: Trends for Online Marketeers
 
Technologie und SEO: Cloud, Big Data und Mobile First angeschaut
Technologie und SEO: Cloud, Big Data und Mobile First angeschautTechnologie und SEO: Cloud, Big Data und Mobile First angeschaut
Technologie und SEO: Cloud, Big Data und Mobile First angeschaut
 
Mastering On-Site Search / Custom Site Search
Mastering On-Site Search / Custom Site SearchMastering On-Site Search / Custom Site Search
Mastering On-Site Search / Custom Site Search
 
German: SMX Munich - Twitter Marketing
German: SMX Munich - Twitter MarketingGerman: SMX Munich - Twitter Marketing
German: SMX Munich - Twitter Marketing
 
German Online Roundtable Frankfurt (OSF)
German Online Roundtable Frankfurt (OSF)German Online Roundtable Frankfurt (OSF)
German Online Roundtable Frankfurt (OSF)
 
International and European SEO - Pubcon 2008
International and European SEO - Pubcon 2008International and European SEO - Pubcon 2008
International and European SEO - Pubcon 2008
 
SEOkomm 2012: Beyond SEO in German - Mehr Traffic ohne Google
SEOkomm 2012: Beyond SEO in German - Mehr Traffic ohne GoogleSEOkomm 2012: Beyond SEO in German - Mehr Traffic ohne Google
SEOkomm 2012: Beyond SEO in German - Mehr Traffic ohne Google
 
German Intro: Strategische Markenberatung
German Intro: Strategische MarkenberatungGerman Intro: Strategische Markenberatung
German Intro: Strategische Markenberatung
 
German: Frankfurt im Überblick für Buchmesse-Besucher
German: Frankfurt im Überblick für Buchmesse-BesucherGerman: Frankfurt im Überblick für Buchmesse-Besucher
German: Frankfurt im Überblick für Buchmesse-Besucher
 
MySQL Install for Replication - Real Life Tutorial
MySQL Install for Replication - Real Life TutorialMySQL Install for Replication - Real Life Tutorial
MySQL Install for Replication - Real Life Tutorial
 
Seven steps to great PC health (Windows)
Seven steps to great PC health (Windows)Seven steps to great PC health (Windows)
Seven steps to great PC health (Windows)
 
How to make your website IPv6 ready (quickly)
How to make your website IPv6 ready (quickly)How to make your website IPv6 ready (quickly)
How to make your website IPv6 ready (quickly)
 
Simple Site Speed Improvements (SMX 2010)
Simple Site Speed Improvements (SMX 2010)Simple Site Speed Improvements (SMX 2010)
Simple Site Speed Improvements (SMX 2010)
 
Hosting Issues and SEO
Hosting Issues and SEOHosting Issues and SEO
Hosting Issues and SEO
 
Pubcon 2012 Blog and Site performance
Pubcon 2012 Blog and Site performancePubcon 2012 Blog and Site performance
Pubcon 2012 Blog and Site performance
 

Dernier

TRENDS Enabling and inhibiting dimensions.pptx
TRENDS Enabling and inhibiting dimensions.pptxTRENDS Enabling and inhibiting dimensions.pptx
TRENDS Enabling and inhibiting dimensions.pptxAndrieCagasanAkio
 
IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119APNIC
 
Company Snapshot Theme for Business by Slidesgo.pptx
Company Snapshot Theme for Business by Slidesgo.pptxCompany Snapshot Theme for Business by Slidesgo.pptx
Company Snapshot Theme for Business by Slidesgo.pptxMario
 
Top 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxTop 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxDyna Gilbert
 
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书zdzoqco
 
Film cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasaFilm cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasa494f574xmv
 
Unidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptxUnidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptxmibuzondetrabajo
 
SCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is prediSCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is predieusebiomeyer
 
ETHICAL HACKING dddddddddddddddfnandni.pptx
ETHICAL HACKING dddddddddddddddfnandni.pptxETHICAL HACKING dddddddddddddddfnandni.pptx
ETHICAL HACKING dddddddddddddddfnandni.pptxNIMMANAGANTI RAMAKRISHNA
 
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书rnrncn29
 
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书rnrncn29
 

Dernier (11)

TRENDS Enabling and inhibiting dimensions.pptx
TRENDS Enabling and inhibiting dimensions.pptxTRENDS Enabling and inhibiting dimensions.pptx
TRENDS Enabling and inhibiting dimensions.pptx
 
IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119
 
Company Snapshot Theme for Business by Slidesgo.pptx
Company Snapshot Theme for Business by Slidesgo.pptxCompany Snapshot Theme for Business by Slidesgo.pptx
Company Snapshot Theme for Business by Slidesgo.pptx
 
Top 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxTop 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptx
 
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
 
Film cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasaFilm cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasa
 
Unidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptxUnidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptx
 
SCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is prediSCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is predi
 
ETHICAL HACKING dddddddddddddddfnandni.pptx
ETHICAL HACKING dddddddddddddddfnandni.pptxETHICAL HACKING dddddddddddddddfnandni.pptx
ETHICAL HACKING dddddddddddddddfnandni.pptx
 
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
 
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
 

Beyond responsive: Mobile Websites with HTML5 that convert

  • 1. Beyond Responsive Ralf Schwoebel www.tradebit.com
  • 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. 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. Where is the money?
  • 5. How most peole use responsive bad, really bad!
  • 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. 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. Conversion, Conversion Mobile converts better (for me):
  • 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. 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. 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. RESS(T) : with Amazon Same page, Chrome
  • 13. RESS(T) : with Amazon Emulating the iPhone4 Logged in I see 1 call to action and one more thing...
  • 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. 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