Einschränkungen von Browser-Tools

Transkript

1 Responsive Webdesign testen Browser-Tools und mehr Zum Testen von Responsive Webdesign gibt es eine große Anzahl von Tools, die sich für verschiedene Zwecke eignen. Von Florence Maurice AUTORIN Dr. Florence Maurice ist Autorin, Trainerin und Programmiererin in München. Ihr aktuelles Buch ist dem Thema CSS3 gewidmet und im Oktober 2013 bei dpunkt erschienen (ISBN ). Inhalt Responsive Webdesign testen. Die Werkzeuge zur Überprüfung von Responsive Webdesign (RWD) sind teilweise im Browser integriert, andere erlauben das Online- Testen, wieder andere funktionieren als Bookmarklet, und manche muss auch man separat installieren. Im Artikel finden Sie eine Auswahl der wichtigsten Tools. Dabei liegt der Schwerpunkt nicht auf einer erschöpfenden Auflistung, vielmehr geht es darum, die unterschiedlichen Arten und ihre Grenzen und Möglichkeiten aufzuzeigen. Einschränkungen von Browser-Tools Die meisten der im Folgenden vorgestellten Tools verwenden in der einen oder anderen Form den Desktop-Browser als Basis. Häufig zeigen sie in einem iframe die angegebene Webseite in einer Größe, die für Smartphones oder Tablets typisch ist. Dass der Desktop-Browser die Basis für die Darstellungen ist, bedingt ein paar prinzipielle Einschränkungen und wesentliche Unterschiede im Vergleich zu echten Ge- räten. Sehen wir uns diese einmal genauer an. Responsive Webseiten sind Webseiten, die auf die unterschiedlichen Gegebenheiten der Umgebung reagieren. Möglich wird das durch CSS3 Media Queries, die meist die Größe des Viewports abfragen und je nach Größe unterschiedliche Formatierungen anwenden. Im Normalfall will man mit den Tools ermitteln, wie eine Webseite etwa auf dem Bildschirm eines Smartphones dargestellt wird. Wenn Sie in Ihren Media Queries min-width oder max-width zur Abfrage der Viewport-Breite einsetzen, funktioniert das problemlos bei allen Werkzeugen. Verwenden Sie hingegen die Geräteabmessungen als Kriterium, also etwa min-device-width oder max-device-width, so können die meisten Tools das nicht auslesen. Ebenso wenig reagieren Tools auf -webkit-min-device-pixel-ratio- beziehungsweise min-resolution-angaben, die zur Auslieferung gesonderter Bilder für hochauflösende Displays eingesetzt werden. Einen ganz entscheidenden Einfluss auf die Anzeige auf einem Smartphone hat die Meta- 14

