Photo by Lee Campbell on Unsplash

Accessibility: Warum Faulheit der Menschheit hilft Responsive Webdesign zu revolutionieren.

Faulheit ist die Furcht vor bevorstehender Arbeit.

 

Laziness und Responsive Design sind zwei Attribute, die auf den ersten Blick nicht zueinander passen. Das meint man, bevor man sich die Ted-Keynote von Ethan Marcotte [1]gesehen hat. Im Rahmen der Lehrveranstaltung Accessibility durfte ich mir diese Keynote ansehen. Sein Ansatz ist sehr kontrovers, aber spannend. Denn mit Faulheit erreicht man oft mehr, als mit komplexen Lösungen. 😉

Als ehemalige Projektmanagerin habe ich viel Erfahrung mit Web-Projekten. Und ich weiß auch, dass Design für eine Website oft nicht nur aus einem Entwurf besteht, sondern ein Format erst der Anfang ist. Es wird meist die Desktop Version gestaltet und dann erst eine mobile Seite für ein bestimmtes Device. Doch macht das überhaupt Sinn?

Various Screens

Wenn man heutzutage eine Website gestaltet, dann muss diese auf sehr vielen Screens funktionieren. Und für auf jedem einzelnen dieser Screens sollte die Darstellung gut aussehen, alle Elemente enthalten sein und natürlich auch barrierefrei!

 

Weniger ist mehr!

Es wird zu sehr in Devices gedacht. Mobile, Tablet, Desktop. Alles schön und gut, aber man muss die drei Devices zusammenfassen um das große Ganze zu sehen. Websites, die mittels Javascript programmiert wurden sind nicht das ideale Format, um Content flexibel zu gestalten.

Nicht nur die unterschiedlichen Screens sind oft eine Herausforderung für Designer oder Programmierer, auch die Funktionalität auf verschiedenen Betriebssystemen kommt ja da noch dazu. Diese Komplexität ruft förmlich zu langwierigen Lösungsansätzen. Dabei kann Faulheit behilflich sein!

 

„Laziness could be the help in this complex world. I look at all these challenges and device classes and I know that I need to solve it.“ Ethan Marcotte

 

Flexible Grids können die Lösung dieses Problems darstellen. Man sollte das große Ganze in Grids unterteilen, damit sich je nach Device und Screen, die Komponenten immer zu einem neuen ganzen und einheitlichen Element zusammenstellen können.

Im Universum der Schnittstellen muss man die Größen immer Umstellen, um die Botschaft rüber zu bringen. Aber wie schon erwähnt, gibt es immens viele davon. Ethan hat in seinem Vortrag drei Bereiche, wie man die Laziness in das Responsive Design übernehmen kann:

  • Layout
  • Animation
  • Navigation

 

Layout: Der Durchschnitt ist die Lösung.

 Vor allem Foto oder Video-Content bildet bei responsive Design ein Problem. Beim Maximieren oder Minimieren eines Fensters sieht man oft ein stocken. Beim Programmieren von responsible Fotos oder Videos ist oft folgender Code der erste Step:

img {

max-width: 100%;

}

Problem of scale: Die meisten implementierten Visualisierungen haben keine freie Abmessung. Sie stehen immer mittels einer definierten Proportion zueinander. Videos mittels Javascript flexibel machen ist zwar möglich, aber aufwendig, teuer und kann eventuell crashen. Auch ist gibt es oft eine unschöne visuelle Stockung beim auseinander oder zusammenziehen.

 

Die Lösung: Aspect Ratio

 Da es zu Problemen oft führt mit flexiblen width und height Elementen zu arbeiten, kam Ethan auf die Idee, den Durchmesser zu verwenden. Er kreierte einen Container, der mittels dem Aspect Ratio flexibel blieb und setzte dort ein Video hinein; hier konnte er die Breite und Höhe auf 100% stellen. Diese beziehen sich dabei auf das Format der Box und die Box ist aber so ausgestattet, dass es das Format vom Video hat. > smoother, weil es in einem Container gibt. Ist eine deutlich elegantere Lösung als Javascript.

