Progressive Erweiterung: Eine Umkehr in der Entwicklung von responsiven Seiten

Written by | 01 April 2013 | Published in 2013 April
Designer und Entwickler denken immer noch vor allem so, wie der durchschnittliche Desktop-User. Aber heute, wo die mobile Revolution angekommen ist, wird Design immer deutlicher zu einem mehrstufigen Prozess. Wie macht man ein Design für jemanden, der mit seinen Fingern auf einem Smartphon herumtippt? Und womit fängt man an, mit dem Design für die mobilen Geräte, oder dem Desktop Design? Es stellt sich heraus, dass die progressive Erweiterung - das heisst anfangen mit der mobilen Version - später zu einer besseren, benutzerfreundlichen Webseite führen kann.

Wir wissen alle, wie Web Design bisher funktioniert hat

Es gab zwar eine Vielfalt von Methoden und Werkzeugen, aber im Grunde genommen liefen alle darauf hinaus, ein Design für die Darstellung für den Benutzer an grossen Display zu optimieren. Als Webdesigner hatte man all die Jahre den Deskttop User im Auge.
Natürlich pflegte jede Firma - mehr oder weniger ausgeklügelt - ihren eigenen Stil und ihre eigenen Design-Techniken. Einige folgten strikten Prozessen, sei es mit Drahtmodellen oder mit Collagen; andere vertrauten dem Können ihrer Designer, eine tolle Seite in Photoshop oder ähnlichen Programme zu entwerfen.
Das hat auch funktioniert. Es hat sogar ausgezeichnet funktioniert. Und es funktioniert auch immer noch, solange man das Massenmedium namens 'Mobil' ignoriert.

Man kann mobile Geräte aber nicht länger ignorieren.

Heutzutage lernen die Unternehmen allmählich, dass jederman ein mächtiges Smartphone in der Tasche herumträgt. Solche mobilen Geräte können zwar jede Webseite anzeigen, das ist richtig. Deshalb ignorierten viele Unternehmen jahrelang die Benutzer am Smartphone. Zudem macht die Bedienung mit Fingergesten ja auch Spass, nicht wahr? Zumindest anfänglich. Studien haben aber gezeigt, dass ein gutes Design für mobile Geräte eine Steigerung sowohl der Benutzerfreundlichkeit, als auch des Umsatzes bewirken kann.
Gut. Nun wissen wir also, dass wir unser Design responsive machen müssen. Aber wie gehen wir dabei vor?


Es ist schwieriger, etwas kleiner zu machen

Als Designer und Entwickler habe ich den hier beschriebenen Prozess begonnen mit einem Kundenauftrag, indem ich zerst mal das 'Big Picture' betrachtet habe. Die erste Aufgabe war, herauszufinden, was alles in die Seite(n) hineingehört. Natürlich begann ich sofort - nachdem ich mir über diese Sache klargeworden war - mit dem Design der Version für den Desktop, mit allem, was so dazu gehörte. Ergo kreierte ich die volle Desktop-Version der Seite und wollte sie dann herunterskalieren für den Gebrauch auf mobilen Geräten.

Das geht, keine Frage. Aber meiner Meinung nach ist die Methode der progressiven Erweiterung an der Stelle eindeutig überlegen. Wir verwenden diese Methode für neuere Kundenaufträge im Zusammenhang mit responsivem Design und Joomla! 3.0.

Lasst mich erzählen, wieso Progressiv/Responsiv Design mein neuer Modus operandi geworden ist.

Progressive Erweiterung fängt bei den mobilen Geräten an.

Progressive Erweiterung heisst, dass mit dem Design für mobile Geräte begonnen wird, dann wird die Desktop-Variante raufskaliert. Der übergeordnete Paradigmawechsel  dieser Methode ist der Wechsel von Primat "Dinge rausnehmen" zu "Dinge hinzufügen". Man muss immer noch aufzeichnen, was für welches Gerät notwendig ist, aber die Erstellung von Drahtmodellen für mobile Geräte ist wesentlich einfacher, als dasselbe für den Desktop machen zu müssen - und das Skalieren ist wesentlich einfacher. Ein Beispiel von einem Kundenauftrag mit progressiver Erweiterung -- angefangen beim Mobile Design.

FSSK mobile

