Individuelle Webentwicklung

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

Informationen
Bild: Individuelle Webentwicklung
bootstrap-postthumb

Responsive Webdesign: Der richtige Weg zum Erfolg

Bildmaterial: getbootstrap.com

Responsive Webdesign ist viel mehr, als die meisten „Nutzer“ daraus machen. Während es hauptsächlich von der technischen Seite betrachtet wird, ist gestalterisch noch viel herauszuholen. Damit du mit dieser Erstellungsmöglichkeit den entsprechenden Erfolg einholst, solltest du einige Punkte beachten.

Responsive Webdesign: Langsam, junger Pandawan

Das Responsive Webdesign ist entdeckt und für gut befunden worden, also wollten es alle so schnell wie möglich für ihre Seiten haben. Das führt zu Fehlern, Fehlinterpretationen und Erwartungshaltungen, die auf keinen Fall erfüllt werden können, was bei Kunden zu jeder Menge Frust führt.

Der erste Schritt für gute Webseiten ist, sich darüber klar zu werden, dass es immer mehr Geräte gibt, mit denen Menschen heute ins Internet gehen. Während vor noch nicht so vielen Jahren ein Laptop ein technisches Wunder war, kamen schnell Spielekonsolen mit Internetanschlüssen hinzu. Heute gibt es auch Smartphones, Tablets, Uhren, TV-Geräte und noch einige mehr. Das ändert auch den Zugangskontext: Gesurft und gearbeitet wird nicht nur am Schreibtisch, sondern auf der Couch, im Park, in der Bahn. Die Verbindungsgeschwindigkeiten mobiler Geräte sind dabei sehr leistungsstark und haben den Leitsatz „„Wenn der User mit dem iPhone auf unsere Seite kommt, hat er nicht viel Zeit, da er ja mobil unterwegs ist“ hinter sich gelassen – mitunter auch, weil wenig Smartphones ohne Flatrates benutzt werden. Wichtig ist zu merken, dass man als Webdesigner nicht weiß, wie viel von der Seite zu sehen ist oder ob der sichtbare Bereich absichtlich oder programmatisch eingeschränkt wurde.

Ziel ist es also, dass eine Seite entworfen wird, die nicht auf zwei Wegen entsteht. Eine „Desktop-Seite“ und eine „mobile Seite“ zu erstellen ist heute überholt. Viel lieber möchten die meisten eine Seite, die sich dem genutzten Gerät automatisch anpasst.

Konzentration auf das wesentliche: Der klassische Workflow

Es gibt drei Wege, die Arbeit an einem RWD-Projekt anzugehen:

  1. Der dahinterliegende Prozess wird adaptiert
  2. Responsive Webdesign wird auf das Ein- und Ausblenden von Elementen reduziert
  3. Die Pessimisten, die jede Menge Ressourcen verbrauchen, um zu beweisen, dass das alles nicht funktionieren kann

Dabei könnte es so einfach sein! Manchmal müssen erlernte Wege hinter einem gelassen werden, damit Neues beziehungsweise Besseres erschaffen werden kann. Der normale Weg, um eine Webseite erfolgreich verkaufen zu können, beginnt bei der Lasten- und Pflichten-Ermittlung, die dann ihr Design bekommen, welches dann per HTML/CSS ein echtes Gesicht bekommt. Am Ende sieht der Kunde die Seite, überprüft Pflichtenheft und Grafikdatei mit der Seite und nimmt sie im besten Fall ab. Beim Responsive Webdesign muss ausgebrochen werden – und hier liegt das Problem. Hierbei geht es nicht mehr nur darum, die Seite so plangenau wie möglich umzusetzen, sondern die Seite zu dem zu machen, was das Internet eigentlich schaffen wollte: Informationen zielgruppengerecht für jeden zugänglich zu machen. Egal, von welchem Gerät aus der User dieses wahrnehmen möchte.

Das Ziel: Den richtigen Workflow finden

