Auflösung oder Viewport - worauf Designer achten sollten

Bei der Erstellung eines neuen Designs für eine Webseite wird meist ein externer Designer beauftragt dieses zu erstellen. Er hat sich an einige Wünsche und Forderungen des Aufftraggebers zu halten, sollte in jedem Fall auch in Abstimmung mit dem Auftraggeber eigene Gedanken einbringen, muss aber auch technische Aspekte berücksichtigen. Berücksichtigt er diese nicht kann es passieren, dass die neu erstellte Webseite von einigen Besuchern nicht komplett einsehbar oder nicht bedienbar ist.

Konzeptionslosigkeit

Bevor ein Design entwickelt werden kann sollte immer schon eine Wunschliste für einzelne Funktionalitäten existieren. Diese muss nicht komplett sein, aber sollte bereits die wichtigsten Bestandteile der neuen Webseiten beschreiben. Ohne diese Liste hat ein Designer keine Grundlage um ein funktionell brauchbares Design zu erstellen. So kann er nicht nur die Startseite und einzelne Textseiten entwerfen sondern z.B. auch das Aussehen eines Kontaktformulars bestimmen.

Weiterhin ist es wichtig den Designer über den Sinn und Zweck der Webseite aufzuklären. Was möchte der Auftraggeber mit dieser Seite erreichen, wie soll es ihn bzw. sein Unternehmen repräsentieren?! Oft ist dies auch eine Frage des unternehmensweiten Corporate Designs (CD) - der Auftraggeber muss dem Designer alle benötigten Materialien zukommen lassen.

Ohne diese Planung kann ein Designentwurf auch nach hinten losgehen - der Designer würde etwas entwerfern was dem Auftraggeber überhaupt nicht zusagt, er hätte im schlimmsten Fall umsonst gearbeitet. Auch könnte der Auftraggeber alles hinnehmen wie er es erhält, aber das Web sieht letztlich unansehnlich aus, es könnte sich nicht positiv auf den Besucher auswirken. Somit besteht es im Interesse des Designers wie auch des Auftraggebers miteinander zu reden und die wichtigstens Punkte zu klären.

Designs für Webfunktionen

Das oben angesprochene Design für einzelne Funktionen kann je nach Auftrag essentiell sein. Manche Webseiten sind derart durchgestylt, dass ein Designer auch für Kontaktformular, Suchfunktion oder Bildergalerie einen Entwurf vorlegen sollte damit man wirklich ein "rundes" Aussehen der Webseite erreicht.

Häufigstes Problem von Designern bei der Gestaltung von diesen Funktionen: sie nehmen wichtige Elemente nicht wahr, unterschlagen diese in ihren Entwürfen. Bspw. legen viele Designer Entwürfe für Kontaktformulare ohne Absenden-Button vor - aus Besuchersicht eine Unmöglichkeit zumal die meisten Besucher einen Button zum Anklicken erwarten.

Der Viewport

"Die für eine Webseite zur Verfügung stehende Fläche ist mein Bildschirm."

Dieser Irrglaube ist bei vielen Internetnutzern verbreitet. Tatsächlich kann eine Webseite nur die Fläche des Bildschirms einnehmen den ein Browserfenster ihr zugesteht: den Viewport.

Dahinter steht auch eine einfache mathematische Formel in der die häufig bei Designs angesprochene Bildschirmauflösung nicht mal auftaucht:

Nicht jeder Internetnutzer surft mit seinem Browser im Vollbild. Dadurch kann man für eine Webseite nicht pauschal sagen, dass sie für die Auflösung 1024x768 gedacht ist - optimal wäre es, wenn eine Webseite sich dynamisch an die zur Verfügung stehende Breite, den Viewport, anpasst. Das dies nicht bei jedem Design möglich ist sollte auf der Hand liegen. Dennoch ist der Viewport das entscheidende Kriterium um eine Webseite im Browser des Besuchers komplett darstellen zu können.

Browserschwächen beachten

Auch wenn die meisten Designer es ungern sehen müssen sie sich auch auf die Schwächen von Browsern einstellen. Das auffallendste Beispiel hierfür sind Formularfelder. Dieser werden technologisch bedingt nicht von jedem Browser gestylet, sind demzufolge auch nicht vom Webdesigner beeinflussbar. Beispielsweise kann man bei Auswahl-Boxen weder Farbe noch Größe einheitlich bestimmen - jeder Browser würde das anders interpretieren (falls er es interpretiert) und noch dazu auf jedem System (Windows, Linux, MacOS) anders darstellen.

Viele Designer verwenden MacOS X zur Arbeit. Folglich bauen sie in ihre Designentwürfe auch MacOS-Buttons und -Formularfelder ein. Diese können jedoch nicht in jedem Fall auch so umgesetzt werden, dass andere Systeme sie auch so darstellen. Hierauf sollte ein Designer ebenfalls acht geben wenn er seine Entwürfe dem Kunden zeigt.

Designs für VIO.Matrix

VIO.Matrix ermöglicht eine völlig freie Gestaltung der Webseite. Somit ist dem Designer absolut freie Hand gelassen bei dem was er gestaltet. Jedoch sollte der Designer berücksichtigen, welche HTML-Elemente und Formatierungen ein Redakteur über das CMS einfügen kann, und folglich wie diese dargestellt werden sollen. Dazu zählen:

6 Überschriften
fett geschriebener Text
kursiv geschriebener Text
unterstrichener Text
durchgestrichener Text
linksbündiger Text
rechtsbündiger Text
Blocksatz
Aufzählgungs- und Nummerierungslisten
Links für interne wie auch externe Seite
Bilder
Tabellen (inkl. Unterscheidung zwischen Kopf, Fuß und Körper)

Kleinkram

Auch wenn es die meisten Besucher nicht aktiv bemerken: es sind die kleinen Dinge die ein Design wirklich komplett machen.

Dazu zählen nicht nur einzelne Striche oder Farbverläufe. Moderne abgerundete Ecken, Effekte beim Überfahren mit der Maus oder sanfte Hintergrundfarben sind nur einige Möglichkeiten. Ein Favicon für die Adresszeile im Browser erhöht zudem den Wiedererkennungswert, wenn es animiert wird ist es besonders effektreich.

Checkliste für Designer

Wenn ein neues Design erstellt wird sollte er auf folgende Punkte achten bevor er das Design zur Kodierung abgibt:

Worum geht es auf der Webseite? Was ist das Thema?
Gibt es Vorgaben bezüglich Farbgebung, Bildern etc.?
Über welche Funktionen verfügt das Web? Sollen diese eine spezielle Gestaltung erhalten?
Ist ein Favicon erstellt wurden?
Wurde berücksichtigt in welchem Viewport die Webseite mindestens komplett dargestellt wird?
Haben alle Formular auch einen Absenden-Button?

Speziell bei auf VIO.Matrix basierenden Webseiten kommen noch folgende Checklistenpunkte dazu: