Webdesign für große Bildschirme

Responsive Webdesign: 7 Tipps für große Screens

5
(6)
Kommentar schreiben
Stand: 4. April 2014

Dieser Leitfaden demonstriert eine Reihe von praktischen Webdesign-Techniken zur Optimierungen für große Screens.

Was fällt Ihnen beim Thema "Responsive Webdesign" ein? Wahrscheinlich denken Sie – wie die meisten – daran, dass sich Webseiten an die kleinen Bildschirme von Smartphones anpassen. Das ist ein ganz zentraler Punkt – und sicher ist der vermehrte Internetzugriff über Smartphones der Hauptgrund für den überwältigenden Erfolg des responsiven Webdesigns.

Aber es gibt nicht nur die kleinen Bildschirme: Parallel zum Aufkommen aller möglichen kleinen Screens werden die Bildschirme auf den Desktops immer größer und größer. Und eine Website, die für die klassischen 960px konzipiert wurde, sieht da mehr als verloren aus. Glücklicherweise gibt uns das Responsive Webdesign auch Möglichkeiten, uns um die großen Bildschirme zu kümmern. Wobei das natürlich so passieren soll, dass die Nutzer von Smartphones nicht darunter leiden müssen.

Responsive Webdesign

Bei den folgenden Tipps gehe ich davon aus, dass Sie die Grundlagen des Responsiven Webdesigns schon kennen. Falls nicht, finden Sie in Responsive Layout eine kurze Einführung.

Tipp 1: Größere Schrift

Für größere Bildschirme darf die Schrift etwas größer werden. Denn die richtige Schriftgröße hängt – neben anderen Faktoren wie der gewählten Schrift, der Zeilenlänge und dem Zeilenabstand – auch von der Entfernung des Betrachters zum Bildschirm ab. Ein Smartphone beispielsweise hält man ziemlich nah ans Gesicht, zum Riesenmonitor auf dem Schreibtisch hat man eine gewisse Distanz. Dafür, dass die Texte dann noch gut lesbar sind, sorgt eine größere Schrift.

Üblicherweise setzt man auf einer Website mehrere Schriftgrößen ein, beispielsweise für Überschriften eine größere Schrift als für Absätze. Bei der Schriftanpassung für große Screens soll jetzt natürlich das Verhältnis zwischen Absätzen und Überschriften bewahrt werden. Am einfachsten gelingt das, wenn Sie auf die Einheit em (oder rem) setzen.

Sehen wir uns das an einem kleinen Beispiel an:

Als Mitglied können Sie diesen Beitrag weiterlesen!

Werden Sie Mitglied und testen Sie akademie.de 14 Tage lang kostenlos!

In den ersten 14 Tagen haben Sie Zugriff auf alle Inhalte auf akademie.de, außer Downloads. Sie können in dieser Zeit ohne Angabe von Gründen stornieren. Eine E-Mail an service@akademie.de genügt. Nur wenn Sie Mitglied bleiben, wird der Mitgliedsbeitrag nach Ende der 14tägigen Stornofrist abgebucht.

Ich bin bereits Mitglied
Jetzt Mitglied werden und akademie.de 14 Tage kostenlos testen
Ich entscheide mich für folgende Zahlungsweise:
14 Tage Stornorecht:
Ich kann meine Mitgliedschaft in den ersten 14 Tagen jederzeit formlos stornieren, z.B. per E-Mail an service@akademie.de.

Das Problem sind nicht breite Bildschirme

Das Problem sind nicht breite Bildschirme. Die berücksichtigen viele Webdesigner schon intuitiv, weil sie selbst vor einem fernsehartigen Riesending sitzen.

Wichtig wäre vielmehr, daß jede Seite zum Beispiel auch bei 800 Pixel Breite ohne seitliches Rollen dargestellt wird (www.akademie.de inzwischen leider auch nicht mehr). Das ist es nämlich, was wirklich nervt. Zumal manche ganz Professionellen rechts manchmal sogar wichtige Buttons plazieren. Ein bißchen Weißraum rechts hat dagegen noch keinem geschadet.

Alexander Morhart

Danke für den Tipp! Die

Danke für den Tipp! Die Anpassung an große Screens sollte genauso beachtet werden wie die Anpassung und Optimierung an mobile Geräte!
Allein das hat uns wirklich viele Kunden mehr beschert.
Jeder dritte Kunde kommt über das Smartphone und das heisst schon was!
Doch an Leute mit großen 40" Flatscreens haben wir noch nicht gedacht.
Danke dafür und liebe Grüße,

Florian
Webdesign Berlin

Downloads zu diesem Beitrag

Über die Autorin:

bild117864

Dr. Florence Maurice bietet Dienstleistungen im Webpublishing in Form von Fachtexten und Trainings (auch maßgeschneiderte Inhouse-Schulungen). Außerdem programmiert sie Webseiten. Ihre Themen: HTML, ...

Newsletter abonnieren