Modern Web Development 2019

Intelliact AG
Intelliact AGPLM Consultant and UX Engineer at Intelliact AG
Intelliact AG
Siewerdtstrasse 8
CH-8050 Zürich
T. +41 (44) 315 67 40
mail@intelliact.ch
www.intelliact.ch
Modern Web Development 2019
Marco Egli, Jonas Fahrni, 6. Juni 2019
INTERNET-BRIEFING
«Best Practices» anhand des «Compona Webshop»
Modern Web Development 2019
2
Modern …
… aber unpraktisch
und unflexibel
Marco Egli
Senior Consultant
Jonas Fahrni
CTO und Stv. GL Eyekon AG
Intelliact / Eyekon
VORSTELLUNG
3
Darum sind wir heute hier
EINLEITUNG
4
BOSW 2019
Gold in Technology
Silber in Digital Commerce
Bronze in Innovation
Shortlist für Usability
Masterkandidat
Darum sind wir heute hier
EINLEITUNG
5
Das Urteil der Jury
Die Shoplösung besticht durch Schnelligkeit und Zweckmässigkeit.
Im Vergleich zu gängigen Realisierungen ab Stange ist die Umsetzung
weitaus eleganter, was der Orchestrierung bestehender Cloud-Services
zu verdanken ist. Zudem glänzt sie mit sorgfältig gemachten Details wie
etwa der Filter- und Empfehlungsfunktion.
Das kluge und schlanke Design der Anwendung macht es möglich, dass
die über 40'000 Produkte für die Kundschaft extrem schnell und einfach
zugänglich sind.
MODERN WEBDEVELOPLMENT
Die Zutaten für ein herausragendes
Produkt
6
3 Profis in Ihren Gebieten
EINE PARTNERSCHAFTLICHE ZUSAMMENARBEIT
7
Compona
Kunden
Produkte
Erfahrung
Ziele
Eyekon
UX/UI
Frontend
Intelliact
Daten und
Strukturen
Datenlogik &
Prozesse
Darstellung
und
Produktion
User-Stories &
-Experience
Branding
Lösung
Erfolgsfaktoren
Ganzheitliche Projektsicht
Zielfokussiertes Vorgehen
Nutzerzentrierte Konzeption
Saubere Datenanalyse
Angemessenes Design
8
Moderne Webentwicklung
Ist lösungsorientiert
Ist user-centered
Ist Datenbasiert
Ist nicht Technologie getrieben
WEBDEVELOPLMENT – STATUS QUO
Wie läuft es heute in den
meisten Projekten?
9
Bestehender Tech-Stack in Unternehmen (ERP, PIM, PDM, ...)
Web-Lösung wird von etabliertem Anbieter übernommen oder als eigenständiges Silo
implementiert
Lange Feature-Liste blendet die effektiven Bedürfnisse aus
Silo-Denken (1 Aufgabe = 1 Software / Vertikal ausgerichtet)
«klassische» Stolpersteine
STATUS QUO
10
Compona Ausgangslage
11
Mengenlehre
12
Schnittmenge von A und B
Quelle: https://de.wikipedia.org/wiki/Mengenlehre
Menge ERP
13
ERP
Produkt-Stammdaten
Produktionsplanung
Angebote
Aufträge
Kunden & Vertriebskanäle
Lieferanten
Equipment
Finanzen & Personal & …
Menge PDM
14
ERPPDM
Produkt-Stammdaten
Dokumente
Funktionsstrukturen
Historie & …
Konfiguration
CAx-Modelle
Klassifikation
Menge PIM
15
ERPPDM
PIM
Dokumente
Konfiguration
Klassifikation Produkt-Stammdaten
Kunden & Vertriebskanäle
Content & Media
Schnittmengen: Menge PIM ohne PDM und ERP
16
ERPPDM
PIM
Konfiguration
Klassifikation
Produkt-Stammdaten
Produktionsplanung
Angebote
Aufträge
Kunden & Vertriebskanäle
Lieferanten
Equipment
Finanzen & Personal & …
Produkt-Stammdaten
Dokumente
Funktionsstrukturen
Historie & …
Konfiguration
CAx-Modelle
Klassifikation
Dokumente
Produkt-Stammdaten
Kunden & Vertriebskanäle
Content & Media
!
Ergänzen des Fehlenden!
17
ERPPDM
Produkt-Stammdaten
Produktionsplanung
Angebote
Aufträge
Kunden & Vertriebskanäle
Lieferanten
Equipment
Finanzen & Personal & …
Produkt-Stammdaten
Dokumente
Funktionsstrukturen
Historie & …
Konfiguration
CAx-Modelle
Klassifikation
Content & Media
Mit CMS und Webshop folgt die komplette Überdeckung
18
ERPPDM
PIM
CMS Webshop
Web-Katalog mit PIM und CMS und Webshop
Mit Software as a Service (SaaS) und Cloud-Funktionen
19
ERPPDM
Serverless Cloud Functions
Microservices
Unternehmens-
applikationen
Media Management
as a Service
Headless CMS
as a Service
Web-Katalog ohne PIM
AM BEISPIEL COMPONA
Wie macht man es besser?
Vorgehen: Von der Zielsetzung zur Webapplikation
INTELLIACT
21
Konzeption
→ Anforderungs-
definition
system-neutral system- und komponentenspezifisch
Evaluation
→ System-/
Komponentendefinition
Implementierung
→ Frontend + Backend
Ziel-Definition
Strategie
Definition
Personas,
Benutzergruppen
User Story Map, User
Flow (fachlich)
User Stories, Tasks,
Entities, Values
(fachlich)
UX Design: Story Board,
Wireframes
Anforderungs-
Spezifikation (System)
Evaluation
Komponenten
Schnittstellen-Definition
und –Spezifikation
Implementierungs-
Spezifikation
Umsetzung UI:
HTML/CSS
Navigation und Logik:
Javascript
State und Interface
Layer
Integration
Standardkomponenten
(Common Components)
Implementieren
Spezialkomponenten
(App Components)
Konfigurieren SaaS
Komponenten (Cloud
Components)
Ggf. fachliche
Erweiterung
Unternehmens-
applikationen
Vorgehen: Von der Zielsetzung zur Webapplikation
INTELLIACT
22
system-neutral system- und komponentenspezifisch
Evaluation
→ System-/
Komponentendefinition
Implementierung
→ Frontend + Backend
Ziel-Definition
Strategie
Definition
Personas,
Benutzergrupppen
User Story Map, User
Flow (fachlich)
User Stories, Tasks,
Entities, Values
(fachlich)
UX Design: Story Board,
Wireframes
Anforderungs-
Spezifikation (System)
Evaluation
Komponenten
Schnittstellen-Definition
und –Spezifikation
Implementierungs-
Spezifikation
Umsetzung UI:
HTML/CSS
Navigation und Logik:
Javascript
State und Interface
Layer
Integration
Standardkomponenten
(Common Components)
Implementieren
Spezialkomponenten
(App Components)
Konfigurieren SaaS
Komponenten (Cloud
Components)
Ggf. fachliche
Erweiterung
Unternehmens-
applikationen
Konzeption
→ Anforderungs-
definition
Start with «WHY»
Was/Wer bin ich?
Wie (will ich wahrgenommen werden)
Wen (will ich ansprechen)
Ziele (was will ich erreichen)
Mittel (womit)
Warum (mache ich das)
Eyekon Vorprojekt / Design-Sprint
23
Drill-Down über mehrere Stufen
Unterschiedliche Nutzergruppen
Einzelkäufer, Ingenieure (B2B, Prototypen)
künftig evtl. auch B2C
Strategische Einkäufer (Individuelle Preise, Mengenstaffelungen)
Interne Nutzer (Beratung)
Performance ist sehr wichtig
Ladezeiten und Zugänglichkeit
Beratungsfunktion
Integration Company-Informationen (CMS)
Resultate des Vorprojektes (gekürzt)
24
Unterschiedliche Datenmengen
37 Hersteller
z.T. nur ein oder zwei Unterelemente
Unterschiedliche Tiefe
Integrierte Suche
Kombinierbarkeit
Hierarchische Strukturen
BEISPIEL: DRILL-DOWN
1. Klassische Darstellung 2. Spezielle Herausforderungen
25
BEISPIEL: DRILL-DOWN
26
27
TreeFinder
Beispiel: Drill-Down
Vergleich von beliebigen Attributen
In der gewohnten Ansicht
Ohne zusätzlichen Arbeitsschritt
Konfigurierbare Spaltenansicht
Spaltensortierung innerhalb der
Darstellung
Produktvergleich
BEISPIEL: PRODUKTVERGLEICH
Herausforderung Lösung
28
Kombination von Produktvergleich, Filter und Navigation
BEISPIEL: PRODUKTVERGLEICH
Dynamische Anzeige der
Trefferzahl auch für
kombinierte Filter
Liste aller Suchtags
Benutzerspezifische Wahl
der gezeigten Spalten
Direktes Hinzufügen zum
Warenkorb oder zu
Merklisten möglich
30
Spaltensortierung
Beispiel: Drill-Down
Vorgehen: Von der Zielsetzung zur Webapplikation
INTELLIACT
31
system-neutral system- und komponentenspezifisch
Implementierung
→ Frontend + Backend
Ziel-Definition
Strategie
Definition
Personas
User Story Map, User
Flow (fachlich)
User Stories, Tasks,
Entities, Values
(fachlich)
UX Design: Story Board,
Wireframes
Anforderungs-
Spezifikation (System)
Evaluation
Komponenten
Schnittstellen-
Definition und –
Spezifikation
Implementierungs-
Spezifikation
Umsetzung UI:
HTML/CSS
Navigation und Logik:
Javascript
State und Interface
Layer
Integration
Standardkomponenten
(Common Components)
Implementieren
Spezialkomponenten
(App Components)
Konfigurieren SaaS
Komponenten (Cloud
Components)
Ggf. fachliche
Erweiterung
Unternehmens-
applikationen
Konzeption
→ Anforderungs-
definition
Evaluation
→ System-/
Komponentendefinition
Aus Produktdaten Mehrwert generieren
INTELLIACT
32
Market/UserneedsITBackend
PDM ERP XYZ
ABCMedia MAMContent CMS
Meistens sind die
Daten vorhanden,
jedoch oftmals nicht
in der für den Kunden
benötigten,
aufbereiteten Form.
Zunehmend beinhalten Applikationen redundante
Funktionen, wodurch auch redundante Daten entstehen
Search Engine 3D Visualisation Analytics
Different Lifecycles on Different Levels
33
Frontend
Market/Userneeds
Flexibility
Backend
ITorganizationsneeds
Stability
Client platforms
Frontend clients,
Applications and components
Server components,
Business logics for applications
Enterprise systems
Data storage (decades)
Server platforms
Lifecycle needs
Investment volumes
User Journeys (months)
„Der Sturm [Frontend, UX] gewinnt
Spiele, die Abwehr [Backend,
Architektur] Meisterschaften“
Jupp Heynkes
Vom Monolithen zu Cloud Functions
35
https://www.youtube.com/watch?v=aBcG57Gw9k0
Adrian Cockcroft on the Evolution of Business Logic from Monoliths, to Microservices, to Functions
Referenzarchitektur des Digitalen Produkts
INTELLIACT
Spare Parts AR Service
Tool
Digital CommerceProduct CatalogProduct
Information
XYZERPPDM
Authentication
Pub/Sub Messaging
Analytics
Cloud Functions
CDN
PDM ERP XYZ
Translation
Search Engine 3D VisualisationAttributs,
Descriptions
ABC
Payment
Enterprise Applications
Applications and Services
IoT Asset IoT Asset
Big Data
UXUserExperience
Media MAMContent CMS
IAAS
SAAS
PAAS
SAAS
Services, API, Product Centric Developer Portal
App Components
Clients Use Case Driven Apps Business Case Driven Apps
Common Components
OPCUA
Access Control
Microservices
Configuration
RPC, SOAP, REST, GraphQL
DXDeveloperExperience
HTTPS, MQTTHTTPSHTTPS, FILE
Anwendungsfall Produktkatalog
INTELLIACT
Product Catalog
ERP
Attributs,
Descriptions
Payment
Media MAMContent CMS
Authentication Translation
Vorgehen: Von der Zielsetzung zur Webapplikation
INTELLIACT
38
system- und komponentenspezifisch
Implementierung
→ Frontend + Backend
Personas
User Story Map,
User Flow (fachlich)
User Stories, Tasks,
Entities, Values
(fachlich)
UX Design: Story
Board, Wireframes
Anforderungs-
Spezifikation
(System)
Evaluation
Komponenten
Schnittstellen-
Definition und
-Spezifikation
Implementierungs-
Spezifikation
Umsetzung UI:
HTML/CSS
Navigation und Logik:
Javascript
State und Interface
Layer
Integration
Standardkomponenten
(Common Components)
Implementieren
Spezialkomponenten
(App Components)
Konfigurieren SaaS
Komponenten (Cloud
Components)
Ggf. fachliche
Erweiterung
Unternehmens-
applikationen
Konzeption
→ Anforderungs-
definition
Evaluation
→ System-/
Komponentendefinition
Projektbeispiel: Produktkatalog (inkl. eCommerce)
EVALUATION
27
Genesis
Invisible
Reifegrad
WertschöpfungsketteVisible
Custom Product (and rental) Commodity (and utility)
Hierarchische Navigation in Kategorien
Entwicklungsing. (extern, Kunde) Verkauf (intern, Mitarbeiter)
Vollständige ProduktinformationWarenkorb
Checkout Unstruktrierte Suche
Produktdarstellung
Web-App
Common Web-App Components
Order Management (ERP)
Image Management and CDN
Payment Solution
Translation Memory
Master Data Management (PIM)
Product Data Search
Datasheet Storage
Internal Web-App Components
Authentication & User Management
Wardley Map: Wie entsteht aus Daten Nutzen?
39
https://www.youtube.com/watch?v=oZZKjxeg5W0
Wardley Map: Wie entsteht aus Daten Nutzen?
40
Genesis
Invisible
Reifegrad
WertschöpfungsketteVisible
Custom Product (and rental) Commodity (and utility)
Need
User User User
Need
Component
Component
Component
ComponentComponent
Component
Component
Reifegradbewertung für Komponenten
41
Genesis
Invisible
Reifegrad
WertschöpfungsketteVisible
Custom Product (and rental) Commodity (and utility)
Reference: https://evolve.hiredthought.com/
Einordnungsbeispiele
42
Genesis
Invisible
Reifegrad
WertschöpfungsketteVisible
Custom Product (and rental) Commodity (and utility)
New Super Ninja App
Big Data Storage
Competitive Advantage
Differential
Changing
Volume Operations
Operational Efficiency
Stable
Projektbeispiel: Benutzergruppen und User Journeys
43
Genesis
Invisible
Reifegrad
WertschöpfungsketteVisible
Custom Product (and rental) Commodity (and utility)
Hierarchische Navigation in Kategorien
Entwicklungsing. (extern, Kunde) Verkauf (intern, Mitarbeiter)
Vollständige ProduktinformationWarenkorb
Checkout Unstruktrierte Suche
Produktdarstellung
Projektbeispiel: Basisbausteine, Komponenten der App
44
Genesis
Invisible
Reifegrad
WertschöpfungsketteVisible
Custom Product (and rental) Commodity (and utility)
Order Management (ERP)
Image Management and CDN
Translation Memory
Master Data Management (PIM)
Product Data Search
Datasheet Storage
Authentication & User Management
Projektbeispiel: Produktkatalog (inkl. eCommerce)
45
Genesis
Invisible
Reifegrad
WertschöpfungsketteVisible
Custom Product (and rental) Commodity (and utility)
Hierarchische Navigation in Kategorien
Entwicklungsing. (extern, Kunde) Verkauf (intern, Mitarbeiter)
Vollständige ProduktinformationWarenkorb
Checkout Unstruktrierte Suche
Produktdarstellung
Web-App
Common Web-App Components
Order Management (ERP)
Image Management and CDN
Payment Solution
Translation Memory
Master Data Management (PIM)
Product Data Search
Datasheet Storage
Internal Web-App Components
Authentication & User Management
Compona Application Components
KONZEPTION UND ARCHITEKTUR
Frontend: React + Redux
https://reactjs.org/
A JavaScript library for building user interfaces
https://redux.js.org/
A predictable state container for JavaScript apps
▪ Complete separation of frontend data and view
▪ Complete separation from server, runs as an app
▪ Ready for any service interface (REST, JSON-RPC, GraphQL)
▪ Widely used with good documentation
▪ Mature routing libs available
▪ Isomorphic Rendering (for SEO) possible
Evaluated alternatives: Ember, Angular
Compona Application Components
KONZEPTION UND ARCHITEKTUR
Frontend Development: Typescript + Webpack
https://www.typescriptlang.org/
A typed superset of JavaScript that compiles to plain Javascript
https://webpack.js.org/
A static module bundler for modern JavaScript applications
▪ Selectable taget JS version (eg. ES5 for IE11)
▪ Linting with Tslink
▪ Perfect fit with React and Redux
▪ Dynamic module loading
▪ Small delivery packet sizes (<300 kB JS, <50 kB CSS)
Evaluated alternatives: none
Compona Application Components
KONZEPTION UND ARCHITEKTUR
Product Data Search: Algolia
https://www.algolia.com/
Cloud database for products
▪ $150 pMt (50k products)
▪ 20 –50 ms response time
▪ Synonyms: 5k
▪ Maximum Queries Per Second: 75*
▪ Maximum size per record: 20 KB
▪ Insights: Popularity & Zero-Result Searches
▪ Filters and Facets
▪ Custom Ranking
▪ Transparent Relevancy
Evaluated alternative: Self hosted Solr database
Compona Application Components
KONZEPTION UND ARCHITEKTUR
Image CDN: ImgIX
https://www.imgix.com/
Content Delivery Network for images: transforms, optimizes, and intelligently
caches the entire image library for fast websites and apps using simple and robust
URL parameters.
▪ $3 per 1,000 master images accessed each month. 8¢ per GB of CDN
bandwidth for images delivered each month.
▪ Easy setup
▪ Fast image delivery & compression and performance.
▪ Image processing on demand (filters, resizing, blur and more as url
parameters)
▪ Smart resizing & cropping
▪ Dynamic text overlays & metadata operations
Evaluated alternative: Cloudinary
Compona Application Components
KONZEPTION UND ARCHITEKTUR
Headless CMS: Kirby
https://getkirby.com/
Kirby is a file-based CMS. Easy to setup. Easy to use. Flexible as hell.
▪ Instant installation
▪ Can be used as a headless CMS
▪ No database
▪ Markdown syntax
Evaluated alternatives: none
Compona Application Components
KONZEPTION UND ARCHITEKTUR
Chat as a Service: Olark
https://www.olark.com/
Live Chat to connect to the right customer, in the right place, at the right
time
▪ $15 per agent pMt
▪ Concurrent chats: unlimited
▪ Offline Messaging
▪ Widget unbranding: 8+ agents
▪ Live chat metrics
▪ Engage customers in real time
▪ Visited pages of the user
▪ Advanced user information
Evaluated alternative: Zopim
Compona Application Components
KONZEPTION UND ARCHITEKTUR
Payment Solution: Datatrans
https://www.datatrans.ch/
Der Schweizer Spezialist für komplexe E-Payment-Projekte. Innovativ und
flexibel.
▪ CHF 50 pMt plus Transaktionsgebühr
(CHF 0.3) bei eCom Professional
▪ Zahlungsmittel International
▪ Zahlungsmittel Schweiz
▪ Managementportal vorhanden
▪ Viele Integrationsmöglichkeiten
▪ Angebot nur über Kontakt
▪ Exkl. Akzeptanzverträge mit Finanzinstituten (Acquirern)
Evaluated alternatives: SIX, Postfinance
Compona Application Components
KONZEPTION UND ARCHITEKTUR
Prerenderer: Prerender
https://prerender.com/
Retrieve HTML, Screenshots, PDFs or HAR Files from any Webpage
▪ $5 pMt + $1 per 1000 requests
▪ HTML for Non-Google-Bots
▪ Execute custom Javascript
▪ Configurable screen size
Evaluated alternatives: Prerender.io, Prerender.cloud
PRERENDER
Compona Application Components
KONZEPTION UND ARCHITEKTUR
Analytics & Advertising: Google
https://www.google.com/about/products/
Projektbeispiel: Vorteile und Potentiale
56
Genesis
Invisible
Reifegrad
WertschöpfungsketteVisible
Custom Product (and rental) Commodity (and utility)
Hierarchische Navigation in Kategorien
Entwicklungsing. (extern, Kunde) Verkaufsinnendienst (intern, Mitarbeiter)
Vollstänige ProduktinformationWarenkorb
Checkout Unstruktrierte Suche
Klassifikationsmerkmale mit Filtermöglichkeiten
Produktdarstellung
Web-App
Common Web-App Components
Chat Component
Authentication & User Management
Order Management (ERP)
Image Management and CDN
Internal Web-App Components
Payment Solution
Translation Memory
Master Data Management (PIM)
Product Data Search
Datasheet Storage
Viele Komponenten ohne Customizing
Potential für Commodity
Nutzung bestehender Komponenten ausgebaut
Kaum Funktionsredundanz
Best in Class Komponenten
Vorgehen: Von der Zielsetzung zur Webapplikation
INTELLIACT
57
system-neutral system- und komponentenspezifisch
Ziel-Definition
Strategie
Definition
Personas
User Story Map, User
Flow (fachlich)
User Stories, Tasks,
Entities, Values
(fachlich)
UX Design: Story Board,
Wireframes
Anforderungs-
Spezifikation (System)
Evaluation
Komponenten
Schnittstellen-Definition
und –Spezifikation
Implementierungs-
Spezifikation
Umsetzung UI:
HTML/CSS
Navigation und Logik:
Javascript
State und Interface
Layer
Integration
Standardkomponenten
(Common Components)
Implementieren
Spezialkomponenten (App
Components)
Konfigurieren SaaS
Komponenten (Cloud
Components)
Ggf. fachliche Erweiterung
Unternehmens-applikationen
Konzeption
→ Anforderungs-
definition
Evaluation
→ System-/
Komponentendefinition
Implementierung
→ Frontend + Backend
AM BEISPIEL COMPONA
Zusammenfassung
«Change it, change it!»
William Shakespeare
Die ursprüngliche Fragestellung
«Welche Technologien sind
modern?» ist ungeschickt.
Moderne Webentwicklung ist keine
Technologiefrage sondern die
Frage nach Funktionen und
Services!
Modern Web Development ist vor allem
flexibel und anpassungsfähig
Veränderungsprojekte statt
Technologieprojekte!
Vielen Dank für Ihre Aufmerksamkeit
Kreative PLM-Konzepter, unabhängig und darauf spezialisiert, Ihre
Produktdaten zu echten Teamplayern zu machen, um Mehrwerte zu
schaffen.
Intelliact AG
BOSSARD AG
66
Bringen Sie Produkte & neue Digitale Services effizienter auf den Markt
«MAKE YOUR DATA WORK TOGETHER»
67Quelle: https://intelliact.ch/
Mehr als 20 Jahre Erfahrung im Umgang mit Produktdaten (fachlich und technologisch)
Ausgewiesene Erfahrung in der Konzeption, Evaluation, Umsetzung von
Unternehmensapplikationen im Bereich Produktdaten
Ausgewiesene Erfahrung in der Konzeption und Umsetzung von Webapplikationen, um aus
Produktdaten Mehrwert zu schaffen.
Unabhängigkeit, sich in jedem Fall für die optimalste Lösung zu entscheiden
Warum Intelliact?
INTELLIACT
68
69
WIR SIND
INTELLIACT
Seit über
20 Jahren
Intelliact Team: https://intelliact.ch/team
17 kreative
Köpfe
We make your
data work
together
Nehmen Sie Kontakt mit mir auf
WAS SIND IHRE HERAUSFORDERUNGEN?
70
Marco Egli
Senior Consultant
Dipl. Masch.-Ing. ETH
+41 443 156 743
egli@intelliact.ch
Eyekon AG
Quellenstrasse 27
CH 8005 Zürich
T +41 (0)43 444 77 77
hello@eyekon.ch
www.eyekon.ch
72
73
Angebot
38
Corporate- und E-Business Websites
und Portale
Crossmedia Kampagnen, Marketing-
Kommunikation, Social Media Kampagnen
Interactive- und Multimedia Anwendungen,
Microsites, POS
Mobile- und Web-Apps, digitale Services,
Konfiguratoren, Kataloge
74
75
Client list
40
76
Agentur Ranking
41
Rang Firma Total Punkte 2015–2019
1 Hinderling Volkart 176.5
2 Jung von Matt / Limmat 137.83
3 Unic 121.66
4 Liip 93.30
5 Notch Interactive 80.50
6 Namics 73.20
7 Equipe 69.00
8 Eyekon 41.50
9 Wirz 38.50
10 Dreipol 37.50
Top 10 der 100 erfolgreichsten Agenturen
von Best of Swiss Web 2015 – 2019
77
1 of 75

