Multimediatechnologie. Grid Web Design. Grid Web Design modular. Grid Web Design Beispiel. Grid Web Design Beispiel GRID DESIGN FIXED AND FLUID

Transkript

1 I GRID DESIGN FIXED AND FLUID / /2 Grid Web Design Der Ansatz des Grid Designs ist es, die Webseite senkrecht in eine fixe Anzahl von Streifen mit Lücken zu teilen und diese dann je nach horizontaler Raumaufteilung in einer Zone der Webseite zu verschiedenen div-boxen nebeneinander zusammenzufassen. Grid Web Design modular / /4 Grid Web Design Beispiel Grid Web Design Beispiel / /6 1

2 Grid Web Design - einige Grids unter old Frameworks - interaktives Tool und weitere Quellen, vgl. Fluid Grid Design Wenn man das an meist 960px Webseitenbreite orientierte Grid Design durchdenkt, dann kommt man zur Notwendigkeit, diese Grids in relativen Größen (Prozenten) zu planen. Dabei wird die max-width festgelegt, zumal es immer höher auflösende, breitere Bildschirme gibt. Auch Textverläufe, Schriftgrößen, Bilder, Videos mit ihren (div-)boxen müssen sich mit der Größe der Webseite proportional ändern, zumindest in Grenzen / /8 Fluid Grid Design Um nicht alles selbst ausrechnen zu müssen, benutzt man am besten Frameworks, z.b. tiny fluid grid, Variable Grid System (Fluid Version), Basis und Beispieldatei: fluid_grid_960_940_12columns_20pxmargininbetween.css, Fluid Grid Design Bootstrap Framework, (oder höhere Version in Zukunft) Es gibt weitere Frameworks und Ansätze: Responsive Grid Design, Foundation, Less Framework, Semantic Grid System, Flexbox Grid, (Version???) / /10 Fluid Grid Design Amazium (2012ff), Gumby v.2 mit SASS auf Basis von Ruby, Foundation 5, July 2014 Flex Boxes and Grid, SASS und SCSS, 10 Designtrends: ADAPTIVE DESIGN RESPONSIVE DESIGN / /12 2

