MODERNE WEBSITES - Scrivito · 2015. 5. 6. · Rückblick - altes Webdesign YAML 3.2 - 2/3...
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]