Web-Design & Programmierung

Um den Elefanten im Raum direkt anzusprechen: Wir werden uns jetzt hier nicht die Programmierung unserer Website anschauen, sondern den Umgang und das Projektmanagement bezüglich der Programmierung einer Website. Auch wenn Webdesigner meiner Meinung nach ein großes Maß an Verständnis für die Webprogrammierung haben sollten, überlasse ich die tatsächliche Umsetzung den Profis. Wie im ersten Schritt Finde Deinen perfekten Workflow! Webdesign Step by Step: Die Konzeption bereits beschrieben: Das Web-Design muss sich an dem Machbaren und Sinnvollen orientieren, nicht daran, wie etwas einfach nur schön aussieht.

 

Wir haben bis zu dieser Stelle einen Prototyp gebaut, der das Designprinzip unseres Webprojekts deutlich macht. In Teil 2: Gestaltung und Prototyp haben wir unser Responsive Web Design, also wie sich das Raster und die Elemente auf den verschiedenen Screengrößen verhalten, umgesetzt. Farb- und Schriftdesign sind definiert, alle nötigen Seitentypen sind ausgestaltet und mit sinnvollen modularen Sektionen gefüllt. 

 

In unserem iterativen Ansatz für den Workflow befinden wir uns jetzt also bei der Programmierung, dem Testing, der Webredaktion, dem Launch und der kontinuierlichen Pflege.

Doch zuerst: Haben wir Korrekturen von den Kunden erhalten? Sie haben bereits den Prototyp zum Testen bekommen, im besten Fall haben wir diesen persönlich präsentiert. Korrekturen, die eigentlich so gut wie immer aufkommen, sollten jetzt zunächst in dem Prototyp umgesetzt werden, bevor wir ihn in die Programmierung geben.

Briefing für die Web-Entwicklung

Wir schicken nicht einfach den Prototypen und sagen „Programmier’ mal!“. Als Vorbereitung finalisiere ich an dieser Stelle den Prototypen nochmal akribisch.

 

Gut, dass wir ein Design System erstellt haben, während wir unseren Prototypen aufgebaut haben. Das Design System gliedere ich meist so, dass eine Übersicht über alle Sektionen und Features für die Programmierer entsteht. In Adobe XD prüfe ich zudem nochmal alle Seiten des Prototyps, sodass alle Abstände (Paddings, Margins, Raster) überall genau stimmen. Zusätzlich zum Design System und zu den gestalteten Seiten kopiere ich meistens die Startseite und mache aus ihr eine Art Musterseite. Hier skizziere ich an allen Elementen Indikatoren, die genau bezeichnen, wie groß welcher Abstand wohin ist, wie groß die Elemente sind, wie groß die Rasterzellen sind und so weiter.

Schließlich treffe ich mich gerne persönlich mit demjenigen, der die Webseite programmieren soll. Hierbei drucke ich alle Seiten, die Musterseite und eine Zusammenfassung aller Kernfeatures und Sektionen (ganz oldschool) auf A3-Seiten aus, damit man sich das Projekt gemeinsam übersichtlich anschauen kann. So können auch eventuelle Ungereimtheiten oder Fragen schnell geklärt werden.

Technisch bedingte Korrekturen & Developer-Prototyp

Beim Gespräch kristallisieren sich gerne mal ein paar technische Probleme heraus, je nachdem, ob man aufwändige Kernfeatures designt hat oder nicht. Diese können beim Briefing gemeinsam schon direkt durch alternative Ansätze gelöst werden.

Anschließend wird das Prototyp-Paket nochmal mit dem Input der Programmierer überarbeitet und finalisiert. Wenn alles zur vollsten Zufriedenheit umgesetzt wurde, generiere ich an dieser Stelle in Adobe XD einen Shared-Link für Entwickler. Über diesen Link können sich die Entwickler direkt alle CSS-Daten der einzelnen Elemente anschauen, Farbcodes und Schriften einsehen und der Link kann bei eventuellen Änderungen immer wieder aktualisiert werden.

Web-Assets exportieren

Zusätzlich kommt in das Paket für die Programmierer noch eine Sammlung aller Assets der bis hierhin gestalteten Website. Diese Sammlung beinhaltet:

