Post on 24-Jan-2015
description
RESPONSIVE WEBDESIGN
von Andreas Simon
ÜBER MICH★ Webentwicklung
(TYPO3, Mobile Web, PHP/MySQL....)Konzeption und Projektleitung
★ G16 Media, Kiel (www.g16.net)
★ Freelancer sitevisions.de
★ @sitevisions, Google+
andreas simon @sitevisions
WARUM RESPONSIVE WEBDESIGN★ ca. 2014/2015 wird es mehr Traffic über
mobile Geräte geben als über Desktop
★ immer mehr (mobile) Endgeräte
★ versch. Größen, versch. Auflösungen etc.
andreas simon @sitevisions
VERSCHIEDENE GRÖSSEN
TABLETS
VERSCHIEDENE GERÄTE
★ Smartphones in versch. Größen
★ Tablets in versch. Größen
★ PCs, Laptops, Subnotebooks
★ Fernseher
andreas simon @sitevisions
DIE PROBLEME
★ große, statische Seiten auf versch. Screengrößen
★ Zoomen, links-rechts, oben-unten
★ Orientierung, wo bin ich hier?!
★ Touchgesten > Links treffen
★ Schriftgrößen; Bildgrößen; Buttons (zu klein)
andreas simon @sitevisions
WARUMRESPONSIVE WEBDESIGN?
★ bisheriges Webdesign: statisch
★ feste Größe, nicht skalierbar
★ px-Werte (auch bei Schriften)
andreas simon @sitevisions
DARSTELLUNG STATISCHER SEITEN
andreas simon @sitevisions
FOLGE / ZIEL
★ Website an die jeweiligen Situation (Endgeräte) anpassen
★ responsive = reagieren
>> Das Ende der 960px
Ein Beispiel....
BEISPIELE
andreas simon @sitevisions
hier viell. die eigene BVeispielseite
RESPONSIVE WEBDESIGN ★ fluide Layouts
★ Anpassung der Breite an Screen
★ weitere Anpassungsmöglichkeiten durch mediaqueries
★ Veränderung der Darstellung
★ lineare Anordnung von Inhalten
★ Reduzierung von Inhalten (u.a. Formulare)
RESPONSIVE WEBDESIGN ★ Anpassung der Navigation
★ Anpassung von Button
★ Anpassung von Bildgrößen
★ etc.
andreas simon @sitevisions
MEDIAQUERIES★ Anpassung des Layouts abh. von Screengröße
@media screen and (max-width: 700px) { div#col2 {width:62,5%;} (...) }
★ Mediaqueries abhängig von Content setzen, nicht von Devicegrößen (iPhone, iPad)
★ Wir erstellen Websites nicht für bestimmte Devices, sondern wollen EINE Website für alle Geräte!
andreas simon @sitevisions
TECHNIK ★ fluides Layout: % statt px
★ em statt px für Schriften!
★ Typische Probleme:
andreas simon @sitevisions
SCHRIFTEN★ Schriftgrößen auch über MediaQueries
anpassen!
★ nicht zu klein (gute Lesbarkeit auf Smartphone)
★ nicht zu groß (Designtrend „große Schriften“):
andreas simon @sitevisions
FITTEXT
★ stufenloses Skalieren von Text
SCHRIFTEN GGF. VERKLEINERN
...dabei Spalten dann untereinande
LAYOUT★ 3 Spalten > 2 Spalten > 1 Spalte
andreas simon @sitevisions
von Heiliger Dreispaltikgeit➡ zu linearem Aufbau
LAYOUT
andreas simon @sitevisions
IMAGES
andreas simon @sitevisions
IMAGES★ einfaches Skalieren:
img { max-width:100% }
Orientierung am Elternelement
andreas simon @sitevisions
IMAGES - PROBLEME ★ Ladezeiten: es werden Bilder für Desktop-
Version geladen
★ Lösungsansätze
★ Adaptive Images (PHP)
★ picture vs. srcset
★ Achtung: Retina (Auflösung)
andreas simon @sitevisions
NAVIGATION
andreas simon @sitevisions
★ Content ist King
★ Navi ist Queen
★ Platzproblem auf kleinen Screens!
Lösungsansätze...
WEITERE PROBLEMSTELLEN★ Tabellen, Akkordeon, hover ,Lightboxen
★ Platzprobleme - wohin mit dem Content?!
★ Neuer Ansatz: Mobile First
andreas simon @sitevisions
Übergang zum Konzeptionellen
MOBILE FIRST★ Content is King!
★ kleine Geräte = wenig(er) Platz
Mobile First:
★ bei Konzeption und Design mit kleinen Screens starten
andreas simon @sitevisions
Übergang zum Konzeptionellen
MOBILE FIRST★ Wichtiger Content zuerst!
★ ..zwingt uns, uns auf das Wesentliche zu beschränken
★ und somit mehr an den User zu denken:
★ User First
andreas simon @sitevisions
Übergang zum Konzeptionellen
MOBILE FIRST
Quelle: Brad Frost - bradfrost.com/blog/web/mobile-first-responsive-webdesign
DESIGN - MOCKUPS
DESIGN - MOCKUPS★ Adobe Edge Reflow!
andreas simon @sitevisions
PROGRESSIVE ENHANCEMENT★ Mobile Bowser = techn. auf aktuellem Stand
>> NUTZEN
★ aber: muss auch lauffähig sein auf Desktop- und älteren Geräten
★ Beispiele: Navigationen, Akkordeon(auch ohne Javascript!)
★ modernizr!
andreas simon @sitevisions
PROGRESSIVE ENHANCEMENT★ Beispiel Mobile:
★ Geolocation
★ Formular-Felder > richtige Tastatur einblenden
★ href=“tel:0432112345“
★ Touch Events!
andreas simon @sitevisions
Übergang zum Konzeptionellen
VORTEILE RWD
★ Anpassung an verschiedenste Größen
★ Mehraufwand/Kosten, aber günstiger als Mobile Website
★ geringer Pflegeaufwand! geringe Folgekosten
★ gut für SEO > eine Domain/URL
★ !?! gleiche Inhalte
★ kein Springen zw. 2 Versionen!
andreas simon @sitevisions
NACHTEILE RWD
★ Ladezeiten (nicht optimiert)
★ reines Ausblenden von Inhalten (werden aber geladen!)
★ keine indiv. Inhalte (mobile Situation)
andreas simon @sitevisions
PROBLEME UMGEHEN
★ Inhalte über Ajax nachladen
★ RESS = Responsive WD+ ServerSide Components
★ Adaptive bzw. Responsive Images
★ IE <= 8 keine mediaqueries = respond.js
★ schön: Slider mit Touchevents (Flexslider!)
andreas simon @sitevisions
MOBILE VS. RESPONSIVE SITE
Mobile Websites:
★ spezieller (mobiler) Content;
★ Reduzierung (Vor- oder Nachteil?)
★ optimierte Ladezeiten
★ Optimiertes Layout (eigenes Layout)
★ aber: doppelte Pflege von Inhalten, neue Domain, neue URLs (SEO);
★ will der User auf eine „alternative“ Website!?
NUTZUNG VON MOBILE DEVICES
★ auf dem Weg zur Arbeit, Stadt etc.
★ informieren über Produkte im Geschäft
= unterwegs (geringe Bandbreite, weniger Zeit)
★ aber: auf Toilette ( > 80% der Männer )
★ Sofa, Bett
= at home (hohe Bandbreite, viel Zeit)
RESPONSIVE WEBDESIGN
★ Es gibt kein mobiles Web
★ Wir erstellen keine Websites für das iPhone, oder das iPad, Tablets etc.
★ Wir wollen EINE Website für alle Devices
★ = RESPONSIVE WEBSITES
TOOLS
★ Adobe Edge Inspect
★ Foundation (Framework)
★ mediaqueri.es (gute Beispiele)
★ http://bradfrost.github.com/this-is-responsive/
Blog: www.sitevisions.de @sitevisions
andreas simon @sitevisions