webinale hands-on Tag 2: Responsive Enhancement, web-basierte Mockups und Typografie
Kommentare

Auch an Tag zwei startete die webinale hands-on in München mit zwei Inspirational Talks in den Tag, die getreu dem Motto der Konferenz im Zeichen von Design und Code standen. 

Sven Wolfermann, freier Webentwickler mit Schwerpunkt Frontend-Entwicklung, führte den Teilnehmern vor Augen, wie sich die Prinzipien von Progressive Enhancement auf Responsive Webdesign übertragen lassen.

„Moment mal“, wunderte sich Sven Wolfermann zunächst … „Responsive Enhancement? Besteht hier etwa akute Bullshit-Bingo-Gefahr? Auf jeden Fall! Doch ohne die entsprechenden Buzzwords kommt man eben nicht aus, wenn man über die Verbindung von Progressive Enhancement mit Responsive Design redet“.

Responsive ist nicht nur adaptive!

Viele denken, Responsive bedeutet, dass man das Browserfenster verschiebt und sich daraufhin das, was auf der Webseite angezeigt wird, ändert.

Doch Responsive Design ist natürlich viel mehr. Vor allem löst es einige Probleme:

  • man hat eine URL, eine Code-Basis, ein Deployment
  • der gesamte Inhalt ist verfügbar (falls nicht versteckt)
  • es ist einigermaßen zukunftssicher (wir wissen nicht, was in einem Jahr kommt: Uhren, Autos, Kühlschränke, etc. Schließlich will man nicht für all diese Geräte eine App bauen)

Allerdings kämpft Responsive Design immer noch mit einigen Problemen:

  • Seiten sind oft zu groß für mobile Geräte (zu viele Daten müssen geladen werden, zu viele http-Requests)
  • Viele Inhalte sind schwer zu adaptieren: Bilder, Tabellen, Anzeigen
  • Internet Explorer 8 versteht keine media queries

Zwar ist die Situation in diesem Jahr schon besser geworden, dennoch laden die meisten Seiten im Netz immer noch dieselben Inhalte – ein Problem für die mobilen Devices. Deswegen: Mobile First! Allerdings sollte man den Ansatz nicht nur technisch, sprich „Smartphone First“, verstehen, sondern auch schon im Design-Prozess auf den eigenen Workflow anwenden.

Denn fest steht: Umso umfangreicher die Website, desto größer können die Anforderungen im Responsive Webdesign werden. Aber immer für alle Devices den gleichen Quelltext laden? Das muss nicht sein.

webinale hands-on
Sven Wolfermann auf der webinale hands-on (© S & S Media Group).

Performance

Einfache Schritte für bessere Performance sind beispielsweise eine Reduzierung des sogenannten Payload, sprich des Datenvolumens, das geladen werden muss. Ferner sollte der auch der JavaScript- und CSS-Payload reduziert werden. Weitere Optimierungen lassen sich durch die sogenannte Feature Detection erreichen, also der Bestimmung der unterstützten Features der jeweiligen Browsers. Auch das Conditional Loading ist eine gute Methode zur Reduzierung des Payload. Dabei wird der Kern der Seite, sprich der Content, bestimmt und der Rest entsprechend priorisiert.

Ein weiterer Ansatz, um die Performance zu verbessern, ist RESS (Responsive Web Design + Server Side Components). Sven Wolfermanns Meinung nach wird es zu wenig eingesetzt, obwohl sich serverseitig so einiges für die Performance machen lässt, Stichwort „browser sniffing“, also das Ausspähen der Geräte-Funktionalitäten. Allerdings kommt es noch oft zu Problemen bei der Bestimmung der Geräte: Die Datenbanken sind veraltet, Updates dauern und/oder sind nicht verlässlich. Bezüglich eines der größten Probleme, der Bilder, ist für den Responsive Image Ansatz leider noch keine standardisierte Lösung in Sicht.

Abschließend mahnte Sven Wolfermann zur Vorsicht: Responsive Webdesign ist nicht der Heilige Gral! Es gilt immer zu prüfen, ob Responsive Design das richtige für den Kunden ist – in vielen Fällen ist es das, allerdings kann eine Mobile-Website der bessere Weg sein.

Web-based Mockups – Goodbye Photoshop

Stephen Hay, Front-End Design und Development Consultant, führte die Teilnehmerin seinem Talk „The New Photoshop: The Revenge of the Web“ in das Prinzip der web-basierten Mockups ein. Seiner Meinung nach macht Website-Design mit Photoshop keinen Sinn mehr, weil man heutzutage web-basierte Mockups benutzen  kann.

