WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

54
Contao Konferenz 2016 | Thomas Weitzel | © 2016 WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR 1 / 53 WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

Transcript of WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

Page 1: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

Contao Konferenz 2016 | Thomas Weitzel | © 2016

WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

1 / 53

WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

Page 2: 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

Page 3: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

Contao Konferenz 2016 | Thomas Weitzel | © 2016

WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

3 / 53

Überblick wärs…

Page 4: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

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?

Page 5: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

Contao Konferenz 2016 | Thomas Weitzel | © 2016

WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

5 / 53

## Wer spricht

Page 6: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

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)

Page 7: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

Contao Konferenz 2016 | Thomas Weitzel | © 2016

WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

7 / 53

# Webdesign Trends

Page 8: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

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.

Page 9: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

Contao Konferenz 2016 | Thomas Weitzel | © 2016

WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

9 / 53

# Webdesign Trends## Cards design

Beispiel Pinterest

Page 10: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

Contao Konferenz 2016 | Thomas Weitzel | © 2016

WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

10 / 53

# Webdesign Trends## Cards design

Beispiel Trello

Page 11: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

Contao Konferenz 2016 | Thomas Weitzel | © 2016

WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

11 / 53

# Webdesign Trends## Cards design

Beispiel Twitter

Page 12: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

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…

Page 13: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

Contao Konferenz 2016 | Thomas Weitzel | © 2016

WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

13 / 53

# Webdesign Trends## Hamburger Menü

Vegetarisches Burgermenü…

Page 14: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

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/

Page 15: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

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/

Page 16: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

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/

Page 17: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

Contao Konferenz 2016 | Thomas Weitzel | © 2016

WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

17 / 53

# Webdesign Talks

Page 18: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

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/

Page 19: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

Contao Konferenz 2016 | Thomas Weitzel | © 2016

WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

19 / 53

# Webdesign Talks

# An Event Aparthttp://aneventapart.com/

Page 20: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

Contao Konferenz 2016 | Thomas Weitzel | © 2016

WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

20 / 53

# Webdesign Talks

# Re:publicahttps://re-publica.de

Page 21: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

Contao Konferenz 2016 | Thomas Weitzel | © 2016

WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

21 / 53

# Webdesign Talks

# Beyond Tellerrandhttps://beyondtellerrand.com

Page 22: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

Contao Konferenz 2016 | Thomas Weitzel | © 2016

WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

22 / 53

# Webdesign Talks

# Typo Berlinhttp://typotalks.com/berlin/de

Page 23: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

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/

Page 24: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

Contao Konferenz 2016 | Thomas Weitzel | © 2016

WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

24 / 53

# Webdesign Talks

# Webinalehttps://webinale.de

Page 25: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

Contao Konferenz 2016 | Thomas Weitzel | © 2016

WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

25 / 53

# Webdesign & Contao

Page 26: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

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?

Page 27: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

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

Page 28: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

Contao Konferenz 2016 | Thomas Weitzel | © 2016

WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

28 / 53

# Baukasten? Contao!

Page 29: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

Contao Konferenz 2016 | Thomas Weitzel | © 2016

WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

29 / 53

# Contao## Baukasten? Contao!

# Baukastensysteme

JimdoSquarespaceWix…

Page 30: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

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

Page 31: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

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.

Page 32: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

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.

Page 33: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

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

Page 34: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

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

Page 35: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

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

Page 36: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

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.

Page 37: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

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

Page 38: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

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

Page 39: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

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.

Page 40: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

Contao Konferenz 2016 | Thomas Weitzel | © 2016

WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

40 / 53

# Contao Basis Setup

Page 41: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

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- …

Page 42: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

Contao Konferenz 2016 | Thomas Weitzel | © 2016

WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

42 / 53

# Contao Wartung & Pflege

Page 43: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

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)

Page 44: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

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.

Page 45: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

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…

Page 46: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

Contao Konferenz 2016 | Thomas Weitzel | © 2016

WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

46 / 53

# Lese-Input

Page 47: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

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

Page 48: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

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

Page 49: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

Contao Konferenz 2016 | Thomas Weitzel | © 2016

WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

49 / 53

# Lausch-Input

Page 50: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

Contao Konferenz 2016 | Thomas Weitzel | © 2016

WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

50 / 53

## Lausch-Input

Karen McGrane & Ethan MarcotteResponsive Web Design Podcast

Page 51: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

Contao Konferenz 2016 | Thomas Weitzel | © 2016

WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

51 / 53

## Finale

Page 52: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

Contao Konferenz 2016 | Thomas Weitzel | © 2016

WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

52 / 53

## Finale

Danke.

Page 53: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

Contao Konferenz 2016 | Thomas Weitzel | © 2016

WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

53 / 53

# Quellen

Page 54: WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

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