Aspect Ratio Box

 

Animation: Do it like Disney.

Bevor Walt Disney seine Firma gegründet hat, gab es bereits animierte Filme. Jedoch hat keiner von ihnen die Realität wiedergegeben. Disney war oder ist immer noch so erfolgreich, weil es die Animationen lebendig macht. Die Leute finden Gefallen an den Filmen, weil darin ein Funke Realität enthalten war. Disney schaffte es die Realität als Karikatur darzustellen oder als Illusion des täglichen Lebens.

disney

Innenseite des Buches „The Illusion of Life Disney Animation.“ Von Frank Thomas und Ollie Johnston.

Zwei Illustratoren von Disney haben dabei die „12 Basic Principles of Animation“ definiert, welche als Basis für eine gelungene Animation dienen soll. [2]

  1. Squash & Stretch
  2. Staging
  3. Anicipation
  4. Straight Ahead & Pose to Pose
  5. Follow Through & Overlapping
  6. Slow in & Slow out
  7. Arcs
  8. Seondary Action
  9. Timing
  10. Exaggeration
  11. Solid Drawings
  12. Appeal

 

 

Navigation: Feeling home at any size screen.

Responsible Navigation gestaltet niemand gern. Meistens hat man sehr viele Menüpunkte und –unterpunkte, die eingebaut werden müssen. Auf einem großen Bildschirm ist das kein Problem aber am Smartphone?

 

Das Hamburger-Problem:

Jeder kennt es – das Hamburger-Menü-Icon. Es ist sehr beliebt unter Designern, da es auf jede Bildschirmgröße passt. Das Problem dabei: Oft wird versteckt sich viel zu viele Links unter diesem Hamburger. Ab und an ist er sogar auf Full-Screen Seiten ersichtlich und darunter verbirgt sich hauptsächlich Müll, der Online ist, aber es unter keinen Menüpunkt geschafft hat.

Navigation Hamburger

Mobile First ist die Lösung!

Navigationsprobleme kann man oft vermeiden, wenn man zuerst mit der mobilen Version einer Website startet. Hierbei kann sich dann auch der Konzepter überlegen, ob es wirklich notwendig ist, zu viele Menüpunkte zu haben, um den ganzen Scheiß auf eine Website zu packen. An alle Designer da draußen: Feel free to to this.

Denn erst, wenn sich der End-User auf eurer Website wohl fühlt, dann habt ihr ihn auf eurer Seite!

Navigation

 

The unbelievable responsive Logo.

Das Whitney Museum hat im Zuge seiner Logo-Neugestaltung das „Responsive W“ eingeführt. Sie haben alle möglichen Szenarien und Einsatzmethoden in ihrem Manual festgehalten. In diesem Bild sieht man, wie viele Variationen für verschiedene Anlässe es gibt. Das Logo ist simpel und minimalistisch aber dennoch genial.

Das Logo wird, je nach Format und Medium angepasst. Zuerst werden die fixen Bestandteile definiert. Dann wird das Format in vier gleich breite Spalten eingeteilt, wo man nur die Punkte verbindet. Und so entsteht das responsive Logo für das Whitney Museum – angepasst je nach Bedarf, Medium und Gegebenheit.

whitney_chart

Logo Manual des Whitney Museums

 

Fazit: Faulheit kann Menschen bewegen „Outside of the box“ zu denken. Man muss als Designer nicht in Devices oder Screens denken – oftmals genügt es, wenn man aus dem Bildschirm ausbringt und das große Ganze bedenkt. Ich glaube, dass dieser Gedankengang künftigProgrammierer und Designer im Bereich Accessibility vor zahlreichen Überstunden in Agenturen bewahren. 😉

Final Quote

Alles Liebe,

Ana

 

 

 

 

[1] Apart, A. E. (2016). Laziness in the Time of Responsive Design by Ethan Marcotte—An Event Apart video. Abgerufen von https://vimeo.com/165061923

[2]Thomas, F. (1995). The Illusion of Life: Disney Animation (Rev Sub). New York: Disney Editions.

Advertisements

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s