Design
Was sollten Grafiker bei Anlegen der Designvorlagen beachten?Layouts als .sketch oder .psd liefern
Dateiformate
.sketch
Bevorzugtes Format. Hier ist in der Regel alles so angelegt, dass Elemente, Größen und Module wiederverwendet werden können und vor allem einheitlich sind. So wie in der Programmierung.
.psd
Adobe Photoshop ist auch absolut okay. Hier können wir alle Farben, Größen und Einstellungen für das Web ablesen und übernehmen.
Andere Formate
Andere Formate wie InDesign oder Illustrator nach Absprache. Speziell InDesign ist für Web-Projekte eher ungeeignet, da sämtliche Größenangaben vom Entwickler interpretiert und übersetzt werden müssen.
Breakpoints
Meistens bekommen wir Layouts für Desktop in 1280, 1440 oder 1920 Pixel Breite. Dazu Tablet Layouts in 768 Pixel Breite und Phone Layouts in 320 oder 375 Pixel Breite.
Wir setzen die Breakpoints für das Responsive Design dann sinnvollerweise dazwischen, damit alle gängigen Bildschirmauflösungen ideal bedient werden und genügend Platz zur Verfügung steht, besonders bei mehrspaltigen Layouts.
Zum Beispiel sollte bei einem zweispaltigen 768 Pixel breiten Tablet Layout bedacht werden, dass die Inhalte auch bei einer Breite von 600 Pixel noch nebeneinander passen.
Idealerweise sollte dieser Raum mit eingeplant werden, weil sich die 768 Pixel genau in der Mitte zwischen zwei Breakpoints befindet. Headlines sind in der Praxis gerne mal so groß angelegt, dass es je nach Wortlänge zu wenig Spielraum gibt.
Silbentrennung
In Layouts wird gerne mit Silbentrennung gearbeitet. Wichtig zu wissen, im Web lässt sich das leider nicht auf allen Browsern korrekt darstellen.
Über den CSS Befehl hyphens: auto; kann man einstellen, dass wenn ein Wort länger ist als der zur Verfügung stehende Platz, das Wort automatisch mit einem Bindestrich getrennt wird. Soweit die Theorie. Microsoft Internet Explorer, Microsoft Edge, Safari, und die Mac Version von Google Chrome unterstützen diesen Befehl ohne Probleme.
Mozilla Firefox und die PC Version von Google Chrome hingegen ignorieren diesen Befehl. Bei Mozilla Firefox spielt auch noch die Sprache eine Rolle. Jedenfalls wird die Funktion nicht einheitlich unterstützt.
Es gibt noch den CSS Befehl word-break: break-word; den man ergänzend hinzufügen kann. Dann wird auf den Beiden genannten Browsern zumindest ein Umbruch in die nächste Zeile erzwungen, wenn auch ohne Bindestrich.
Da es aktuell keine saubere Lösung gibt, die zu einheitlichen Ergebnissen auf allen Browsern führt, empfehlen wir von Anfang nicht auf Silbentrennung zu setzen und genügend Platz zum Beispiel für lange Wörter in Headlines einzuplanen.
Widescreen
Das Desktop Layout wird häufig in einer gängigen Bildschirmauflösung geliefert, zum Beispiel in einer Breite von 1440 Pixel.
Idealerweise gibt es ein exemplarisches Layouts, aus dem sich ableiten lässt, wie sich die Seite zum Beispiel auf einem Widescreen Display mit einer Breite von 1920 Pixel oder breiter verhalten soll. Es gibt da mehrere Optionen, hier ein paar Beispiele.
Es gibt natürlich noch viele weitere Möglichkeiten und diese Beispiele sollen nur zeigen, dass man all diese Optionen nicht immer aus den "schmalen" Desktop Layouts ableiten kann. Von daher wäre es ideal, sich schon beim Screendesign zu überlegen, wie die Seite auf extrem breiten Monitoren dargestellt werden soll.
Auf Anfrage setzen wir bei der Template-Entwicklung auch mehrere Varianten um, so lässt sich im Browser vergleichen, welche Variante sich am besten anfühlt.
Fullscreen
Im Screendesign kommen häufig Content-Elemente vor, die mit einem vollflächigen Hintergrund angelegt sind, zum Beispiel einem Bild oder einem Video. Das ist soweit kein Problem. Es sollte jedoch klar sein, der Hintergrund fast immer angeschnitten wird.
Warum ist das so?
Es würde nur dann nichts abgeschnitten werden, wenn der Viewport im Browser und das Hintergrundbild oder -video das exakt gleiche Seitenverhältnis hätten. Und ist so gut wie nie der Fall.
Zum Einen weil Displays verschiedener Geräte an sich schon mal unterschiedliche Seitenverhältnisse haben:
Device | Aspect Ratio |
iPad 7 | 4:3 |
iPhone 8 | 16:9 |
iPhone 11 | 16:9 |
Samsung Galaxy S10 | 19:9 |
Und zum Anderen, weil jeder Browser unterschiedlich große Bedienleisten hat, die man von der Fläche des Displays noch mal abziehen muss:
So kommt es zu abweichenden Ergebnissen. Egal ob Hochformat oder Querformat. Egal ob Mobile-Device oder Desktop. Das Prinzip ist immer das Gleiche.
Wie geht man am besten damit um?
In der Programmierung können wir zwischen Querformat (Orientation Landscape) und Hochformat (Orientation Portrait) unterscheiden. Wir empfehlen für das Querformat einen Hintergrund von 16:9 anzulegen und für das Hochformat 9:16. Das bietet sich an, weil Video sowieso meistens in 16:9 oder 9:16 angelegt sind und dieses Seitenverhältnis zwischen 4:3 und 19:9 liegt. Dadurch wird der "Verschnitt" so gering wie möglich gehalten.
Zusätzlich sollte bei der Auswahl der Hintergrundmotive unbedingt darauf geachtet werden, dass diese einen gewissen Spielraum im Randbereich haben und es auf allen Formaten gut aussieht. Bilder oder Videos bei denen nichts abgeschnitten werden darf, sind für einen Fullscreen-Background nicht geeignet!
Textlänge (in Sprachen)
Es gibt Content-Elemente, bei denen eine gewisse Textlänge nicht überschritten werden darf, damit zum Beispiel der Text noch in die quadratische Box passt, oder es zu keinen Überlappungen mit anderen Elementen kommt.
Sollte die Website mehrere Sprachen haben, so sollte man im Layout bedenken, dass beispielsweite Übersetzungen auf Französisch in der Praxis wesentlich mehr Platz brauchen als englische Übersetzungen. Und diesen Platz entsprechend mit einplanen.
Zurück zur ChecklisteBreakpoints
Meistens bekommen wir Layouts für Desktop in 1280, 1440 oder 1920 Pixel Breite. Dazu Tablet Layouts in 768 Pixel Breite und Phone Layouts in 320 oder 375 Pixel Breite.
Wir setzen die Breakpoints für das Responsive Design dann sinnvollerweise dazwischen, damit alle gängigen Bildschirmauflösungen ideal bedient werden und genügend Platz zur Verfügung steht, besonders bei mehrspaltigen Layouts.
Zum Beispiel sollte bei einem zweispaltigen 768 Pixel breiten Tablet Layout bedacht werden, dass die Inhalte auch bei einer Breite von 600 Pixel noch nebeneinander passen.
Idealerweise sollte dieser Raum mit eingeplant werden, weil sich die 768 Pixel genau in der Mitte zwischen zwei Breakpoints befindet. Headlines sind in der Praxis gerne mal so groß angelegt, dass es je nach Wortlänge zu wenig Spielraum gibt.
Zurück zur ChecklisteSilbentrennung
In Layouts wird gerne mit Silbentrennung gearbeitet. Wichtig zu wissen, im Web lässt sich das leider nicht auf allen Browsern korrekt darstellen.
Über den CSS Befehl hyphens: auto; kann man einstellen, dass wenn ein Wort länger ist als der zur Verfügung stehende Platz, das Wort automatisch mit einem Bindestrich getrennt wird. Soweit die Theorie. Microsoft Internet Explorer, Microsoft Edge, Safari, und die Mac Version von Google Chrome unterstützen diesen Befehl ohne Probleme.
Mozilla Firefox und die PC Version von Google Chrome hingegen ignorieren diesen Befehl. Bei Mozilla Firefox spielt auch noch die Sprache eine Rolle. Jedenfalls wird die Funktion nicht einheitlich unterstützt.
Es gibt noch den CSS Befehl word-break: break-word; den man ergänzend hinzufügen kann. Dann wird auf den Beiden genannten Browsern zumindest ein Umbruch in die nächste Zeile erzwungen, wenn auch ohne Bindestrich.
Da es aktuell keine saubere Lösung gibt, die zu einheitlichen Ergebnissen auf allen Browsern führt, empfehlen wir von Anfang nicht auf Silbentrennung zu setzen und genügend Platz zum Beispiel für lange Wörter in Headlines einzuplanen.
Zurück zur ChecklisteWidescreen
Das Desktop Layout wird häufig in einer gängigen Bildschirmauflösung geliefert, zum Beispiel in einer Breite von 1440 Pixel.
Idealerweise gibt es ein exemplarisches Layouts, aus dem sich ableiten lässt, wie sich die Seite zum Beispiel auf einem Widescreen Display mit einer Breite von 1920 Pixel oder breiter verhalten soll. Es gibt da mehrere Optionen, hier ein paar Beispiele.
Es gibt natürlich noch viele weitere Möglichkeiten und diese Beispiele sollen nur zeigen, dass man all diese Optionen nicht immer aus den "schmalen" Desktop Layouts ableiten kann. Von daher wäre es ideal, sich schon beim Screendesign zu überlegen, wie die Seite auf extrem breiten Monitoren dargestellt werden soll.
Auf Anfrage setzen wir bei der Template-Entwicklung auch mehrere Varianten um, so lässt sich im Browser vergleichen, welche Variante sich am besten anfühlt.
Zurück zur ChecklisteFullscreen
Im Screendesign kommen häufig Content-Elemente vor, die mit einem vollflächigen Hintergrund angelegt sind, zum Beispiel einem Bild oder einem Video. Das ist soweit kein Problem. Es sollte jedoch klar sein, der Hintergrund fast immer angeschnitten wird.
Warum ist das so?
Es würde nur dann nichts abgeschnitten werden, wenn der Viewport im Browser und das Hintergrundbild oder -video das exakt gleiche Seitenverhältnis hätten. Und ist so gut wie nie der Fall.
Zum Einen weil Displays verschiedener Geräte an sich schon mal unterschiedliche Seitenverhältnisse haben:
Device | Aspect Ratio |
---|---|
iPad 7 | 4:3 |
iPhone 8 | 16:9 |
iPhone 11 | 16:9 |
Samsung Galaxy S10 | 19:9 |
Und zum Anderen, weil jeder Browser unterschiedlich große Bedienleisten hat, die man von der Fläche des Displays noch mal abziehen muss:
So kommt es zu abweichenden Ergebnissen. Egal ob Hochformat oder Querformat. Egal ob Mobile-Device oder Desktop. Das Prinzip ist immer das Gleiche.
Wie geht man am besten damit um?
In der Programmierung können wir zwischen Querformat (Orientation Landscape) und Hochformat (Orientation Portrait) unterscheiden. Wir empfehlen für das Querformat einen Hintergrund von 16:9 anzulegen und für das Hochformat 9:16. Das bietet sich an, weil Video sowieso meistens in 16:9 oder 9:16 angelegt sind und dieses Seitenverhältnis zwischen 4:3 und 19:9 liegt. Dadurch wird der "Verschnitt" so gering wie möglich gehalten.
Zusätzlich sollte bei der Auswahl der Hintergrundmotive unbedingt darauf geachtet werden, dass diese einen gewissen Spielraum im Randbereich haben und es auf allen Formaten gut aussieht. Bilder oder Videos bei denen nichts abgeschnitten werden darf, sind für einen Fullscreen-Background nicht geeignet!
Zurück zur ChecklisteWebfonts und ggf. Lizenz liefern
Im Screendesign werden Desktop-Schriften wie .ttf (True Type Format) oder .otf (Open Type Format) verwendet. Für die Darstellung im Browser werden sämtliche Schriften und Schriftschnitte, die von den Systemschriften Arial / Verdana / Times etc. abweichen, als Webfonts benötigt.
Was sind Webfonts?
Webfonts sind komprimierte Schriften für die Darstellung im Browser.
Welches Format haben Webfonts?
Für jede Schriftart und für jeden Schriftschnitt brauchen wir jeweils eine .woff und eine .woff2 Datei. So erreichen wir eine einheitliche Darstellung auf allen Browsern.
Woher bekommt man die Webfonts?
Man unterscheidet zwischen kostenlosen Webfonts (z. B. von Google Fonts) und kostenpflichtigen Webfonts, für die man eine Lizenz erwerben muss (z. B. von MyFonts oder TypeKit).
Kostenfreie Webfonts
Bei Google Fonts kann man sich alle gelisteten Schriften als Desktop Schriften runterladen und die dazugehörigen Webfonts werden zur Integration in die Website angeboten. Da ist also nichts weiter zu tun und wir übernehmen einfach den Service.
Bei den kostenpflichtigen Anbietern muss zuerst die Lizenz gekauft werden. Das jeweilige Preismodell kommt im Einzelfall auf den Anbieter an. Bei vielen Anbietern sind die Preise dann noch mal nach "Seitenaufrufen pro Monat" gestaffelt. Nach dem Kauf, kann man sich das Paket herunterladen. Dieses dann einfach an uns weiterleiten und wir binden gemäß der Vorgaben des Anbieters in die Website ein.
Zurück zur ChecklisteIcons als SVGs liefern
Wir benötigen alle im Screendesign verwendeten Icons im SVG Format. So können wir sie ohne Qualitätsverlust und mit maximaler Performance im Hinblick auf Ladezeiten in die Website integrieren.
SVG ist ein Vektorformat. Daher bitte beachten, dass keine Pixeldaten in den SVGs eingebettet werden, auch wenn dies technisch möglich ist. So bleibt die maximale Schärfe der Icons erhalten und nur so lassen sich die Icons per CSS in verschiedenen farblichen Zuständen abbilden.
Zurück zur Checkliste