Die Messe "Senior Aktuell", die alljährlich in der Wiener Stadthalle stattfindet, wurde anlässlich des 40-Jahre Jubiläums völlig neu gestaltet. Klarerweise gehört dazu auch eine rundum erneuerte Website, die wir in moderner Bauart mit HTML5 und responsivem Webdesign umgesetzt haben.

Fallbeispiel für Responsives Webdesign

Eine Website, deren Inhalt ein Angebot/Geschehen an einem Ort ist (also etwa für ein Hotel, ein Lokal, eine Veranstaltung..), sollte auch für mobile Geräte geeignet sein. Natürlich kann man in einer "normalen" Website herumzoomen, aber so richtig knackig ist das nicht. Schon gar nicht, wenn aufgrund vieler Unterseiten auch das Menü umfangreich ist, dann wird das schnell zum mühsamen Gefrickel.

Responsives Webdesign

"Responsives Webdesign" bedeutet, dass sich das Design mit Hilfe verschiedener "Tricks" unmittelbar an den Bildschirm anpasst - unabhängig davon, ob das Zielgerät ein Smartphone, ein Tablet oder ein Desktop-PC ist. Es werden also nicht serverseitig Geräte-Typen abgefragt, sondern es wird immer die gleiche Webseite (und die gleichen Bilder!) ausgeliefert und dem Browser überlassen, wie der damit umgehen soll.

Die gleiche Seite für Desktop, Tablet (Hochformat) und Smartphone:

Am Desktop (mit sehr großen Bildschirmen) füllt ein großflächiges Hintergrundbild den Leerraum; der Seiteninhalt ist wie üblich zentriert. Breitere Zeilen würde nichts bringen und nur die Lesbarkeit verringern.

Auf kleineren Geräten wird das Menü zu einem Button zusammengefasst, der auf Klick ein fingergerechtes Listenmenü darstellt. Dadurch steht mehr Platz für den Inhalt zur Verfügung. Die Breite ist variabel, Bilder am rechten Rand werden in der Größe entsprechend angepasst.

Auf sehr kleinen Geräten - also Smartphones - wandern Teile des rechten Blocks nach oben, andere nach unten, wieder andere verschwinden. Dadurch bleibt der Text auch ohne Herumgezoome immer lesbar.

Voraussetzungen

RWD muss gut geplant werden und natürlich muss auch der Seiteninhalt geeignet sein. In diesem konkreten Fall (Senior Aktuell) gibt es nur 3 wesentliche Bereiche, die für Handy-Nutzer interessant sind: Das Tagesprogramm, das Ausstellerverzeichnis und die Kontaktmöglichkeiten FÜR Aussteller.

Wir nehmen in Kauf, dass manche weniger wichtige Seiten auf dem Handy nicht _ganz so_ optimal aussehen. Das Ausstellerverzeichnis nimmt den größten Raum ein, dieses ist sehr einheitlich; es müssen nur 2 Darstellungsformen berücksichtigt werden. Ähnliches gilt für das Tagesprogramm.

Web-Visitenkarten mit Telefonnummern darauf sollten responsiv sein. Der Aufwand hält sich in Grenzen. 

Welche Vorteile hat Responsives Webdesign?

  • Suchmaschinen bekommen ebenso wie normale Endgeräte immer die gleiche Version einer Seite. Man muss sich über "Duplicate Content" keine Sorgen machen.
  • Handys und noch mehr Tablets handhaben die "virtuelle Bildschirmgröße" recht verschieden - man wird verrückt, wenn man die Geräte alle einzeln abfragt. Das ist hier tatsächlich auch gar nicht notwendig: Letztlich entscheidet das Gerät selbst, was es kann und wie es damit umgehen soll.  

..und die Nachteile sollen nicht verschwiegen werden:

  • Die sehr beliebten Slider, Überblendeffekte, Aufpopper usw sollte man sich lieber abschminken, zumindest brauchen sie eine aufwändige Sonderbehandlung. Responsive Designs müssen immer etwas einfacher gestrickt sein (..ein Nachteil?)
  • Die Internet Explorer machen immer wieder mal Ärger, auch die neueren! 

 

Kommentare:

Ja, das ist eine häufige Diskussion, ob man für Smartphone extra verkleinerte Bilder bereitstellen soll.
In der Praxis muss man beachten:

1) Handys haben eine sehr hohe native Auflösung und verkleinerte Bilder werden unscharf. Zumal sie ja auch noch intern skaliert werden, wodurch sie nocheinmal unschärfer werden. Je kleiner, desto mehr.

2) Die Dateigröße selbst macht nicht so viel aus; ein in Breite und Höhe doppelt so großes Bild ist in der Datenmenge inkl. HTTP-Header und allem dran nur geringfügig größer.

Und dann gibt es noch Tablets, Phablets, Hoch/Quer usw - da kommt man kaum auf einen grünen Zweig, wenn man für alles ein eigenes Süppchen kocht.
Das kann man machen, wenn man technik-affin am Abend an seiner eigenen Website bastelt - oder wenn man wie zb Facebook extrem viel Traffic generiert, aber im Normalfall ist das einfach zuviel Aufwand.

Chio
Antworten

interessant, ich frag mich nur, warum in diesem beispiel oben die bilder einfach nur skaliert werden und nicht bei kleinerer darstellung (smartphones) mit bildern mit geringerer dateigröße ausgetauscht werden? gerade am handy hat man oft keine gute internetverbindung und will, dass eine seite schnell lädt

Stefan Bauer
Antworten

Sehr clever gemacht. Funktioniert gut. Ich bin aber nicht sicher, ob die alten Leute so gerne mit dem Iphön im Netz schauen. Die haben ja schon mit dem Windoof Probleme.

Slartifass
Antworten

Sehr clever gemacht. Funktioniert gut. Ich bin aber nicht sicher, ob die alten Leute so gerne mit dem Iphön im Netz schauen. Die haben ja schon mit dem Windoof Probleme.

Slartifass
Antworten