Webtechnologien
Wintersemester 2024
<!DOCTYPE HTML> <html lang="de"> <head> <meta charset="utf-8"> <title>Responsive Web Design</title> <meta name="viewport" content="width=792, user-scalable=no"> <base target="_blank"> <link rel="stylesheet" href="/assets/styles/presentation.css"> </head> <body class="list"> <div class="notes"> <a href="text.html" target="_parent">♯</a> <a href="/notes/" target="_blank">♫</a> </div> <header class="caption"> <h1>Responsive Web Design</h1> </header> <section bg="resolution.png" id="responsive-web-design" class="slide cover"><div><h2>Responsive Web Design</h2> <p class="note">Quelle: <a href="http://viewportify.hawksworx.com/graph/gLG9WE">viewportify</a></p> <footer> <ul> <li>Den Anfang machte 1996 der Nokia 9000 Communicator</li> <li>Ok wurde es auf WindowsMobile mit Opera</li> <li>mit dem iPhone (2007 ???) fing das mobile Internet richtig an und Kunden wollten eine <q>iPhone Website</q></li> <li>und mit Android, dem iPad und hochauflösenden Bildschirmen war es dann geschehen</li> <li>2010 sagte die International Telecommunication Union, dass mobiler Zugang innerhalb von 5 Jahren den vom Desktop überschreiten würde (stimmt auch, je nachdem bei wem und wie man misst)</li> <li>heute essentiell in Drittwelt- und Schwellenländern, beispielsweise Indien, Indonesien, Vietnam, Brasilien und ganz Afrika</li> <li>normal in Ländern wie Japan, Hong Kong oder Singapur (What, YouTube buffert in der U-Bahn?)</li> </ul> </footer> </div></section> <section class="slide" id="grundannahmen"><div><h2>Grundannahmen</h2> <p>Mobile Geräte <small>– im Gegensatz zum Desktop –</small> …</p> <ul> <li>haben kleine Bildschirme und keine <q>Fenster</q></li> <li>sind schwerer zu bedienen und navigieren</li> <li>sind über langsamere Netze angebunden</li> </ul> <footer> <ul> <li>langsame Netze hier in Deutschland; Japan, Singapur oder Südkorea (5G) sind schneller</li> </ul> </footer> </div></section> <section class="slide" id="dedizierte-mobile-seite"><div><h2>Dedizierte mobile Seite</h2> <ul> <li>Meist per Subdomain: <code class="language-plaintext highlighter-rouge">(mobile|mobi|m).domain.tld</code></li> <li>Meist auf das Nötigste reduzierte Einspaltenlayouts</li> <li>Häufig verminderte Funktionalität</li> <li>heute nicht mehr üblich</li> </ul> </div></section> <section class="slide" id="responsive-seite"><div><h2>Responsive Seite</h2> <ul> <li>Eine Seite für alle <small>(wie es an sich seit jeher war)</small></li> <li><q>Gestalterischer und technischer Ansatz zur Erstellung von Websites, so dass diese auf Eigenschaften des jeweils benutzten Endgeräts reagieren können</q></li> <li>Praktisch meist angepasste Lesbarkeit, Navigation und Steuerungselemente</li> <li>Displays heute auf: Laptops, Desktop-PCs, Tablets, Smartphones, <small>Fernsehern, E-Book-Readern, Waschmaschinen</small></li> <li>Erstmals 2010 erwähnt, seit circa 2012 Hype</li> </ul> <footer> <ul> <li>Das Web war an sich immer <q>responsive</q>, nur zeitweise nicht (Fixed-Width-Layouts mit vertikalem Scrollen auf mobile)</li> <li>Seit 10 Jahren Seiten mit festen Layouts, (kleinster gemeinsamer Nenner, dann 960.gs) und gegebenenfalls viel Whitespace (und schönen Hintergrundgrafiken)</li> <li>Neben <q>Social</q> und <q>Local</q> Hauptgewinn beim Bullshit-Bingo (Responsive *)</li> <li>Gestalterischer und technischer Ansatz zur Erstellung von Websites, so dass diese auf Eigenschaften des jeweils benutzten Endgeräts reagieren können und letztlich die Zugänglich- und Bedienbarkeit erhöht wird</li> <li>Technische Basis hierfür sind neuere Webstandards wie HTML5, CSS3 und JavaScript</li> <li>Es galt: mobile = Webkit, keine Altlast, neue APIs</li> <li>Durchbruch durch Android und zu viele Größen</li> <li>Displays auf: Laptops, Desktop-PCs, Tablets, Smartphones, E-Book-Readern, TV-Geräten (, Kühlschränken, Waschmaschinen)</li> <li>Letztlich sollen sie sich jedem Betrachter so übersichtlich und benutzerfreundlich wie möglich präsentieren</li> </ul> </footer> </div></section> <section class="slide" id="unterschiede"><div><h2>Unterschiede</h2> <table> <thead> <tr> <th scope="col">Responsive Seite</th> <th scope="col">Normale + Mobile Seite</th> </tr> </thead> <tbody> <tr> <td>1 Ressource, 1 Seite</td> <td>1 Ressource, 2 Seiten</td> </tr> <tr> <td>Schnellerer initial Load, mögl.w. mehr Daten</td> <td>1 Round Trip mehr → zusätzliche Ladezeit, dafür weniger Daten</td> </tr> <tr> <td>Links gut teilbar</td> <td>Links häufig schlecht teilbar</td> </tr> <tr> <td>Darstellung nach Eigenschaften</td> <td>Darstellung durch UA-Sniffing o.ä. fehleranfällig</td> </tr> </tbody> </table> <p class="center">Aber beides auch in Kombination nutzbar.</p> <footer> <ol> <li>Mobile: Gleicher Inhalt auf weniger Platz → viel Scrollen</li> <li>Desktop: Genug Platz für viel Inhalt / visuell leichter zu überspringen</li> <li>RWD: Deckt alle Dimensionen ab</li> <li>Desktop: Eventuell Fehler (z.B. großes Display aber nur Touch)</li> </ol> </footer> </div></section> <section class="slide" id="techniken--buzzwords"><div><h2>Techniken / Buzzwords</h2> <ul> <li>Fluid, proportion-based Grids <br /> Einheitsangaben relativ in Prozent statt absolut in Pixel</li> <li>Flexible Images <br /> Größe orientiert sich unabhängig von eigenen Maßen am umliegenden Container</li> <li>Mobile first / Progressive Enhancement <br /> Vom kleinsten Nenner ausgehen. Je mehr der Browser kann, umso mehr bekommt er auch. (Gegekonzept: Graceful Degradation)</li> <li>Adaptive Layouts <br /> Spezifische Breakpoints durch CSS Media Queries</li> </ul> <footer> <ul> <li>RWD ist grundlegend drei Dinge: Fluid Grids, Fluid Images, Media Queries</li> <li>Mobile first / progressive enhancement Gehören zusammen: Erst auf’s Handy, dann davon ausgehend weiterbauen. Anders als: Fertige Seite für Handy reduzieren</li> <li>Unobtrusive JavaScript Läuft auch ohne JS, aber mit ist besser.</li> <li>Graceful Degradation Full-feature Site und dann alles weg, was nicht funktioniert</li> <li>Flexible Images Nachteil: <code class="language-plaintext highlighter-rouge">width</code> / <code class="language-plaintext highlighter-rouge">height</code> funktionieren nicht mehr → Seite springt wenn Bild da ist</li> <li>Fluid: Lineare Veränderung</li> <li>Adaptive: Unterscheidung anhand bestimmter Breakpoints (Beispiel BWL: Lineare Kosten vs. Sprungkosten)</li> </ul> </footer> </div></section> <section class="slide" id="bleibende-probleme"><div><h2>Bleibende Probleme</h2> <ul> <li>Responsive Images – neue HTML-Elemente, -attribute oder Bildformate</li> <li>Werbung weiterhin häufig solide wie in Print und auf dem Desktop gerade noch erträglich, mobil unzumutbar (<small>bspw. FloorAd</small>)</li> <li>E-Commerce-Nutzung steigt, Verkäufe aber deutlich geringer als auf dem Desktop</li> </ul> <footer> <ul> <li>Mobile ist zum Schnorcheln, Desktop zum Tauchen</li> </ul> </footer> </div></section> <section class="slide shout" id="umsetzung"><div><h2>Umsetzung</h2> </div></section> <section class="slide" id="serverseitige-ansätze"><div><h2>Serverseitige Ansätze</h2> <ul> <li>ADA - Audience and Device Aware</li> <li>AWD – Adaptive Web Delivery</li> <li>RESS – responsive web design with server-side components</li> <li>Browserweiche</li> </ul> <footer> <ul> <li>Optimale Auslieferung für das jeweils anfragende Gerät.</li> <li>Browser- / UI-Sniffing (braucht Device Capabilities Database) oder Cookie mit Eigenschaften und Server entscheidet dann.</li> <li>Komplizierter.</li> </ul> </footer> </div></section> <section class="slide" id="clientseitige-ansätze"><div><h2>Clientseitige Ansätze</h2> <p>CSS-Hacks <small>Selektoren und Attribute</small></p> <pre class="highlight language-css" data-lang="css"><code><span class="c">/* IE6 */</span> <span class="o">*</span> <span class="nt">html</span> <span class="nf">#element</span> <span class="p">{</span> <span class="py">_color</span><span class="p">:</span> <span class="no">blue</span> <span class="p">}</span> <span class="c">/* IE7 (and attribute IE7) */</span> <span class="o">*</span><span class="nd">:first-child</span><span class="o">+</span><span class="nt">html</span> <span class="nf">#element</span> <span class="p">{</span> <span class="err">*</span><span class="nl">color</span><span class="p">:</span> <span class="no">blue</span><span class="p">;</span> <span class="p">}</span> </code></pre> <p>Conditional Comments</p> <pre class="highlight language-html" data-lang="html"><code><span class="cp"><!DOCTYPE html></span> <span class="c"><!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--></span> <span class="c"><!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--></span> <span class="c"><!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--></span> <span class="c"><!--[if gt IE 8]><!--></span> <span class="nt"><html</span> <span class="na">class=</span><span class="s">"no-js"</span><span class="nt">></span> <span class="c"><!--<![endif]--></span> </code></pre> <footer> <ul> <li>Verwendung in HTML: <ul> <li>Bedingtes Laden</li> <li class="next">wird trotzdem geladen und nur <em>noch</em> nicht benutzt, daher selten verwendet</li> </ul> </li> <li>Verwendung in CSS <ul> <li>Regeln werden vom Browser nur dann in Betracht gezogen, wenn die definierten Bedingungen erfüllt sind</li> <li>Werden zwar geladen, aber Text und CSS-Parsing sind günstig</li> <li>Mobile first (Desktop kann meist schneller laden / parsen)</li> </ul> </li> <li>Polyfills: Ältere Browser können kein CSS3, bspw. IE < 9</li> <li>CSS Media Queries <ul> <li>Breakpoints nach Inhalt, nicht Geräten</li> </ul> </li> <li>Feature Detection, bspw. mit <a href="http://modernizr.com/">Modernizr.js</a></li> </ul> </footer> </div></section> <section class="slide" id="css-media-queries"><div><h2>CSS Media Queries</h2> <ul> <li>Unterschiedliche CSS-Regeln je nach Eigenschaften des Browsers / Fensters</li> <li>Bedingte Stylesheets werden trotzdem geladen</li> </ul> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><head></span> <span class="c"><!-- Bedingte Stylesheets --></span> <span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"all.css"</span><span class="nt">></span> <span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">media=</span><span class="s">"all and (max-device-width: 480px)"</span> <span class="na">href=</span><span class="s">"mobile.css"</span><span class="nt">></span> <span class="nt"></head></span> </code></pre> </div></section> <section class="slide" id="css-media-queries-1"><div><h2>CSS Media Queries</h2> <pre class="highlight language-css" data-lang="css"><code><span class="nc">.menu</span> <span class="nt">li</span> <span class="p">{</span> <span class="nl">display</span><span class="p">:</span> <span class="n">inline-block</span><span class="p">;</span> <span class="p">}</span> <span class="k">@media</span> <span class="p">(</span><span class="n">max-width</span><span class="p">:</span> <span class="m">480px</span><span class="p">)</span> <span class="n">and</span> <span class="p">(</span><span class="n">orientation</span><span class="p">:</span> <span class="nb">landscape</span><span class="p">)</span> <span class="p">{</span> <span class="nc">.menu</span> <span class="nt">li</span> <span class="p">{</span> <span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span> <span class="nc">.item</span> <span class="p">{</span> <span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">33.333%</span><span class="p">;</span> <span class="p">}</span> <span class="k">@media</span> <span class="p">(</span><span class="n">max-width</span><span class="p">:</span> <span class="m">768px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">.item</span> <span class="p">{</span> <span class="nl">width</span><span class="p">:</span> <span class="m">50%</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span> <span class="k">@media</span> <span class="p">(</span><span class="n">max-width</span><span class="p">:</span> <span class="m">480px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">.item</span> <span class="p">{</span> <span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span> </code></pre> <p class="center"><a href="/beispiele/HTML-CSS/responsive.html">Beispiel</a></p> <footer> <ul> <li>Mögliche Eigenschaften: width / height, device-width / device-height, aspect-ratio / device-aspect-ratio, color-index / color, orientation, resolution</li> <li><code class="language-plaintext highlighter-rouge">device-pixel-ratio</code> wichtig für <q>Retina</q>-Displays</li> </ul> </footer> </div></section> <section class="slide" id="bilder"><div><h2>Bilder</h2> <pre class="highlight language-css" data-lang="css"><code><span class="c">/* Fluid Images (ja, so einfach) */</span> <span class="nt">img</span> <span class="p">{</span> <span class="nl">max-width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span> <span class="p">}</span> <span class="c">/* Hintergrundbilder abhängig von Bildschirmauflösung */</span> <span class="nc">.box</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="sx">url('images/box-bg.png')</span> <span class="nb">no-repeat</span> <span class="nb">top</span> <span class="nb">left</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">200px</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">200px</span><span class="p">;</span> <span class="p">}</span> <span class="k">@media</span> <span class="p">(</span><span class="n">-webkit-min-device-pixel-ratio</span><span class="p">:</span> <span class="m">2</span><span class="p">),</span> <span class="p">(</span><span class="n">min-resolution</span><span class="p">:</span> <span class="m">192dpi</span><span class="p">)</span> <span class="p">{</span> <span class="nc">.box</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="sx">url('images/box-bg@2x.png')</span> <span class="nb">no-repeat</span> <span class="nb">top</span> <span class="nb">left</span><span class="p">;</span> <span class="nl">background-size</span><span class="p">:</span> <span class="m">200px</span> <span class="m">200px</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span> </code></pre> <footer> <ul> <li>Dateigröße spielt bei mobilen Verbindungen immer noch eine Rolle (Downsampling hier nachteilig)</li> <li>Hintergrundbilder meist Teil des Layouts und dekorativer Natur</li> <li>Für inhaltliche Bilder eignet sich diese Methode eher nicht</li> <li>Alternative: Adaptive Images (verschiedene Größen auf dem Server; Laden per Script)</li> </ul> </footer> </div></section> <section class="slide" id="bilder---srcset--sizes"><div><h2>Bilder - <code class="language-plaintext highlighter-rouge">srcset</code> & <code class="language-plaintext highlighter-rouge">sizes</code></h2> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><img</span> <span class="na">src=</span><span class="s">"medium.jpg"</span> <span class="na">srcset=</span><span class="s">"medium.jpg 1x, large.jpg 2x"</span><span class="nt">></span> <span class="nt"><img</span> <span class="na">src=</span><span class="s">"small.jpg"</span> <span class="na">srcset=</span><span class="s">"small.jpg 320w, medium.jpg 600w, large.jpg 900w"</span><span class="nt">></span> <span class="nt"><img</span> <span class="na">src=</span><span class="s">"medium.jpg"</span> <span class="na">srcset=</span><span class="s">"medium.jpg 600w, large.jpg 900w"</span> <span class="na">sizes=</span><span class="s">"(min-width: 20em) 50vw, 100vw"</span><span class="nt">></span> </code></pre> <footer> <ul> <li>Probleme: Auflösung, Viewport-Größen, Seitenverhältnisse, Dateiformate, Kompatibilität</li> <li><code class="language-plaintext highlighter-rouge">srcset</code> <ul> <li>Überschreibt <code class="language-plaintext highlighter-rouge">src</code></li> <li><code class="language-plaintext highlighter-rouge">x</code> definiert Mindest-DPR</li> <li>Alternativ Maßeinheiten definierbar (<code class="language-plaintext highlighter-rouge">w</code> = physikalische Breite des Bildes)</li> </ul> </li> <li><code class="language-plaintext highlighter-rouge">sizes</code></li> <li>Derzeit nur Blink / WebKit, kann aber sofort benutzt werden, da ignoriert, wenn nicht bekannt</li> </ul> </footer> </div></section> <section class="slide" id="bilder---picture"><div><h2>Bilder - <code class="language-plaintext highlighter-rouge"><picture></code></h2> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><picture></span> <span class="nt"><source</span> <span class="na">media=</span><span class="s">"(min-width: 20em)"</span> <span class="na">srcset=</span><span class="s">"horizontal.jpg"</span><span class="nt">></span> <span class="nt"><source</span> <span class="na">srcset=</span><span class="s">"vertical.webp"</span> <span class="na">type=</span><span class="s">"image/webp"</span><span class="nt">></span> <span class="nt"><source</span> <span class="na">srcset=</span><span class="s">"vertical.jpg"</span><span class="nt">></span> <span class="nt"><img</span> <span class="na">src=</span><span class="s">"fallback.jpg"</span><span class="nt">></span> <span class="nt"></picture></span> </code></pre> <footer> <ul> <li>Art Direction: Gegebenenfalls komplett anderes Bild, nicht nur andere Größe</li> <li><code class="language-plaintext highlighter-rouge"><picture></code> als Wrapper für verschiedene Bildquellen</li> <li><code class="language-plaintext highlighter-rouge"><source></code> als Bildquelle</li> <li>mit <code class="language-plaintext highlighter-rouge">srcset</code> kombinierbar</li> <li>Derzeit nur Blink, kann aber sofort benutzt werden, da ignoriert, wenn nicht bekannt</li> </ul> </footer> </div></section> <section class="slide" id="navigation"><div><h2>Navigation</h2> <ul> <li>Inline zu Block</li> <li>Select-Box (<small>bekannte UI des OS <strong>aber</strong> nicht stylebar und JS</small>)</li> <li>Three Line Menu Navicon: <span style="padding: 0 10px 3px 10px; border: 3px solid #0082d1">☰</span></li> <li>(Multi) Toggle – Accordion</li> <li>Off Canvas (<a href="http://tympanus.net/Development/MultiLevelPushMenu/">Beispiel</a>)</li> </ul> <footer> <ul> <li> <p>Apple: the avg finger tap is 44x44 (32x32 icons + padding)</p> </li> <li>Select <ul> <li>Hohe Erkennbarkeit: Ein Dropdown-Menü wird vom User schnell erkannt</li> <li>Natives Steuerelement: Das Betriebsystem trägt Sorge dafür, dass dieses Steuerelement touch-friendly ist</li> <li>Die Navigation bleibt „oben</q>, so wie es Nutzer gewohnt sind</li> <li>Geringe Größe: mehr Platz für andere Inhalte</li> <li>Javascript</li> <li>Verwirrend: Ungewohnt, über ein Select-Steuerelement eine Website zu bedienen</li> <li>Als Designer hat man keine Möglichkeit, die Darstellung dieses Steuerelements zu verändern</li> </ul> </li> <li>Off Canvas <ul> <li>Durch Facebook kann dieses Navigationspattern leichter erkannt werden</li> <li>Platzsparend: Es wird kein Platz für die Navigation verbraucht.</li> <li>Skalierbarkeit: Weitere Elemente oder sogar Untermenüs können leicht dargestellt werden.</li> <li>Darstellung: Kann auf Desktop-Auflösungen wie ein Blick zurück nach 1991 aussehen.</li> <li>JavaScript wird benötigt.</li> </ul> </li> </ul> </footer> </div></section> <section class="slide" id="daten--formulare"><div><h2>Daten / Formulare</h2> <ul> <li>Responsive Tables<br /> <a href="https://css-tricks.com/accessible-simple-responsive-tables/">sind schwierig</a>, aber es gibt hilfreiche Plugins wie <a href="https://github.com/filamentgroup/tablesaw">tablesaw</a></li> <li>Responsive Forms<br /> kann auch schwierig werden, wenn nicht vorab bedacht – darum früh einplanen und Flexbox benutzen</li> </ul> </div></section> <section class="slide" id="links"><div><h2>Links</h2> <ul> <li>Begründener Artikel: <a href="http://alistapart.com/article/responsive-web-design">A List Apart / Responsive Web Design</a></li> <li>Beispiele für RWD: <a href="http://mediaqueri.es/">mediaqueri.es</a></li> <li>Brad Frosts <a href="http://bradfrost.github.io/this-is-responsive/patterns.html">Responsive Patterns</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries">MDN – CSS Media Queries</a></li> <li>Feature Detection: <a href="http://www.modernizr.com/">Modernizr</a></li> <li>Media Query Polyfill: <a href="https://github.com/scottjehl/Respond">Respond.js</a></li> <li><a href="http://viewportsizes.com/">viewportsizes.com</a></li> </ul> </div></section> <div class="progress"><div></div></div> <script src="/assets/scripts/shower.js"></script> <script src="/assets/scripts/shower-notes.js"></script> <script src="/assets/scripts/editor.js"></script> <script> document.querySelectorAll('[bg]').forEach(el => el.style.backgroundImage = `url(${el.attributes.bg.value})`); </script> </body> </html>