Button
Button
Button
Button
Button
Button
Button
Button

„Klick“ oder „Wisch“ – beides geht jetzt optimal!

Die Website des ADFC Frankfurt ist jetzt auch für Smartphones angepasst

links: So sieht die ADFC-Frankfurt-Website auf dem PC aus
rechts: So liest sich die ADFC-Frankfurt-Website auf dem Smartphone
Fotos: Eckehard Wolf

Es ist immer wieder interessant, die Aktivitäten und Angebote des ADFC Frankfurt im Internet zu verfolgen. Das tun immer mehr Leute in und um Frankfurt, wir nähern uns einer sechsstelligen Anzahl von Homepage-Besuchen pro Jahr. Im Jahr 2016 werden wir darüber liegen. Die Einzelseitenab­rufe liegen noch einmal um ein Vielfaches höher. Wer www.adfc-frankfurt.de auf dem PC oder Laptop anklickt, bekommt eine klar strukturierte und einfach zu nutzende Website geboten.

Es gehen aber nun einmal immer mehr Menschen per Smartphone oder Tablet auf die Webseiten dieser Welt. Was auf einem querformatigen PC-Bildschirm komfortabel per Mausklick zu bedienen ist, kann auf dem viel kleineren hochformatigen Display eines Smartphones Augen und Fingerspitzen überfordern. Deshalb müssen alle Websites so angepasst werden, dass sie sowohl auf PC als auch auf Smartphone gut lesbar und einfach navigierbar sind.

Diese neue Anforderung an die Website-Programmierung nennt sich „Responsive Design“; ein Design, das mit einem auf die jeweilige Größe des Anzeigegerätes optimiertem Design „reagiert“. Publikumsbekannte und hochprofessionell gemanagte Seiten wie spiegel.de oder tagesschau.de bieten das schon seit einiger Zeit. Der Clou dabei: der Internet-Browser (Explorer, Firefox, Safari, Chrome u.a.) erkennt von sich aus, mit welchem Betriebssystem, von welchem Gerät und mit welcher Displaygröße er gerade genutzt wird, und zeigt die Website in der optimal angepassten Version – und das ganz automatisch.

Wenn schon, dann gleich richtig: Die Website des ADFC Frankfurt wurde von unserem Webmaster Ecki Wolf in mehrwöchiger Arbeit (Kenner ahnen die Handschrift des ehemaligen IT-Consultant von IBM) gleich für 4 Ansichten angepasst:

3-spaltig: PC-Ansicht: Menüleiste links, breite Textspalte in der Mitte, Linkleiste rechts. Die bisher schon gewohnte Oberfläche für Navigieren mit Maus und Tastatur am PC oder auch für große Tablets imQuerformat.

2-spaltig: Ansicht für Tablet hochkant, Linkleiste rechts wird „eingeklappt“ und ist per Tipp oben auf einen neuen Button ansteuerbar.

1-spaltig breit: Ansicht für Tablets und sehr große Smartphones (Phablets) im Hochformat und Smartphone quer. Der mittlere Textbereich bleibt als einzige Spalte ständig sichtbar. Die Linkleiste rechts und die Menüleiste links werden eingeklappt und sind per Tipp auf zwei unterschied­liche ­Buttons oben ansteuerbar.

1-spaltig schmal: Ansicht für Smartphone hochformatig. Hier gibt es nur noch Platz für eine stark verkleinerte Textspalte und damit die größten Herausforderungen an das Design. Den oben erwähnten Menübutton gibt es auch hier. Bilder und Texte werden aber unter­einander angeordnet – optimiert für vertikales „Wischen“.

Wichtige Kriterien bei der Programmierung waren die Wiedererkennbarkeit des ­ADFC-typischen Designs und die Verwendung der gleichen Daten­basis für alle unterschiedlichen Formate. Jeder Nutzer findet unabhängig vom verwendeten Gerät alle Inhalte vor, alle auch in gleicher Aktualität. Für die Internet-Redaktion ändert sich damit nur wenig. Es wird auch in Zukunft nur eine zentrale Version der Website gepflegt und weiter entwickelt. Die unterschiedlichen Darstellungs­formen werden automatisch im Hintergrund generiert.

Bitte probiert es aus! Und überhaupt, Eigenlob muss auch mal sein: die Frankfurter Website ist bislang die einzige auf „Responsive Design“ umgestellte Website des ADFC bundesweit, die auch für Smartphones eine optimale Anzeige bietet. Nicht einmal die Bundes-Website www.adfc.de bietet dies bislang. Strategisch ist das aber wichtig. Bereits heute erfolgen 35?% aller Besuche auf unserer Website über Smartphones oder Tablets – mit stark steigender Tendenz. Wer diesen Nutzern keinen Bedienkomfort bietet, wird irgendwann nicht mehr „gewischt“.

Bertram Giebeler


Inhalt Ausgabe 2 (Mär/Apr) / 2016

spacer-gif

© ADFC Frankfurt am Main e.V. 2010-2015, 2016