Individuelle Webentwicklung

Nicht immer ist eine Standardsoftware ausreichend um individuelle Anforderungen gerecht zu werden, wir schaffen Lösungen

Informationen
Bild: Individuelle Webentwicklung
Vector flat illustration concept symbols set of modern programmer workflow for web coding and programming user interface elements

Workflows für Responsive Webdesign

Zur Prozessoptimierung gibt es Tipps und Tools. Responsive Designs sind inzwischen mehr als flexible Layouts und neue Content-Strategien. Um bei der steigenden Komplexität gute Lösungen zu erzielen und damit die Kosten nicht explodieren, braucht man neue Denk- und Herangehensweisen:

Man braucht einen Responsive Workflow mit entsprechenden Tools. Die Web-Nutzung war früher gegen heute sehr einfach. Früher saß man am Schreibtisch im Büro oder zu Hause mit einem Rechner und Monitor.

Diese Zeiten sind jetzt vorbei. User gehen heute mit unterschiedlichen Geräten und Bandbreiten ins Internet. Global gesehen gibt es Regionen in denen Menschen nur mit Mobilfunk ins Internet gehen, da die Festnetzleitung zu teuer ist. Zu den klassischen Desktop-Browsern kommen mittlerweile neue mobile Plattformen und die unterschiedlichsten Browser.

Viewports

Die unterschiedlichen Bildschirmgrößen steigen rasant an. Konnte man Smartphones, Tablets und Desktops noch vor einiger Zeit recht eindeutig definieren, so zeigt sich die Einführung des iPhone 5 und des Android, dass es im homogenen iOS-Lager unterschiedliche Größen im Bildschirmbereichs gibt.

Beim Tablet ist die Verschiedenheit der Ausgabegröße noch größer. Die ersten Tablets hatten im Landscape-Modus 1.600 Pixel, sind daher größer als die meisten normalen Desktop- oder Notebook-Screens. Man könnte sich sicherlich auf 3 Stufen bei den Haupt-Breakpoints einigen, also an den Umbruchpunkten an denen sich das Responsive Design einer anderen Größe anpasst, jedoch sollten sich diese Breakpoints nach dem Inhalt und nicht nach den Geräten richten.

Alle Eventualitäten im Vorfeld zu bedenken ist fast unmöglich. Wer seine Website relaunchen will, sollte sich erst einmal seine bisherige Website-Statistik anschauen, um für die Planung und Designentwicklung Rückschlüsse zu ziehen. Jedoch viele neue Projekte können nur auf Annahmen bzgl. Browser-Eigenschaften, Bildschirmgrößen und Verbindungsgeschwindigkeit vertrauen.

Flexible Layouts brauchen flexiblen Workflow

Hier stößt der klassische Arbeitsablauf schnell an seine Grenzen. Ein komplettes Design für mehrere Viewports z. B. im Photoshop zu erstellen ist aufwendig und die Änderungswünsche von Kunden umzusetzen wird immer zeitaufwändiger und kostenspieliger.

Dazu kommt noch, dass keiner wirklich alle Komplikationen in einem Responsive-Webdesign-Prozess vorher ahnen kann. Neue Devices können auftauchen, Browser-Bugs in verschiedenen Systemen können auftreten. Dieser Mehraufwand muss bezahlt werden. Der Kunde möchte nicht zu viel zahlen und der Dienstleister keine unbezahlte Arbeit tun. Das ganze kann schon bei der Angebotsformulierung ein heikler Punkt werden.

example_1_3_fullsize

Das Online-Tool Style Tiles kann hier gut helfen, um früh das Responsive Design zu testen und mit wenig Aufwand können hier Layouts erstellt werden. Eine PSD-Vorlage unterstützt Designer beim Erstellen der Design-Kachel.

Um dem steigenden Aufwand und den vielen Eventualitäten zu begegnen erleichtert ein flexibler Workflow. Die Design und Konzeptionsphase sollte schon flexibler gestaltet werden. Die Responsive-Web-Designer sollten frühzeitig ihre Design-Kompositionen mit dem HTML-Dummy testen um festzustellen, dass das Konzept funktioniert.

Mittlerweile gibt es viele Tools, die einen solchen Prozess unterstützen. Mit Style Tiles kann man zum Beispiel Interface-Layouts bauen, ohne viel Zeit für die Photoshop-Layouts- Erstellung zu investieren. Hier können kreative Designer modularer arbeiten und sehr früh vom Kunden eine Feedback zum Design erhalten.

Mobile First

Webdesigner diskutieren schon länger an der Idee „Mobile First“. Hier beginnt die Planung Konzeption und Umsetzung auf die Sicht der mobilen Geräte. Viele Designer beginnen das Design meistens für die kleinste Bildschirmauflösung. (Smartphone First) Jedoch ist das sehr schwierig. Zum einen haben die Designer selten Erfahrung im DESIGN für TOUCH zum anderen können die Kunden sich nicht vorstellen wie sich das Design bis zur Desktop-Ansicht entwickelt. Wichtig ist, dass die Designer von Anfang an die Bedienung per Touch im Kopf haben.