3 Adaptive Web Design Der Begriff wurde von Aaron Gustafson in seinem Buch 2011 geprägt ( Er geht auf die Bewegung des Progressive Enhancement im Bereich des Webdesign zurück. (Vgl. Grundidee ist die Auswahl eines festen Sets von Bildschirmgrößen, die dann zu Schranken für Designwechsel der Website werden. Ausgehend davon werden weitere Techniken angewandt, ähnlich wie bei RWD /13 Android Welche Screenmaße? eher mehr ios /14 Wichtige Maße Bildschirme müssen unterschiedlich beurteilt werden: Pixelanzahl in Höhe und Breite reine Technik Ausmaße des physikalischen Bildschirms in einer Längeneinheit daraus resultiert die Entfernung zum Auge und die notwendige Schriftgröße Resultierend: Pixel je physikalischer Längenbzw. Höheneinheit (kann unterschiedlich sein) und praktikable Größenanweisungen (???!!!) Welche Screenmaße? / /16 Responsive Web Design Der Begriff geht auf Ethan Marcotte und seinen Artikel vom zurück ( Er schrieb auch ein Buch dazu. Um das Aussehen der Webseite dem Anzeigegerät anzupassen, werden CSS3, Media Queries, und Fluid Grids unter Benutzung von Prozentmaßen benutzt. Ergänzend wird mit Maßen in em bzw. rem, flexiblen Bildern, flexiblen Videos und flexibler Schriftgröße gearbeitet /17 Beispiel /18 3

4 Prinzipien Content First, Navigation Second - Eine Art des Herangehens an das Design von Websites, die die Flächenaufteilung der Webseiten und die inhaltlich-semantisch gesehenen Rollen (Landmark Roles) der Teile der Webseiten in den Vordergrund stellt. - Eine Art des Designs, die alle adressierten Größen und Auflösungen von Bildschirmen gleich mitdenkt (und nicht erst ein Design fertigstellt, bevor der Adaptionsversuch gemacht wird). Prinzipien Mobile First und Progressive Enhancement - Die Entwicklung wird mit dem Design für kleine Bildschirme begonnen. - Die Funktionalität einer Webseite wird schrittweise an die Fähigkeiten größerer Bildschirme und der Browser angepasst. - Es wird in der Reihenfolge der Schichten HTML (mit strukturiertem Inhalt), CSS (Darstellungen) und JavaScript (Verhalten bei Interaktion, in der Zeit) vorgegangen / /20 Prinzipien Desktop First und Graceful Degradation - Zuerst wird das Design für den größten gedachten Bildschirm konzipiert, danach wird stufenweise das Design für kleinere Bildschirmgrößen und -auflösungen durch Abspecken der Inhalte und Umsortieren des Designs geschaffen. - Alte Webseiten können so renoviert werden, viele Webdesigner werden bei ihren traditionell erarbeiteten Techniken abgeholt... aber... - Vgl. Argumente in /21 Prinzipien Für welche Bildschirm- und Browserauflösungen wird designt? Es ist zu wählen... - Alle Bildschirme ohne Format- und Auflösungsbeschränkungen. - max-width wird auf 960px (oder 920px oder anders) gesetzt, die minimale Größe sind ältere Smartphones hochkant. - min-width wird doch gesetzt, um nicht jedes alte Gerät noch bedienen zu müssen - Breakpoints nach Notwendigkeiten des Designs /22 Possible Breakpoints 2012 Breakpoints / /24 4

5 Vorschlag für ein Vorgehen Viljami Salminen Design schlägt vor (2013): DENKBARE LAYOUT-MUSTER JE NACH ANSATZ / /26 Layout-Muster Mostly Fluid Das klassische Boxendesign wird mit dem semantischen Ansatz fortgeführt, indem den großen Layout-Flächen header, section, aside, footer etc. mit CSS die Eigenschaft display:block bzw. flex mitgegeben wird. Oder man wählt den Flexbox-Ansatz. Der Ansatz ist, die verschiedenen Breiten nach Breakpoints zu betrachten und simultan die daraus resultierenden Layouts für die eigene Inhalts- und Designidee zu gestalten. Luke Wroblewski machte 2012 fünf Layout-Muster aus, die als Designansätze grundsätzlich denkbar sind... [ ] / /28 Column Drop Layout Shifter Der Ansatz geht von Desktop First aus. Er löst mehrspaltiges Design durch Fallenlassen einzelner Elemente unter den (teils noch mehrspaltigen) Hauptinhalt schrittweise auf. Dieser Ansatz erweitert die Ideen zuvor um Neudesign bestimmter Elemente bei Formatänderungen (horizontale versus vertikale Navigation, Bildformate und Dateiformate etc.) / /30 5

6 Tiny Tweeks Der Schwerpunkt liegt hier auf einem einfachsten Layout (meist einer Spalte) kombiniert mit zahlreichen Maßnahmen der fluiden Anpassung von Schriftgrößen und -layout, Bild- und Videodateien, farblicher Gestaltung etc.. Off Canvas Es wird versucht, die Fähigkeit von Smartphones und Tablets zu nutzen, Spalten links und rechts erst auf Anforderung in den Bildschirm überdeckend oder verdrängend einzufahren / /32 Verweise Beispiele dieser Art können unter dem Link in vielen Variationen studiert werden. Ein anderer Beitrag diskutiert diese Ansätze im Detail und verweist auf aktuellere Ideen dazu: Siehe auch: und Unterseiten /33 Neue Ideen... Der Trend geht dahin, Boxendesign zu vermeiden und die semantischen Rahmenelemente mehr in einer (!) Spalte zu verwalten. Unterschiedliche Designs sollten dann durch eine Art Choreografie (Tanz der Rahmenelemente) zu flexiblen neuen Arrangements entstehen. Alles untereinander zu schieben, wäre dann die schwächste Lösung Einrücken zwischen andere Elemente, seitliches Nebeneinanderstellen, verschieben aus einem Rahmenelement in ein anderes deutlich stärker /34 Neue Ideen... Siehe u.a. Ansätze von beschränkter technischer Nutzbarkeit: Trent Walter, Content Choreography, Juli 2011 Jordan Moore, Building with Content Choreography, April 2012, Demo: Chris Coyier, Contend Folding: Mai Neue Ideen... Steven Bradley, How To Maintain Hierarchy Through Content Choreography, April /2013/12/content-choreographyfur-responsive-websites/ - bis 2014 fortgeführt, Flexbox-Ideen und Frameworks dazu /?s=flex / /36 HTWK-Leipzig,

7 Anliegen Navigation zwischen Informationsangeboten ist sehr wichtig. Dafür werden einfache und verschachtelte Menüs eingesetzt. NAVIGATIONSMUSTER Je kleiner der Bildschirm, um so mehr konkurrieren vorhandener Platz, Navigationsübersicht und Schriftgröße. Für Touchscreens ist sowieso auf größere Schaltflächen auszuweichen. Siehe [ - Februar 2012] / /38 Top Navigation Dieser Ansatz ist eigentlich keiner bei Navigationen ohne Verschachtelungen und mit wenigen Einträgen ordnet man diese oben horizontal an. Bei kleinen Bildschirmen lässt man die Navigation einfach mehrzeilig werden. Problemaspekte: Höhe der Navigation zu Bildschirmhöhe Top Navigation Aussehen auf anderen Geräten, Design-Bugs / /40 Navigation mit Icons Analog zu Microsofts Windows-8-Oberfläche: Software & Friends in Leipzig Mai 2013 Footer (Anker) Navigation Da größere Navigation im Kopf auf kleinen Bildschirmen stört, bringt man sie im Footer an. Per Verweis-Button im Kopf kann evtl. dorthin gesprungen (durchgescrollt) werden. Dann geht es entweder über die Navigation oder mit einem Rücksprung in den Kopf weiter. Diese Navigation ist gewöhnungsbedürftig, aber leicht erweiterbar, wenn die Website wächst. Beispiel: / /42 7

8 Select Menu Navigation Eine klassische Navigation für die Desktopvariante einer Website wird bei einer Grenze zu kleineren Bildschirmen in ein Select Menu (z.b. Drop-Down-Menü) verwandelt. Select Menu Navigation Probleme: Festes Design für Drop-Down-Boxen Nur Workarounds für Untermenüs (Anstriche davor) / /44 Toggle Menu Das Menu wird bei kleineren Bildschirmen nur noch als Ikone im Kopf dargestellt und nur bei Nutzerinteraktion dynamisch ein- bzw. wieder ausgeblendet. Die Richtung der Überblendung ist wählbar. Toggle Menu Diese komfortable Möglichkeit hängt vor allem von JavaScript ab, was ältere Geräte manchmal nicht ausreichend reproduzieren / /46 Toggle Menu Hier ein Beispiel mit Quelltext unter : Off-Canvas Menu Die Grundidee dieses Menüs ist eigentlich ein Designtyp - das Verstecken der Navigation links oder rechts hinter dem Bildschirmrand kleiner Geräte, hervorzuholen durch Antippen und Ziehen. Webbrowser Opera, alle Screens / /48 8

9 Off-Canvas Menu Verwendet wird Off Canvas Menu z.b. von Google Mobile: Off-Canvas Menü, v. 2 Eine andere Variante des Off-Canvas Menüs ist so konstruiert, dass das Menü unter der betrachteten Webseite liegt. Nur diese obere Webseite wird seitlich weggeschoben, um das Menü sichtbar zu machen. Die obere Webseite schnappt dann zurück, wenn nicht navigiert wird. - links versteckt, und weitere Beispiele dort! / /50 Gar keine Navigation Neuester Trend ist es, nur noch mit der Touch- Geste Swipe oder mit der Maus-Geste Klickenund-Ziehen zu arbeiten. Scroll over Click Die Angebote müssen dafür einfach strukturiert (Tiny Tweeks, Off-Canvas) und nicht zu umfangreich sein. Die Navigation erfolgt dann über Verlinkung zum nächsten Angebot / Seitenzustand / /52 Full Screen Menus Trends, Frameworks, Bibliotheken Andreas Hecht, Responsive Navigation: Design-Trends 2015, Febr. 2015, - bebilderte schöne Lösungen mit Links zu den technologischen Lösungen (am Ende) Patrick McNeil, 3 Essential Navigation Trends for 2015, - drei interessante Gestaltungsvorschläge für Navigationen / /54 9

10 Quellen Responsive und Adaptive Web Design: Ryan Boudreaux, Unterschied zwischen Adaptive und Responsive Web Design: Nathan Smith, Android Fragmentation Visualized, July Responsive-Site-Design Quellen Ethan Marcotte, Fluid Grids, Great and Useful Tools for Responsive Webdesign, , Vorschläge für Grenzen bei {3,4,6}-Media-Query-Grenzen, Aug. 2012, 20 CSS Frameworks and Boilerplates, / /56 Quellen Stephanie Drost, Konzeption und Entwicklung eines Responsive Designs für Magento-Shops, Masterarbeit, HTWK, F IMN, Oktober Marc Sohler, Anwendungen und Techniken des Responsive Webdesign - begleitet durch ein Beispielprojekt, Bachelorarbeit, HTWK, F IMN, September Weitere Bachelorarbeiten Vielen Dank für Ihre Aufmerksamkeit bis demnächst. Buch: Andrea Ertel, Kai Laborenz, Responsive Webdesign: Anpassungsfähige Websites programmieren und gestalten, Galileo Computing, / future books!!! sr=8-3&keywords=kai+laborenz+responsive / /58 10