2 Viewport-Angabe. Nehmen wir einmal ein div- Element von 300 px Breite: <div style="background-color: orange; width: 300px">300px</div> Wenn Sie das Dokument mit diesem Element auf einem Smartphone ansehen, hängt die Art der Darstellung davon ab, ob eine Meta-Viewport-Angabe vorhanden ist oder nicht. Wenn nicht, ist die automatische Skalierung aktiv, bei der eine Webseite von 980 px oder ähnlich so skaliert wird, dass sie vollständig auf den Bildschirm passt. Unsere 300 px nehmen dann nur knapp ein Drittel des verfügbaren Platzes ein. Anders stellt es sich dar, wenn man die Viewport-Meta-Angabe ergänzt: <meta name="viewport" content="width=device-width, initial-scale=1.0"> Die automatische Skalierung ist nun abgeschaltet, das 300 px breite Element wird relativ groß oder fast bildschirmfüllend angezeigt (Bild 1). Wir haben also bei Smartphones eine vollkommen unterschiedliche Darstellung je nach Vorhandensein oder Nichtvorhandensein der Viewport-Meta-Angabe. Desktop-Rechner hingegen interpretieren die Viewport-Angabe nicht und ebenso wenig die meisten RWD-Test- Tools, die auf dem gerade benutzten Desktop- Browser aufsetzen. Zudem finden Anpassungen bei Webseiten nicht immer nur mit Hilfe von CSS3 Media Queries statt. Lösungen für eine serverseitig angepasste Auslieferung von Bildern setzen beispielsweise häufig auf ein Auslesen des User- Agent-Strings. Der User-Agent-String ist eine automatisch vom Browser versendete Kennung, die Informationen über die verwendete Browserversion und das Betriebssystem beinhaltet. Auch das berücksichtigen die meisten Tools nicht, sie senden weiterhin den User-Agent- String des Desktop-Browsers. Neben diesen Faktoren, die das Aussehen der Webseite bestimmen, sind die Bedienbarkeit der Webseite und die Möglichkeiten der Interaktion entscheidende Punkte. Wenn ein Menü nur beim Hovern aufklappt, funktioniert das bei Touchscreens schlecht oder gar nicht aber das werden Sie bei den meisten Browser-Test-Tools nicht merken. Ein weiterer Punkt: Viele Smartphones oder Tablets haben keine feste Gerätetastatur, sondern blenden eine Tastatur bei Klick in ein Eingabefeld ein. Dadurch verkleinert sich der sichtbare Bereich deutlich. Bei vielen Geräten zeigt die Onscreen-Tastatur je nach Kontext eine andere Auswahl von Tasten. So wird etwa bei <input type=" "> eine Tastatur mit eingeblendet. Die meisten RWD-Test-Tools zeigen keine Onscreen-Tastatur, und wenn sie eine erzeugen, dann passt sie sich nicht je nach Kontext an. Wer einmal vom Virus Responsive Webdesign infiziert ist, wird sich immer häufiger beim Surfen dabei ertappen, wie er die Größe des Ein 300 px breites Element sieht, je nachdem ob die Viewport- Meta-Angabe vorhanden ist oder nicht, vollkommen anders aus: links ohne, rechts mit (Bild 1) Verhalten von Webseiten Entscheidend für die Darstellung sind auch weitere Faktoren wie etwa die angezeigte Schrift. Wenn Sie nicht Web Fonts einsetzen, greifen Sie auf die auf dem System installierten Schriften zurück, aber dass das auf Smartphones oder Tab lets andere sein werden als auf gängigen Desktops, liegt auf der Hand. Und dann wären da natürlich noch Flash und andere Plug-ins: Auf Desktop-Browsern ist meist das Plug-in installiert auf Smartphones nicht. Wenn die Tools aber die Browser als Basis nehmen, zeichnen sie auch hier ein falsches Bild. Nette Idee: Beim Responsive Design Bookmarklet kann man zusätzlich eine Tastatur einblenden lassen, und man sieht, was dann noch an Platz zur Verfügung steht (Bild 2) 15

