Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
1 / 53
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
2 / 53
jQuery
Frameworks
UI Pattern
Responsive images
Performance
lazy load
picture element
Bootstrap
Foundation
nginxRWD
SVG
Composer
mobile first
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
3 / 53
Überblick wärs…
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
4 / 53
Immer mehr Perfektion, immer mehr technische Raffinessen.
Viele Webdesigner sind von der Vielfalt der Entwicklungen im Webdesign gefordert, die richtigen Weichen für die tägliche Arbeit zu stellen.
Welche Techniken soll ich zukünftig einsetzen?Ist der Trend relevant für meine Arbeit, meine Kunden?
Auf Contao bezogen: Setze ich auf eigenes Design und Umsetzung? Oder nutze ich Themes und passe diese an? Wie komme ich mit einem Stan-dard-Setup schneller ans Ziel?
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
5 / 53
## Wer spricht
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
6 / 53
# Wer spricht
Thomas Weitzel, Diplom-Designerseit 1994 im Dschungel unterwegs
seit 2006 bei Contao2010-2013 Contao Team
Zwei Bücher zu Contao (2010 und 2013)
AG Presse & News, Best Practices mit ContaoAG Partnerbetreuung
Aktivmitglied der Contao Association (seit 2012)Beisitzer im Vorstand der Contao Association (seit 2016)Sprecher auf den Konferenzen & Camps (2006 - heute)
Contao JahrbuchContao AgenturtagContao Stammtisch Stuttgart (seit 2014)
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
7 / 53
# Webdesign Trends
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
8 / 53
# Webdesign Trends
Jede grössere Plattform gibt zum Anfang eines Jahreseine Empfehlung für die Trends im Webdesign heraus.
Spannend, dass vielen nur von einander nur copy-pasten :-)
Neben den Trendvorher-sagen sind Websites interessant, die zum Beispiel Auszeichnungen erhalten oder vergeben wie www.awwwards.com.
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
9 / 53
# Webdesign Trends## Cards design
Beispiel Pinterest
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
10 / 53
# Webdesign Trends## Cards design
Beispiel Trello
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
11 / 53
# Webdesign Trends## Cards design
Beispiel Twitter
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
12 / 53
# Webdesign Trends## Hamburger Menü
Immer noch umstritten diskutiert, ist das bei vielen Benutzern gelernt…
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
13 / 53
# Webdesign Trends## Hamburger Menü
Vegetarisches Burgermenü…
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
14 / 53
# Webdesign Trends## Endlosscrollen / Storytelling
Gerade in der mobilen Ansicht sind es Benutzer gewohnt, vertikal zu scrollen. Dies findet auch Verwendung bei vielen Desktop-Seiten. Beispiel sind die OnePager.
http://www.spaceneedle.com/home/
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
15 / 53
# Webdesign Trends## Style Tiles
„Develop a design system rather than designing fixed-width pages.”
Anstatt komplette Designs in Photoshop zu erstellen, wird auch gerne auf eine Kombination von „Development in the browser” und eines Moodboards, auch Style Tiles genannt, gesetzt.
http://styletil.es/
http://rachkozy.github.io/aroma/
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
16 / 53
# Webdesign Trends## Style Tiles
Auch Live StyleGuides sind ein The-ma, die entweder aus einer beste-henden Website die wichtigsten Ge-staltungselemente herausziehen.Oder Skripte mit denen sich die Vor-gaben schnell erstellen oder abän-dern lassen.
http://styleguide.sc5.io/http://stylifyme.com/
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
17 / 53
# Webdesign Talks
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
18 / 53
# Webdesign Talks
# TED Talk
https://designschool.canva.com/blo-g/50-must-see-ted-talks-creativity-design/
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
19 / 53
# Webdesign Talks
# An Event Aparthttp://aneventapart.com/
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
20 / 53
# Webdesign Talks
# Re:publicahttps://re-publica.de
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
21 / 53
# Webdesign Talks
# Beyond Tellerrandhttps://beyondtellerrand.com
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
22 / 53
# Webdesign Talks
# Typo Berlinhttp://typotalks.com/berlin/de
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
23 / 53
# Webdesign Talks
# Typo Berlin 2016
Sieben Thesen zur Zukunft des Designsvon Jochen Rädeker, strichpunkt
Siebenmal Ende, siebenmal Anfang1. Ende des Autorendesigns – Beginn der Co-Creation2. Ende der Ästhetik – Beginn des Denkens3. Ende der Funktion – Beginn der Haltung4. Ende des Analogen – Beginn des Sensitiven5. Ende des Unwissens – Beginn des Entdeckens6. Ende der Marke – Beginn der Transformation7. Ende vom Ende – Beginn des Unvollendeten
Quelle: http://typotalks.com/news/2016/05/13/jochen-raedeker-hello-fu-ture-goodbye-design/
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
24 / 53
# Webdesign Talks
# Webinalehttps://webinale.de
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
25 / 53
# Webdesign & Contao
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
26 / 53
# Webdesign & Contao
Der Dornröschenschlaf im Webdesign ist vorbei!
Die gewohnten Methoden & Techniken reichen nicht mehr aus – es kommt stets neue hinzu.
Welche Möglichkeiten gibt es das auf Contao und unseren Workflow anzupassen?
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
27 / 53
# Webdesign & Contao
## Baukasten? Contao!
## Themes - oder warum Themes oft nicht die schnelle Lösung sind
## Contao & Muse = <.conmunicator>
## Basic (faster) Setup
## Wartung & Pflege
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
28 / 53
# Baukasten? Contao!
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
29 / 53
# Contao## Baukasten? Contao!
# Baukastensysteme
JimdoSquarespaceWix…
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
30 / 53
# Contao## Baukasten? Contao!
# Baukastensysteme
Pro:- einfach bedienbar (meist FE-Editing)- mobile / responsive meist schon dabei- festes Schema hilft Anwendern bei der Umsetzung
Con:- kaum erweiterbar (technisch wie gestalterisch)- kein (individuelles) Backup- kaum SEO-optimiert (Code-Qualität)- Export der Daten oft nicht möglich
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
31 / 53
# Contao## Baukasten? Contao!
# Contao
Pro:- volle (Code-)Kontrolle- Hostingwechsel kein Thema- kann mit den Anforderungen wachsen (…es kommt drauf an)- Professioneller (Agentur vertickt kein von-der-Stange-Konzept)- meist individuelles Design & Umsetzung für den Kunden
Fazit:Beide haben ihre Berechtigung - hier kommen wir als Berater ins Spiel.
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
32 / 53
# Themes.Oder warum Themes oft nicht die schnelle Lösung sind.
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
33 / 53
# Contao## Themes - oder warum Themes oft nicht die schnelle Lösung sind
- Themes ermöglichen es uns den Kunden mit fertigen Designvorlagen in die Diskussion zu gehen.
- Themes tragen zur Verbreitung von Contao bei
- Themes installieren und einrichten sind in der Regel Admintätigkeiten…
- Themes zeigen die Anpassbarkeit von Contao oft eindrucksvoll
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
34 / 53
# Contao## Themes - oder warum Themes oft nicht die schnelle Lösung sind
Pro:- der Kunde bekommt konkrete Vorstellungen (s)eines Designs
- der Entwicklungsaufwand (Designentwürfe, Zwischenrunden, Abstimmungen) entfallen (erstmal)
- in der Regel sind alle Core-Elemente gestaltet und direkt verwendbar
- kontinuierliche Weiterentwicklung der Themes entlastet die Eigenentwicklung
- „Lernvorlage” für eigene Lösungsansätze
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
35 / 53
# Contao## Themes - oder warum Themes oft nicht die schnelle Lösung sind
Cons:- fremder Code / fremdes Konzept muss erst mal verstanden werden
- Wo finde ich was? Gerade wenn neue Inhaltselemente mit dem Theme mitgeliefert werden
- die Anpassungen benötigen oft auch noch (viel) Zeit
- die Struktur ist als Template erst einmal vorgegeben
- ersetzt meist nicht den Denkprozess „Was benötige ich für meine Firma?”
-> den Kunden wieder als Berater aktiv unterstützen
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
36 / 53
# Contao## Themes - oder warum Themes oft nicht die schnelle Lösung sind
# Praxistipps
- In einer Erstgespräch ist es wichtig, den Kunden darauf hinzuweisen, das mit dem Kauf und der Installation des Themes erst die Basis geschaffen ist für den Aufbau der Website.
- Dublette des Seitenbaums erstellen (Ersatzteillager)
- Installation Contao + Theme + X Tagessätze = fertige Website
- Einmal temporär die Bilder entfernen ( * img {display:none;} ), damit der Kunde sieht wie die Wirkung ohne die Bilder ist. Denn Bildrecherche kann dauern… …und kostet dann auch.
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
37 / 53
# Contao & MUSEEin Beispiel wie man auf die wechselnden Marktanforderungen reagieren kann
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
38 / 53
# Contao## Adobe Muse & <.conmunicator>
- kurz die Story
- Markt und Anforderungen wandelt sich
- Designprozess bleibt bei der Agentur
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
39 / 53
# Contao## Adobe Muse & <.conmunicator>
- kurz die Story
- Markt und Anforderungen wandelt sich
- Designprozess bleibt bei der Agentur
Praxisbeispiel - wie mans nicht macht: - alle Seitentitel gleich !- 17,7 MB Daten Startseite !!!- ohne JS keine Inhalte sichtbar !
-> ohne Web-Know-how ist das zu wenig……aber hier kein Muse-Problem, sondernfehlendes Web-Know-how.
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
40 / 53
# Contao Basis Setup
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
41 / 53
# Contao## Basic (faster) Setup
- Basis-Installation mit typischen Seiten und Modulen- immer aktuell halten (LTS)- einheitliche Schemata verwenden (Bezeichnungen intern)- passendes Hosting einsetzen (SSH …)
Pro:- vorgefertigte Installation (Files & DB Dump)- schnell verfügbar- eigene Lieblings-Erweiterungen gleich an Bord- …
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
42 / 53
# Contao Wartung & Pflege
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
43 / 53
## Wartung & Pflege
*Everybody wants to build and nobody wants to do maintenance*.Kurt Vonnegut (Wikipedia)
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
44 / 53
## Wartung & Pflege
Mit wachsender Verbreitung von Contao steigt auch der Bedarf für Wartung und Pflege bestehender Websites.
Hier steigt der Bedarf für Evaluierung der Installationen wie auch der richtigen Strategie - also unser Know-how in Sachen Contao ist gefragt.
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
45 / 53
## Wartung & Pflege
Hier erwarten einen unterschiedlichste Szenarien.
Wurde live auf der Konferenz diskutiert…
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
46 / 53
# Lese-Input
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
47 / 53
## Lese-Input
Mike Monteiro„Design is a job”, A Book Apart„You’re my favorite client”, A Book Apart
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
48 / 53
## Lese-Input
Lea VerouCSS Secrets, O‘Reilly, Deutsche Übersetzung von Jørgen Lang
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
49 / 53
# Lausch-Input
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
50 / 53
## Lausch-Input
Karen McGrane & Ethan MarcotteResponsive Web Design Podcast
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
51 / 53
## Finale
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
52 / 53
## Finale
Danke.
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
53 / 53
# Quellen
Contao Konferenz 2016 | Thomas Weitzel | © 2016
WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR
54 / 53
## Quellen
Bilder:https://static.pexels.com/photos/7541/pexels-photo.jpeghttps://static.pexels.com/photos/6550/nature-sky-sunset-man.jpeg