Responsive Webdesign in a Nutshell - webinale 2015

63
Responsive Webdesign in a Nutshell Patrick Lobacher Vorstandsvorsitzender +Pluswerk AG 08.06.2015

Transcript of Responsive Webdesign in a Nutshell - webinale 2015

Responsive Webdesign in a Nutshell

Patrick Lobacher Vorstandsvorsitzender +Pluswerk AG

08.06.2015

Disclaimer:

Keine Technik!

Patrick Lobacher GF +Pluswerk GmbH

Slides: www.lobacher.de/webinale15-rwd

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

Veröffentlichungen:

Patrick LobacherVorstandsvorsitzender +Pluswerk AG

• 44 Jahre, glücklich verheiratet, wohnhaft in München

• Selbständig im Bereich Webentwicklung seit 1994

• Autor von 10 Fachbüchern und > 60 Fachartikeln zum Thema Webentwicklung & Consulting

• Mitglied im TYPO3 Education Committee

• Speaker, Trainer, Consultant, Coach, Nerd

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

Fullservice Agentur für digitale Kommunikation+[ 10 ] Standorte in Deutschland +[ 130 ] Mitarbeiter +[ 999 ] realisierte Projekte mit Magento und TYPO3

RWD - Quo Vadis

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

Anforderungen an ein Projekt:1. Wichtige Anforderung 1 2. Wichtige Anforderung 2 3. Wichtige Anforderung 3 4. … 5. … 6. … 7. … 8. …. 9. natürlich „responsive“

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

http://alistapart.com/article/responsive-web-design

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

RWD = Media Queries + Fluid Grids + Flexible Images

?

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

Responsive Adaptive

Aaron Gustavson / Brad Frost / Rest of World

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

Responsive?

• "Reagierend" auf die Bildschirmbreite („El Clasico“)

• "Reagierend" auf die Bildschirmhöhe („Above the fold“)

• "Reagierend" auf die Geräteklasse (Desktop, Laptop, Smartphone,…)

• "Reagierend" auf das Device (Device Specific Bugs/Features)

• "Reagierend" auf die Übertragungsgeschwindigkeit (LTE, 3G, Edge)

• "Reagierend" auf die Bewegungsgeschwindigkeit (jActivity,…)

• „Reagierend“ auf „Connectivity“ (Offline first)

• "Reagierend" auf den Content! (Sprachen, A/B-Tests, …)

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

http://themeforest.net/item/travel-island-responsive-jigoshop-ecommerce-wordpress-theme/2283659

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

> 30 Millionen verkaufte Exemplare in 2015

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

82%

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

www.apple.com 5120 x 2880 Pixel

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

http://www.businessinsider.com/android-fragmentation-2014-818796 Android Geräte

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

Der RWD Prozess

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

Normaler Ablauf in Agenturen

3 Breakpoints (4 Darstellungen) 15 Seitentypen 3 Designvorschläge = 270 PSD Dateien => bei 8h je PSD = 108.000 EUR (Multivarianten / Sprachen / Prozesse)

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

LastenheftPflichten-

heft Design Frontend

Linearer / Wasserfall-Prozess

QA

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

RESPONSIVE = REAGIEREND

CONTENT

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

„Die Anforderungen an ein neues System sind solange nicht vollständig bekannt, bis die Nutzer damit gearbeitet

haben“ (Humphrey)

Vier Thesen zu interaktiven Systemen

„Es ist unmöglich, ein interaktives System vollständig zu spezifizieren“ (Wegner)

„Unsicherheiten existieren in allen Stufen der Softwareentwicklung und sind unausweichlich“ (Ziv)

Pro Phase in der eine Anforderung geändert wird, steigt der Aufwand zur Realisierung um die Größenordnung 10x

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

„Stacey Matrix“

FreiheitsgradeWie

vielewenig

Anfo

rder

unge

nW

asbe

kann

tun

beka

nnt

