Auftakt der webinale hands-on – Design und Code im Zeichen von Responsive Webdesign
Kommentare

Mit zwei Inspirational Talks ist die webinale hands-on im Münchner Rilano-Hotel in ihr zweitägiges Programm gestartet. Mit ihrem Konzept, Konferenz- und Workshop-Elemente miteinander zu kombinieren ist die webinale hands-on ein neuartiges Format und ergänzt die bekannte Berliner Web-Konferenz webinale

Ihrem Ziel verpflichtet, sowohl Design als auch Code im Zeichen von Responsive Webdesign zu thematisieren, begann die Konferenz mit je einem Design- und einem Code-zentrierten Talk. Prof. Wolfgang Henseler, Gründer der Offenbacher Agentur Sensory-Minds und Experte für Natural User Interfaces (NUI), betonte in seinem Vortrag „Nachhaltige Designtrends: Responsive-, Flat-, App- und Tile-Design“ die Bedeutung der intuitiven Benutzbarkeit moderner digitaler Devices. Während ein Nokia-Telefon von 2001 noch mit einem umfassenden Handbuch daher kam, kommt ein iPhone von heute, das ungleich leistungsfähiger als das alte Nokia-Handy ist, ganz ohne Dokumentation aus – und die Benutzer verstehen es.

Designtrends

Ein Schnelldurchlauf durch die Darstellungsweisen von Scrollbars seit den 1980er Jahren bis heute zeigte, dass man schon in den frühen Anfängen grafischer Benutzeroberflächen Scrollbars im Flat Design gestaltete. Allerdings war dies seinerzeit vor allem der begrenzten grafischen Leistungsfähigkeit damaliger Computer geschuldet.

Mit den Jahren wurden die Scrollbars zunehmend in 3D-Anmutung designt. Bis plötzlich – mit Windows 8 und iOS 7 – wieder ein flaches Design ohne dreidimensionalen Look zum vorherrschenden Gestaltungsmerkmal wurde. Noch interessanter aber ist die Tatsache, dass Scrollbars im Rahmen grafischer Benutzeroberflächen (GUIs) eine klare Funktion aufweisen, während sie im NUI-Kontext lediglich Informationswert besitzen: Das Scrollen des Inhalts wird mit dem Finger vollzogen während der Scrollbar am Rand lediglich darüber informiert, an welcher Position im Gesamtkontext man sich gerade befindet. 

Dass „Flat“ mehr ist als nur ein aktueller Design-Trend beweist für Henseler vor allem die Tatsache, dass die digitale und die reale Welt immer näher zusammenrücken. Deshalb kommt das Digitale zunehmend ohne Metaphern zurecht. Beispiele für das Zusammenwirken von „digital“ und „real“ sind beispielsweise Augmented-Reality-Anwendungen. Hier wirken digitale Information nicht störend, sondern sollen vielmehr die Informationen aus der realen Welt anreichern. Ähnliches vollzieht sich generell bei mobilen Geräten, deren originäre Aufgabe darin besteht, im realen Lebenskontext nützliche Information und Services anzubieten.

Content Choreography

Im anschließenden Inspirational Talk ging Jonas Hellwig auf das Thema „Content Choreography“ ein. Für den professionellen Designer und Frontend-Entwickler beschreibt der Begriff die Technik, die man zur Anwendung bringen sollte, wenn man Responsive Design verstanden, aber mit den gebotenen Mitteln noch nicht zufrieden ist. Um dies zu erläutern, beschrieb er die klassische „Responsiveness“, die sich durch RESS-Aspekte (Responsive Web Design + Server Side Components) – das dynamische und kontextabhängige Hinzufügen so genannter Server Side Components auszeichnet. Solche Server Side Components können beispielsweise Schwarzweiß-Bilder für Amazon Kindle, niedrigere Auflösungen eines Bildes für Smartphones oder höher auflösende für größere Tablets sein.

Beim klassischen HTML-Markup werden Layout-Elemente im Desktop-Browser durch den Designer positioniert – und im Smartphone-Falle einfach „aufeinander gestapelt“. Dabei haben Gestalter keinen Einfluss darauf, in welcher Reihenfolge Elemente auf dem Smartphone dargestellt werden, was jedoch wünschenswert wäre, geht es dem Smartphone-Nutzer doch darum, in seinem mobilen Kontext die wichtigsten Informationen auf einer Websites so einfach wie möglich aufzufinden.

Dies zu realisieren ist die Aufgabe von „Content Choreography“. Dabei stößt man insbesondere im Hinblick auf die (mangelhaften) Fähigkeiten der Browser auf technologische Herausforderungen.

Als besonders interessante CSS-Standards stellte Hellwig CSS Flexbox (ein echtes CSS-basierendes Layoutmodell, bei dem sich Ausrichtungsachsen, flexibles Verhalten oder Element-Reihenfolgen definieren lassen) und CSS Regions (von Adobe beim W3C vorgeschlagen: Content läuft hier nach definierten Regeln in vordefinierte Layoutboxen, wie dies seit Jahren von InDesign bekannt ist) vor, die allerdings von den gängigen Browsern nur unzureichend unterstützt werden.

Im Laufe des Vormittags beschäftigen sich weitere Workshops der Konferenz mit der Webseitengestaltung für Smartphones, dem Thumb Flow (benutzerfreundliche Layouts), dem Design von Web- und App-Interfaces sowie dem Mobile First Ansatz und laden allesamt zum Mitmachen, Experimentieren und gemeinsamen Nachdenken über bessere mobile und responsive Websites ein.

webinale hands-on Thumbs Up?
Andy Philip und Thomas Eichinger analysieren in ihrem Workshop „Thumbs Up?“ etablierte Muster und versuchen mit einfachen Methoden, die Benutzerfreundlichkeit und Ästhetik zu bewerten (© S & S Media Group).

Am morgigen Dienstag starten die Teilnehmer ebenfalls mit Inspirational Talks aus den Bereichen Design und Code in den Tag. Sven Wolfermann erklärt wie die Prinzipien von Progressiv Enhancement auf Responsive Webdesign angewendet werden können und Stephen Hay erläutert, wie man dank web-basierter Mockups das Photoshop-Zeitalter hinter sich lassen kann. Sowohl Sven Wolfermann als auch Stephen Hay werden am Dienstagnachmittag die Themen ihrer Inspirational Talks in Workshops vertiefen. Dazu gesellt sich Stefania Trabucchi, die im Workshop „Responsive Design Process – Frameworks vs. modulare Komponenten für Prototyping und Entwicklung“ mit ihren Teilnehmern zwei Alternativen zur Entwicklung von Responsive Sites durchspricht: das Setzen auf vollständig ausgestattete Frameworks oder die bedarfsgerechte Anpassung und Erweiterung modularer Responsive-Layout-Grids.

Christian Kuhn und Tiago Pedras widmen sich in ihrem Nachmittags-Workshop den Aspekten Typografie und Responsive Grids und veranschaulichen, wie beide Responsive Sites zu besserer Usability verhelfen können.

 

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -