Wo ist Jens?

Tweet an: @Flocke gute Besserung Jens!

Wer ist die Flitzpiepe da überhaupt?

• Sven Wolfermann (36)
• Freelancer für moderne Webentwicklung
  (HTML5, CSS3, jQuery) aus Berlin
• CSS3 Adventskalender 2010/2011
• schreibt Artikel für das T3N-, PHP- und
  Webstandards-Magazin (new: Screengui.de)
• mobile Geek

• Twitter: @maddesigns
• Web: http://maddesigns.de

Die Geister, die ich rief…

(engl. Scrooged) ist eine US-amerikanische Filmkomödie aus dem Jahr 1988 mit Bill Murray in der Hauptrolle.

Der deutsche Filmtitel basiert auf der ersten Hälfte eines Zitats aus Goethes „Der Zauberlehrling“, das sich zum geflügelten Wort entwickelte.

Desktop vs. Mobile Browsing

mobile Browsernutzung Europa

Responsive Web Design

Kurzer Rückblick

Responsive Webdesign

• Flexible Spaltenraster, die auf Prozentwerte basieren
• Variable Bilder- und Videogrößen – Bilder passen sich den Spalten an
• CSS3 um Gerätegröße abzufragen und Inhalte anzupassen

„Responsive Webdesign ist easy“

„Responsive Webdesign ist easy“

„Responsive Webdesign ist easy“

„Responsive Webdesign ist easy“

L sungen finden!

Auf Umgebung und Endgeräte reagieren

Was können wir über das "Web des Users" sagen?

Heutzutage wissen wir nicht wie und wo der User unsere Website besucht

• wir kennen die Bildschirmgröße nicht
• wir kennen die Browsereigenschaften nicht
• wir kennen die Verbindungsgeschwindigkeit nicht

Breakpoints nach Inhalt wählen, nicht nach Geräten!

Design-Prozess

Aktueller Workflow – der übliche Prozess in Webprojekten

Design-Prozess

• Die Design-Planung wird umfangreicher, mehr als eine Layoutansicht müsste erstellt werden
• Zielgruppen/Nutzergruppen (Geräteauflösungen) müssen bedacht werden
• Flexibles Layout
• Korrekturschleifen können kostspielig werden
• Design-Gestaltung im Browser? nicht in Photoshop?

Der Workflow muss sich ändern!

Mobile first Design/Konzept

• Smartphone first
• Planung, Konzeption, Umsetzung mit dem Fokus auf mobile Geräte
• Designplanung für Touch-Bedienung
• Konzentration aufs Wesentliche – welche Inhalte sind wichtig – wichtiger Inhalt zuerst

Mobile first Technik

• alle Geräte bekommen die "Smartphone View"
• progressive enhancement
• mit Media Queries Layoutanpassungen machen
• Von Anfang an auf den wachsenden Mobil Markt vorbereitet sein
• Neuste Techniken nutzen, sowohl Browsertechniken, als auch Mobiltechniken – Innovation
• keine Degradierung der Inhalte, sondern Erweiterung Schritt für Schritt
• old-IEs mit Sass ein Stylesheet ohne Media Querys generieren: sass-ie

Content first

Responsive Content Grundsatz: Je kleiner das Gerät, desto wichtiger ist es den wichtigen Inhalt so weit wie möglich am Anfang der Webseite zu zeigen

• Users können den Inhalt auch anders konsumieren...

• RSS (Google Reader †1. Juli 2013, Feedly)
• Readability, Instapaper

• SEO‽

Truncation is no content stra…

Designing im Browser

• Vorteile von HTML5/CSS3 nutzen
• Prototyping im Browser kann schneller sein
• Änderungen können schneller umgesetzt werden
• Photoshop für Finetuning, Designentscheidungen aber im Browser treffen

Adobe Edge Reflow

Adobes neuer Ansatz (public preview)

Edge Reflow ist ein Designtool, kein Entwicklungstool

Testing

Testen auf richtigen Geräten ist sehr wichtig

• so früh wie möglich testen
• nicht nur das Layout testen, auch Funktionstest & Performance
• Remote Testing und Debugging mit Adobe Edge Inspect

• Open Device Lab

• gestartet von Jeremy Keith in Brighton
• #ODL in der Nähe: http://opendevicelab.com/
• Devices für Projekte mieten: mobile ODL

Samsung Galaxy S4 Android Stock Browser –
border-radius Bug

mobile Browserlandschaft weltweit

UC Browser

große Verbreitung in Asien

mobile Browserlandschaft Europa

