Um eine Website auf verschiedenen Geräten, unterschiedlichen Größen und Auflösungen immer optimal darzustellen, passen moderne Websites flexibel ihr Design an verschiedene Ausgabegeräte an. Darüber hinaus stellen mobile Internetseiten andere Ansprüche an die Gestaltung, als mehr oder minder statische, bzw welche, die den ganzen Platz einer Desktop-Monitors einnehmen können.
Möchte man ein solches Responsive Design benutzen, hat selbst eines erstellt oder das Theme/Aussehen seines CMS (oder das eines Kunden) gewechselt, möchte man sehen und anderen zeigen, wie das Ergebnis auf verschiedenen Geräten aussehen wird.
Vorführen
Der Online-Service Placeit bietet genau das. Man wählt ein Bild eines Ausgabegerätes, die in Alltagssituationen und verschiedenen Umgebnungen gezeigt werden. Dort kann man entweder einen statischen Screenshot hochladen (das Ergebnis bleibt dann aber auch statisch) oder die URL einer erreichbaren Website angeben. Tut man letzteres, generiert der Dienst ein neues Bild und fügt den Upload/einen Screenshot der Website auf den im Bild gezeigten Monitor ein. Das Ergebnis kann sich sehen lassen – ideal, um es zu Freigabe an einen Kunden zu senden oder auch, um ein Responsive Design auf einem Mobilen Gerät zu zeigen.
Generiert mit placeit.breezi.com
Nachteile: Die Website wird einfach auf den Screen “gepappt”. Zwar in einer realistischen Größe und auch mit flexibler Anpassung eines Responsive Designs, aber völlig ohne jeden Browserrahmen. Außerdem kann man nicht genau bestimmen, welchen Teil einer Website man zu sehen bekommt oder wie weit bereits gescrollt sein soll und auch ein aufgeklapptes Menü ließe sich nur über einen zuvor selbst angefertigten Screenshot realisieren – den müßte man dann im Zweifelsfall aber wieder auf dem richtigen Ausgabegerät erzeugen – oder eben im Browser simulieren.
Trotzdem: Das Ergebnis sexy und schön für Präsentationen. Die Bildvorlagen sind von professionellen Fotographen in Szene gesetzt und die – auch kommerzielle (!) – Nutzung ist kostenlos, insoweit man einen Hinweis auf die Website des Dienstes anbringt. Der Anbieter wirbt damit seine Vorlagen ständig zu erweitern.
Ausprobieren
Der Webservice Browserstack kommt noch wesentlich professioneller daher und bietet für Entwickler und Webdesigner noch deutlich mehr Möglichkeiten. Im Bereich “Responsive” kann man ebenfalls nach Eingabe einer URL einen Screenshot auf das Display diverser aktueller Geräte projezieren, aber darüber hinaus bietet der Service zum Beispiel auch das “Drehen” des Ausgabegerätes an und aktives Bedienen der Website an.
Browserstack kann die eigene Website gegen eine Vielzahl von Betriebsystemen, Browsern, Browserversionen, Geräten und bildschirmauflösungen testen.
Leider ist der Dienst kostenpflichtig, hat aber ein moderates Pricing. Dafür kann er allerdings noch viel viel mehr.
Zum Beispiel:
- die Darsellung von Websites auf verschiedenen Browsern und verschiedenen Betriebssystemem testen, anzeigen und untersuchen.
- Live Interactive Modus für verschiedene Geräte, um Menüs und aktivierbare Elemente zu testen.
- Programmiersprachentest mit Unterstützung für Ruby, Python, Java, C#, Perl, PHP, Jenkins, Bamboo aund andere.
- Test auf praktische allen Betriebsysteme, Browsern (auch alte!). Gängige mobile Plattformen möglich
- Webtunnel zum Service möglich, um lokale Webserver, Intranet oder lokal gehostete Seiten zu testen
Leider generierte die Seite bei mir im Test und ohne kostenpflichtige Anmeldung selten brauchbare Ergebnisse und viele Plattformen lieferten keine Bilder (Time-Out) – vielleicht ist der Service kostenlos nur sehr eingeschränkt nutzbar. Auch waren alle Generierungsvorgänge (Screenshots und Responsive) zwar für 10-20 Browser/Geräte simulatan ausgelegt, quälend langsam! Der zu testende Webserver wird ähnlich einer ddos-Attacke mit gleichzeitigen Zugriffen “überfallen” und vor allem, wenn Werbung (z.B.: Google Adsense oder Affiliate) nachgeladen wird, die flexibel generiert ist, wird’s oft nichts mit dem Generieren und Arbeiten. Ich kann nur hoffen, dass das im kostenpflichtigen Teil besser ist.