Home >Design >Responsive Design

Responsive Design

Date post:27-Nov-2014
Category:
View:3,992 times
Download:0 times
Share this document with a friend
Description:
Präsentation vom 18. Webdev Fulda Treffen: http://webdevfulda.de/
Transcript:
  • 1. Responsive Design Wie man ein Design fr eine Vielzahl von Endgertenanpassen kann vom 30 Monitor, bis zum Smartphone

2. ber michB2B Plattform fr denScreendesigner &europischen Reifenhandel Frontend-Entwickler MarioFink.deKleine Projekte, von derVereinsseite bis zum Onlineshop Mdchen fr Alles 3. Was ist Responsive Design? Ein Layout kann sich an die Gegebenheiten eines Endgertes anpassen, bspw: Gre der Anzeigeche Orientierung/Seitenverhltnis Realisiert mit Hilfe von CSS @media Queries hnliches Prinzip wie CSS Conditional Comments 4. Beispiel:@media (min-width: 950px) { /* fr hohe Ausungen */}@media (min-width: 450px) and (max-width: 950px) { /* fr mittlere Ausungen (bspw. Netbooks) */}@media (max-width: 450px) { /* fr mobile Endgerte */} 5. Kl asDsis es chign es 6. Kl asDsis es chign es 7. Lets 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 frverschiedene Endgerte optimieren Nutzt Standard-CSS Funktionalitt @mediaQueries 14. Nachteile Smtliche Komponenten der Seite werdengeladen (auch auf mobilen Endgerten) Nicht Kaum kontext-sensitiv Webseiten, die speziell fr mobile Gerteerstellt wurden, decken oft ganz konkreteAnwendungsflle ab 15. Links/Quellen Responsive Web Design (A List Apart)Responsive Design Is The New Black (Jeffrey Zeldman)CSS Media Queries for Mobile is Fools GoldOn Responsive Web Design and the Mobile ContextCSS Media Queries (Michael Jendryschik) Responsive Design in der BigWebShow 16. Fragen?MarioFink.de

Embed Size (px)
Recommended