Eine gute Website ist ein komplexer Vorgang, und da vergisst man leicht etwas. Wie bei einem Flugzeug-Start kann eine Checkliste helfen, alles zu bedenken und einen perfekten Start hinzulegen.
Alle Inhaltselemente sollten an einem Webseiten-Raster (Grid) ausgerichtet sein. Die häufigst verwendete Raster besteht aus 12 Spalten (weil 12 durch 2, 3 und 4 teilbar ist). Der Abstand zwischen den Spalten kann beliebig gewählt werden, muss nur überall gleich sein.
Wenn es das Design z.B. eine Tablet-Ansicht in 768px gibt und der Browser 850px breit ist, soll das Layout 768px bleiben und links und rechts ist ein weißer Rand oder soll das Layout gleichmäßig auf 850px “wachsen”?
Das Layout sollte mit dem Daumen bedienbar sein (49% One-handed Thumb, 75% total Thumb-Usage), also:
Egal ob Photoshop oder InDesign, die finale Umsetzungsgröße ist nicht immer klar. Daher bitte, wie Breit soll der Grid des Layouts sein und für welches Bildschirmgröße gelten die Designs?
In welchen Sprachen wird die Website umgesetzt. Werden Texte in höflichem Sie oder persönlichem du formuliert. Wird gegendert und wenn ja in welcher Form?
Bei den Layouts bitte immer ein Beispiel mit allen Überschriftengrößen, einen Textblock, eine Tabelle, eine unsortierte und eine sortierte Liste, ein Bild und ein Video gestalten.
Grafiken
Die Webseite soll auch möglichst vielen Geräten immer gestochen scharf sein. Die einfachste Art dies für Logos und andere Grafiken zu erreichen sind Vektor-Grafiken, für das Web also SVGs. Fall vorhanden schicken Sie uns bitte alle Grafiken als SVG-Datei.
Bilder
Grundsätzlich bitte alle Bilder in doppelter Größe vom Layout an uns senden (für Retina-Bildschirme). Für bildschirmfüllende Bilder empfehlen wir 2500px Breite, mindestens 1400px. Die Bilder können gerne in guter Qualität sein. Wir programmieren so, dass alle Bilder (unter 10.000px) automatisch auf die entsprechende Größe komprimiert werden.
Seite nicht Gefunden (404)
Wie soll eine nicht-gefundene-Seite aussehen?
Suche
Falls es eine Suche gibt, bitte die Suche und die Suchergebnis-Seite gestalten.
Schriften
Welche Überschriften- und Fließtext-Schriften sollen wir verwenden? Für Webfonts, bitte die Schrift-Dateien zusenden und die Lizenzrechte für Online abklären. Für die Ladegeschwindigkeit empfehlen wir maximal 3 Schriftschnitte.
Ebenso brauchen wir bitte Fallback-Schriften, falls die Webfont nicht geladen werden kann (z.B. wegen einem Adblocker). Welche Systemschriften für’s Web gut unterstützt sind findet man unter fontfamily.io und cssfontstack.com.
Farben
Es kommt leicht zu einer Verwirrung bei genauen Farbcodes, das einfachste ist wenn ihr uns die Farben als genaue RGB-Werte oder Hex-Code schickt.
Design von Text
Responsive Logos
Bei vielen Logos ist es gut für Smartphones reduziertere Versionen zu verwenden, während man bei genügend Platz am Bildschirm größere Varianten nimmt. Hier eine kleine Inspiration.
Favicon
Wir brauchen ein Favicon (das ist das klein Icon im Browser-Tab, so wie bei den Lesezeichen). Auf der Website realfavicongenerator.net kann man direkt sehen wie es aussehen wird. Bitte alles richtig konfigurieren und das heruntergeladene ZIP an uns schicken.
Cookie Hinweis
Besonders rund um das Thema Datenschutz gibt es in Österreich strenge Regeln, die es zu beachten gilt.
Für die Verwendung von Google Analytics ist ein Cookie Hinweis mit einem Text wie "Ich stimme zu, dass diese Seite Cookies für Analysen, personalisiertem Inhalt und Werbung verwendet." nötig. Bevorzugt binden wir diese Konfiguration dieser Cookie-Hinweis ein, bitte schicken Sie uns die gewünschte Konfiguration und gerne auch weitere Anpassungswünsche, die wir dann programmieren.
Lade-Icon
Auf den meisten Webseiten benötigt man irgendwo ein animiertes Lade-Icon, um dies gleich für den Fall bereit zu haben bitte ich hier um einen Vorschlag. Empfehlen können wir auch folgende Lade-Icons:
Social Media Share Bilder
Welche Bilder sollen angezeigt werden, wenn ein Link zur Website auf z.B. Facebook oder Twitter angezeigt werden.
Empfohlene Bildgröße: 1.200 x 628 Pixel
Bildseitenverhältnis: 1,9:1