IHK-Arbeitskreis Software Prof. Dr. Manfred Wojciechowski 18.02.2014
Aufbau Vorstellung Responsive Webdesign Motivation Technologien Frameworks 2
Vorstellung Zur Person 1991 1996: Studium Informatik an der TU Dortmund 1996 2013: Wissenschaftlicher Mitarbeiter am Fraunhofer Institut für Software- und Systemtechnik, Dortmund Projektleiter Arbeitsgruppenleiter Internettechnologien 2004: Assistant Director am Sino-German Joint Lab for Software Integration Technologies, Beijing, China 2011: Promotion an der TU Dortmund zum Thema Kontextmodellierung im Ambient Assisted Living April 2013: Professor für Informatik, insbesondere Webtechnologien an der FH Düsseldorf 3
Einleitung Forbes, Top Trends for Designing a Website for 2014 Continuous Scrolling Larger Fonts Responsive Webdesign Flat Design Parallax Scrolling Wie kann ich meine Webseite auf verschiedene Bildschirmeigenschaften hin anpassen?? 4
Einleitung Welche Möglichkeiten die Darstellung anzupassen?? Responsive Webdesign Begriff Responsive Webdesign wurde erstmals von Ethan Marcotte im Mai 2010 verwendet Gestalterischer und technischer Ansatz, um die Inhalte einer Webseite reaktionsfähig an die unterschiedlichen Darstellungsanforderungen von Endgeräten (und Nutzern) zu realisieren Passen sich flexibel und fließend an die unterschiedlichen Bildschirmgrößen an Darstellungsbereich 5
Einleitung Anforderungen an die Flexibilität der Präsentation werden immer vielfältiger
Einleitung Mobile Websites http-request Web-Server request.getheader ( User-Agent );
Einleitung Mobile Websites Sehr grobe Anpassung an die Präsentationsanforderungen Web-Server request.getheader ( User-Agent );
Einleitung Responsive Webdesign http-request Web-Server
Einleitung Responsive Webdesign Anpassung erfolgt feingranular im Client Web-Server
Techniken des Responsive Webdesign Techniken des Responsive Webdesign Flexibles Gestaltungsraster Flexible Bilder und Medien Mediaqueries 11
Flexibles Gestaltungsraster Gängiges (unflexibles) Vorgehen zur Strukturierung von Webseiten Definition einer festen Darstellungsbreite für den Inhalt, z.b. 1080 Pixel Schwimmende Einbettung des Inhaltsbereichs in die Browserdarstellung, z.b. mittig Bildschirmbreite, z.b. 1920 Pixel Flexibler Rand Flexibler Rand Inhalt: fixe Breite, z.b. 1080 Pixel 12
Flexibles Gestaltungsraster Gängiges (unflexibles) Vorgehen zur Strukturierung von Webseiten Definition eines Rasters zur Ausrichtung der einzelnen Seiteninhalte Unterteilung des Inhaltsbereichs z.b. in 18 * 60 Pixel breiten Spalten Inhalt: fixe Breite, z.b. 1080 Pixel Raster: fixe Breite, z.b. 60 Pixel <header> <article> <main> Fixe Breite, z.b. 892 Pixel <aside> Fixe Breite, z.b. 188 Pixel 13
Flexibles Gestaltungsraster Fluid Grid Layout reaktionsfähig machen Auflösung starrer Layout-Vorgaben Da wo sinnvoll.. Definition relativer Größenverhältnisse in Bezug auf verfügbare Breite durch den Container Relativer Wert = Fixer Wert / Containergröße * 100 Inhalt: fixe Breite, z.b. 1080 Pixel <header> <main> Fixe Breite, z.b. 892 Pixel <article> 892/1080*100 = 82,59% 188/1080*100 <aside> = 17,41% Fixe Breite, z.b. 188 Pixel 14
Flexibles Gestaltungsraster Layout reaktionsfähig machen Auflösung starrer Layout-Vorgaben Da wo sinnvoll.. Definition relativer Größenverhältnisse in Bezug auf verfügbare Breite durch den Container Relativer Wert = Fixer Wert / Containergröße * 100 Inhalt: maximale Breite, z.b. 1080 Pixel <header> <article> <main> <aside> Relative Breite, z.b. 82,59% Relative Breite, z.b. 17,41% 15
Flexibles Gestaltungsraster Relative Breitenangaben für Inhalt Außenabstand Innenabstand Inhalt: maximale Breite, z.b. 1080 Pixel <header> <article> <main> <aside> Relative Breite, z.b. 82,59% Relative Breite, z.b. 17,41% 16
Flexibles Gestaltungsraster <div class="content"> <header> <h1>italienisches Essen</h1> </header> <article> <main> <h1>pizza</h1> <p>. </p> </main> <aside> <img src="pizza.png" alt="pizza"> </aside> </article> </div>.content { margin: 0px auto; max-width: 1080px; } main { float: left; width: 79.074%; margin-right: 2.777%; padding: 8px 0.74%; } aside { float: right; padding: 8px 0.74%; width: 15.93%; } Was haben wir erreicht?? 17
Flexibles Gestaltungsraster > 1080px = 1080px < 1080px Raster skaliert mit 18
Flexible Bilder und Medien Techniken des Responsive Webdesign Flexibles Gestaltungsraster Flexible Bilder und Medien Mediaqueries 19
Flexible Bilder und Medien Fluid Image Bild reaktionsfähig machen Definition relativer Größenverhältnisse des Bilds in Bezug auf verfügbare Breite durch den Container Relativer Wert = Fixer Wert / Containergröße * 100 Skalierung der Bildhöhe zur Bildbreite Inhalt: maximale Breite, z.b. 1080 Pixel Relative Breite, z.b. 82,59% (max. <article> 892 Pixel) <main> 180/892*100 = 20,18% Fixe Breite, z.b. 180 Pixel Pizza Pizza ist ein vor dem Backen würzig belegtes Fladenbrot aus einfachem Hefeteig Restliche aus der Breite italienischen Küche. Die heutige, international verbreitete <aside> 20
Flexible Bilder und Medien Bild reaktionsfähig machen Definition relativer Größenverhältnisse des Bilds in Bezug auf verfügbare Breite durch den Container Relativer Wert = Fixer Wert / Containergröße * 100 Skalierung der Bildhöhe zur Bildbreite Inhalt: maximale Breite, z.b. 1080 Pixel Relative Breite, z.b. 82,59% (max. <article> 892 Pixel) <main> Pizza <aside> Relative Breite, z.b. max. 20,18% Pizza ist ein vor dem Backen würzig belegtes Fladenbrot aus einfachem Hefeteig aus der italienischen Küche. Die heutige, international verbreitete Restliche Breite 21
Flexible Bilder und Medien <div class="content"> <header> <h1>italienisches Essen</h1> </header> <article> <main> <img src="pizza.png" alt="pizza"> <h1>pizza</h1> <p>. </p> </main> <aside> </aside> </article> </div> Was passiert hier bei Verkleinerung??.content { margin: 0px auto; width: 1080px; } main { float: left; width: 79.074%; margin-right: 2.777%; padding: 8px 0.74%; } aside { float: right; padding: 8px 0.74%; width: 15.93%; } img { height: auto; max-width: 20.18%; float: left; } 22
Flexible Bilder und Medien > 1080px = 1080px < 1080px Die Bildgröße skaliert. Optimierter Textumfluss 23
Mediaqueries Techniken des Responsive Webdesign Flexibles Gestaltungsraster Flexible Bilder und Medien Mediaqueries 24
Mediaqueries > 1080px = 1080px Ist die kleine Darstellung wirklich? ideal? < 1080px 25
Mediaqueries 1080px Ränder werden kleiner 26
Mediaqueries 650px 1080px Kein Rand mehr Inhalt skaliert 27
Mediaqueries 250px 650px 1080px <aside>-bereich zu schmal Bild zu klein 28
Mediaqueries 250px 650px 1080px Zeilenumbruch der Überschrift Passt nicht mehr in Header 29
Mediaqueries 250px Umbruchpunkte 650px 1080px @media only screen and (min-width: 1080px) { /* Standard-Layout mit Seitenrändern */ } @media only screen and (max-width: 1080px) { } @media only screen and (max-width: 650px) { } @media only screen and (max-width: 250px) { Prof. Dr. Manfred Wojciechowski, 18. } Februar 2014 30
Mediaqueries Umbruchpunkte 1080px Ränder werden kleiner @media only screen and (min-width: 1080px) { /* Standard-Layout mit Seitenrändern */ } 31
Mediaqueries Umbruchpunkte 650px 1080px Kein Rand mehr Inhalt skaliert @media only screen and (max-width: 1080px) { /* Optimierung: Kein Rand, kein Außenabstand */.content { border: none; margin: 0; } } 32
Mediaqueries 250px Umbruchpunkte 650px 1080px <aside>-bereich zu schmal Bild zu klein? Was können wir machen? 33
Mediaqueries 250px Umbruchpunkte 650px 1080px <aside>-bereich zu schmal Bild zu klein 34
Mediaqueries 250px 650px 1080px Zeilenumbruch der Überschrift Passt nicht mehr in Header - Breakpoints erkennen - Anpassung der Website an den Breakpoints definieren @media only screen and (max-width: 250px) { header { background-color: #00A080; color: white; height: 4em; height: 6em; } } 35
Frameworks Frameworks nutzen Flexible Grid-Systeme Responsive Formulare Responsive Tabellen Fertige Templates UI-Elemente Integration in CMS 40
Frameworks Auswahl Foundation 5 Responsive Framework Twitter Bootstrap YAML (Yet Another Multicolumn Layout) Gumby Framework Kube GroundworkCSS BASE 41
Abschluss Fragen? 42