Präsentation vom 18. Webdev Fulda Treffen: http://webdevfulda.de/

1. Responsive Design
Wie man ein Design für eine Vielzahl von Endgeräten
anpassen kann – vom 30“ Monitor, bis zum Smartphone

2. Über mich
B2B Plattform für den Screendesigner &
europäischen Reifenhandel Frontend-Entwickler
MarioFink.de
Kleine Projekte, von der
Vereinsseite bis zum Onlineshop
Mädchen für Alles

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

4. 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 */
}

5. Kl
as
D sis
es ch
ign es

6. Kl
as
D sis
es ch
ign es

7. Let’s get
responsive!

8. Re
sp
D on
es si
ign ve

9. Re
sp
D on
es si
ign ve

10. Demo

11. Exemplare in
freier Wildbahn

18. „RESPONSIVE DESIGN
IS THE NEW BLACK“
Jeffrey Zeldman

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

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

21. Links/Quellen
Responsive Web Design (A List Apart)
Responsive Design Is The New Black (Jeffrey Zeldman)
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

22. Fragen?
MarioFink.de