einfach kompliziert

kompliziert

chaotisch

Klassisches Webdesign>> kompliziert <<

Responsive Webdesign>> komplex <<

komplex komplex

komplex komplex

komplex

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

„Stacey Matrix“

FreiheitsgradeWie

vielewenig

Anfo

rder

unge

nW

asbe

kann

tun

beka

nnt

Wasserfall Wasserfall

Wasserfall

Agil

Klassisches Webdesign>> kompliziert <<

Responsive Webdesign>> komplex <<

Agil Agil

Agil Agil

Agil

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

• Der Design-Prozess muss sich „radikal“ ändern • Content First • Mobile-First • Kein Layout mehr • Iterativ (Agil)

https://www.flickr.com/photos/gernot/134998970/

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

Frontend Planning / Contract

RWD

Proto- typing

ContentStrategy

DeviceTesting

StyleTileAtomic DesignContent

Testing

CreateContent

ContentWireframe

LinearDesign

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

Content Strategy

• Content Strategy (Consulting)

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

Content Strategy

• Content Strategy (Consulting)

• Consulting / Workshop

• Erster Schritt ist das Sammeln, Auswerten und Bewerten des Contents

• oder Vorziehen von Schritt „Content erstellen“

• Dies führt zu einem „Content Inventory“(Hauptnavigation, Sekundärnavigation, Logo, Links, Überschriften, Inhaltselemente, ...)

• Großes (Excel-)File mit Was/ Wo / Wer / Wann

• ( Content-Audit / Content-Planung / Content-Produktion / Content-Management )

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

Content Strategy

• Content Strategy (Consulting)

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

Content Strategy

• Content Strategy (Consulting)

http://de.slideshare.net/clarissapeterson/content-strategy-for-responsive-websites

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

Content Wireframe

• Content (Reference) Wireframe

Hauptnavigation

Logo Suche & Links

Überschrift

Inhalt

Footer

Irgendein Plugin

• Welcher Inhalt ist wo

• Nur Rechtecke

• Kein Design!

• Mobile first!

• Für jeden Major-Breakpoint

• Für jeden Seitentyp

• Für jeden Inhaltstyp

• Content Choreographie

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

Content Wireframe

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

Content Wireframe

• Content (Reference) Wireframe• www.axure.com

• balsamiq.com

• getwirefy.com (Atomic Design)

• codecondo.com/free-wireframe-tools/

• http://www.creativebloq.com/wireframes/top-wireframing-tools-11121302

• …u.s.w.

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

Content Wireframe

• Content (Reference) Wireframe

http://trentwalton.com/2011/07/14/content-choreography/http://media.kulturbanause.de/blog/2014/03/mtc2014-slides-content-choreography/index.html#/

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

CreateContent

• Content erstellen

• Identifizierung der verschiedenen Inhalts-Typen/Content Chunks (Listen, Tabellen, Überschriften, Bild mit Text auf der rechten Seite, ...)

• Nur Text verwenden!

• Markup via

• Markdown

• AsciiDoc

• ReST

• …

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

CreateContent

• Content erstellen (gitbook.io)

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

CreateContent

• Content erstellen (Pandoc)

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

CreateContent

• Content erstellen (Dexy / Jekyll)

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

Content Testing

• Testen des Contents

• Content Dummy Test

• in allen Breiten (Screensize)auf die man sich Anfangs geeinigt hatte

• Freigabe durch den Kunden!

• Tools

• Adobe Edge Inspect

• http://vanamco.com/ghostlab/

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

StyleTileAtomic Design

• Moodboard

• Illustration des visuellen Stils (und der Stilrichtung)

• Richtung: Typographie, Bildwelten, Farben, Stile, …

• Look & feel der Website inkl. der Elemente (wie Navigation, Überschrift, …)

• Es werden nur die Elemente designed und keine Layouts!

http://raison.co/design-process/

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

StyleTileAtomic Design

