Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Web Design

Vedran Rudelj
November 17, 2011

Responsive Web Design

Vortrag am Internetbriefing 6.9.2011

Vedran Rudelj

November 17, 2011
Tweet

Other Decks in Design

Transcript

  1. Vedran Rudelj, Web Developer @vedi 1996: Erstes Mobiltelefon 2004: Abschluss

    Betriebsökonom FH mit Vertiefung Unternehmensführung / KMU & Telecommunications Analyst 2005-2009: IT Project Management & Business Analyse. 2010: Selbständigkeit als Mobile Web Developer & Berater.
  2. Smartphones Über 1.2 Mio. iPhones und hundertausende Androids und Blackberries

    alleine in der Schweiz. (Schätzungen - keine offiziellen Daten vorhanden) Tablets Fast die Hälfe der Tablet Besitzer verbringt mehr Zeit mit ihrem Tablet als mit Laptop oder Desktop PC. Ein Drittel der User verbringen mehr Zeit mit ihrem Tablet als vor dem Fernseher. Quelle: admob Tablet Survey by Google, März 2011 Steigende Anzahl mobiler Geräte intensivere Nutzung
  3. Browser August 2011 Opera 22% Android 20% Safari 19% Nokia

    17% Blackberry 12% andere 10% Der mobile Web Browser Global Browser Statistik - http://www.quirksmode.org/blog/archives/2011/09/mobile_browser_13.html
  4. RWD Flexible Grid HTML, CSS #page { font-size:16px; width: 960px;

    margin: 0 auto; } #page { font-size: 100%; width: 90%; margin: 0 auto; } flexible • Schriftgrössen • margins • paddings • widths etc. px em, % Ein flexibles Grid
  5. #home .main { float: left; width: 62.8888889%; /* 566px /

    900px */} #home .other { float: right; width: 36.7777778%; /* 331px / 900px */} Die magische Formel Ziel / Kontext = Resultat
  6. @media screen {...} @media print {...} RWD Media Queries @media

    screen and (min-width: 640px) {...} @media screen and (min-width: 1024px) {...} etc. CSS 3 Media Queries eine W3C Candidate Recommendation
  7. RWD Flexible Images & media img, embed, object, video {

    max-width: 100%; } Flexible Bilder und andere Medien
  8. separate IE6-specific stylesheet: img,embed,object,video { width: 100%; } .logo {

    background: none; filter: progid:DXImageTransform.Microsoft. » AlphaImageLoader(src="/path/to/logo.png", » sizingMethod="scale"); } javascript support for IE8 and lower: css3-mediaqueries.js respond.js Internet Explorer workarounds
  9. In der Praxis Hin und her zwischen Design & Development

    Sehr häufiges Resizing Testing auf verschiedenen Endgeräten
  10. “Samsung now has: 2.8 3.2 3.5 3.7 4 4.3 4.5

    5.3 7 7.7 8.9 10.1 inch screen Androids. Where's the 6-incher Sammy? Get on the case!” @saschasegan, pcmag.com, Sept 1 2011
  11. Today, anything that’s fixed and unresponsive isn’t web design, it’s

    something else. If you don’t embrace the inherent fluidity of the web, you’re not a web designer, you’re something else. - Andy Clarke @malarkey I don’t care about Responsive Web Design