WEBDESIGN QUO VADIS TRENDS, CONTAO UND MEHR WEBDESIGN QUO VADIS TRENDS, CONTAO UND MEHR

Transkript

1 WEBDESIGN QUO VADIS TRENDS, CONTAO UND MEHR WEBDESIGN QUO VADIS TRENDS, CONTAO UND MEHR 1 / 53

2 jquery Frameworks UI Pattern lazy load Foundation RWD nginx Responsive images picture element Performance SVG Bootstrap Composer mobile first 2 / 53

3 WEBDESIGN QUO VADIS TRENDS, CONTAO UND MEHR Überblick wärs 3 / 53

4 WEBDESIGN QUO VADIS TRENDS, CONTAO UND MEHR 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 Standard-Setup schneller ans Ziel? 4 / 53

5 ## Wer spricht 5 / 53

6 # Wer spricht Thomas Weitzel, Diplom-Designer seit 1994 im Dschungel unterwegs seit 2006 bei Contao Contao Team Zwei Bücher zu Contao (2010 und 2013) AG Presse & News, Best Practices mit Contao AG Partnerbetreuung Aktivmitglied der Contao Association (seit 2012) Beisitzer im Vorstand der Contao Association (seit 2016) Sprecher auf den Konferenzen & Camps ( heute) Contao Jahrbuch Contao Agenturtag Contao Stammtisch Stuttgart (seit 2014) 6 / 53

7 # Webdesign Trends 7 / 53

8 # Webdesign Trends Jede grössere Plattform gibt zum Anfang eines Jahres eine Empfehlung für die Trends im Webdesign heraus. Spannend, dass vielen nur von einander nur copy-pasten :-) Neben den Trendvorhersagen sind Websites interessant, die zum Beispiel Auszeichnungen erhalten oder vergeben wie 8 / 53

9 # Webdesign Trends ## Cards design Beispiel Pinterest 9 / 53

10 # Webdesign Trends ## Cards design Beispiel Trello 10 / 53

11 # Webdesign Trends ## Cards design Beispiel Twitter 11 / 53

12 WEBDESIGN QUO VADIS TRENDS, CONTAO UND MEHR # Webdesign Trends ## Hamburger Menü Immer noch umstritten diskutiert, ist das bei vielen Benutzern gelernt 12 / 53

13 # Webdesign Trends ## Hamburger Menü Vegetarisches Burgermenü 13 / 53

14 # 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 / 53

15 # 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 / 53

16 # Webdesign Trends ## Style Tiles Auch Live StyleGuides sind ein Thema, die entweder aus einer bestehenden Website die wichtigsten Gestaltungselemente herausziehen. Oder Skripte mit denen sich die Vorgaben schnell erstellen oder abändern lassen / 53

17 # Webdesign Talks 17 / 53

18 # Webdesign Talks # TED Talk 18 / 53

19 # Webdesign Talks # An Event Apart 19 / 53

20 # Webdesign Talks # Re:publica 20 / 53

21 # Webdesign Talks # Beyond Tellerrand 21 / 53

22 # Webdesign Talks # Typo Berlin 22 / 53

23 # Webdesign Talks # Typo Berlin 2016 Sieben Thesen zur Zukunft des Designs von Jochen Rädeker, strichpunkt Siebenmal Ende, siebenmal Anfang 1. Ende des Autorendesigns Beginn der Co-Creation 2. Ende der Ästhetik Beginn des Denkens 3. Ende der Funktion Beginn der Haltung 4. Ende des Analogen Beginn des Sensitiven 5. Ende des Unwissens Beginn des Entdeckens 6. Ende der Marke Beginn der Transformation 7. Ende vom Ende Beginn des Unvollendeten Quelle: 23 / 53

24 # Webdesign Talks # Webinale 24 / 53

25 # Webdesign & Contao 25 / 53

26 # 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? 26 / 53

27 # Webdesign & Contao ## Baukasten? Contao! ## Themes - oder warum Themes oft nicht die schnelle Lösung sind ## Contao & Muse = <.conmunicator> ## Basic (faster) Setup ## Wartung & Pflege 27 / 53

28 # Baukasten? Contao! 28 / 53

29 # Contao ## Baukasten? Contao! # Baukastensysteme Jimdo Squarespace Wix 29 / 53

30 # 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 30 / 53

31 # 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. 31 / 53

32 # Themes. Oder warum Themes oft nicht die schnelle Lösung sind. 32 / 53

33 # 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 33 / 53

34 # 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 34 / 53

35 # 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 35 / 53

36 # 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. 36 / 53

37 # Contao & MUSE Ein Beispiel wie man auf die wechselnden Marktanforderungen reagieren kann 37 / 53

38 # Contao ## Adobe Muse & <.conmunicator> - kurz die Story - Markt und Anforderungen wandelt sich - Designprozess bleibt bei der Agentur 38 / 53

39 # 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, sondern fehlendes Web-Know-how. 39 / 53

40 # Contao Basis Setup 40 / 53

41 # 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 - 41 / 53

42 # Contao Wartung & Pflege 42 / 53

43 ## Wartung & Pflege *Everybody wants to build and nobody wants to do maintenance*. Kurt Vonnegut (Wikipedia) 43 / 53

44 ## 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. 44 / 53

45 ## Wartung & Pflege Hier erwarten einen unterschiedlichste Szenarien. Wurde live auf der Konferenz diskutiert 45 / 53

46 # Lese-Input 46 / 53

47 ## Lese-Input Mike Monteiro Design is a job, A Book Apart You re my favorite client, A Book Apart 47 / 53

48 ## Lese-Input Lea Verou CSS Secrets, O Reilly, Deutsche Übersetzung von Jørgen Lang 48 / 53

49 # Lausch-Input 49 / 53

50 ## Lausch-Input Karen McGrane & Ethan Marcotte Responsive Web Design Podcast 50 / 53

51 ## Finale 51 / 53

52 ## Finale Danke. 52 / 53

53 # Quellen 53 / 53

54 ## Quellen Bilder: / 53