responsive webdesign in a nutshell

Download Responsive Webdesign in a Nutshell

Post on 02-Jan-2017

227 views

Category:

Documents

2 download

Embed Size (px)

TRANSCRIPT

  • Responsive Webdesign in a Nutshell

    Patrick Lobacher Vorstandsvorsitzender +Pluswerk AG

    08.06.2015

  • Disclaim

    er:

    Keine Te

    chnik!

    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

    Verffentlichungen:

    Patrick LobacherVorstandsvorsitzender +Pluswerk AG

    44 Jahre, glcklich verheiratet, wohnhaft in Mnchen

    Selbstndig im Bereich Webentwicklung seit 1994 Autor von 10 Fachbchern 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 fr 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. natrlich 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 Bildschirmhhe (Above the fold) "Reagierend" auf die Gerteklasse (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 Gerte

  • 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 Designvorschlge = 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 vollstndig bekannt, bis die Nutzer damit gearbeitet

    haben (Humphrey)

    Vier Thesen zu interaktiven Systemen

    Es ist unmglich, ein interaktives System vollstndig zu spezifizieren (Wegner)

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

    Pro Phase in der eine Anforderung gendert wird, steigt der Aufwand zur Realisierung um die Grenordnung 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 > 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 > komplex

  • 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 fhrt zu einem Content Inventory(Hauptnavigation, Sekundrnavigation, Logo, Links, berschriften, Inhaltselemente, ...)

    Groes (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