Das  Drahtmodell für diese Aufgabe war schnell erstellt. Wir waren sehr einfach in der Lage, alles einzubauen, was nötig war - ohne irgendwelche Ehrenrunden zu drehen. Alles war schnell erledigt, und wir konnten schnell zum nächsten Schritt gehen, und Dinge die absolut notwendig waren hinzufügen. Das ist wesentlich einfacher, als Dinge wegzulassen. Dann hatten wir noch den Tablett Benutzer anzusehen. Was muss er sehen, was kann man weglassen. Auch hier: Addieren ist wesentlich einfacher, als Subtrahieren.

FSSK iPad

An dem Punkt waren wir gespannt auf die Desktop-Version Wir hatten eine solide Basis als Ausgangspunkt und überlegten uns einige Features, die uns vielleicht nicht in den Sinn gekommen wären, wenn wir uns nicht zunächst auf die molile Version der Seite konzentriert hätten. Mit den 'Essentials' anzufangen war der Schlüssel. Anfangen mit der Betrachtung was der mobile Nutzer braucht eine Seite für ihn zu entwickeln, machte es wesentlich einfacher, nachträglich zusätzliche Elemente einzubauen für Tablets und Desktops. Wir waren in der Lage, effizient ein Drahtmodell zu bauen, und ehrlich gesagt, diese Art des Vorgehens macht wirklich Spass.

FSSK Desktop

Klein anzufangen zahlt sich aus

So hatten wir also die Drahtmodelle für alle drei Arten von Geräten. Die einfache Entscheidung, mit dem Design für den kleinen Bildschirm zu beginnen, und dann allmählich grösser zu werden hatte einen positiven  Einfluss auf die ganze Entwicklung. Schlussendlich war der kunde mehr als zufrieden und verglichen mit anderen Methoden, die kein progressives Design verwendeten, war unser Weg wesentlich effizienter.

Der finale Touch

Wir haben jetzt unsere Drahtmodelle, und wir wissen auch, welche Elemente wir wo verwenden können. Der Prozess, der jetzt Spass macht, ist, die  "langweiligen" Drahtmodelle lebendig zu machen! Wir sind in der glücklichen Lage, über grossartige Designer zu verfügen, aber jetzt, wo wir auf dem progressiven Fundament aufbauen können, wird der ganze Designprozess exponentiell einfacher. Unser Mike (ein Designer) sagte:

 Ich kann es kaum glauben, wie viel einfacher diese Methodik den ganzen Designprozess gemacht hat. Es ist wie ein Knochen, den du fertig kriegst, und an den du einfach Fleisch nach Bedarf drankleben  kannst, so, wie der Kunde das haben möchte.

Schlussendlich waren wir in der Lage, ein komplett durchdachtes Design vorzulegen, welches für den Kunden in allen Aspekten nachvollziehbar war und seinen Wünschen voll entsprochen hatr.

FSSK-designmockup

Zusammenfassung -- Sei ein Champion!

Wir haben schon einige methoden ausprobiert in Sachen Design und Entwicklung, aber das Umschalten unseres 'responsiven' Gehirns auf die Methode, mit dem mobilen Design anzufangen, und dann progressiv zu erweitern bis zum Desktop  - das war eine weise Entscheidung. Sie hat uns geholfen und wir hoffen, sie hilft auch Euch. Diesen Schalter umzulegen wird möglicherweise in diesem Jahr eine der besseren Entscheidungen für Euch alle sein.

Nebenbei: Die Seite, von der hier immer die Rede war, steht untert www.fssklaw.com online. Man wird leichte Abweichungen im Design feststellen können, einige Dinge sehen immer anders aus wenn eine Seite erstmal Live geht. Variiert mal das Browserfenster, um zu sehen, wie responsiv die Seite ist. Dies wurde mit Joomla! 3.0 realisiert, unter Mitwirkung der Core Bootstrap Funktionen für die meisten responsiven Dinge.

Danke für die Aufmerksamkeit. Ich hoffe, mein erster Artikel war informativ. Und jetzt, geht an die Arbeit, entwickelt responsive wie ein Champion. Werdet progressiv!

Das Original dieses Artikels wurde von Ryan Boog geschrieben und im Joomla! Magazine April 2013 veröffentlicht

Read 7428 times Tagged under German
Chris Hoefliger

Chris Hoefliger

Chris got involved in Joomla a few years ago (when 1.5.14 was the flavour of the day). But he stayed with Joomla! ever since, is eager and wants to learn the ropes...
«I have a small company and do web pages. I speak both German and English. I'd like to see a bit more content here in my native language and - oops got caught. Yep, I'm trying to do a bit translation work for the team»