Responsive Design & ecommerce

Transkript

1 Responsive Design & ecommerce Kassel, web n sale GmbH Jan Philipp Peter

2 Was bisher geschah

3 Was bisher geschah oder: Die mobile Evolution früher : - Lokale Nutzung - Zuhause oder im Büro - Wenige Monitorgrößen - Ähnliche Nutzungsarten - Mouse und Tastatur

4 Was bisher geschah oder: Die mobile Evolution Heute: - Lokale Nutzung - Mobile Nutzung - Duale Nutzung ( Second Screen ) - Große Anzahl an Displays für Web-Content - Mouse-Bedienung - Touch-Bedienung - Spracherkennung / Gestensteuerung

5 Was bisher geschah oder: Die mobile Evolution - Mehr mobile als lokale User - Ständig neue Hardware - User ohne Desktop-Computer -> Veränderte Gewohnheiten -> Veränderte Erwartungshaltung

6 Was bisher geschah oder: Die mobile Evolution 76% der Smartphone-Nutzer haben bereits nach einem Produkt oder einer Dienstleistung gesucht Quelle: Our Mobile Planet, Google 2013

7 Was bisher geschah oder: Die mobile Evolution Wo waren Sie, als Sie mit Ihrem Smartphone nach Produkten oder Dienstleistungen gesucht haben? 43% 34% 22% 18% 17% 14% 9% Zuhause Unterwegs In öffentlichen Verkehrsmitteln Bei der Arbeit Im Geschäft Im Café Im Restaurant Quelle: Our Mobile Planet, Google 2013

8 Was bisher geschah oder: Die mobile Evolution Spontanität spielt bei Einkäufen eine große Rolle: Smartphone PC / Laptop geplant 19% spontan 81% geplant 42% spontan 58% Quelle: The new multi-screen World, Google 2012

9 Was bisher geschah oder: Die mobile Evolution Nutzer wechseln während des Einkaufs das Endgerät: 65% der Wechsler starten mit einem Smartphone und schließen den Kauf dann zum Großteil am PC oder Laptop ab. Geteilte Aufmerksamkeit: 81% nutzen Ihr Smartphone gemeinsam mit dem Fernseher Quelle: The new multi-screen World, Google 2012

10 Was bisher geschah oder: Die mobile Evolution Zusammenfassung: - Nutzer sind ständig online und nutzen die Möglichkeiten des Internets ortsunabhängig - Potentielle Kunden müssen über mehrere Kanäle angesprochen und bedient werden - Der Kunde muss zwischen Endgeräten ohne große Hürden wechseln können - Das Tempo ist hoch es muss flexibel auf neue Innovationen reagiert werden

11 Und was machen wir jetzt?

12 Auf der Suche nach Antworten oder: Die Qual der Wahl Die wesentlichen Optionen: - mobile Websites - Native Apps - Responsive & Adaptive Websites (- Web-Apps)

13 Auf der Suche nach Antworten hier: mobile Websites - Nur online nutzbar - Unkomplizierter Aufruf über den Browser - Müssen separat gepflegt werden - Optimiert für eine bestimmte Displaygröße - Bieten wenig Funktionen Beispiel: m.deutschepost.de

14 Auf der Suche nach Antworten hier: native Apps - Offline nutzbar - Optimiert für eine bestimmte Displaygröße - Können monetarisiert werden - Download aus App-Stores notwendig - Müssen separat für jede Plattform gepflegt werden - Können nicht problemlos aktualisiert werden - Werden aktiver und länger genutzt - Haben Hardware-Zugriff - Komplexe Programmierung Beispiel: Zalando App für Android

15 Auf der Suche nach Antworten Zwischenfazit: - Mobile Websites sind technisch schnell einführbar, von Benutzern leicht zu bedienen, müssen jedoch separat gepflegt werden - Native Apps können Mehrwert bieten, haben jedoch für Nutzer hohe Einstiegshürden. Zudem ist die Entwicklung und laufende Pflege für die verschiedenen Plattformen sehr aufwändig

16 Auf der Suche nach Antworten hier: Responsive Websites - Nur online nutzbar - Unkomplizierter Aufruf über den Browser - Grundsätzlich gleicher Informationsgehalt für alle Geräte - Keine separate Pflege notwendig, problemlose Aktualisierung - Optimiert für jede/mehrere Displaygrößen, auch kommende

17 Klingt toll! Und wie funktioniert das?

18 Unser Problem: Fixe Layouts Sehr verbreitet (noch) Optimiert für bestimmten Viewport (z.b. die berühmten 1024x768px) Website hat eine feste Breite und verändert sich nicht Unkompliziert in Layout-Planung, Gestaltung, Programmierung und Pflege

