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 Traffic über mobile Geräte geben als über Desktop

★ immer mehr (mobile) Endgeräte

★ versch. Größen, versch. Auflösungen etc.


VERSCHIEDENE GERÄTE

★ Smartphones in versch. Größen

★ Tablets in versch. Größen

★ PCs, Laptops, Subnotebooks

★ Fernseher


WARUMRESPONSIVE 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


http://appcube.info/












FOLGE:


http://spigotdesign.com/












BEISPIELE


http://www.macdonaldhotels.co.uk/













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


★ Anpassung der Navigation

★ Anpassung von Button

★ Anpassung von Bildgrößen


MEDIAQUERIESCSS-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“):


SCHRIFTEN GGF. VERKLEINERN

FITTEXT

★ stufenloses Skalieren von Text

http://fittextjs.com/












LAYOUT

★ 3 Spalten > 2 Spalten > 1 Spalte


von Heiliger Dreispaltikgeit

➡ zu linearem Aufbau

LAYOUT


TEASER


ANPASSUNGEN


http://shinydemos.com/












LINKS & BUTTON

http://www.g16.net/respweb












NAVIGATION


http://thecoppertree.org/












NAVIGATION














NAVIGATION

http://www.starbucks.com/












NAVIGATION













NAVIGATION


http://dressresponsively.com/












NAVIGATION


http://www.pss4kids.com/












IMAGES


http://www.antarcticstation.org/












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 rauszufinden 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 IMAGESDamit noch nicht alles berücksichtigt:

★ verfügbare Bandbreite!

★ Retina-Displays


RETINA DISPLAYSBilder 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!

WIREFRAMES

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


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)

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)


http://mattkersley.com/responsive/

http://mattkersley.com/responsive/

Technology

Responsive Webdesign