Responsive Design
Upcoming SlideShare
Loading in...5
×
 

Responsive Design

on

  • 3,918 views

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

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

Statistics

Views

Total Views
3,918
Views on SlideShare
1,866
Embed Views
2,052

Actions

Likes
1
Downloads
20
Comments
0

6 Embeds 2,052

http://mariofink.de 1606
http://macbook 407
http://localhost 32
http://www.mariofink.de 4
http://macbook:8888 2
http://static.slidesharecdn.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Responsive Design Responsive Design Presentation Transcript

  • Responsive Design Wie man ein Design für eine Vielzahl von Endgerätenanpassen kann – vom 30“ Monitor, bis zum Smartphone
  • Ü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
  • 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
  • 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 */}
  • Kl asD sis es ch ign es
  • Kl asD sis es ch ign es
  • Let’s getresponsive!
  • Re spD on es si ign ve
  • Re spD on es si ign ve
  • Demo
  • Exemplare infreier Wildbahn
  • „RESPONSIVE DESIGN IS THE NEW BLACK“ Jeffrey Zeldman
  • 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
  • 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
  • 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
  • Fragen?MarioFink.de