More Related Content

What's hot(20)

IT-Architektur für Digital CommerceIT-Architektur für Digital Commerce
IT-Architektur für Digital Commerce
Intelliact AG4.9K views
CAD in the CloudCAD in the Cloud
CAD in the Cloud
Intelliact AG9.1K views
PLM-Architektur der ZukunftPLM-Architektur der Zukunft
PLM-Architektur der Zukunft
Intelliact AG12.2K views
PDM-Datenmigration mit CAD-WechselPDM-Datenmigration mit CAD-Wechsel
PDM-Datenmigration mit CAD-Wechsel
Intelliact AG10.2K views
DOAG BPM SIG 2009DOAG BPM SIG 2009
DOAG BPM SIG 2009
kriweber1.9K views
Webinar: Reporting mit SAP S4/HANAWebinar: Reporting mit SAP S4/HANA
Webinar: Reporting mit SAP S4/HANA
CONOGY GmbH949 views

Similar to Modern Web Development 2019(20)

headless_nicht_kopflos_final.pptxheadless_nicht_kopflos_final.pptx
headless_nicht_kopflos_final.pptx
Mathias Kossmann55 views
Business Platform 3DEXPERIENCE 2019Business Platform 3DEXPERIENCE 2019
Business Platform 3DEXPERIENCE 2019
SQL Projekt AG926 views
Jochen Schafberger (evidanza)Jochen Schafberger (evidanza)
Jochen Schafberger (evidanza)
Praxistage66 views
Office 365 Akademie News - April 19Office 365 Akademie News - April 19
Office 365 Akademie News - April 19
Thomas Maier1.8K views
Strategisches & kanalübergreifendes KPI FrameworkStrategisches & kanalübergreifendes KPI Framework
Strategisches & kanalübergreifendes KPI Framework
Namics – A Merkle Company4.1K views