Enger Austausch mit den Entwicklern: das Alpha-Testing

Beim Briefing vereinbare ich meistens mit den Programmierern, dass jedes fertige Feature, z.B. ein Carousel oder eine News-Listenfunktion, in Musterform für mich zum Testen bereitgestellt wird. So kann ich final jedes Feature einzeln nochmal testen und prüfen, ob es am Ende so wirkt, wie ich mir das vorgestellt habe. Vielleicht ist das Feedback noch nicht perfekt und es fehlt noch eine Mikrointeraktion in Form einer Animation? In diesem Beispiel würde ich diese Animation dann noch definieren und als Feedback zurücksenden. Es ist hier bereits wichtig,, verschiedene Geräte und Browser zu testen.

Programmierung abgeschlossen: die Webredaktion beginnt

Wenn die Entwickler die Programmierung der Website abgeschlossen haben und wir bereits alle Features selbst auch testen und absegnen konnten, können wir die Seite nun vollständig befüllen und fertig machen.

 

Parallel haben die Texter (oder wir, je nachdem) das Textmanuskript für die Website fertiggestellt und versorgen uns mit SEO-optimiertem Inhalt für den Content unseres Webprojekts.

 

Je nach CMS-System (z.B. WordPress oder TYPO3) können wir jetzt loslegen, alle Inhalte an die richtigen Stellen zu setzen. Jetzt bauen wir auch die Seiten auf, die wir noch gar nicht designt haben. Da die grundlegende Struktur aber bereits besteht, können wir die bereits fertigen Seiten vom selben Seitentyp (z.B. Hauptseite eines Themas) kopieren und neu befüllen.

Screenshot WordPress Backend
Beispielhaft: das Backend von WordPress

Medien optimieren

Auch beim Befüllen der Website dürfen wir die Suchmaschinenoptimierung nicht vergessen. Alle Bilder unserer Website benötigen einen Titel, einen sinnvollen Dateinamen und einen Alt-Text. Zudem ist immer darauf zu achten, dass die Bilder möglichst stark komprimiert sind und alle überflüssigen Daten herausgefiltert wurden. Per Photoshop solltet ihr Bilder mit „Für Web speichern“ exportieren und danach mit einem Komprimierungsprogramm weiter komprimieren.

Screenshot Photoshop: Export für Web

Der Titel ist das, was erscheint, wenn die Nutzer der Website mit der Maus über ein Bild hovern. Er beschreibt ganz kurz und knapp, was das Bild zu bedeuten hat.

 

Die Dateinamen sollten sprechend gewählt werden. Vermeidet unbedingt Dateinamen wie bild1.jpg oder header-1.jpg. Stattdessen sollte der Dateiname beispielsweise webdesign-workflow-user-flow.jpg heißen. Grund dafür ist, dass wir unsere Keywords aus der Konzeption hier auch einbringen können. So wird Google suggeriert, dass das Bild zu einem bestimmten Thema relevant ist und dies kann sich so positiv auf die Rankings auswirken.

 

Beim Alt-Text geben wir einen alternativen Text an, der erscheint, wenn das Bild nicht geladen werden kann oder wenn die Website von Menschen mit Handicap betrachtet wird. Beschreibt hierbei das Bild: Was ist zu sehen? Hier gibt es jetzt eine Diskrepanz. Für das barrierefreie Webdesign solltet ihr Alt-Texte nur für inhaltlich relevante Bilder einbauen und rein ästhetische Bilder ohne Alt-Text belassen. Für die Suchmaschinenoptimierung allerdings, sollte möglichst jedes Bild mit einem Alt-Text, der unsere Keywords enthält, ausgestattet werden. Es kommt hier auf euren Fokus an.

Screenshot vom Eingabefeld der Alt-Texte in WordPress

Beta-Test & Launch der neuen Website

Alle Inhalte, Bilder und Features sind auf unserer Website eingefügt und fertig. Wir haben‘s fast geschafft! Ich gebe an dieser Stelle den Link zur Entwicklungsumgebung der Website an ein paar Kollegen weiter, um möglichst viel Feedback einzuholen. Dabei bitte ich sie, die Website auf verschiedenen Geräten zu testen. Läuft alles auf einem alten iPhone 5? Versteht jemand ein bestimmtes Feature noch nicht intuitiv? Hier kann nochmal nachgebessert werden, indem weiterhin ein enger Austausch mit den Entwicklern bestehen bleibt.

