• 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
    Please download to view
  • All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
    ...

    Responsive Design

    by mario-fink

    on

    Report

    Category:

    Design

    Download: 0

    Comment: 0

    3,991

    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