19 Fixe Layouts Beispiel: Zalando / 1200x800px 1000 Pixel

20 Fixe Layouts Beispiel: Zalando / 480x320px

21 Fixe Layouts müssen weg. Werden wir also flexibler!

22 Spaltenraster Beispiel: Shopware Emotion - 20 Spalten - jeweils 30px Breite - 10px Abstände Problem: Wir mögen keine Pixel mehr

23 Spaltenraster Beispiel: Shopware Emotion Was wir also machen: relative Angaben - 20 Spalten - jeweils 3% Breite - 1% Abstände

24 Spaltenraster Beispiel: Shopware Emotion

25 Spaltenraster Beispiel: Shopware Emotion

26 Spaltenraster Beispiel: Shopware Emotion Weniger Spalten für kleinere Geräte Inhalte werden gestapelt

27 Inhalte planen und priorisieren Beispiel: WWF

28 Das zeichnet ein Responsive Design aus - Das Layout orientiert sich an einem flexiblen Spaltenraster, welches sich an die zur Verfügung stehende Bildschirmgröße anpasst - Alle Größenangaben (Bildgrößen, Seitenbreite, Schriftgrößen, ) sind nicht statisch, sondern immer relativ zum Viewport - Die Bedienung ist großen ( Smart TV ) und kleinen ( Einsteiger Smartphones ) gegeben Bedienung per Touch ist selbstverständlich

29 Zusammenarbeit mit Agenturen oder: Wie ein Responsive Design entwickelt wird

30 Zusammenarbeit mit Agenturen - Der klassische Prozess

31 Zusammenarbeit mit Agenturen - Der klassische Prozess Vorteile: - Gewohnheit - Lineare Bearbeitung: Abteilungen oder Mitarbeiter arbeiten unabhängig voneinander - Ablauf ist für alle beteiligten leicht zu verstehen Nachteile: - falsche Erwartungshaltung beim Auftraggeber durch gemalte -Photoshop-Designs - Hohe Anzahl von Wireframes und Designentwürfen notwendig - Interaktionen und Animationen lassen sich nicht oder nur schwer darstellen - Bei Änderungen am Gesamtdesign sind umfangreiche Korrekturen notwendig - Workflow ist durch den linearen Ablauf sehr langsam

32 Zusammenarbeit mit Agenturen - Der neue Workflow

33 Zusammenarbeit mit Agenturen - Der neue Workflow Vorteile: - Animationen und Interaktionen lassen sich in einer frühen Projektphase abbilden - Fehler in der Konzeption werden früh erkannt Nachteile: - Designer und Entwickler müssen nahtlos zusammenarbeiten - Höherer Abstimmungsaufwand zwischen Auftraggeber und Agentur - Design und Code können gleichzeitig bearbeitet werden - Durch den Prototypen ergeben sich Synergien in der Entwicklung

34 Zusammenarbeit mit Agenturen - Darauf sollten Sie achten - Echtes Responsive-Layout, nicht z.b. drei verschiedene Fixed-Layouts - Rückgriff auf vorhandene Technologien sorgt für langfristige Wirtschaftlichkeit das Rad muss nicht neu erfunden werden! - Die Agentur sollte alle notwendigen Arbeitsschritte inhouse abbilden können - Der Entwicklungsprozess sollte Tests mit zahlreichen Endgeräten umfassen

35 Responsive Design mit web n sale

36 Warum Sie sich für uns entscheiden sollten Keine Experimente: Jahrelange Erfahrung im ecommerce und der Template-Entwicklung Sorgfältig geplantes, getestetes und verbessertes Konzept

37 Warum Sie sich für uns entscheiden sollten Keine Kompromisse: Zahlreiche Funktionen sind im Prototypen bereits berücksichtigt: Blog, Liveshopping, Ansichtswechsel bei Kategorien,

38 Warum Sie sich für uns entscheiden sollten state of the art : modernste und bewährte Technologien der Webentwicklung HTML5 / CSS 3 Foundation Framework SASS jquery -> Zukunftssicher!

39 Warum Sie sich für uns entscheiden sollten Weiterentwicklung & Flexibilität: Modularer Aufbau System-unabhängig

40 Warum Sie sich für uns entscheiden sollten Im Rahmen von nur 10 Manntagen realisieren wir Ihren Responsiveplentymarkets-Shop (etwas länger dauert es für Shopware und Magento)

41 Und wie geht es weiter? Sprechen Sie uns an! Wir bieten Ihnen auf Wunsch gerne: - Eine persönliche Live-Demo unserer Technologie - Die Erstellung eines unverbindlichen und individuellen Angebots web n sale GmbH info@webnsale.com Heinz-Fangman-Str / Wuppertal webnsale.com