Aufgeben ist etwas für die Anderen.
Wir finden immer einen Weg.
Thomas Krahmer
CEO, Server-Experte, Entwickler
Dipl. Informatiker, 26 Jahre SWE-Erfahrung
Mit Bildern, Farben, Schrift und Layout lassen wir Ihr Projekt lebendig werden.
David Münch
WebEntwickler, UI-Designer, jQuery-Experte
Msc. Computervisualistik, 17 Jahre SWE-Erfahrung
Probleme sind für uns programmierbare Lösungen.
Wir zeigen Ihnen wie.
Mathias Bartholomäus
CEO, Entwickler, Kundenbetreuer
Dipl. Informatiker, 21 Jahre SWE-Erfahrung
1 Test ist 100% besser als kein Test.
Ich sichere Qualität mit automatisierten Tests.
Kathrin Kurzbach
Software-Testerin, CMS-Entwicklerin
Fachinf. Anwendungs­entwicklung, 7 Jahre SW-Testing-Erfahrung
Sie wollen nicht unsicht­bar sein?
Wir machen Sie für Google & Co schmackhaft.
Robert Lüloff
WebEntwickler, Suchoptimierer, Illustrator
Dipl.-Ing. Computervisualistik, 16 Jahre SWE-Erfahrung
Schatten

Von der Infografik zum interaktiven Html-Modul (für alle mobilen Geräte)


Veröffentlicht am 13.10.2017 - #Tipps für Web-Inhalte

Fürein aktuelles Projekt haben wir bestehende Inhalte für mobile Geräte optimiert. Eine Herausforderung dabei war es eine Deutschland-Karte mit Standorten responsive zu gestalten, so das sie sich an die aktuelle Bildschirmgröße anpasst.

Statt auf die Infografik zu verzichten, haben wir das statische Bild in eine interaktive Karte umgewandelt, die aus vielen kleinen HTML-Elementen besteht. Der Vorteil: bei unterschiedlichen Displaygrößen werden die einzelnen Elemente einfach anders dargestellt.

Zur Erstellung der einzelnen Elemente aus der Grafik haben wir folgende Schritte durchlaufen:

  • Kontrast des Bildes erhöhen: um Vorder- und Hintergrund besser unterscheiden zu können
  • Raster-PHP-Script schreiben:
    • Script unterteilt das Bild in Zellen
    • Script analysiert ob die Zelle ein farbliches Element ist oder nicht
    • Script erstellt HTML-Elemente und positioniert diese relativ zu Größe der Infografik
  • HTML-Elemente auf die Webseite übertragen
  • HTML-Elemente um Datenbankdaten erweitern (in diesem Fall: Standorte)
  • HTML-Elemente per CSS farblich gestalten
  • HTML-Elemente per CSS für verschiedene Bildschirmbreiten anpassen
  • Interaktionen mit Hilfe von Javascript-Funktionen ermöglichen
  • Nicht vergessen: Testen, Testen und Testen

So sieht das Ergebnis auf verschiedenen Endgeräten aus (z.B. Standrechner, Tablet, Smartphone). Neben der Größe der Karte passen sich auch die Position der Informationsfelder und die Art der Interaktion an.

nach oben
Mehr erfahren