MODERNE WEBSITES - Scrivito · 2015. 5. 6. · Rückblick - altes Webdesign YAML 3.2 - 2/3...

57
MODERNE WEBSITES für alle Endgeräte [email protected] Tel. +49 30 747993-0 Alexander Geßler Interaction Designer

Transcript of MODERNE WEBSITES - Scrivito · 2015. 5. 6. · Rückblick - altes Webdesign YAML 3.2 - 2/3...

  • MODERNE WEBSITES für alle Endgeräte

    [email protected] Tel. +49 30 747993-0

    Alexander GeßlerInteraction Designer

  • Google Update - 21.04.2015

    Design-Trends 2015 Überblick und Beispiele

    Icon Fonts Anwendung und Umsetzung

    Responsive Umsetzungen Responsive Web Design vs. mobiler Webseite vs. nativer App

    HTML Frameworks Rückblick und Technik

    Browser / Endgeräte Testing Überblick

    Überblick

  • Beginning from April 21, 2015, your website’s position on the SERP will depend on its mobile-friendliness

    besides all the other factors.

    ARE YOU READY?

    21. APRIL 2015 GOOGLE UPDATE

  • 0

    15

    30

    45

    60

    2009 2010 2011 2012 2013 2014

    Quelle: ARD/ZDF-Onlinestudien 2009-2014

    in %

    Männer 52%

    Frauen 47%

    Trends mobile Nutzung 2009 - 2014

  • Google Search Results mobile Anpassung wird hervorgehoben

  • Google Webmaster Tool Test auf Optimierung für Mobilgeräte

    Quelle: https://www.google.com/webmasters/tools/mobile-friendly/

    https://www.google.com/webmasters/tools/mobile-friendly/

  • Quelle: https://www.google.com/webmasters/tools/mobile-friendly/

    https://www.google.com/webmasters/tools/mobile-friendly/

  • DESIGN TRENDS

    2015

  • Flat Design reift weiter mehr subtile Schatten und Verläufe

  • Fullscreen-Background Fotos und Videos

    Quelle: https://www.spotify.com

    https://www.spotify.com

  • Card Based Design

    Quelle: http://fasett.no/

    http://fasett.no/

  • No more boxes

    Quelle: http://www.lorenzobocchi.com/en/design/live365/

    http://www.lorenzobocchi.com/en/design/live365/

  • Animated storybook

    Quelle: https://www.boldking.com/

    https://www.boldking.com/

  • Infinite Scrolling und Parallax Scrolling

    Quelle: http://www.world-of-swiss.com

    http://www.world-of-swiss.com

  • Icon Fonts Anwendung und Umsetzung

  • Icon Fonts im Einsatz

  • Quelle: http://fortawesome.github.io/Font-Awesome/

    Font Awesome vorgefertigte Icon Fonts

    http://fortawesome.github.io/Font-Awesome/

  • Quelle: http://zurb.com/playground/foundation-icon-fonts-3

    Foundation Icons vorgefertigte Icon Fonts

    http://zurb.com/playground/foundation-icon-fonts-3

  • Quelle: http://ionicons.com/

    ion Icons vorgefertigte Icon Fonts

    http://ionicons.com/

  • Quelle: http://fontastic.me/

    Fontastic eigene Icon Fonts

    http://fontastic.me/

  • Quelle: http://fontello.com/

    Fontello eigene Icon Fonts

    http://fontello.com/

  • Glyphs eigene Icon Font erstellen

    Quelle: https://glyphsapp.com/

    https://glyphsapp.com/

  • Fontsquirrel eigene Icon Font erstellen

    Quelle: http://www.fontsquirrel.com/

    http://www.fontsquirrel.com/

  • Formen der mobilen Umsetzung

  • responsive Website mobile Website native App

    Responsive Web Design vs. mobiler Webseite vs. nativer App

  • responsive Website mobile Website native App

    Zertifizierung durch App-Store Betreiber - - ja

    Updates sofort sofort erfordern Planung

    Suchmaschinen Sichtbarkeit

    ja ja -

    Download nötig - - ja

    Zugriff auf Hardware Funktionen

    teilweise teilweise großer Funktionsumfang

    Icon Präsenz auf dem Smartphone Screen

    möglich aber eher die Ausnahme

    möglich aber eher die Ausnahme ja

    Ladeaufwand hoch bis mittel mittel bis gering gering

    erreichte Nutzer alle nur mobil nur iOS oder Android oder WP

    A/B Testing ja ja nicht erwünscht durch den App Store Betreiber

    Push Notifications - - ja

  • HTML-Frameworks Rückblick und Technik

  • Rückblick - altes Webdesign YAML 3.2 - 2/3 Spaltenlayout - Media Types

  • modernes Webdesign Media Queries

  • Big Desktop 1200px +

    Desktop 1024px minTablet

    768 - 1024pxMobile

    320 - 767px

  • Quelle: www.lukew.com/ff/entry.asp?1514

    Tiny Tweaks

    Mostly Fluid Column Drop Layout Shifter

    Off Canvas

    Übersicht der Responsive Varianten

    http://www.lukew.com/ff/entry.asp?1514

  • Quelle: www.lukew.com/ff/entry.asp?1514

    Tiny Tweaks

    Mostly Fluid Column Drop Layout Shifter

    Off Canvas

    Übersicht der Umsetzungsmöglichkeiten

    Teil vieler CSS Frameworks

    http://www.lukew.com/ff/entry.asp?1514

  • Mitte 2010

    August 2011

    Januar 2012

    Februar 2012

    August 2013

    Bootstrap von Twitter erstellt

    erstes Major Release Bootstrap 2.0

    ein fast komplett neu geschriebenes Bootstrap 3.0 Release erscheint

    Bootstrap wird das meist beobachtete GitHub Entwicklung Projekt

    Twitter bringt Bootstrap als Open Source Projekt heraus

  • Multi-Preprocessor Support

    ein Grid für alle Endgeräte und Responsive Utilities

    Inklusiv-Features für fast alle

    Anwendungsfälle

  • modernes Webdesign responsive Grids als Grundlage

  • Bootstrap 3 - Demo responsive Grid

  • Bootstrap 3 Responsive utilities

  • Bootstrap - Konkurrenz kurze Übersicht

    Quelle: http://usablica.github.io/front-end-frameworks/compare

    http://usablica.github.io/front-end-frameworks/compare.html

  • Foundation 5 Skeleton 2

    Bootstrap - Konkurrenz kurzer Vergleich

  • Foundation 5 Skeleton 2

    LESS Support

    SASS Support

    nested Grids

    kein

    ja

    kein

    kein

    ja kein

    Quelle: http://responsive.vermilion.com

    http://responsive.vermilion.com

  • Bootsnip Design Elemente und Codeschnipsel für Bootstrap

    Quelle: http://bootsnipp.com/

    http://bootsnipp.com/

  • Quelle: http://bootsnipp.com/resources

    http://bootsnipp.com/resources

  • Browser / Endgeräte Testing Überblick

  • 0

    12,5

    25

    37,5

    50

    Chrome Firefox IE Opera Safari

    Deutschland Weltweit

    Quelle: http://gs.statcounter.com/

    http://gs.statcounter.com/

  • Desktop Virtualisierungen Parallels / VirtualBox

  • Desktop Virtualisierungen - Mobile Apple - iOS Simulator / Genymotion - Android Simulator

    iOS Simulator

  • Desktop Virtualisierungen - Mobile Apple - iOS Simulator

  • Desktop Virtualisierungen - Mobile Genymotion - Android Simulator

  • Desktop Virtualisierungen - Mobile Genymotion - Android Simulator

  • Cloud Virtualisierungen Browserstack / Litmus

  • Litmus Endgeräte Überblick

  • Litmus Interactive Testing

  • Scrivito Scrivito Sample App & Bau eines Widgets

  • Danke..! Feedback willkommen

    Infopark AG • Kitzingstraße 15 • D-12277 Berlin • www.infopark.de • [email protected]

    [email protected] Tel. +49 30 747993-0

    Alexander GeßlerCreative Consultant

    http://www.infopark.demailto:[email protected]