3 Das Bookmarklet Viewport- Resizer lässt sich individualisieren und für weitere Geräte konfigurieren (Bild 3) Browserfensters verkleinert und wieder vergrößert. Man sieht dann deutlich, ob die Seite reagiert und sich anpasst. Diese Veränderung des Browserfensters ist natürlich eine erste Testmöglichkeit, aber es gibt komfortablere Testverfahren. Moderne Browser bringen oft schon alles Notwendige mit, ohne dass Sie etwas installieren müssen. Im Firefox heißt die Funktion Bildschirmgrößen testen und Sie erreichen sie über Extras, Web-Entwickler. Dadurch wird die gerade geöffnete Seite im Testmodus angezeigt. Oben sind Bedienelemente eingeblendet, über die Sie eine der vorgegebenen Größen wählen können. Zur Auswahl stehen eine Reihe von häufig eingesetzten Quasistandardgrößen wie etwa 768 x 1024 px. Wenn Sie eine Größe auswählen, wird die Seite in einem entsprechenden Ausschnitt angezeigt und der Rest des Browserfensters verdunkelt. Außerdem haben Sie die Möglichkeit, über Drehen Breite und Höhe zu vertauschen und dadurch einen Landscape-Modus zu simulieren. Sie können das Testfenster aber auch auf eine beliebige Größe ändern, indem Sie den Anpasser rechts neben dem Testfenster auf die gewünschte Größe ziehen. Die aktuelle Größe wird dabei Am I Responsive präsentiert die angegebene Seite auf mehreren Apple- Geräten (Bild 4) automatisch oben eingeblendet. Eine so erzeugte Größe können Sie über Vorlage hinzufügen dauerhaft speichern. Eine Funktion zur Anpassung der Größe des Browserfensters bietet auch Chrome. Rufen Sie die Entwickler-Tools auf, indem Sie in eine Webseite mit der rechten Maustaste klicken und Element untersuchen wählen. Die Einstellungen Settings erreichen Sie über einen Klick auf das Zahnrad. Wählen Sie dann den Punkt Overrides und aktivieren Sie Show 'Emulation' view in console drawer. In der Konsole finden Sie dann den Tab Emulation, wo Sie aus einer großen Anzahl von Geräten wählen können. Hochauflösende Displays lassen sich über Device pixel ratio simulieren, und bei der Anzeige werden auch Media Queries mit max-device-width oder solche für hochauflösende Displays berücksichtigt. Zusätzlich kann auch der passende User-Agent- String gesendet werden. Erfreulich außerdem, dass die Meta-Viewport-Angabe berücksichtigt wird. Emulate startet die angepasste Darstellung, Reset setzt sie wieder auf den Ausgangszustand zurück. Auch der Internet Explorer 11 ermöglicht die Simulation unterschiedlicher Auflösungen in seinen neu gestalteten Entwickler-Tools. Der entsprechende Punkt nennt sich Emulation: Damit lässt sich die Auflösung anpassen und der User-Agent-String verändern. Bookmarklets Bookmarklets sind kleine, in JavaScript geschriebene Codeschnipsel, die sich wie Lesezeichen benutzen lassen. Am einfachsten installieren Sie sie, indem Sie das Bookmarklet auf die Lesezeichenleiste ziehen, die Sie eventuell zuerst einblenden müssen. Das Responsive Design Bookmarklet ( responsive.victorcoulon.fr) bietet von Haus aus vier Bildschirmgrößen zur Auswahl. Über die Funktion auto wird die Größe des aktuellen Fensters angezeigt. Außerdem gibt es beim Responsive Design Bookmarklet die Option, eine Onscreen-Tastatur bei der Smartphone- oder Tablet-Ansicht einblenden zu lassen (Bild 2). Dadurch sehen Sie, wie viel Platz eine gängige Onscreen-Tastatur zusätzlich beansprucht. Die eingeblendete Tastatur ist aber immer ein- und dieselbe Standardtastatur, sie ändert sich nicht bei unterschiedlichen HTML5-input-Elementen im Formular. Das Tool basiert wie viele andere darauf, dass jeweils ein iframe in der angegebenen Größe angezeigt wird. Bei der kleinsten Größe von 320 x 480 px erscheinen bei längeren Webseiten die bei iframes üblichen Scrollleisten, das heißt, dass der Inhalt ein bisschen weniger als die angegebenen 320 px Platz hat und die Anzeige nicht pixelgenau ist. 16

