Responsive Design - Magentoinfo2.magento.com/rs/magentosoftware/images/Markus... · 2021. 1....
Transcript of Responsive Design - Magentoinfo2.magento.com/rs/magentosoftware/images/Markus... · 2021. 1....
![Page 1: Responsive Design - Magentoinfo2.magento.com/rs/magentosoftware/images/Markus... · 2021. 1. 26. · Neuer Prozess Kick-Off Moodboards Style Tiles TTTTTTTTTT TTTTTTTTTT Testing Temlatedesign](https://reader036.fdocument.pub/reader036/viewer/2022071404/60f8bd84afe7b12443350138/html5/thumbnails/1.jpg)
![Page 2: Responsive Design - Magentoinfo2.magento.com/rs/magentosoftware/images/Markus... · 2021. 1. 26. · Neuer Prozess Kick-Off Moodboards Style Tiles TTTTTTTTTT TTTTTTTTTT Testing Temlatedesign](https://reader036.fdocument.pub/reader036/viewer/2022071404/60f8bd84afe7b12443350138/html5/thumbnails/2.jpg)
Responsive Design A New Approach to
Implementing an
eCommerce Project
![Page 3: Responsive Design - Magentoinfo2.magento.com/rs/magentosoftware/images/Markus... · 2021. 1. 26. · Neuer Prozess Kick-Off Moodboards Style Tiles TTTTTTTTTT TTTTTTTTTT Testing Temlatedesign](https://reader036.fdocument.pub/reader036/viewer/2022071404/60f8bd84afe7b12443350138/html5/thumbnails/3.jpg)
Markus Neumann
CEO mediawave
![Page 4: Responsive Design - Magentoinfo2.magento.com/rs/magentosoftware/images/Markus... · 2021. 1. 26. · Neuer Prozess Kick-Off Moodboards Style Tiles TTTTTTTTTT TTTTTTTTTT Testing Temlatedesign](https://reader036.fdocument.pub/reader036/viewer/2022071404/60f8bd84afe7b12443350138/html5/thumbnails/4.jpg)
Umdenken erforderlich? 1
![Page 5: Responsive Design - Magentoinfo2.magento.com/rs/magentosoftware/images/Markus... · 2021. 1. 26. · Neuer Prozess Kick-Off Moodboards Style Tiles TTTTTTTTTT TTTTTTTTTT Testing Temlatedesign](https://reader036.fdocument.pub/reader036/viewer/2022071404/60f8bd84afe7b12443350138/html5/thumbnails/5.jpg)
Potential?
371.000 Babys werden pro Tag geboren
378.000 iPhones werden pro Tag auf der Welt verkauft
![Page 6: Responsive Design - Magentoinfo2.magento.com/rs/magentosoftware/images/Markus... · 2021. 1. 26. · Neuer Prozess Kick-Off Moodboards Style Tiles TTTTTTTTTT TTTTTTTTTT Testing Temlatedesign](https://reader036.fdocument.pub/reader036/viewer/2022071404/60f8bd84afe7b12443350138/html5/thumbnails/6.jpg)
Mobile Nutzung
![Page 7: Responsive Design - Magentoinfo2.magento.com/rs/magentosoftware/images/Markus... · 2021. 1. 26. · Neuer Prozess Kick-Off Moodboards Style Tiles TTTTTTTTTT TTTTTTTTTT Testing Temlatedesign](https://reader036.fdocument.pub/reader036/viewer/2022071404/60f8bd84afe7b12443350138/html5/thumbnails/7.jpg)
+159% Responsive Design
![Page 8: Responsive Design - Magentoinfo2.magento.com/rs/magentosoftware/images/Markus... · 2021. 1. 26. · Neuer Prozess Kick-Off Moodboards Style Tiles TTTTTTTTTT TTTTTTTTTT Testing Temlatedesign](https://reader036.fdocument.pub/reader036/viewer/2022071404/60f8bd84afe7b12443350138/html5/thumbnails/8.jpg)
56% Fortune 100
![Page 9: Responsive Design - Magentoinfo2.magento.com/rs/magentosoftware/images/Markus... · 2021. 1. 26. · Neuer Prozess Kick-Off Moodboards Style Tiles TTTTTTTTTT TTTTTTTTTT Testing Temlatedesign](https://reader036.fdocument.pub/reader036/viewer/2022071404/60f8bd84afe7b12443350138/html5/thumbnails/9.jpg)
Früher
![Page 10: Responsive Design - Magentoinfo2.magento.com/rs/magentosoftware/images/Markus... · 2021. 1. 26. · Neuer Prozess Kick-Off Moodboards Style Tiles TTTTTTTTTT TTTTTTTTTT Testing Temlatedesign](https://reader036.fdocument.pub/reader036/viewer/2022071404/60f8bd84afe7b12443350138/html5/thumbnails/10.jpg)
![Page 11: Responsive Design - Magentoinfo2.magento.com/rs/magentosoftware/images/Markus... · 2021. 1. 26. · Neuer Prozess Kick-Off Moodboards Style Tiles TTTTTTTTTT TTTTTTTTTT Testing Temlatedesign](https://reader036.fdocument.pub/reader036/viewer/2022071404/60f8bd84afe7b12443350138/html5/thumbnails/11.jpg)
Der neue Arbeitsprozess 4
![Page 12: Responsive Design - Magentoinfo2.magento.com/rs/magentosoftware/images/Markus... · 2021. 1. 26. · Neuer Prozess Kick-Off Moodboards Style Tiles TTTTTTTTTT TTTTTTTTTT Testing Temlatedesign](https://reader036.fdocument.pub/reader036/viewer/2022071404/60f8bd84afe7b12443350138/html5/thumbnails/12.jpg)
Wir brauchen neuen Prozess
![Page 13: Responsive Design - Magentoinfo2.magento.com/rs/magentosoftware/images/Markus... · 2021. 1. 26. · Neuer Prozess Kick-Off Moodboards Style Tiles TTTTTTTTTT TTTTTTTTTT Testing Temlatedesign](https://reader036.fdocument.pub/reader036/viewer/2022071404/60f8bd84afe7b12443350138/html5/thumbnails/13.jpg)
Erfolg = Technik
+ Planung
![Page 14: Responsive Design - Magentoinfo2.magento.com/rs/magentosoftware/images/Markus... · 2021. 1. 26. · Neuer Prozess Kick-Off Moodboards Style Tiles TTTTTTTTTT TTTTTTTTTT Testing Temlatedesign](https://reader036.fdocument.pub/reader036/viewer/2022071404/60f8bd84afe7b12443350138/html5/thumbnails/14.jpg)
Graceful Degradation
Graceful Degradation
![Page 15: Responsive Design - Magentoinfo2.magento.com/rs/magentosoftware/images/Markus... · 2021. 1. 26. · Neuer Prozess Kick-Off Moodboards Style Tiles TTTTTTTTTT TTTTTTTTTT Testing Temlatedesign](https://reader036.fdocument.pub/reader036/viewer/2022071404/60f8bd84afe7b12443350138/html5/thumbnails/15.jpg)
Graceful Degradation
Progressive Enhancement
![Page 16: Responsive Design - Magentoinfo2.magento.com/rs/magentosoftware/images/Markus... · 2021. 1. 26. · Neuer Prozess Kick-Off Moodboards Style Tiles TTTTTTTTTT TTTTTTTTTT Testing Temlatedesign](https://reader036.fdocument.pub/reader036/viewer/2022071404/60f8bd84afe7b12443350138/html5/thumbnails/16.jpg)
Alter Prozess
Designentwurf
Going Live
Präsentation/Pitch
Finetuning Design
HTML/CSS
CMS/Integration
Inhaltseingabe
Testing
![Page 17: Responsive Design - Magentoinfo2.magento.com/rs/magentosoftware/images/Markus... · 2021. 1. 26. · Neuer Prozess Kick-Off Moodboards Style Tiles TTTTTTTTTT TTTTTTTTTT Testing Temlatedesign](https://reader036.fdocument.pub/reader036/viewer/2022071404/60f8bd84afe7b12443350138/html5/thumbnails/17.jpg)
Neuer Prozess
Kick-Off
Moodboards Style Tiles
TTTTTTTTTT
TTTTTTTTTT
Testing
Temlatedesign
Designprototyp
Versionen
Inhaltsplan
Inhaltsprototyp
Mockups
![Page 18: Responsive Design - Magentoinfo2.magento.com/rs/magentosoftware/images/Markus... · 2021. 1. 26. · Neuer Prozess Kick-Off Moodboards Style Tiles TTTTTTTTTT TTTTTTTTTT Testing Temlatedesign](https://reader036.fdocument.pub/reader036/viewer/2022071404/60f8bd84afe7b12443350138/html5/thumbnails/18.jpg)
Atomic-Design Prozess
Quelle: http://bradfrostweb.com/blog/post/atomic-web-design/ TIPP:Tool: https://github.com/bradfrost/patternlab:
![Page 19: Responsive Design - Magentoinfo2.magento.com/rs/magentosoftware/images/Markus... · 2021. 1. 26. · Neuer Prozess Kick-Off Moodboards Style Tiles TTTTTTTTTT TTTTTTTTTT Testing Temlatedesign](https://reader036.fdocument.pub/reader036/viewer/2022071404/60f8bd84afe7b12443350138/html5/thumbnails/19.jpg)
Moodboard
![Page 20: Responsive Design - Magentoinfo2.magento.com/rs/magentosoftware/images/Markus... · 2021. 1. 26. · Neuer Prozess Kick-Off Moodboards Style Tiles TTTTTTTTTT TTTTTTTTTT Testing Temlatedesign](https://reader036.fdocument.pub/reader036/viewer/2022071404/60f8bd84afe7b12443350138/html5/thumbnails/20.jpg)
Inhalte strukturieren: Tabellen vers. WYSIWUG
Produkte
Titel
Preis
Lieferzeit
Bild
Herstellerlogo
Beschreibung
Bewertung
Name
Punkte
Bemerkung
Cross-Sells
Name
Preis
Bild
![Page 21: Responsive Design - Magentoinfo2.magento.com/rs/magentosoftware/images/Markus... · 2021. 1. 26. · Neuer Prozess Kick-Off Moodboards Style Tiles TTTTTTTTTT TTTTTTTTTT Testing Temlatedesign](https://reader036.fdocument.pub/reader036/viewer/2022071404/60f8bd84afe7b12443350138/html5/thumbnails/21.jpg)
Inhalts-Prototypen: Vorteile
• Time-to-Market
• Erfahrung sammeln
• Aufdecken von Pflegeproblemen
![Page 22: Responsive Design - Magentoinfo2.magento.com/rs/magentosoftware/images/Markus... · 2021. 1. 26. · Neuer Prozess Kick-Off Moodboards Style Tiles TTTTTTTTTT TTTTTTTTTT Testing Temlatedesign](https://reader036.fdocument.pub/reader036/viewer/2022071404/60f8bd84afe7b12443350138/html5/thumbnails/22.jpg)
Style Tiles
Quelle: http://www.studiobonito.co.uk/assets/bulkUpload/yfc-style-tiles-web-design.jpg
![Page 23: Responsive Design - Magentoinfo2.magento.com/rs/magentosoftware/images/Markus... · 2021. 1. 26. · Neuer Prozess Kick-Off Moodboards Style Tiles TTTTTTTTTT TTTTTTTTTT Testing Temlatedesign](https://reader036.fdocument.pub/reader036/viewer/2022071404/60f8bd84afe7b12443350138/html5/thumbnails/23.jpg)
Mockups
![Page 24: Responsive Design - Magentoinfo2.magento.com/rs/magentosoftware/images/Markus... · 2021. 1. 26. · Neuer Prozess Kick-Off Moodboards Style Tiles TTTTTTTTTT TTTTTTTTTT Testing Temlatedesign](https://reader036.fdocument.pub/reader036/viewer/2022071404/60f8bd84afe7b12443350138/html5/thumbnails/24.jpg)
Tipps 5
![Page 25: Responsive Design - Magentoinfo2.magento.com/rs/magentosoftware/images/Markus... · 2021. 1. 26. · Neuer Prozess Kick-Off Moodboards Style Tiles TTTTTTTTTT TTTTTTTTTT Testing Temlatedesign](https://reader036.fdocument.pub/reader036/viewer/2022071404/60f8bd84afe7b12443350138/html5/thumbnails/25.jpg)
Definieren Sie Ziele
Traffic Muster
Priorisierung
Analyse Informationen
Teamarbeit
Architekturanpassung
KPI‘s
![Page 26: Responsive Design - Magentoinfo2.magento.com/rs/magentosoftware/images/Markus... · 2021. 1. 26. · Neuer Prozess Kick-Off Moodboards Style Tiles TTTTTTTTTT TTTTTTTTTT Testing Temlatedesign](https://reader036.fdocument.pub/reader036/viewer/2022071404/60f8bd84afe7b12443350138/html5/thumbnails/26.jpg)
Wer sind ihre Kunden?
Quelle: http://www.shutterstock.com/gallery-320989p1.html?cr=00&pl=edit-00
Mobile Traffic
Wie besuchen
Browser
Endgeräte
![Page 27: Responsive Design - Magentoinfo2.magento.com/rs/magentosoftware/images/Markus... · 2021. 1. 26. · Neuer Prozess Kick-Off Moodboards Style Tiles TTTTTTTTTT TTTTTTTTTT Testing Temlatedesign](https://reader036.fdocument.pub/reader036/viewer/2022071404/60f8bd84afe7b12443350138/html5/thumbnails/27.jpg)
Entwickeln Sie eine Content Strategie
Suchbegriffe
Priorisierung
Interaktionen überall
![Page 28: Responsive Design - Magentoinfo2.magento.com/rs/magentosoftware/images/Markus... · 2021. 1. 26. · Neuer Prozess Kick-Off Moodboards Style Tiles TTTTTTTTTT TTTTTTTTTT Testing Temlatedesign](https://reader036.fdocument.pub/reader036/viewer/2022071404/60f8bd84afe7b12443350138/html5/thumbnails/28.jpg)
Performance Massnahmen
Lazy Loading
Serverseitige
Technologien
Schlanker
Code
Open
Web Schriften
Third Party
Provider
![Page 29: Responsive Design - Magentoinfo2.magento.com/rs/magentosoftware/images/Markus... · 2021. 1. 26. · Neuer Prozess Kick-Off Moodboards Style Tiles TTTTTTTTTT TTTTTTTTTT Testing Temlatedesign](https://reader036.fdocument.pub/reader036/viewer/2022071404/60f8bd84afe7b12443350138/html5/thumbnails/29.jpg)
Success Stories 6
![Page 30: Responsive Design - Magentoinfo2.magento.com/rs/magentosoftware/images/Markus... · 2021. 1. 26. · Neuer Prozess Kick-Off Moodboards Style Tiles TTTTTTTTTT TTTTTTTTTT Testing Temlatedesign](https://reader036.fdocument.pub/reader036/viewer/2022071404/60f8bd84afe7b12443350138/html5/thumbnails/30.jpg)
Responsive Design seit 2012
58 % mehr Bestellungen
437 % Zunahme Umsatz iPhones
20,8 % Zunahme des AOV
![Page 31: Responsive Design - Magentoinfo2.magento.com/rs/magentosoftware/images/Markus... · 2021. 1. 26. · Neuer Prozess Kick-Off Moodboards Style Tiles TTTTTTTTTT TTTTTTTTTT Testing Temlatedesign](https://reader036.fdocument.pub/reader036/viewer/2022071404/60f8bd84afe7b12443350138/html5/thumbnails/31.jpg)
Standard Responsive Design
6 Wochen Realisierungszeitraum
![Page 32: Responsive Design - Magentoinfo2.magento.com/rs/magentosoftware/images/Markus... · 2021. 1. 26. · Neuer Prozess Kick-Off Moodboards Style Tiles TTTTTTTTTT TTTTTTTTTT Testing Temlatedesign](https://reader036.fdocument.pub/reader036/viewer/2022071404/60f8bd84afe7b12443350138/html5/thumbnails/32.jpg)
O‘NEILL +65,7% CR iPhone/iPod
Quelle: http://moboom.com/blog-post/4-responsive-design-success-stories-with-results-to-prove-it/
![Page 33: Responsive Design - Magentoinfo2.magento.com/rs/magentosoftware/images/Markus... · 2021. 1. 26. · Neuer Prozess Kick-Off Moodboards Style Tiles TTTTTTTTTT TTTTTTTTTT Testing Temlatedesign](https://reader036.fdocument.pub/reader036/viewer/2022071404/60f8bd84afe7b12443350138/html5/thumbnails/33.jpg)
Bench +100% CR
Quelle: https://econsultancy.com/blog/63185-14-brands-that-increased-conversion-rates-via-responsive-design#i.uqw3bspm6d2gwj
![Page 34: Responsive Design - Magentoinfo2.magento.com/rs/magentosoftware/images/Markus... · 2021. 1. 26. · Neuer Prozess Kick-Off Moodboards Style Tiles TTTTTTTTTT TTTTTTTTTT Testing Temlatedesign](https://reader036.fdocument.pub/reader036/viewer/2022071404/60f8bd84afe7b12443350138/html5/thumbnails/34.jpg)
start small grow big
Content rules!
![Page 35: Responsive Design - Magentoinfo2.magento.com/rs/magentosoftware/images/Markus... · 2021. 1. 26. · Neuer Prozess Kick-Off Moodboards Style Tiles TTTTTTTTTT TTTTTTTTTT Testing Temlatedesign](https://reader036.fdocument.pub/reader036/viewer/2022071404/60f8bd84afe7b12443350138/html5/thumbnails/35.jpg)
start small grow big
start small
grow big
![Page 36: Responsive Design - Magentoinfo2.magento.com/rs/magentosoftware/images/Markus... · 2021. 1. 26. · Neuer Prozess Kick-Off Moodboards Style Tiles TTTTTTTTTT TTTTTTTTTT Testing Temlatedesign](https://reader036.fdocument.pub/reader036/viewer/2022071404/60f8bd84afe7b12443350138/html5/thumbnails/36.jpg)
Next Generation Web…
?
? ? ? ?
?
? ? ?
? ? ?
? ? ? ?
?