PDF, 6 Folien pro Blatt

20.04.2015
Multimediatechnologie
Responsive Design I
GRID DESIGN
FIXED AND FLUID
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/1
Grid Web Design
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/2
Grid Web Design – modular
• 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.
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/3
Grid Web Design – Beispiel
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/5
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
21.04.2015/4
Responsive Design
http://modulargrid.org/#app
Grid Web Design – Beispiel
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/6
1
20.04.2015
Grid Web Design
Fluid Grid Design
• http://960.gs/ - einige Grids unter
http://960.gs/demo.html.
• http://thesquaregrid.com, http://cssgrid.net,
http://lessframework.com,
http://andytaylor.me/2013/04/09/1140px-css-gridretired/ - old Frameworks
• http://modulargrid.org/#app - interaktives Tool
• http://www.responsivegridsystem.com/ !!!
... und weitere Quellen, vgl.
http://www.thegridsystem.org/.
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/7
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.
Michael Frank
HTWK-Leipzig, 2015
Fluid Grid Design
Multimediatechnologie
Responsive Design
21.04.2015/8
Fluid Grid Design
Um nicht alles selbst ausrechnen zu müssen,
benutzt man am besten Frameworks, z.B.
Bootstrap Framework, http://getbootstrap.com/css/
(oder höhere Version in Zukunft)
tiny fluid grid, http://www.tinyfluidgrid.com/
Es gibt weitere Frameworks und Ansätze:
Variable Grid System (Fluid Version),
http://grids.heroku.com/, Basis http://960.gs und
http://www.designinfluences.com/fluid960gs/.
Responsive Grid Design,
http://www.responsivegridsystem.com/
Foundation, http://foundation.zurb.com/
Less Framework, http://lessframework.com/
Semantic Grid System, http://semantic.gs/
Flexbox Grid, http://flexboxgrid.com/ (Version???)
Beispieldatei: fluid_grid_960_940_12columns_20pxmargin-
inbetween.css, http://www.1stwebdesigner.com/tutorials/fluid-gridsin-responsive-design/
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/9
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/10
Fluid Grid Design
• Amazium (2012ff),
http://www.amazium.co.uk/typography.html
• Gumby v.2 mit SASS auf Basis von Ruby,
http://gumbyframework.com/
• Foundation 5, July 2014 – Flex Boxes and
Grid, SASS und SCSS,
http://zurb.com/article/1333/foundation-a-newgrid
• 10 Designtrends: http://www.zingdesign.com/top-10-web-designtrends-and-predictions-for-2015/
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/11
ADAPTIVE DESIGN
RESPONSIVE DESIGN
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/12
2
20.04.2015
Adaptive Web Design
Welche Screenmaße?
• Der Begriff wurde von Aaron Gustafson in seinem
Buch 2011 geprägt (http://easyreaders.net/books/adaptive-web-design/). Er geht
auf die Bewegung des Progressive Enhancement
im Bereich des Webdesign zurück.
 2014 eher mehr
iOS
(Vgl. http://www.techrepublic.com/blog/webmaster/understandingprogressive-enhancement-techniques-in-web-design/1809)
• 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.
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/13
Wichtige Maße
Android
http://opensignal.com, 2013
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
Welche Screenmaße?
21.04.2015/14
2012
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 (???!!!)
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/15
Responsive Web Design
Michael Frank
Multimediatechnologie
HTWK-Leipzig, 2015
Responsive Design
http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning
21.04.2015/16
Responsive Design – Beispiel
• Der Begriff geht auf Ethan Marcotte und seinen
Artikel vom 25.05.2010 zurück
(http://alistapart.com/article/responsive-webdesign). Er schrieb auch ein Buch dazu.
• Um das Aussehen der Webseite dem
Anzeigegerät anzupassen, werden CSS3, Media
Queries, die @media-Regel 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.
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/17
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/18
3
20.04.2015
Prinzipien
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).
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/19
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.
Michael Frank
HTWK-Leipzig, 2015
Prinzipien
Multimediatechnologie
Responsive Design
21.04.2015/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
http://designshack.net/articles/css/mobilefirst/.
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/21
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
Michael Frank
HTWK-Leipzig, 2015
Possible Breakpoints 2012
Multimediatechnologie
Responsive Design
21.04.2015/22
Breakpoints
http://viljamis.com/blog/2012/responsive-workflow/
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/23
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/24
4
20.04.2015
Vorschlag für ein Vorgehen
Viljami Salminen Design schlägt vor (2013):
DENKBARE LAYOUT-MUSTER
JE NACH ANSATZ
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/25
Michael Frank
HTWK-Leipzig, 2015
Layout-Muster
Multimediatechnologie
Responsive Design
21.04.2015/26
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 ...
[ http://www.lukew.com/ff/entry.asp?1514 ]
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/27
Michael Frank
HTWK-Leipzig, 2015
Column Drop
Multimediatechnologie
Responsive Design
21.04.2015/28
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.
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/29
Dieser Ansatz erweitert die Ideen zuvor um
Neudesign bestimmter Elemente bei
Formatänderungen (horizontale versus vertikale
Navigation, Bildformate und Dateiformate etc.).
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/30
5
20.04.2015
Tiny Tweeks
Off Canvas
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..
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.
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/31
Michael Frank
HTWK-Leipzig, 2015
Verweise
http://www.vanseodesign.com/web-design/responsive-layout-patterns/ .
Siehe auch:
http://jasonweaver.name/lab/offcanvas/ und Unterseiten.
http://www.lukew.com/ff/entry.asp?1517
Multimediatechnologie
Responsive Design
21.04.2015/32
Neue Ideen ...
Beispiele dieser Art können unter dem Link
http://mediaqueri.es in vielen Variationen studiert
werden.
Ein anderer Beitrag diskutiert diese Ansätze im
Detail und verweist auf aktuellere Ideen dazu:
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/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 ...
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/34
Neue Ideen ...
Siehe u.a. Ansätze von beschränkter technischer
Nutzbarkeit:
Trent Walter, Content Choreography,
http://trentwalton.com/2011/07/14/content-choreography/, Juli 2011
Jordan Moore, Building with Content Choreography,
http://www.jordanm.co.uk/post/21863299677/building-with-contentchoreography, April 2012,
Demo: http://www.jordanm.co.uk/lab/contentchoreography
Chris Coyier, Contend Folding: http://css-tricks.com/content-folding/ ,
Mai 2012.
Steven Bradley, „How To
Maintain Hierarchy Through
Content Choreography”,
April 2013
http://blog.kulturbanause.de
/2013/12/content-choreographyfur-responsive-websites/
- bis 2014 fortgeführt,
Flexbox-Ideen und Frameworks dazu
http://best-web-design-tools.com
/?s=flex
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/35
Michael Frank
Multimediatechnologie
21.04.2015/36
HTWK-Leipzig,
2015
Responsive Design
http://www.smashingmagazine.com/2013/04/25/maintain-hierarchy-content-choreography/,
6
20.04.2015
Anliegen
Navigation zwischen Informationsangeboten ist sehr
wichtig. Dafür werden einfache und verschachtelte
Menüs eingesetzt.
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.
NAVIGATIONSMUSTER
Siehe
[http://bradfrostweb.com/blog/web/responsive-nav-patterns/ - Februar 2012]
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/37
Michael Frank
HTWK-Leipzig, 2015
Top Navigation
Multimediatechnologie
Responsive Design
21.04.2015/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
Aussehen auf
anderen Geräten,
Design-Bugs
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/39
Navigation mit Icons
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/40
Footer (Anker) Navigation
Analog zu Microsofts Windows-8-Oberfläche:
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: http://contentsmagazine.com/#site-nav
Software & Friends in Leipzig
Mai 2013
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/41
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/42
7
20.04.2015
Select Menu Navigation
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.
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/43
Probleme:
Festes Design für Drop-Down-Boxen
Nur Workarounds für Untermenüs (Anstriche davor)
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/44
Toggle Menu
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.
Diese komfortable Möglichkeit hängt vor allem von
JavaScript ab, was ältere Geräte manchmal
nicht ausreichend reproduzieren.
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/45
Michael Frank
HTWK-Leipzig, 2015
Toggle Menu
Multimediatechnologie
Responsive Design
21.04.2015/46
Off-Canvas Menu
Hier ein Beispiel mit Quelltext unter
http://inspectelement.com/tutorials/pull-downfor-navigation-a-responsive-solution/ :
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
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/47
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/48
8
20.04.2015
Off-Canvas Menu
Off-Canvas Menü, v. 2
Verwendet wird Off Canvas Menu z.B. von Google
Mobile:
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.
http://responsivenavigation.net/ - links versteckt,
und weitere Beispiele dort!
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/49
Michael Frank
HTWK-Leipzig, 2015
Gar keine Navigation …
Multimediatechnologie
Responsive Design
21.04.2015/50
Scroll over Click
Neuester Trend ist es, nur noch mit der TouchGeste Swipe oder mit der Maus-Geste Klickenund-Ziehen zu arbeiten.
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.
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/51
Full Screen Menus
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/52
Trends, Frameworks, Bibliotheken
• Andreas Hecht, Responsive Navigation: Design-Trends 2015, Febr.
2015, http://www.drweb.de/magazin/responsive-navigation-designtrends-2015-53019/ - bebilderte schöne Lösungen mit Links zu den
technologischen Lösungen (am Ende)
• Patrick McNeil, 3 Essential Navigation Trends for 2015,
http://www.webdesignerdepot.com/2015/01/3-essential-navigationtrends-for-2015/ - drei interessante Gestaltungsvorschläge für
Navigationen
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/53
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/54
9
20.04.2015
Quellen
Quellen
• Responsive und Adaptive Web Design:
http://www.splashnology.com/article/70-examples-of-modernresponsive-web-design/2537/
• Ryan Boudreaux, Unterschied zwischen Adaptive und Responsive
Web Design: http://www.techrepublic.com/blog/web-designer/what-isthe-difference-between-responsive-vs-adaptive-web-design/
• Nathan Smith, https://speakerdeck.com/nathansmith/960-grid-system
• Android Fragmentation Visualized,
http://opensignal.com/reports/fragmentation-2013/, July 2013
• http://demosthenes.info/blog/586/CSS-Fluid-Image-Techniques-forResponsive-Site-Design
• http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vselastic-layout-whats-the-right-one-for-you/
• http://webdesignerwall.com/trends/inspiration-fluid-responsive-design
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/55
• Ethan Marcotte, Fluid Grids, http://alistapart.com/article/fluidgrids
• http://blog.teamtreehouse.com/whats-the-difference-between-fixedfluid-adaptive-and-responsive-web-design-treehouse
• http://www.1stwebdesigner.com/design/adaptive-fluid-approachresponsive-web-design/
• 55+ Great and Useful Tools for Responsive Webdesign,
http://www.onextrapixel.com/2013/02/20/55-great-and-useful-toolsfor-responsive-web-design/
• 2012, Vorschläge für Grenzen bei {3,4,6}-Media-Query-Grenzen,
http://www.metaltoad.com/blog/simple-device-diagram-responsivedesign-planning
• Aug. 2012, 20 CSS Frameworks and Boilerplates,
http://mashable.com/2013/04/26/css-boilerplates-frameworks/
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/56
Quellen
• Stephanie Drost, „Konzeption und Entwicklung eines Responsive
Designs für Magento-Shops“, Masterarbeit, HTWK, F IMN, Oktober
2013.
• Marc Sohler, „Anwendungen und Techniken des Responsive
Webdesign - begleitet durch ein Beispielprojekt“, Bachelorarbeit,
HTWK, F IMN, September 2013.
• Weitere Bachelorarbeiten 2014.
Vielen Dank für Ihre Aufmerksamkeit –
bis demnächst.
• Buch: Andrea Ertel, Kai Laborenz, „Responsive Webdesign:
Anpassungsfähige Websites programmieren und gestalten“, Galileo
Computing, 12.12.2013 / 12.12.2014 – future books!!!
http://www.amazon.de/Responsive-Webdesign-Anpassungsfähigeprogrammierengestalten/dp/3836232006/ref=sr_1_3?ie=UTF8&qid=1414442973&
sr=8-3&keywords=Kai+Laborenz+Responsive
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/57
Michael Frank
HTWK-Leipzig, 2015
Multimediatechnologie
Responsive Design
21.04.2015/58
10

Download Report