4 Der Viewport-Resizer ( mann.com/viewport-resizer) ist ein weiteres Bookmarklet, das sechs vorgegebene Größen zur Verfügung stellt, weitere lassen sich definieren und abspeichern. Der Bereich kann auf jede beliebige Größe gezogen werden. Über den i-button erhalten Sie Informationen zum aktuell gesendeten User-Agent und über die verwendete Meta-Angabe. Interessanterweise berücksichtigt der Viewport-Resizer Viewport-Meta- Angaben, was bei Browser-Tools selten ist. Ein individuell zusammengestelltes Bookmarklet können Sie auf der Projektseite beim Punkt Build your own Bookmarklet here zusammenbauen (Bild 3). Zur Auswahl steht eine große Anzahl von Geräten. Neben vier grundlegenden Typen gibt es 27 weitere Mobilgeräte, zehn Tablets und sechs Widescreen- und HDTV-Geräte. Nachdem Sie die gewünschten Geräte ausgewählt haben, wird Ihnen das angepasste Bookmarklet erzeugt äußerst praktisch. Dimensions ( store/detail/dimensions) ist kein Bookmarklet, sondern eine Erweiterung für Chrome. Im oberen Bereich wird nach Aufruf ein Lineal eingeblendet, bei dem Bereiche für die einzelnen Gerätekategorien angegeben sind: Phone reicht bis etwa 320 px, Wide Phone von 320 bis 480 px, Tablet von 480 bis 768 px, Wide Tablet von 768 bis 1024 px, danach beginnt der Desktop-Bereich. Das innere Browserfenster können Sie auf jede beliebige Größe aufziehen. Neben diesem Testmodus gibt es auch noch den Preview Mode. Hier finden Sie ein stilisiertes Gerät um den Ausschnitt herum. Zur Auswahl stehen im Preview-Modus vier Größen, und Sie können die Ansicht drehen. Das Schöne an dieser Erweiterung ist, dass im Testmodus keinerlei feste Größen benutzt werden, sondern die Größen als Kontinuum dargestellt werden. Hilfreich und einleuchtend ist außerdem die Zweiteilung in Testmodus und Preview-Modus. Online-Tools Neben den in Browsern integrierten oder integrierbaren Tools gibt es eine Fülle von Online- Werkzeugen. Beim Responsive Design Testing- Tool von Matt Kersley ( responsive) geben Sie den URL der Webseite ein, und dann wird Ihnen die Seite in verschiedenen Bildschirmgrößen angezeigt. Zur Verfügung stehen fünf klassische Größen die kleinste beginnt schon bei 240 px Breite. Das allgemeine Problem beim Einsatz von iframes, nämlich dass die Scrollleiste dazukommt und Platz beansprucht, wird hier dadurch gelöst, dass der Bereich verbreitert wird: Bei 320 px ist also wenn es einmal keine Scrollleiste gibt Platz für ein klein wenig mehr Inhalt. Sie können den Code auch bei GitHub herunterladen und auf dem eigenen Server installieren. Das hat den Vorteil, dass Sie bei eigenen Seiten auch innerhalb der kleinen Fenster navigieren können. Der Zweck von responsivepx ( sivepx.com) ist es, zu ermitteln, wann ein Breakpoint gesetzt werden muss. Die Funktionsweise ist folgende: Sie geben die Webseite an, die Sie überprüfen möchten, und können oben eine Größe eintragen, in der Sie die Seite sehen wollen. Alternativ dazu lässt sich die Größe mit zwei Schiebereglern anpassen. Wenn die Scrollleiste sichtbar ist, sind die ausgelesenen Pixelangaben verfälscht hier hilft es dann, das Kästchen bei Scrollbar visible anzukreuzen. Praktisch ist der Share-Button: Dieser erzeugt Ihnen einen Link der aktuellen Konfiguration ausgewählte Webseite, Größe, Scrollbar-Einstellung, den Sie verschicken können. Ein Test-Tool fürs Responsive Webdesign mit eindeutiger Botschaft und erzieherischer Intention ist ish von Brad Frost ( com/demo/ish). Auf den ersten Blick sieht es aus wie andere RWD-Test-Tools Sie geben einen URL an und können sich dann die Webseite in verschiedenen Größen S, M, L, XL und Random anzeigen lassen. Der wesentliche Unterschied liegt aber darin, dass ish keine vorgegebenen festen Größen kennt. Das heißt, wenn Sie mehrmals auf S(mall) klicken, erhalten Sie jeweils unterschiedliche Breiten. Damit demonstriert ish eindrücklich, dass man sich nicht an Größen wie 320 px oder 480 px orientieren sollte. Demonstrations-Tool Bei etlichen Tools wird die Webseite innerhalb eines Geräterahmens angezeigt, das heißt, dass das Bild eines Geräts drumherum montiert ist. Das sieht nicht nur schön aus, sondern ist noch einmal eine motivierende Erinnerung daran, wofür diese Anpassungen und RWD überhaupt notwendig sind. Damit eignet es sich gut für Präsentationen beim Kunden. Responsinator ( ist ein Online-Tool, bei dem Sie wie gewohnt Der Opera Mobile Emulator erlaubt eine große Geräteauswahl (Bild 5) PERFORMANCE Damit ein Responsive Design erfolgreich ist, braucht es mehr als eine optische Anpassung an kleine Bildschirme. Die Performance ist ein entscheidender Faktor, damit die Seite auch den mobilen Nutzern Spaß macht. Speziell für Performance-Tests gibt es das Tool Mobitest ( mai.com/m). Ansonsten bietet Page-Speed-Insights von Google ( gle.com/speed/pagespeed/in sights) spezielle Tipps für die Verbesserung der Performance. Redet man über das Testen von RWD-Seiten, darf der obligatorische Hinweis nicht fehlen, dass auch die besten Browser-Tests nie das Testen auf echten Geräten ersetzen können. In der Praxis empfiehlt sich eine Mischung der verschiedenen Testtechniken: Jeden einzelnen Schritt auf einem echten Gerät zu überprüfen, würde die Entwicklungszeit unnötig verlängern. Gerade um zwischendurch und schnell zu testen, sind die Browser-Tools unschlagbar und danach kann der Test auf echten Geräten erfolgen. 17

5 BROWSER-TOOLS RWD-Browser-Tools sind nicht nur Test-, sondern auch Präsentations-Tools. RWD-Browser-Tools dienen Ihnen nicht nur zum Testen, sondern sind auch eine Möglichkeit, dem Kunden auf ansprechende Art zu präsentieren, wie sich die Webseite an verschiedene Umgebungen anpasst. Dabei kann es hilfreich sein, wenn um den verkleinerten Ausschnitt herum ein Geräterahmen angezeigt wird. So wirkt die Präsentation echter aber es verleitet natürlich sehr dazu, die Darstellung im Test-Tool mit der echten Darstellung auf einem Gerät gleichzusetzen, und das wäre ein Trugschluss: Denn die oben aufgelisteten Einschränkungen gelten gleichermaßen für alle hier vorgestellten Browser-Tools anderenfalls wird es eigens vermerkt. Jetzt online weiterbilden! Komplexes Wissen begreifbar machen, Fähigkeiten und Fertigkeiten für eine stetige Zukunftsgestaltung vermitteln. Golo Roden Technologischer Visionär, Referent, Autor W Webinare TABELLE 1: DIE TOOLS IM ÜBERBLICK die Adresse eingeben. Sie erhalten die Seite dann in verschiedenen Größen angezeigt, wobei der Ausschnitt in Geräten angezeigt wird. Sie können den URL mit der ausgewählten Seite per verschicken und so beispielsweise Ihrem Kunden einen Eindruck von den verschiedenen Darstellungen vermitteln. Bei Demonstrating Responsive Design (www. jamus.co.uk/demos/rwd-demonstrations) ist der Name Programm: Es dient dazu, eine aktuelle Seite einem Kunden optimal zu präsentieren. Nachdem Sie den URL angegeben haben, klicken Sie auf den gewünschten Gerätetyp, und schon erscheint die Seite mit einem hübschen Apple-artigen-Gerät herum. Der Wechsel zwischen verschiedenen Geräten findet dabei animiert statt. Zur Auswahl stehen Smartphone, Tablet und Desktop. Bei Smartphone und Tablet gibt es auch eine Landscape-Orientation, so dass insgesamt fünf Größen zur Verfügung stehen. Bei längeren Seiten erkennt man allerdings deutlich an den Desktop-typischen Scrollleisten die es in dieser Form beim ipad nicht gibt dass die Ansicht nur mit Hilfe von iframes simuliert ist. Bei Am I responsive ( erhalten Sie die Webseite nach Eingabe gleichzeitig in vier Apple-Geräten angezeigt (Bild 4) wobei die Geräte etwas echter aussehen, weil beispielsweise das Desktop-Gerät auch mit Ständer und das Notebook mit angedeuteter Tastatur angezeigt wird. Zudem sind die Geräte wie auf einem Schreibtisch angeordnet und lassen sich per Drag and Drop auf dem Bildschirm verschieben. Am I responsive bietet eine schnelle, optisch ansprechende Vorschau, wenn es nicht um Details geht, sondern darum, Ergebnisse schön zu präsentieren. Von Am I responsive gibt es auch eine Bookmarklet-Variante. Wenn Sie das Book- Name Webadresse Art Vergleich / Entwickler-Tools Firefox in Firefox integriert Bildschirmgrößen testen Entwickler-Tools Chrome Emulation in Chrome integriert Entwickler-Tools IE 11 Emulation Responsive Design Bookmarklet Viewport-Resizer Dimensions Responsive Design Testing coulon.fr com/viewport-resizer webstore/detail/ dimensions responsive in IE 11 integriert Bookmarklet Bookmarklet Browser-Erweiterung für Chrome Online-Tool Vergleich responsivepx Online-Tool ish Online-Tool demo/ish Responsinator Online-Tool Vergleich Demonstrating Responsive Webdesign rwd-demonstrations Online-Tool Am I responsive Online-Tool Vergleich Opera Mini Simulator Online-Tool opera-mini-simulator Opera Mobile Emulator Programm mobile-emulator Performance-Test Online-Tool developer-media.de/webinare Performance-Verbesserung speed/pagespeed/insights Online-Tool 18

6 marklet verwenden, wird nach Eingabe des URL die Adresszeile modifiziert und lautet etwa ple.com damit lässt sich diese Ansicht auch gut per Mail verschicken. Ebenfalls ein Online-Tool ist der Opera Mini Simulator ( ra-mini-simulator), der aber kein klassisches RWD-Test-Tool ist. Ihn können Sie verwenden, um zu überprüfen, wie eine Webseite auf Nicht- Smartphones mit installiertem Opera Mini aussieht, denn auch auf solchen Low-End-Geräten sollte die Seite zumindest weiterhin benutzbar bleiben. Emulatoren Die gerade vorgestellten Browser- oder Online- Tools haben den großen Vorteil, dass sie sich ohne Aufwand nutzen lassen. Allerdings können sie viele Faktoren der echten Geräte nicht nachbilden. Besser, weil näher an echten Geräten, sind die sogenannten Emulatoren. Diese finden Sie bei den Entwicklungs-Tools für die Plattformen, etwa beim Android SDK für Android-Geräte oder bei Xcode fürs iphone. Ohne Installation einer vollständigen Entwicklungsumgebung lässt sich der Opera Mobile Emulator nutzen. Beim Starten des Emulators können Sie aus einer großen Anzahl von Geräten das wählen, auf dem Sie testen wollen (Bild 5). Da dieses Tool nicht auf einem Desktop-Browser aufsetzt, wird beispielsweise auch die Viewport-Angabe berücksichtigt und ein angepasster User-Agent-String gesendet. Allerdings ist der beim Opera Mobile Emulator verwendete Opera die Version 12.1, das heißt die Version, bevor die Rendering Engine von Opera von Presto auf Blink umgestellt wurde. [mb] Anzahl Größen Individuelle Größe Geräteansicht speicherbar integriert 6 ja nein Anmerkungen über 40 nein nein User-Agent-String lässt sich ebenfalls verändern, Media Queries mit device-width und für hochauflösende Displays funktionieren; Meta-Viewport wird berücksichtigt 11 ja nein User-Agent-String lässt sich ebenfalls verändern 4 nein nein Tastatur einblendbar 6 ja nein Erweiterbar durch viele weitere Geräte/Größen; Viewport-Angabe wird ausgelesen im Test-Modus Kontinuum, bei Preview 12 nein ja, im Preview-Modus Zwei Modi: Test und Preview. Keine festen Größen im Testmodus, sondern nur Bereiche 5 nein nein Code kann heruntergeladen und auf dem eigenen Server installiert werden Kontinuum nein nein Hilft beim Auffinden des benötigten Breakpoints, also der Stellen, an denen Layoutveränderungen notwendig sind unendlich viele nein nein Zeigt, dass es mehr als Standardgrößen gibt 12 nein ja Link mit aktueller Ansicht lässt sich verschicken 5 nein ja Animierter Wechsel zwischen den Größen 4 nein ja Vier Ansichten auf»echten«geräten, schön als Präsentation; Geräteanordnung kann geändert werden 1 ja Zeigt, wie die Webseite auf einem Low-Level-Smartphone mit installiertem Opera Mini aussieht über 40 ja ja Emulator, deswegen einem echten Gerät ähnlicher 3 ja Für mobile Geräte bisschen Geduld mitbringen! 2 ja Konkrete Vorschläge zur Performance-Verbesserung 19