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