Responsive Webdesign

RESPONSIVE
WEBDESIGN
von Andreas Simon

ÜBER MICH
★ Webentwicklung
(TYPO3, Mobile Web, Backend...)
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 Trafﬁc über
mobile Geräte geben als über Desktop

★ immer mehr (mobile) Endgeräte
★ versch. Größen, versch. Auﬂösungen etc.


VERSCHIEDENE GERÄTE

★ Smartphones in versch. Größen
★ Tablets in versch. Größen
★ PCs, Laptops, Subnotebooks
★ Fernseher


WARUM
RESPONSIVE WEBDESIGN?
★ bisheriges Webdesign: statisch
★ feste Größe, nicht skalierbar
★ px-Werte (auch bei Schriften)


DIE PROBLEME

★ große Seiten auf kleinen Screens
★ Zoomen, links-rechts, oben-unten
★ Orientierung, wo bin ich hier?!
★ Touchgesten > Links treffen
★ Schriftgrößen; Bildgrößen; Buttons (zu klein)


DARSTELLUNG STATISCHER
SEITEN


FOLGE / ZIEL

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

>> Das Ende der 960px

Einige Beispiele.....

BEISPIELE


FOLGE:


★ ﬂuide 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)

★ Anpassung der Navigation

★ Anpassung von Button

★ Anpassung von Bildgrößen


MEDIAQUERIES
CSS-Datei:

#content {
width: 600px;
background-color:#c3c3c3;
}
@media screen and (max-width: 700px) {
width:62,5%;
background-color:#000
}

MEDIAQUERIES
★ @media screen { ... } @media print { ... }

★ @media (orientation: landscape) { ... }

★ @media (aspect-ratio: 4/3) { ... }

Kombinieren von Werten:

★ @media screen and (max-width: 700px) {...}

★ respond.js für IE<=8

TECHNIK
★ umdenken in Prozente

★ % statt px

★ Anpassung CSS (ein- ausblenden; umstylen
z.B. Button etc.)


EM UND %
★ % für Layouts (div)

Einfache Rechnung

Ausgangsgröße(px) : Kontext = %-Größe

300px / 960px = 0,3125 ( 31,25% )


VON PIXEL ZU PROZENT


EM UND %
★ gleiches für Abstände etc.

★ margin:15px;

15 / 960 = 0,015625 ( 1,5625% )


SCHRIFTEN
★ Schriftgröße in em! (u.a. für User)

★ Standardschriftgröße = 16px

h2 { 20px }

20 / 16 = 1.25em

h2 { 1.25em /* 20px */ }

★ ! em = relativ zum Elternelement

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

LAYOUT
★ 3 Spalten > 2 Spalten > 1 Spalte


LAYOUT

von Heiliger Dreispaltikgeit
➡ zu linearem Aufbau


TEASER


ANPASSUNGEN


NAVIGATION


IMAGES


IMAGES
★ einfaches Skalieren:

img { max-width:100% }

Orientierung am Elternelement

Problem: Ladezeiten


IMAGES - LADEZEITEN
★ es werden Bilder für Desktop-Version geladen

★ lediglich skaliert

verschiedene Möglichkeiten:

★ Javascript-basierte Ansätze

★ <img src=“small.jpg“ data-2=“big.jpg“ />

★ Nachteil: Browser lädt erste Version vor


IMAGES - LADEZEITEN
★ Adaptive Images

★ nutzt PHP und JS um Größe
rauszuﬁnden und zu speichern

★ PHP bearbeitet Bild bei Anfrage

★ keine Markup-Änderung

★ Caching der Bilder


RESPONSIVE IMAGES
★ WHATWG <> W3C

<picture alt=“alttext“>
<source src=“small.jpg“>
<source src=“medium.jpg“ media=“min-width:500px “>
<source src=“full.jpg“ media=“min-width:960px“ >
<img src=“default.jpg“>
</picture>

Viel Code; lädt kein anderes Image vor;
Websites, CMS etc. anzupassen


RESPONSIVE IMAGES
★ WHATWG <> W3C

<img alt=“alttext“ src=“small.jpg“
scrset=“medium.jpg 500w, full.jpg 960w“>

Image wird trotzdem vorgeladen;
komplizierte Schreibweise,
ungewöhnlich, fehleranfällig, nicht intuitiv

nutz weiterhin das img-Tag


RESPONSIVE IMAGES
Damit noch nicht alles berücksichtigt:

★ verfügbare Bandbreite!

★ Retina-Displays


RETINA DISPLAYS
Bilder in doppelter Größe speichern und in halber
Größe auszeichnen:

<img src=“400x200.jpg“ width:200“ height=“100“>

CSS: background-image:url(400x200.jpg)
background-size:200px 100px;

riloadr.js > src=“image.jpg“ sucht „image@2xjpg“
Ladezeiten!

DESIGN-ANPASSUNGEN
★ beachten: weniger Platz (Viewport!)

★ Größen für Bilder, Schriften, Button, Links,
Navigationen anpassen

★ reduzieren auf das Wesentliche
(gilt auch für Desktop)

Responsive Webdesign in Layout und Content gut
planen!

...DANN PHOTOSHOP

Inhalt entfernt


WEITER ZU BEACHTEN
★ Inhalte über Ajax nachladen
★ RESS = Responsive WD+ ServerSide
Components

★ IE <= 8 keine mediaqueries = respond.js
★ Probleme bei hover; Lightboxen, Meganav
★ schön: Slider mit Touchevents (Flexslider!)


VORTEILE RWD
★ Anpassung an verschiedenste Größen
★ Mehraufwand/Kosten, aber günstiger als
Mobile Website

★ geringer Pﬂegeaufwand! 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)


MOBILE VS. RESPONSIVE SITE
Mobile Websites:
★ spezieller (mobiler) Content;
★ Reduzierung (Vor- oder Nachteil?)
★ optimierte Ladezeiten
★ Optimiertes Layout (eigenes Layout)
★ aber: doppelte Pﬂege 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)

MOBILE FIRST
★ erst mobil denken (Reduzierung auf das
Wesentliche)

★ Telefonnummer: ja, wichtig! Aber auch auf
Desktop (Restaurant-Website)

★ Seiten nicht zukleistern > weniger ist mehr
★ ...auch bei Technik!
★ Konzentration auf das Wichtige (User ist nicht
konzentriert > one thumb, one eyeball)


UNWICHTIG...

Inhalt entfernt

TOOLS
★ Adobe Shadow
★ http://mattkersley.com/responsive/ (Testing)

★ Foundation (Framework)
★ mediaqueri.es (gute Beispiele)

★ riloadr (Respons. Images)


Responsive Webdesign

Weitere ähnliche Inhalte

Andere mochten auch

Ähnlich wie Responsive Webdesign

Responsive Webdesign