Verschiedene Geräte

Im Beta-Test teste ich die Website

Geschwindigkeit: Pagespeed prüfen

Ganz wichtig: Prüft spätestens an dieser Stelle nochmals die Geschwindigkeit Eures Webprojekts. Das könnt Ihr direkt bei Google Pagespeed Insights machen oder bei unzähligen weiteren Anbietern wie z.B. GTMetrix. Schaut die Vorschläge zur Verbesserung an und setzt sie möglichst um, bzw. gebt die Empfehlungen an die Entwickler weiter. GTMetrix gibt Euch deutlich mehr Informationen, was genau noch nicht gut läuft. Zu große Bilder könnt ihr selbst beheben, alles Weitere ist wieder ein Fall für die Entwickler. Im Besten Fall haben sie das bereits selbst schon optimiert.

Screenshot vom Test bei GTMetrix

Ist die Website intern fertig beta-getestet, können jetzt nochmal finale Korrekturen für die Programmierer rückgemeldet werden. Andernfalls kann der Launch der Website jetzt losgehen!

Nochmal SEO: Google hallo sagen

Fertig? Noch nicht ganz. Nachdem die Website scharf geschaltet wurde und der Launch erfolgreich abgeschlossen ist, sollten wir nochmal aktiv in die Suchmaschinenoptimierung eingreifen.

 

Wir sagen Google, dass wir jetzt in da hood sind und es uns gefälligst ranken soll. Hierzu melden wir die neue Website bei der Google Search Console an, wofür Ihr einen Google Account benötigt. Wichtig ist hierbei eine XML-Sitemap, also bittet die Entwickler, Euch eine zu liefern. Bei WordPress-Seiten könnt ihr z.B. auch das Yoast SEO Plugin installieren, welches automatisch eine Sitemap generiert. Diese könnt ihr dann in der Search Console eintragen und eine Indexierung durch Google aktiv veranlassen.

Screenshot von der Google Search Console

Nachbereitung ist das halbe Leben

CMS-Schulungen

Falls die Kunden selbst die Website pflegen werden, ist es sinnvoll, eine Schulung anzubieten, bei der wir das nötige Wissen für die Webredaktion an den Mann oder die Frau bringen.

Momentaufnahme einer Web-Schulung

Nicht aus dem Auge verlieren

Die Technische Instandhaltung der Website sollte nicht zur Verantwortung des Kunden gehören. Wenn Kunden manuell WordPressinstallationen mit Updates versorgen, geht das oftmals schief. Schaut selbst ab und zu in die Installationen hinein (bzw. bittet die Entwickler, zentrale Updates durchzuführen). Vertraglich muss so etwas natürlich bereits beim Briefing geklärt worden sein.

Klick-Reportings

Immer öfter wünschen Kunden ein regelmäßiges Update über die Klickzahlen rund um die neue Website. Macht auch Sinn, man will natürlich wissen, welche Themen besonders wichtig für Nutzer sind und welche nicht gut funktionieren. So können auch Nachbesserungen nach dem Launch sinnvoll durchgeführt werden.

 

Wichtige Kennzahlen hierbei sind:

Google Analytics auf einem Laptop

Reflektion und Projektabschluss

Geschafft! Das Projekt ist durch, die Website sieht super aus und funktioniert einwandfrei. Das Ranking auf Google dauert eine Weile, bis es auf die gewünschten Niveaus aufsteigt, dafür braucht es noch etwas Geduld und unsere Aufmerksamkeit.

 

Beantwortet Euch jetzt aber noch reflektierend einige Fragen, um Euch für zukünftige Projekte weiterzuentwickeln und stetig besser zu werden:

Und zu guter Letzt ist natürlich auch die Meinung der Kunden wichtig. Fragt sie aktiv nach Feedback zu Eurer Arbeit, zur neuen Website, zu ihrer Zufriedenheit.

 

So, unsere Arbeit ist erst einmal getan. Immer wieder ein Grund zum Feiern! Aber nicht zu lange, das nächste Webprojekt kommt bestimmt. Prost!

Bier am Abend
Neueste Artikel
Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.