...

Responsive Design

by mario-fink

on

Report

Category:

Design

Download: 0

Comment: 0

3,992

views

Comments

Description

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

Transcript

  • 1. Responsive Design Wie man ein Design für eine Vielzahl von Endgerätenanpassen kann – vom 30“ Monitor, bis zum Smartphone
  • 2. Über michB2B Plattform für denScreendesigner &europäischen Reifenhandel Frontend-Entwickler MarioFink.deKleine Projekte, von derVereinsseite 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 asDsis es chign es
  • 6. Kl asDsis es chign es
  • 7. Let’s getresponsive!
  • 8. Re spD on es siign ve
  • 9. Re spD on es siign ve
  • 10. Demo
  • 11. Exemplare infreier Wildbahn
  • 12. „RESPONSIVE DESIGN IS THE NEW BLACK“ Jeffrey Zeldman
  • 13. Vorteile• Niedriger Entwicklungsaufwand, da alles aufder gleichen HTML-Quelle basiert• Einfach bereits bestehende Seiten fürverschiedene Endgeräte optimieren• Nutzt Standard-CSS Funktionalität @mediaQueries
  • 14. Nachteile• Sämtliche Komponenten der Seite werdengeladen (auch auf mobilen Endgeräten)• Nicht Kaum kontext-sensitiv • Webseiten, die speziell für mobile Geräteerstellt wurden, decken oft ganz konkreteAnwendungsfälle ab
  • 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 ContextCSS Media Queries (Michael Jendryschik) Responsive Design in der BigWebShow
  • 16. Fragen?MarioFink.de
  • Fly UP