Hay geht sogar so weit und empfiehlt, dass Interaction Designer keine Wireframe Designs mehr machen sollten. Wireframes sind heutzutage meist viel zu kompliziert. Stattdessen sollten Interaction und Visual Designer zusammenarbeiten.

Image based mockups are dead. If you continue to use Photoshop, you’re going to get problems!

Die Probleme sind mannigfaltig. Zwar sehen Schriften in Photoshop toll aus, das finale Ergebnis im Browser sieht in der Regel anders aus. Ferner können Revisionen von Designs ein Albtraum sein. Photoshop dient für Hay letztendlich nur als Stellvertreter, um anzudeuten, wie eine Seite später aussehen könnte.

Stephen Hay
Stephen Hay auf der webinale hands-on (© S & S Media Group).


Beim Argumentieren pro web-basierten Mockups und gegen Photoshop geht es allerdings nicht darum, Front-End-Entwicklern Arbeit wegzunehmen, deren Autorität zu untergraben oder ihnen auf die Füße zu treten. Alle Beteiligten müssen laut Hay raus aus ihrer „comfort zone“, die sie sich selbst geschaffen haben.

Die Vorteile von web-basierten Mockups liegen beispielsweise in besseren Möglichkeiten zu experimentieren. Schnell ist eine Schriftart getauscht, man kann sogar mit wenig Aufwand den Kunden andere Fonts einsetzen lassen. Oder man macht es wie Stephen Hay bei einem Projekt: Der Kunde bekommt auf dem web-basierten Mockup einen Color Picker implementiert. Mit diesem kann er sich die Farbe seiner Wahl selbst aussuchen.

Ein weiterer Vorteil ist die Versionskontrolle – eine Qual in Photoshop, einfach mit HTML.

Kurzum: Man kann alles tun, was man auch mit einer Website tun kann – denn es handelt sich um eine Website.

Grundsätze

Was muss man beim Erstellen von web-basierten Mockups beachten? Die gleichen Grundsätze, die man auch sonst im Design-Prozess beachten muss:

  1. Skizzieren/Vorzeichnen: Beim Skizzieren designt man! Skizzieren ist visuelles Denken, es ist der schwere Teil der Arbeit, der Rest ist die Ausführung.
  2. Den passenden Inhalt einsetzen; Lorem Ipsum Text oder Bilder können von Nutzen sein, aber nur wenn man genau weiß, wie der spätere Inhalt genau aussehen wird.
  3. Man muss seinen Inhalt kennen, sonst kann man nicht für ihn designen!

Darüber hinaus können web-basierte Mockups den Design-Prozess beschleunigen, denn die Mockups können als Grundlage für die Front-End-Entwicklung dienen. Voraussetzung dafür ist allerdings die entsprechende Kommunikation zwischen allen involvierten Stakeholdern.

Workshops

Im Laufe des Vormittags gingen Sven Wolfermann und Stephen Hay im Rahmen von Workshops weiter ins Detail und beschäftigten sich ausgiebig mit dem Responsive Design Workflow, beziehungsweise web-basierten Mockups.

Der Nachmittag steht erneut im Zeichen von ausführlichen Workshops. Stefania Trabucchi diskutiert in „Responsive Design Process – Frameworks vs. modulare Komponenten für Prototyping und Entwicklung“ Pros und Kontras der beiden Alternativen zur Entwicklung von Responsive: das Setzen auf vollständig ausgestattete Frameworks oder die bedarfsgerechte Anpassung und Erweiterung modularer Responsive-Layout-Grids. Im weiteren Verlauf geht es um die Identifizierung der richtigen Werkzeuge sowie die Weiterentwicklung modularer Komponenten und deren Anpassung in einem Responsive-Site-Projekt.

Tiago Pedras führt im Workshop „Typography and Responsive Grids in the World of Mobile Development“ die Teilnehmer in das Prinzip der Responsive Grids und Patterns ein. Im Zentrum steht jedoch das Verhalten von typografischen Design, das über alle mobilen Plattformen beachtet werden muss, und wie es die User Experience beeinflusst.

Tiago Pedras
Tiago Pedras auf der webinal hands-on (© S & S Media Group).

Über die webinale hands-on

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

Die Talks und Workshops der webinale hands-on laden allesamt zum Mitmachen, Experimentieren und gemeinsamen Nachdenken über bessere mobile und responsive Websites ein.

 

 

 

 

 

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -