responsive webdesign - barcamp hamburg 2012

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.


VERSCHIEDENE GRÖSSEN

TABLETS

VERSCHIEDENE GERÄTE

★ Smartphones in versch. Größen

★ Tablets in versch. Größen

★ PCs, Laptops, Subnotebooks

★ Fernseher


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)


WARUMRESPONSIVE WEBDESIGN?

★ bisheriges Webdesign: statisch

★ feste Größe, nicht skalierbar

★ px-Werte (auch bei Schriften)


DARSTELLUNG STATISCHER SEITEN


FOLGE / ZIEL

★ Website an die jeweiligen Situation (Endgeräte) anpassen

★ responsive = reagieren

>> Das Ende der 960px

Ein Beispiel....

BEISPIELE


hier viell. die eigene BVeispielseite

http://www.sitevisions.de/respweb/












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.


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!


TECHNIK ★ fluides Layout: % statt px

★ em statt px für Schriften!

★ Typische Probleme:


SCHRIFTEN★ Schriftgrößen auch über MediaQueries

anpassen!

★ nicht zu klein (gute Lesbarkeit auf Smartphone)

★ nicht zu groß (Designtrend „große Schriften“):


FITTEXT

★ stufenloses Skalieren von Text

http://fittextjs.com/












SCHRIFTEN GGF. VERKLEINERN

...dabei Spalten dann untereinande

LAYOUT★ 3 Spalten > 2 Spalten > 1 Spalte


von Heiliger Dreispaltikgeit➡ zu linearem Aufbau

LAYOUT


IMAGES


http://www.antarcticstation.org/












IMAGES★ einfaches Skalieren:

img { max-width:100% }

Orientierung am Elternelement


IMAGES - PROBLEME ★ Ladezeiten: es werden Bilder für Desktop-

Version geladen

★ Lösungsansätze

★ Adaptive Images (PHP)

★ picture vs. srcset

★ Achtung: Retina (Auflösung)


NAVIGATION


★ 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


Übergang zum Konzeptionellen

MOBILE FIRST★ Content is King!

★ kleine Geräte = wenig(er) Platz

Mobile First:

★ bei Konzeption und Design mit kleinen Screens starten



MOBILE FIRST★ Wichtiger Content zuerst!

★ ..zwingt uns, uns auf das Wesentliche zu beschränken

★ und somit mehr an den User zu denken:

★ User First



MOBILE FIRST

Quelle: Brad Frost - bradfrost.com/blog/web/mobile-first-responsive-webdesign

DESIGN - MOCKUPS

DESIGN - MOCKUPS★ Adobe Edge Reflow!


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!


PROGRESSIVE ENHANCEMENT★ Beispiel Mobile:

★ Geolocation

★ Formular-Felder > richtige Tastatur einblenden

★ href=“tel:0432112345“

★ Touch Events!



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!


NACHTEILE RWD

★ Ladezeiten (nicht optimiert)

★ reines Ausblenden von Inhalten (werden aber geladen!)

★ keine indiv. Inhalte (mobile Situation)


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!)


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


http://bradfrost.github.com/this-is-responsive/

http://bradfrost.github.com/this-is-responsive/

http://www.sitevisions.de

http://www.sitevisions.de

responsive webdesign - barcamp hamburg 2012

Documents