Erste responsive Webseite 2010: myfairs.auma.de

Responsives Webdesign von myfairs.auma.de – Mobil, Tablet, Desktop (2010)
Bei der ersten responsiven MyFairs-Webseite habe ich die Screenshots der App nur auf dem Desktop eingebunden. Die Annahme dahinter war, dass man auf dem iPad und dem iPhone die Screenshots noch im App-Store sehen könne, sie einem auf Android-Geräten hingegen nichts nützen würden, da die App zunächst nur für iOS verfügbar war.

Myfairs.Auma.de – Landingpage für die erste iOS-App des Ausstellungs-und Messe-Ausschusses der deutschen Wirtschaft

Der AUMA hat im Jahr 2010 seine erste iOS-App für iPhones und (damals noch relevante) iPod Touch veröffentlicht. In der App sind die Kennzahlen, die der Ausschuss zu den verschiedenen Messen in Deutschland erhebt, tagesaktuell einsehbar.

Um die App zu bewerben wurden Plakate im Einstiegsbereich von ICE-Zügen der Deutschen Bahn platziert, auf denen der QR-Code mit der URL der hier zu sehenden Landingpage aufgedruckt war.

Der Umfang dieser Landingpage beträgt insgesamt sechs Seiten – Startseite mit Downloadlink, Hilfe zur App-Benutzung und Informationen zu den verfügbaren Daten.

Wieso ich für den AUMA meine erste responsive Webseite erstellt habe:

Im Jahr 2010 war es noch üblich, eine Webseite, die auf mobilen Geräten dargestellt werden soll, an eine Device-Datenbank anzubinden, auf der detaillierte Profile der verschiedenen Browserspezifikationen hinterlegt waren. Mit Hilfe der Profile wurde dann das HTML und CSS an die jeweiligen Besonderheiten der Browser angepasst.

Das Hosting der sechs statischen Webseiten mit Anbindung an eine Device-Datenbank hätte (2010!) pro Monat 300,–€ gekostet. Da die App jedoch nur für iPhones zur Verfügung stand und es nicht nötig erschien, die Informationen darüber auch auf Geräten anzubieten, die die App nicht installieren konnten habe ich in Absprache mit der Agentur Zappo einen anderen, revolutionär neuen Weg vorgeschlagen: eine HTML-Struktur mit Hilfe von verschiedenen CSS-Dateien an unterschiedliche Bildschirmgrößen anzupassen!

Um dieses Vorhaben zu erreichen habe ich die bis dahin selten verwendete Technik der Media-Queries eingesetzt, mit denen man CSS-Eigenschaften an unterschiedliche Begebenheiten knüpfen konnte.

Meine erste Version war nicht im eigentlichen Sinne responsive, sondern adaptiv. Das heißt dass sich die Webseite nur beim Laden an die Breite des Gerätes angepasst hat, jedoch nicht an die Breite des Browser-Fensters.

Nichts desto trotz war er damals so revolutionär, dass ich ein Tutorial mit dem Titel „Eine für alle – Aufbau und Umsetzung einer einfachen ›Responsive Website‹ ganz ohne Backend“ darüber in der Mobile-Technology Ausgabe 04/2011 veröffentlicht und darüber auf der MobileTechCon 2011 in der Rheingoldhalle in Mainz referiert habe. Eine Stunde bevor ich meine Lösung in einem Vortrag vorgestellt habe habe ich das erste mal den Terminus dafür gehört: Responsives Webdesign.

Artikel in der Mobile Technology 4/2011: Eine für Alle
Im Artikel „Eine für alle“ beschreibe ich detailliert die technischen Kniffe mit denen ich die Seite umgesetzt habe. Dabei geht es nicht nur um die Media Queries, sondern auch um Feinheiten wie die „Sollbruchstellen“ in langen Wörtern und wie ich mit User-Agent-Abfragen sicher gestellt habe dass die Download-Links zur iPhone-App nur auf iOS-Geräten und nicht auf Android-Tablets angezeigt werden.

Später habe ich recherchiert wann der Artikel von Ethan Marcotte, der als Auslöser für responsives Webdesign gilt, online gegangen ist: am 25. Mai 2010. MyFairs.auma.de ist am 22. Juni 2010 live gegeschaltet worden und dürfte damit eine der ersten responsiven Webseiten überhaupt sein!

Weitere Einträge zum AUMA

Weitere responsive Webseiten auf absichtbar.de

Die (aktuelle) App in den AppStores

  
Produktmyfairs.auma.de KundeAUMA AuftraggeberZappo – Agentur für Kommunikation ProjektResponsive Landingpage ZeitraumJuni 2010 Meine AufgabeStruktur und Design der Seite, Umsetzung als Responsive Website BesonderheitenErste mir bekannte responsive Webseite IllustrationWeltkarte: Christhard Landgraf, zappo.berlin Text und RedaktionThorsten Murr, clearworder.de UmsetzungAnnika Brinkmann, www.absichtbar.de