• Style Tile

http://styletil.es/downloads/Style_Tile_Template.psd.zip

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

StyleTileAtomic Design

• Atomic Design (Brad Frost)http://bradfrostweb.com/blog/post/atomic-web-design/

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

StyleTileAtomic Design

• Atomic Design (Brad Frost)

http://patternlab.io/

• Static Site Builder

• PHP

• Mustache

• Compass / SCSS

• …

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

StyleTileAtomic Design

• Atomic Design (Brad Frost)

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

LinearDesign

• Linear Design

• Anreichern des Content Dummys mit dem Basis Design (CSS) aus dem Moodboard/StyleTile/AtomicDesign

• Farben, Schriften, Größen, vertikale Abstände

• Weitere Elemente wie: Listen, Links, Tabellen, Blockquotes, …

• Anfangs linear - noch nicht positioniert

• Dient dazu, um zu sehen, wie „richtiger/realer“ Content wirkt und aussieht

• Freigabe durch den Kunden!

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

LinearDesign

• Linear Design

• Beschäftigung mit dem Design in den verschiedenen Geräten

• Verständnis über das Medium aufbauen

• Experimentieren

• Starke Zusammenarbeit mit der Technik (Webserver) bzw. Frontend (Markup)

DEFINIEREWerte & Ziele

ENTDECKEStimmungen & Metaphern

GENERIEREIdeen & Konzepte

ERZEUGEVisuelle Sprache

DESIGN

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

Prototyping

• Prototype (Design im Browser)

• Produktion eines Clickdummys mit HTML5/CSS3/JavaScript/...

• Dies führt zum finalen Layout - daher muss hier auf die Positionierung geachtet werden

• Interaktiver Prozess mit dem Designer und dem Kunden!

• Evolutionäre Vorgehensweise

• Freigabe durch den Kunden!

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

Prototyping

• Prototype (Beschleunigung)

• RWD-Framework verwenden, wie Bootstrap oder Foundation

• Präprozessor verwenden

• Browser-Kompatibilität vernachlässigen am Anfang

• Nicht alle Details realisieren

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

• Device testing

• Test muss auf realen Testgeräten durchgeführt werden - keine Simulatoren möglich!

• Carrier / Device Bugs / Performance

• Gehe zu Open Device Labs (ODL)

• Für das Testen gibt es Tools!

• Freigabe durch den Kunden!

Device Testing

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

Frontend Planning / Contract

RWD

Proto- typing

ContentStrategy

DeviceTesting

StyleTileAtomic DesignContent

Testing

CreateContent

ContentWireframe

LinearDesign

Ähhhhhhh… aber…

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

Wir machen das aber immer anders…

Change-Prozess

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

Mit unserem Kunden geht das nicht…Aufklärung und

Erziehung!

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

Coaching / Training

Consulting

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

Fragen?

Slides: www.lobacher.de/webinale15-rwd

Besten Dank für Eure Aufmerksamkeit!

Besten Dank für Eure Aufmerksamkeit!

pluswerk.ag

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

Kontakt

Klassisch:+Pluswerk AGPatrick LobacherSolmstr. 6A60486 Frankfurt am Main Fon: +49 89 130 145 20 Email: [email protected] Web: www.pluswerk.ag

Twitter: www.twitter.com/PatrickLobacherFacebook: www.facebook.com/patrick.lobacherBlog: pluswerk.ag/blogGoogle+:plus.google.com/105500420878314068694

XING: www.xing.com/profile/Patrick_LobacherLinkedInwww.linkedin.com/pub/patrick-lobacher/4/881/171Slideshare: www.slideshare.net/plobacherAmazon: www.amazon.de/Patrick-Lobacher/e/B0045AQVEA

Responsive Webdesign verkaufen

(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015

Responsive Webdesign in a Nutshell

Referenzen (Auszug: +Pluswerk/net-o-graphic/typofaktum/typovision)