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]Top Related