Eine große Aufgabe für Webdesigner ist das Responsive Design. Wie passt man eine Website auf verschiedene Auflösungen an, so dass die Übersichtlichkeit nicht leidet und das schicke Design der Seite trotzdem zur Geltung kommt?
Die Anforderungen werden durch die steigende Anzahl der mobilen Endgeräte und deren unterschiedlichen Displaygrößen immer komplexer. Eine Webseite an die jeweilige Auflösung des Users anzupassen, wird also ein immer wichtigerer Bestandteil des Webdesigns.
Durch den Einsatz von CSS3 und diverser „Media Queries“ kann der Entwickler sein Design für diverse Auflösungen optimieren. Eine wichtige Aufgabe ist es, die Konsistenz des Designs zu bewahren. Wichtig ist es, dass Bildelemente nicht nach oben hin skaliert werden und eine komplexe Menüstruktur kann nicht in allen Auflösungen gut darstellgestellt werden.
Um zu testen, wie die Webseite dann in verschiedenen Breiten aussieht, kann man das Test-Tool von Matt Kersley verwenden. Einige nützliche Einsteiger-Tipps vom Entwickler Tyler Herman haben wir hier einmal zusammengefasst:
Zunächst kommt es immer auf den jeweiligen Content an, den man mit Hilfe des Designs herüberbringen will. Man sollte sich also zunächst bewusst machen, welche wichtigen Punkte man unbedingt ansprechen möchte, welche man gerne mit dabei hätte, die aber verpflichtend sind und welche Dinge man getrost weglassen kann. Diese Anhaltspunkte werden um den Inhalt herum angeordnet.
Dann sollte man sich bewusst machen, für wen man die Webseite gestaltet. Wer gehört zur Zielgruppe? Was könnten sie von dieser Homepage erwarten? Und zu guter Letzt sollte man sich darüber Gedanken machen, wie man das zur Verfügung stehende Budget am besten einsetzen will. Je weniger Geld man zur Verfügung hat, desto weniger Zeit sollte man in alles rund um die auf der Seite verwendeten Medien investieren.
Bild: (c) BitKom