Responsive Design

4.024 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Design
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
4.024
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
2.119
Aktionen
Geteilt
0
Downloads
23
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Responsive Design

  1. 1. Responsive Design Wie man ein Design für eine Vielzahl von Endgerätenanpassen kann – vom 30“ Monitor, bis zum Smartphone
  2. 2. Über michB2B Plattform für den Screendesigner &europäischen Reifenhandel Frontend-Entwickler MarioFink.deKleine Projekte, von derVereinsseite bis zum Onlineshop Mädchen für Alles
  3. 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. 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. 5. Kl asD sis es ch ign es
  6. 6. Kl asD sis es ch ign es
  7. 7. Let’s getresponsive!
  8. 8. Re spD on es si ign ve
  9. 9. Re spD on es si ign ve
  10. 10. Demo
  11. 11. Exemplare infreier Wildbahn
  12. 12. „RESPONSIVE DESIGN IS THE NEW BLACK“ Jeffrey Zeldman
  13. 13. 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
  14. 14. 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
  15. 15. Links/Quellen Responsive Web Design (A List Apart)Responsive Design Is The New Black (Jeffrey Zeldman) CSS Media Queries for Mobile is Fool’s GoldOn Responsive Web Design and the Mobile Context CSS Media Queries (Michael Jendryschik) Responsive Design in der BigWebShow
  16. 16. Fragen?MarioFink.de

×