Modern Web Development 2019

  • 1. Intelliact AG Siewerdtstrasse 8 CH-8050 Zürich T. +41 (44) 315 67 40 mail@intelliact.ch www.intelliact.ch Modern Web Development 2019 Marco Egli, Jonas Fahrni, 6. Juni 2019 INTERNET-BRIEFING «Best Practices» anhand des «Compona Webshop»
  • 2. Modern Web Development 2019 2 Modern … … aber unpraktisch und unflexibel
  • 3. Marco Egli Senior Consultant Jonas Fahrni CTO und Stv. GL Eyekon AG Intelliact / Eyekon VORSTELLUNG 3
  • 4. Darum sind wir heute hier EINLEITUNG 4
  • 5. BOSW 2019 Gold in Technology Silber in Digital Commerce Bronze in Innovation Shortlist für Usability Masterkandidat Darum sind wir heute hier EINLEITUNG 5 Das Urteil der Jury Die Shoplösung besticht durch Schnelligkeit und Zweckmässigkeit. Im Vergleich zu gängigen Realisierungen ab Stange ist die Umsetzung weitaus eleganter, was der Orchestrierung bestehender Cloud-Services zu verdanken ist. Zudem glänzt sie mit sorgfältig gemachten Details wie etwa der Filter- und Empfehlungsfunktion. Das kluge und schlanke Design der Anwendung macht es möglich, dass die über 40'000 Produkte für die Kundschaft extrem schnell und einfach zugänglich sind.
  • 6. MODERN WEBDEVELOPLMENT Die Zutaten für ein herausragendes Produkt 6
  • 7. 3 Profis in Ihren Gebieten EINE PARTNERSCHAFTLICHE ZUSAMMENARBEIT 7 Compona Kunden Produkte Erfahrung Ziele Eyekon UX/UI Frontend Intelliact Daten und Strukturen Datenlogik & Prozesse Darstellung und Produktion User-Stories & -Experience Branding Lösung Erfolgsfaktoren Ganzheitliche Projektsicht Zielfokussiertes Vorgehen Nutzerzentrierte Konzeption Saubere Datenanalyse Angemessenes Design
  • 8. 8 Moderne Webentwicklung Ist lösungsorientiert Ist user-centered Ist Datenbasiert Ist nicht Technologie getrieben
  • 9. WEBDEVELOPLMENT – STATUS QUO Wie läuft es heute in den meisten Projekten? 9
  • 10. Bestehender Tech-Stack in Unternehmen (ERP, PIM, PDM, ...) Web-Lösung wird von etabliertem Anbieter übernommen oder als eigenständiges Silo implementiert Lange Feature-Liste blendet die effektiven Bedürfnisse aus Silo-Denken (1 Aufgabe = 1 Software / Vertikal ausgerichtet) «klassische» Stolpersteine STATUS QUO 10
  • 12. Mengenlehre 12 Schnittmenge von A und B Quelle: https://de.wikipedia.org/wiki/Mengenlehre
  • 13. Menge ERP 13 ERP Produkt-Stammdaten Produktionsplanung Angebote Aufträge Kunden & Vertriebskanäle Lieferanten Equipment Finanzen & Personal & …
  • 16. Schnittmengen: Menge PIM ohne PDM und ERP 16 ERPPDM PIM Konfiguration Klassifikation Produkt-Stammdaten Produktionsplanung Angebote Aufträge Kunden & Vertriebskanäle Lieferanten Equipment Finanzen & Personal & … Produkt-Stammdaten Dokumente Funktionsstrukturen Historie & … Konfiguration CAx-Modelle Klassifikation Dokumente Produkt-Stammdaten Kunden & Vertriebskanäle Content & Media !
  • 17. Ergänzen des Fehlenden! 17 ERPPDM Produkt-Stammdaten Produktionsplanung Angebote Aufträge Kunden & Vertriebskanäle Lieferanten Equipment Finanzen & Personal & … Produkt-Stammdaten Dokumente Funktionsstrukturen Historie & … Konfiguration CAx-Modelle Klassifikation Content & Media
  • 18. Mit CMS und Webshop folgt die komplette Überdeckung 18 ERPPDM PIM CMS Webshop Web-Katalog mit PIM und CMS und Webshop
  • 19. Mit Software as a Service (SaaS) und Cloud-Funktionen 19 ERPPDM Serverless Cloud Functions Microservices Unternehmens- applikationen Media Management as a Service Headless CMS as a Service Web-Katalog ohne PIM
  • 20. AM BEISPIEL COMPONA Wie macht man es besser?
  • 21. Vorgehen: Von der Zielsetzung zur Webapplikation INTELLIACT 21 Konzeption → Anforderungs- definition system-neutral system- und komponentenspezifisch Evaluation → System-/ Komponentendefinition Implementierung → Frontend + Backend Ziel-Definition Strategie Definition Personas, Benutzergruppen User Story Map, User Flow (fachlich) User Stories, Tasks, Entities, Values (fachlich) UX Design: Story Board, Wireframes Anforderungs- Spezifikation (System) Evaluation Komponenten Schnittstellen-Definition und –Spezifikation Implementierungs- Spezifikation Umsetzung UI: HTML/CSS Navigation und Logik: Javascript State und Interface Layer Integration Standardkomponenten (Common Components) Implementieren Spezialkomponenten (App Components) Konfigurieren SaaS Komponenten (Cloud Components) Ggf. fachliche Erweiterung Unternehmens- applikationen
  • 22. Vorgehen: Von der Zielsetzung zur Webapplikation INTELLIACT 22 system-neutral system- und komponentenspezifisch Evaluation → System-/ Komponentendefinition Implementierung → Frontend + Backend Ziel-Definition Strategie Definition Personas, Benutzergrupppen User Story Map, User Flow (fachlich) User Stories, Tasks, Entities, Values (fachlich) UX Design: Story Board, Wireframes Anforderungs- Spezifikation (System) Evaluation Komponenten Schnittstellen-Definition und –Spezifikation Implementierungs- Spezifikation Umsetzung UI: HTML/CSS Navigation und Logik: Javascript State und Interface Layer Integration Standardkomponenten (Common Components) Implementieren Spezialkomponenten (App Components) Konfigurieren SaaS Komponenten (Cloud Components) Ggf. fachliche Erweiterung Unternehmens- applikationen Konzeption → Anforderungs- definition
  • 23. Start with «WHY» Was/Wer bin ich? Wie (will ich wahrgenommen werden) Wen (will ich ansprechen) Ziele (was will ich erreichen) Mittel (womit) Warum (mache ich das) Eyekon Vorprojekt / Design-Sprint 23
  • 24. Drill-Down über mehrere Stufen Unterschiedliche Nutzergruppen Einzelkäufer, Ingenieure (B2B, Prototypen) künftig evtl. auch B2C Strategische Einkäufer (Individuelle Preise, Mengenstaffelungen) Interne Nutzer (Beratung) Performance ist sehr wichtig Ladezeiten und Zugänglichkeit Beratungsfunktion Integration Company-Informationen (CMS) Resultate des Vorprojektes (gekürzt) 24
  • 25. Unterschiedliche Datenmengen 37 Hersteller z.T. nur ein oder zwei Unterelemente Unterschiedliche Tiefe Integrierte Suche Kombinierbarkeit Hierarchische Strukturen BEISPIEL: DRILL-DOWN 1. Klassische Darstellung 2. Spezielle Herausforderungen 25
  • 28. Vergleich von beliebigen Attributen In der gewohnten Ansicht Ohne zusätzlichen Arbeitsschritt Konfigurierbare Spaltenansicht Spaltensortierung innerhalb der Darstellung Produktvergleich BEISPIEL: PRODUKTVERGLEICH Herausforderung Lösung 28
  • 29. Kombination von Produktvergleich, Filter und Navigation BEISPIEL: PRODUKTVERGLEICH Dynamische Anzeige der Trefferzahl auch für kombinierte Filter Liste aller Suchtags Benutzerspezifische Wahl der gezeigten Spalten Direktes Hinzufügen zum Warenkorb oder zu Merklisten möglich
  • 31. Vorgehen: Von der Zielsetzung zur Webapplikation INTELLIACT 31 system-neutral system- und komponentenspezifisch Implementierung → Frontend + Backend Ziel-Definition Strategie Definition Personas User Story Map, User Flow (fachlich) User Stories, Tasks, Entities, Values (fachlich) UX Design: Story Board, Wireframes Anforderungs- Spezifikation (System) Evaluation Komponenten Schnittstellen- Definition und – Spezifikation Implementierungs- Spezifikation Umsetzung UI: HTML/CSS Navigation und Logik: Javascript State und Interface Layer Integration Standardkomponenten (Common Components) Implementieren Spezialkomponenten (App Components) Konfigurieren SaaS Komponenten (Cloud Components) Ggf. fachliche Erweiterung Unternehmens- applikationen Konzeption → Anforderungs- definition Evaluation → System-/ Komponentendefinition
  • 32. Aus Produktdaten Mehrwert generieren INTELLIACT 32 Market/UserneedsITBackend PDM ERP XYZ ABCMedia MAMContent CMS Meistens sind die Daten vorhanden, jedoch oftmals nicht in der für den Kunden benötigten, aufbereiteten Form. Zunehmend beinhalten Applikationen redundante Funktionen, wodurch auch redundante Daten entstehen Search Engine 3D Visualisation Analytics
  • 33. Different Lifecycles on Different Levels 33 Frontend Market/Userneeds Flexibility Backend ITorganizationsneeds Stability Client platforms Frontend clients, Applications and components Server components, Business logics for applications Enterprise systems Data storage (decades) Server platforms Lifecycle needs Investment volumes User Journeys (months)
  • 34. „Der Sturm [Frontend, UX] gewinnt Spiele, die Abwehr [Backend, Architektur] Meisterschaften“ Jupp Heynkes
  • 35. Vom Monolithen zu Cloud Functions 35 https://www.youtube.com/watch?v=aBcG57Gw9k0 Adrian Cockcroft on the Evolution of Business Logic from Monoliths, to Microservices, to Functions
  • 36. Referenzarchitektur des Digitalen Produkts INTELLIACT Spare Parts AR Service Tool Digital CommerceProduct CatalogProduct Information XYZERPPDM Authentication Pub/Sub Messaging Analytics Cloud Functions CDN PDM ERP XYZ Translation Search Engine 3D VisualisationAttributs, Descriptions ABC Payment Enterprise Applications Applications and Services IoT Asset IoT Asset Big Data UXUserExperience Media MAMContent CMS IAAS SAAS PAAS SAAS Services, API, Product Centric Developer Portal App Components Clients Use Case Driven Apps Business Case Driven Apps Common Components OPCUA Access Control Microservices Configuration RPC, SOAP, REST, GraphQL DXDeveloperExperience HTTPS, MQTTHTTPSHTTPS, FILE
  • 38. Vorgehen: Von der Zielsetzung zur Webapplikation INTELLIACT 38 system- und komponentenspezifisch Implementierung → Frontend + Backend Personas User Story Map, User Flow (fachlich) User Stories, Tasks, Entities, Values (fachlich) UX Design: Story Board, Wireframes Anforderungs- Spezifikation (System) Evaluation Komponenten Schnittstellen- Definition und -Spezifikation Implementierungs- Spezifikation Umsetzung UI: HTML/CSS Navigation und Logik: Javascript State und Interface Layer Integration Standardkomponenten (Common Components) Implementieren Spezialkomponenten (App Components) Konfigurieren SaaS Komponenten (Cloud Components) Ggf. fachliche Erweiterung Unternehmens- applikationen Konzeption → Anforderungs- definition Evaluation → System-/ Komponentendefinition Projektbeispiel: Produktkatalog (inkl. eCommerce) EVALUATION 27 Genesis Invisible Reifegrad WertschöpfungsketteVisible Custom Product (and rental) Commodity (and utility) Hierarchische Navigation in Kategorien Entwicklungsing. (extern, Kunde) Verkauf (intern, Mitarbeiter) Vollständige ProduktinformationWarenkorb Checkout Unstruktrierte Suche Produktdarstellung Web-App Common Web-App Components Order Management (ERP) Image Management and CDN Payment Solution Translation Memory Master Data Management (PIM) Product Data Search Datasheet Storage Internal Web-App Components Authentication & User Management
  • 39. Wardley Map: Wie entsteht aus Daten Nutzen? 39 https://www.youtube.com/watch?v=oZZKjxeg5W0
  • 40. Wardley Map: Wie entsteht aus Daten Nutzen? 40 Genesis Invisible Reifegrad WertschöpfungsketteVisible Custom Product (and rental) Commodity (and utility) Need User User User Need Component Component Component ComponentComponent Component Component
  • 41. Reifegradbewertung für Komponenten 41 Genesis Invisible Reifegrad WertschöpfungsketteVisible Custom Product (and rental) Commodity (and utility) Reference: https://evolve.hiredthought.com/
  • 42. Einordnungsbeispiele 42 Genesis Invisible Reifegrad WertschöpfungsketteVisible Custom Product (and rental) Commodity (and utility) New Super Ninja App Big Data Storage Competitive Advantage Differential Changing Volume Operations Operational Efficiency Stable
  • 43. Projektbeispiel: Benutzergruppen und User Journeys 43 Genesis Invisible Reifegrad WertschöpfungsketteVisible Custom Product (and rental) Commodity (and utility) Hierarchische Navigation in Kategorien Entwicklungsing. (extern, Kunde) Verkauf (intern, Mitarbeiter) Vollständige ProduktinformationWarenkorb Checkout Unstruktrierte Suche Produktdarstellung
  • 44. Projektbeispiel: Basisbausteine, Komponenten der App 44 Genesis Invisible Reifegrad WertschöpfungsketteVisible Custom Product (and rental) Commodity (and utility) Order Management (ERP) Image Management and CDN Translation Memory Master Data Management (PIM) Product Data Search Datasheet Storage Authentication & User Management
  • 45. Projektbeispiel: Produktkatalog (inkl. eCommerce) 45 Genesis Invisible Reifegrad WertschöpfungsketteVisible Custom Product (and rental) Commodity (and utility) Hierarchische Navigation in Kategorien Entwicklungsing. (extern, Kunde) Verkauf (intern, Mitarbeiter) Vollständige ProduktinformationWarenkorb Checkout Unstruktrierte Suche Produktdarstellung Web-App Common Web-App Components Order Management (ERP) Image Management and CDN Payment Solution Translation Memory Master Data Management (PIM) Product Data Search Datasheet Storage Internal Web-App Components Authentication & User Management
  • 46. Compona Application Components KONZEPTION UND ARCHITEKTUR Frontend: React + Redux https://reactjs.org/ A JavaScript library for building user interfaces https://redux.js.org/ A predictable state container for JavaScript apps ▪ Complete separation of frontend data and view ▪ Complete separation from server, runs as an app ▪ Ready for any service interface (REST, JSON-RPC, GraphQL) ▪ Widely used with good documentation ▪ Mature routing libs available ▪ Isomorphic Rendering (for SEO) possible Evaluated alternatives: Ember, Angular
  • 47. Compona Application Components KONZEPTION UND ARCHITEKTUR Frontend Development: Typescript + Webpack https://www.typescriptlang.org/ A typed superset of JavaScript that compiles to plain Javascript https://webpack.js.org/ A static module bundler for modern JavaScript applications ▪ Selectable taget JS version (eg. ES5 for IE11) ▪ Linting with Tslink ▪ Perfect fit with React and Redux ▪ Dynamic module loading ▪ Small delivery packet sizes (<300 kB JS, <50 kB CSS) Evaluated alternatives: none
  • 48. Compona Application Components KONZEPTION UND ARCHITEKTUR Product Data Search: Algolia https://www.algolia.com/ Cloud database for products ▪ $150 pMt (50k products) ▪ 20 –50 ms response time ▪ Synonyms: 5k ▪ Maximum Queries Per Second: 75* ▪ Maximum size per record: 20 KB ▪ Insights: Popularity & Zero-Result Searches ▪ Filters and Facets ▪ Custom Ranking ▪ Transparent Relevancy Evaluated alternative: Self hosted Solr database
  • 49. Compona Application Components KONZEPTION UND ARCHITEKTUR Image CDN: ImgIX https://www.imgix.com/ Content Delivery Network for images: transforms, optimizes, and intelligently caches the entire image library for fast websites and apps using simple and robust URL parameters. ▪ $3 per 1,000 master images accessed each month. 8¢ per GB of CDN bandwidth for images delivered each month. ▪ Easy setup ▪ Fast image delivery & compression and performance. ▪ Image processing on demand (filters, resizing, blur and more as url parameters) ▪ Smart resizing & cropping ▪ Dynamic text overlays & metadata operations Evaluated alternative: Cloudinary
  • 50. Compona Application Components KONZEPTION UND ARCHITEKTUR Headless CMS: Kirby https://getkirby.com/ Kirby is a file-based CMS. Easy to setup. Easy to use. Flexible as hell. ▪ Instant installation ▪ Can be used as a headless CMS ▪ No database ▪ Markdown syntax Evaluated alternatives: none
  • 51. Compona Application Components KONZEPTION UND ARCHITEKTUR Chat as a Service: Olark https://www.olark.com/ Live Chat to connect to the right customer, in the right place, at the right time ▪ $15 per agent pMt ▪ Concurrent chats: unlimited ▪ Offline Messaging ▪ Widget unbranding: 8+ agents ▪ Live chat metrics ▪ Engage customers in real time ▪ Visited pages of the user ▪ Advanced user information Evaluated alternative: Zopim
  • 52. Compona Application Components KONZEPTION UND ARCHITEKTUR Payment Solution: Datatrans https://www.datatrans.ch/ Der Schweizer Spezialist für komplexe E-Payment-Projekte. Innovativ und flexibel. ▪ CHF 50 pMt plus Transaktionsgebühr (CHF 0.3) bei eCom Professional ▪ Zahlungsmittel International ▪ Zahlungsmittel Schweiz ▪ Managementportal vorhanden ▪ Viele Integrationsmöglichkeiten ▪ Angebot nur über Kontakt ▪ Exkl. Akzeptanzverträge mit Finanzinstituten (Acquirern) Evaluated alternatives: SIX, Postfinance
  • 53. Compona Application Components KONZEPTION UND ARCHITEKTUR Prerenderer: Prerender https://prerender.com/ Retrieve HTML, Screenshots, PDFs or HAR Files from any Webpage ▪ $5 pMt + $1 per 1000 requests ▪ HTML for Non-Google-Bots ▪ Execute custom Javascript ▪ Configurable screen size Evaluated alternatives: Prerender.io, Prerender.cloud PRERENDER
  • 54. Compona Application Components KONZEPTION UND ARCHITEKTUR Analytics & Advertising: Google https://www.google.com/about/products/
  • 55. Projektbeispiel: Vorteile und Potentiale 56 Genesis Invisible Reifegrad WertschöpfungsketteVisible Custom Product (and rental) Commodity (and utility) Hierarchische Navigation in Kategorien Entwicklungsing. (extern, Kunde) Verkaufsinnendienst (intern, Mitarbeiter) Vollstänige ProduktinformationWarenkorb Checkout Unstruktrierte Suche Klassifikationsmerkmale mit Filtermöglichkeiten Produktdarstellung Web-App Common Web-App Components Chat Component Authentication & User Management Order Management (ERP) Image Management and CDN Internal Web-App Components Payment Solution Translation Memory Master Data Management (PIM) Product Data Search Datasheet Storage Viele Komponenten ohne Customizing Potential für Commodity Nutzung bestehender Komponenten ausgebaut Kaum Funktionsredundanz Best in Class Komponenten
  • 56. Vorgehen: Von der Zielsetzung zur Webapplikation INTELLIACT 57 system-neutral system- und komponentenspezifisch Ziel-Definition Strategie Definition Personas User Story Map, User Flow (fachlich) User Stories, Tasks, Entities, Values (fachlich) UX Design: Story Board, Wireframes Anforderungs- Spezifikation (System) Evaluation Komponenten Schnittstellen-Definition und –Spezifikation Implementierungs- Spezifikation Umsetzung UI: HTML/CSS Navigation und Logik: Javascript State und Interface Layer Integration Standardkomponenten (Common Components) Implementieren Spezialkomponenten (App Components) Konfigurieren SaaS Komponenten (Cloud Components) Ggf. fachliche Erweiterung Unternehmens-applikationen Konzeption → Anforderungs- definition Evaluation → System-/ Komponentendefinition Implementierung → Frontend + Backend
  • 58. «Change it, change it!» William Shakespeare
  • 59. Die ursprüngliche Fragestellung «Welche Technologien sind modern?» ist ungeschickt.
  • 60. Moderne Webentwicklung ist keine Technologiefrage sondern die Frage nach Funktionen und Services!
  • 61. Modern Web Development ist vor allem flexibel und anpassungsfähig
  • 63. Vielen Dank für Ihre Aufmerksamkeit
  • 64. Kreative PLM-Konzepter, unabhängig und darauf spezialisiert, Ihre Produktdaten zu echten Teamplayern zu machen, um Mehrwerte zu schaffen. Intelliact AG BOSSARD AG 66
  • 65. Bringen Sie Produkte & neue Digitale Services effizienter auf den Markt «MAKE YOUR DATA WORK TOGETHER» 67Quelle: https://intelliact.ch/
  • 66. Mehr als 20 Jahre Erfahrung im Umgang mit Produktdaten (fachlich und technologisch) Ausgewiesene Erfahrung in der Konzeption, Evaluation, Umsetzung von Unternehmensapplikationen im Bereich Produktdaten Ausgewiesene Erfahrung in der Konzeption und Umsetzung von Webapplikationen, um aus Produktdaten Mehrwert zu schaffen. Unabhängigkeit, sich in jedem Fall für die optimalste Lösung zu entscheiden Warum Intelliact? INTELLIACT 68
  • 67. 69 WIR SIND INTELLIACT Seit über 20 Jahren Intelliact Team: https://intelliact.ch/team 17 kreative Köpfe We make your data work together
  • 68. Nehmen Sie Kontakt mit mir auf WAS SIND IHRE HERAUSFORDERUNGEN? 70 Marco Egli Senior Consultant Dipl. Masch.-Ing. ETH +41 443 156 743 egli@intelliact.ch
  • 69. Eyekon AG Quellenstrasse 27 CH 8005 Zürich T +41 (0)43 444 77 77 hello@eyekon.ch www.eyekon.ch
  • 70. 72
  • 71. 73 Angebot 38 Corporate- und E-Business Websites und Portale Crossmedia Kampagnen, Marketing- Kommunikation, Social Media Kampagnen Interactive- und Multimedia Anwendungen, Microsites, POS Mobile- und Web-Apps, digitale Services, Konfiguratoren, Kataloge
  • 72. 74
  • 74. 76 Agentur Ranking 41 Rang Firma Total Punkte 2015–2019 1 Hinderling Volkart 176.5 2 Jung von Matt / Limmat 137.83 3 Unic 121.66 4 Liip 93.30 5 Notch Interactive 80.50 6 Namics 73.20 7 Equipe 69.00 8 Eyekon 41.50 9 Wirz 38.50 10 Dreipol 37.50 Top 10 der 100 erfolgreichsten Agenturen von Best of Swiss Web 2015 – 2019
  • 75. 77