Content First

Vom technischen gesehen sollte man vom „Mobile First“ ausgehen, den Style für den kleinsten Bildschirm erstellen und dann mit Hilfe von Media Queries an die anderen Ansichten anpassen. Bei der Konzeption des Contents ist der Mobile-First –Ansatz sehr wichtig. Der Grundsatz lautet: Je kleiner das Gerät umso wichtiger, die Inhalte auf der Webseite von Anfang an, zu zeigen.

Der Designer sollte von Beginn an wissen, welchen Content er will, also denken im Content First. Es sollte nicht heißen, dass bereits der komplette Test stehen muss, doch es sollte klar sein, welcher Inhalt es sein sollte.

Designing im Browser

Einige Design-Aufgaben lassen sich durch die Unterstützung von HTML5 und CSS3 direkt im Browser erledigen. Gegenüber den herkömmlichen Layouts-Programmen hat das den Vorteil, dass das Prototyping im Browser schneller ist ebenfalls auch Änderungen. Zum Beispiel kann man Logos viel schneller mit HTML oder CSS in allen Kompositionen austauschen als im Photoshop, genauso ist es mit der Schriftgrößenänderung in Dokumenten.

Das Photoshop-System müssen Designer nicht komplett aufgeben. Bei den ersten Schrift- und Layout-Kompositionen ist die Wahl der traditionsreichen Software bestimmt sehr hilfreich. (siehe Style Tiles). Wenn die Layouts im Browser richtig funktionieren sollten die Designer gemeinsam mit den Entwicklern die passenden Entscheidungen treffen.

tt-responsive-design

Thinkin´Tags ist ein Rapid-Prototyping-Tool, mit dem man CSS-Framework YAML4 nutzen kann, andere Framework oder auch gar keins.

HTML-Prototyping: Thinkin´Tags und Edge Flow

Für die Browser-Tauglichkeit von Layouts sicher zu stellen gibt es 2 Tools. Adobe möchte den Responsive-Design-Prozess mit seinem neuen Tool „Edge Reflow“unterstützen (derzeit noch kostenlos). Hier handelt es sich eine Art Hybrid, das besteht aus Illustration, Fireworks und Dreamweaver, dies nur mit einem geringeren Funktionsumfang. Webdesigner schreiben ihr Web-Layout mit simplen Elementen und Reflow schreibt im Hintergrund den HTML- und CSS-Code. Dieser Code reicht für die Browser-Vorschau aber nicht für die Produktivsysteme. Edge Reflow ist ein Design-Tool aber kein Entwicklungstool.

Thinkin´Tags das neue Rapid-Prototyping-Tool geht hier einen Schritt weiter. Auch mit diesem können die Webdesigner ihre Website oder Web-App visuell prototypen. Thinkin´Tags liefert produktionsfähigen Code, welcher sich herunterladen lässt. Ein Responsive-View lässt sich sofort mit verschiedenen Viewports testen. Das Tool befindet sich zwar noch im Alpha-Stadium, hat aber schon jetzt großen Funktionsumfang und ermöglicht jetzt schon das Abspeichern und Verwalten von mehreren Projekten. Das Thinkin´Tags kann kostenlos getestet werden.

Testing: Edge Inspect, Ghostlab und MIHTool

Trotz dieser Tools sollte man sehr frühzeitig Layout (brechen die Layout-Container wie erwartet um?), die Funktionen und Performance, auf echten Geräten testen. Die Performance hauptsächlich können auf älteren und schwächeren Geräten viel schlechter ausfallen als auf den modernen Smatphones und Tablets. Für das Remote Testing und Debugging ist ein hilfreiches Tool von Adobes „Edge Inspect“ auch ein Produkt aus der Abdobe Edge Familie, es wurde auch früher „Shadow“ genannt.

Webdesigner können ihre Layout vom Desktop-Browser (Chrome) gleichzeitig auf mehrerer Geräten testen. Ghostlab und MIHTool bieten ähnliche Funktionen. Wer nicht so viele mobile Geräte zum testen hat, sollte nach einem Open Device Lab Ausschau halten, indem man eine Website oder eine App auf verschiedenen Geräten testen kann.

Fazit

Die Funktion der bisherigen Workflows ist in den meisten Responsive-Webdesign-Projekten nicht sehr gut. Es wäre hier mehr Flexibilität gefragt. Es gibt bis jetzt nur wenige Tools, die den Prozess hilfreich unterstützen. Es sind im übrigen gar nicht die Tools, die sich ändern müssten. Viel mehr verlangen die Responsive Designs und der extrem heterogenen Device-Marktes, dass sich die Arbeitsabläufe in den Agenturen ändern. Dies verlangt vor allem ein neues Selbstverständnis und einen echten Willen etwas Neues im Designprozess zu wagen. Dies ist jedoch von heute auf morgen nicht möglich. Eine Einführung neuer Prozesse ist schließlich ein ganz eigener Prozess.