So you have a design and “just” need programming? A quick introduction on what is needed to successfully implement your design online

[This information is currently available in German only.]

Ihr wollt mit uns ein Projekt realisieren, aber selbst das Design übernehmen oder habt jemanden anderen, der das Design machen soll? Kein Problem! Wir übernehmen für solche Projekte gerne die technische Umsetzung, soferne eine Vorlage geliefert wird, die dafür auch wirklich geeignet ist.

Neben der Darstellung der “Idee” des Designs gibt es einige Punkte, die in der Gestaltungsvorlage berücksichtigt werden müssen, die insbesondere von Leuten mit wenig Web-Erfahrung (aber auch immer wieder von mit dem Medium vertrauten) vergessen werden. Zur Hilfe hier eine kurze (und wahrscheinlich nicht in jedem Fall ausreichende) Checkliste mit den wichtigsten Punkten. (Einige der Punkte kommen euch vielleicht trivial oder offensichtlich vor, aber wir haben schon viel erlebt, so dass wir es lieber aufschreiben ;)

Grundlegende Anforderungen

Pixel-Umsetzung

Bildschirme zeigen Webseiten als Pixelgrafik an. Deshalb ist es für die Programmierung unumgänglich, eine Pixel-basierte Vorlage zu haben, in der auch alle Maße korrekt vorliegen. Vektor-basierte Formate (z.B. Illustrator) sind als “Reinzeichnung” für die Umsetzung nicht geeignet.

Browser-Grössen

Grundsätzlich wird eure Website auf Bildschrimen unterschiedlichster Größe angeschaut werden – durch das Aufkommen von HD-Bildschirmen einerseits und mobilen Geräten mit winzigen Bildschirmen andererseits hat sich diese Problematik in letzter Zeit sogar noch verschlimmert. Hier gilt es einerseits die grundlegende Strategie festzulegen (bleibt das Layout fix oder verändert es sich mit der Fenstergrösse? Gibt es gar eine eigene Version der Seite für mobile Geräte?), andererseits die Details zu berücksichtigen (was ist die Pixelbreite des Layouts? Welche Elemente bleiben fix, welche bewegen sich wenn der Browser eine andere Größe hat?).

Grundsätzlich hat sich eine Maximalbreite von 960 Pixeln bewährt, wenn man nicht ein (komplizierteres) dynamisches Layout umsetzen will.

Schriften

Web-Browser unterstützen nur ein sehr kleines Sortiment von Standard-Schriftarten (für eine Auflistung siehe hier ). Obwohl in den letzten Jahren verschiedene Technologien entwickelt wurden, um dennoch beliebige selbst gewählte Schriften anzeigen zu können, müssen wir aus Erfahrung sagen das alle diese Methoden Nachteile haben und nicht auf allen Browsern in gleicher Qualität zur Verfügung stehen. Generell ist es also für alle Seiten einfacher, mit den verfügbaren Schriften auszukommen und den Entwurf von vornherein darauf auszurichten. Wenn es unbedingt eigene Schriften sein müssen, besprechen wir mit euch gerne die Möglichkeiten und den Aufwand.

Dynamisches Verhalten

Wie verändert sich die Seite während der Benutzung? Wo kann man draufklicken, was passiert dann, was verändert sich beim drüberfahren? Für jede auch noch so kleine Veränderung sollte es einen eigenen Screenshot bzw. eine eigen Ebene im Photoshop-Dokument geben, in der die Veränderung dargestellt wird. Bei komplexeren Abläufen benötigen wir eventuell zusätzlich einen erklärenden Text der die Änderungen beschreibt.

Im Detail

Leere & Volle Bereiche

Bereiche wie Link-Listen, Bildergallerien oder Menüs können beliebig viele Einträge enthalten — und sollten auch in allen Fällen gut aussehen. Wie sehen diese Bereiche aus, wenn kein oder nur ein einzelnes Element darin enthalten ist? Was passiert, wenn es sehr viele Einträge werden?

Videoplayer-Interface

Auch das User-Interface des Videoplayers sollte zur Seite passen. Wenn ihr nicht das Standard-Interface des JWPlayers haben wollt, brauchen wir auch hier eine Vorlage wie es aussehen soll. Achtung: Die Umgestaltung des Videoplayers kann auch technisch sehr aufwändig sein, ihr solltet jedenfalls mit uns vorab Kontakt aufnehmen um zu besprechen was möglich ist.

Uff… das ist aber viel Arbeit…!

Entspricht eure Vorlage nicht diesen Kriterien, ist das natürlich auch kein großes Problem – allerdings handelt es sich dann nicht mehr um ein “reines” Umsetzungsprojekt, sondern werden von uns dann durchaus auch Designleistungen im Rahmen des Projekts erbracht, was ziemlich sicher eine Veränderung von Zeitplan und Budget zur Folge hat. Siehe dazu die entsprechde Info zu Designprojekten .

Weiterführende Links