Display Auflösungen Homepage

Die Schulwebseite präsentiert sich in neuem Gewand

Die Art und Weise, wie wir das Internet nutzen, ändert sich rasant. Laut aktueller Studien ist der Anteil der Menschen, die das Internet mobil nutzen, innerhalb von vier Jahren von 11% (2009) auf 41% (2013) gestiegen.

Dieser Bedeutungzuwachs mobiler Internetnutzung bleibt für die Gestaltung von Webseiten nicht ohne Folgen, denn die neuen mobilen Endgeräte (Handys, Tablets usw.) stellen andere Anforderungen an eine Webseite als die klassischen Desktop-Computer.

Responsives Layout

Der wichtigste Faktor ist die Displaygröße der neuen Endgeräte. Diese ist durch die Nutzung von Handys und Tablets einerseits kleiner geworden, zugleich aber werden die Desktop-Monitore auf den heimischen Schreibtischen immer größer. Eine moderne Webseite sollte diese Entwicklungen berücksichtigen, denn sonst würde sie z.B. auf kleinen Handy-Displays bis zur Unleserlichkeit verkleinert werden.

Die neue gestaltete GSS-Webseite ist "responsiv", d.h. sie reagiert auf unterschiedliche Diplays, Auflösungen und Browserfenstergrößen. Sie passt sich flexibel den vom Nutzer festgelegten Bedingungen an und wählt automatisch das am besten passende Layout. Man kann dies selbst ausprobieren, wenn man das Browserfenster manuell vergrößert oder verkleinert.

Praktisch heißt das, dass die Inhalte untereinander, statt nebeneinander dargestellt werden, wenn der Platz nicht mehr ausreicht. Zugleich variiert die Schriftgröße. Wenn mehr Platz zur Verfügung steht, wählt die Webseite automatisch eine besser lesbare Schriftgröße.

Die Abbildung oben zeigt links die Darstellung auf Desktop-Monitoren bei maximaler Breite und rechts die Darstellung auf einem Handydisplay bei einer Breite von ca. 300 Pixeln.

Dropdown-Navigation

Die neue Webseite setzt hauptsächlich auf eine horizontale "Dropdown"-Navigation, bei der sich die Untermenüpunkt nur auf Klick ausklappen. Dies entspricht einem zeitgemäßen Webdesign, weil die Navigationleiste so mehr Platz für die Inhalte lässt, was - wie oben beschrieben - gerade bei kleinen Displays wichtig ist.

Die Dropdown-Navigation funktioniert übrigens auch dann noch, wenn die Programmiersprache Java-Script im Browser aus Sicherheitsgründen deaktiviert ist. Darüber hinaus unterstützt die Navigation Touchscreen-Bildschirme und sollte daher auf allen Endgeräten gleichermaßen gut funktionieren.

Mehr Raum für Bilder

Durch die platzsparende Navigation wird die Webseite zugleich ansprechender, weil nun mehr Platz für Bilder und Inhalte zur Verfügung steht. Dies haben wir ausgenutzt, um die Größe der Bilder und ihren Anteil deutlich zu steigern. Wir versprechen uns davon, dass die Webseite nicht nur wie bisher Sachinformationen über Termine, Personen und Aktivitäten transportiert, sondern auch noch etwas mehr von der Atmosphäre unseres Schullebens vermitteln kann.

HD-Unterstützung für hochauflösende Displays

Auch hinsichtlich der Bilddarstellung hat der technische Wandel das Webdesign vor neue Herausforderungen gestellt. Seitdem es auch für mobile Endgeräte hochauflösende Displays gibt, die über eine vielfach höhere Bildschirmauflösung verfügen, sollten auch die auf Webseiten bereitgestellten Bilder höhere Auflösungen haben, da sie sonst auf den modernen Displays unscharf erscheinen.

Das Problem ist jedoch, dass die höher auflösenden Bilder auch einen vielfach größeren Speicherplatz beanspruchen und auch die Ladezeiten verlängern, was gerade bei älteren Geräten, welche die höheren Auflösungen gar nicht verarbeiten können, doppelt unnötig erscheint. Die GSS-Webseite prüft die Bildschirmauflösung des Nutzers und stellt dann automatisch die passenden Bilder bereit. So sollten für jeden Nutzer die Bilder so scharf wie nötig und die Ladezeiten so kurz wie möglich ausfallen.

"Inklusion online" - barrierefreies Webdesign

Die neue Webseite ist barrierefrei und kann auch von speziellen Lesegeräten für Blinde gelesen werden. Sogenannte "Skiplinks", die für den normalen Nutzer unsichtbar sind, aber von Screenreader-Geräten erkannt werden, helfen Menschen mit Sehschwächen bei der Navigation durch die Webseite.

Wir hoffen, dass wir mit diesen verschiedenen Maßnahmen die GSS-Webseite noch ansprechender gestalten konnten. Falls Sie dennoch Verbesserungsvorschläge haben oder Ihnen sogar ein Fehler aufgefallen ist, freuen wir uns über eine Rückmeldung: Hinweis an den Webmaster senden.

Artikel: Herr Müller