Wie in jedem anderen Projekt auch, ist es wichtig, den richtigen Workflow zu finden, damit das optimale herausgeholt werden kann. Für das Responsive Webdesign können 10 Schritte beachtet werden, von denen einige aus Projektgröße und Budget-gründen weggelassen werden kann. Mach dir dabei aber klar, dass sich das auf die Qualität des Endergebnisses auswirken wird. Wenn du diesen Workflow beachtest, denke auch daran, dass du jeden einzelnen von deinem Kunden abnehmen lässt.

  1. Entscheidungen treffen – Rahmenbedingungen festlegen

    Die Rahmenbedingungen sollten direkt zu Beginn festgelegt werden, damit jeder weiß, in welche Richtung das Projekt führt. Dabei sind Fragen zu klären wie: Soll eine Stakeholder-Matrix erstellt werden? Wer ist für was verantwortlich und wer hat die Entscheidungsgewalt? Dazu gehört auch, dass sich auf die wichtigsten Geräte und Browser geeinigt wird, die dann im vollen Umfang bis ins kleinste Detail getestet werden. Das Moodboard-Briefing und der Vertrag sind dabei die wichtigsten Punkte, die in der ersten Runde festgelegt werden müssen.

  2. Content Strategy

    In den letzten Jahren ist klar geworden, wie wichtig der Content für eine Seite ist. Daher wird dieser auch zuerst erstellt. Dieser muss gesammelt und bewertet werden. Daraufhin sollte ein Content Inventory angelegt werden, in dem die Content-Elemente eingetragen werden.

  3. Content Wireframes

    Auf den zweiten folgt der dritte Schritt: Die Content Wireframes legen die Position des Contents fest. Dies ist noch nicht fix, gibt aber einen ersten Eindruck. Zuerst liegt „Mobile first“ an. Hier werden dann die in Schritt 1 vereinbarten Breakpoints abgearbeitet, woraufhin dann die Wireframes erstellt werden. Die Breakpoints sind veränderbar, je nachdem, was für das Projekt gebraucht wird.

  4. Content erstellen

    Nun geht es um den Inhalt. Dieser muss erstellt oder bei bereits vorhandenem Material abgeändert werden. Er sollte als Text erstellt werden und erste Auszeichnungen mit Markdown, AsciiDoc oder ReST beinhalten. Mit einem entsprechenden Konverter wird dieser nun in Content-HTML (Text-Dummy) umgeändert und dem Kunden zur Absegnung vorgestellt.

  5. Content-Testing

    Der erste große Schritt ist gekommen! Nun wird der Dummy getestet und zeigt, welches Verhältnis, Umbrüche und Mengen aktuelle sind.

  6. Moodboard / Style Tile

    Zu einer guten Webseite gehört nicht nur der Content, sondern auch das visuelle. Hierfür ist die Nutzung bzw. Entwicklung eines Moodboards sehr hilfreich, besser ist noch ein Style Tile, welches auf keinen Fall mit einem Layout verwechselt werden darf. Erstelle hier bereits einige Elemente, um das Gefühl für die Seite rüberbringen zu können. Dazu gehören z.B. die Farben, Positionen der Textblöcke, Überschriften und alles andere, was für die Webseite wichtig ist.

  7. Linear Design

    Der nächste Schritt ist dann das Basis-Design aus dem Style Tile in den Content-Dummy zu integrieren. Du siehst jetzt wie sich Dein Content mit den richtigen Auszeichnungen verhält. Wichtig: Du musst die HTML-Datei testen, wie sich das „Modell“ in Bezug auf vereinbarten Breiten und Browsern verhält.

  8. Prototyping

    Jetzt kann es endlich so richtig ans Eingemachte gehen. Aus dem Linear Design kannst du nämlich einen Clickdummy erstellen, mit dem du gleichzeitig das endgültige Ergebnis sichtbar machst. Hierbei solltest du darauf achten, dass du alle Funktionen und Elementen einbindest, die die fertige Webseite auch haben soll. Du setzt Dich hierbei mit dem Kunden zusammen und besprichst das ganze Projekt noch einmal mit ihm. Ziel des Ganzen ist, die Testing-Prozedur so gering wie möglich zu halten. Das macht den Kunden froh, weil es kosten spart, und bringt Deinem Team Luft für neue Aufgaben.

  9. Geräte Testing

    Dieser Schritt ist notwendig, um die Seite auf den Endgeräten zu testen. Was vorher nur an Simulatoren sichtbar war, wird nun „echt“.

  10. Produktion

    Herzlichen Glückwunsch, du bist am Ende des RWD-Prozesses angelangt! Jetzt liegen noch folgende Schritte vor Dir: Die Seite muss in ein Shop- oder CSM-System integriert werden und die Backend-Programmierung sowie die Integration in eventuelle Fremdsysteme müssen fertiggestellt werden.

Responsive Webdesign an den Mann bringen

Früher war ja bekanntlich alles besser: So waren zum Beispiel Webseiten schneller und einfacher zu verkaufen, was mit dem RWD nicht ganz so einfach erscheint. Der Grund hierfür liegt in gestiegenen Beratungsanteil. Vor allem deswegen, weil viele Kunden gar nichts, bis wenig darüber wissen, muss man ihnen erst einmal ein Basiswissen vermitteln. Der andere Teil dessen ist, dass die enge Bindung zum Kunden unabdingbar ist, um ein gutes Responsive Webdesign auf die Beine zu stellen.
Workshops sind also ein wichtiger Bestandteil für diesen Prozess. Viele Entscheidungen müssen getroffen werden, die Anforderungen, Inhalte, Wireframes und vieles mehr muss zusammen in eine Richtung gelenkt werden. Auch die Erstellung von Mood Boards, Style Tiles und Linear Design sind Dinge, die du verkaufst, beziehungsweise anbietest.
Allerdings bietest du dafür keine Erstellung und Umsetzung von statischen Dateien beziehungsweise Dokumenten an. Zudem gibt es die Möglichkeit, RWD als AddOn für eine bereits vorhandene Seite „aufzuspielen“ oder es als „spätere Leistung“ hinzuzufügen.

Nicht zu vergessen: Die Kosten

Das wohl wichtigste an dem ganzen sind die Kosten, die auf den Kunden zukommen und das, was man dafür verlangen sollte. In einer Hinsicht hat sich nichts geändert: Der Preis richtet sich nach dem Aufwand, den du mit der Seite hast. Daher ist das natürlich nicht pauschal zu beantworten. Als Richtlinie solltest du zwischen 30 und 100 Prozent Mehraufwand in deine Planung einberechnen, die sich auf die Frontend relevanten Tätigkeiten beziehen. Damit dies eingehalten werden kann, sollte der Workflow auf jeden Fall ganz genau befolgt werden. Auf keinen Fall vergessen darfst du den entsprechenden Vertrag, der den RWD-Prozess und damit deine Arbeitsweise absichert.