“Black Friday” Verkäufe in den USA

Shopping mit mobilen Geräten

• Android:
• 2010: 1,43%
• 2012: 4,92%
• iOS:
• 2010: 3,85%
• 2012: 18,46%

”You can't mockup performance in Photoshop“

Font-Loading Performance

Webfont Loader – Webfonts asynchron laden

für Typekit, Google, Fontdeck, Fonts.com, … und selbstgehostete Fonts

<script>
WebFontConfig = {
  typekit: { id: 'xxxxxx' }
};
(function() {
  var wf = document.createElement('script');
  wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
    '://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js';
  wf.type = 'text/javascript';
  wf.async = 'true';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(wf, s);
})();
</script>

Webfont Loader

CSS Klassen für Font-Events

.wf-loading
.wf-active
.wf-inactive
.wf-<familyname>-<fvd>-loading
.wf-<familyname>-<fvd>-active
.wf-<familyname>-<fvd>-inactive

h1, h2, h3 {
  font-family: sans-serif;
}

.wf-active h1, .wf-active h2, .wf-active h3 {
  font-family: "webfont", sans-serif;
}

Responsive Images
ein Thema für sich…

Responsive Images

• Problem ist, dass sich Bilddatenmengen nicht dynamisch anpassen
• Große Bilder werden zwar verkleinert dargestellt, laden aber unnötige Datenmengen
• <img>-Tag ist nicht dafür ausgelegt
• ein responsives Bildformat gibt es nicht
• Polyfills müssen helfen

<picture> Element

Aktuelle W3C-Diskussion – <picture> Element

Aufbau wie <video> Element

<picture width="500" height="500">
  <source src="large.jpg"  media="(min-width: 45em)">
  <source src="middle.jpg" media="(min-width: 18em)">
  <img src="small.jpg" alt="">
  <p>Accessible text</p>
</picture>

Picturefill

Polyfill für den <picture> Ansatz

<span data-picture data-alt="Alttext">
  <span data-src="small.jpg"></span>
  <span data-src="medium.jpg" data-media="(min-width:  400px)"></span>
  <span data-src="large.jpg"  data-media="(min-width:  800px)"></span>
  <span data-src="xlarge.jpg" data-media="(min-width: 1000px)"></span>

  <!-- Fallback content for non-JS browsers. Same img src as
  the initial, unqualified source element. -->
  <noscript>
    <img src="small.jpg" alt="Alt">
  </noscript>
</span>

Vorschlag: srcset-Attribut

<img> durch ein neues Attribut erweitern, das mehrere Bildpfade und -qualitäten enthält

<img alt="The Breakfast Combo" 
     src="banner.jpeg"
     srcset="banner-HD.jpeg 2x, 
             banner-phone.jpeg 100w,
             banner-phone-HD.jpeg 100w 2x">

srcset-Polyfill

<picture> Element + srcset

Das beste aus beiden Vorschlägen

<picture width="500" height="500">
  <source media="(min-width: 45em)"
          srcset="large-1.jpg 1x, large-2.jpg 2x">
  <source media="(min-width: 18em)"
          srcset="med-1.jpg 1x, med-2.jpg 2x">
  <source srcset="small-1.jpg 1x, small-2.jpg 2x">
  <img src="small-1.jpg" alt="">
  <p>Accessible text</p>
</picture>

wird mit den Browserherstellern diskutiert, aktuell scheint die Integration vom "srcset"-Attribut voran getrieben zu werden

srcset Support in WebKit

Support für background-images in Safari 6, Chrome 21

background-image: -webkit-image-set(
  url(cloud-sd.png) 1x, url(cloud-hd.png) 2x);

Support für Pixel-Density in WebKit Nightly

<img src="normal-image.jpg" srcset="better-image.jpg 2x">

-› Retina-Support für iOS

NEW: scrN

neuer Entwurf von Tab Atkins

<img src-1="(max-width: 400px) pic-small.jpg"
     src-2="(max-width: 1000px) pic-medium.jpg"
     src="pic-large.jpg"
     alt="Obama talking to a soldier in hospital scrubs.">

<img src-1="pic.png, picHigh.png 2x, picLow.png .5x">

Wilto's Polyfill Test

weitere Links

Responsive Images

Typografie im Responsive Webdesign

Responsive Webdesign Process

Responsive Web Design with Sass & Compass

Modern Frontend Development with Sass & Compass

Danke für die Aufmerksamkeit!

Sven Wolfermann | maddesigns

http://maddesigns.de/rwd-die-geister