Responsive DesignWie man ein Design für eine Vielzahl von Endgeräten

anpassen kann – vom 30“ Monitor, bis zum Smartphone

Über mich

MarioFink.deKleine Projekte, von der Vereinsseite bis zum Onlineshop

B2B Plattform für deneuropäischen Reifenhandel

Screendesigner &Frontend-Entwickler

Mädchen für Alles

Was ist Responsive Design?

• Ein Layout kann sich an die Gegebenheiten eines Endgerätes anpassen, bspw:

• Größe der Anzeigefläche

• Orientierung/Seitenverhältnis

• Realisiert mit Hilfe von CSS @media Queries

• ähnliches Prinzip wie CSS Conditional Comments

Beispiel:@media (min-width: 950px) { /* für hohe Auflösungen */}

@media (min-width: 450px) and (max-width: 950px) { /* für mittlere Auflösungen (bspw. Netbooks) */}

@media (max-width: 450px) { /* für mobile Endgeräte */}

Klassis

ches

Design

Klassis

ches

Design

Let’s get responsive!

Respo

nsive

Design

Respo

nsive

Design

Demo

Exemplare in freier Wildbahn

„RESPONSIVE DESIGN IS THE NEW BLACK“

Jeffrey Zeldman

Vorteile

• Niedriger Entwicklungsaufwand, da alles auf der gleichen HTML-Quelle basiert

• Einfach bereits bestehende Seiten für verschiedene Endgeräte optimieren

• Nutzt Standard-CSS Funktionalität @media Queries

Nachteile

• Sämtliche Komponenten der Seite werden geladen (auch auf mobilen Endgeräten)

• Nicht Kaum kontext-sensitiv

• Webseiten, die speziell für mobile Geräte erstellt wurden, decken oft ganz konkrete Anwendungsfälle ab

Links/Quellen

Responsive Design Is The New Black (Jeffrey Zeldman)

Responsive Web Design (A List Apart)

CSS Media Queries for Mobile is Fool’s Gold

On Responsive Web Design and the Mobile Context

CSS Media Queries (Michael Jendryschik)

Responsive Design in der BigWebShow

Fragen?

MarioFink.de