Touch by Touch

von Fabian Tempel

Man lernt ja bekanntlich nie aus. Warum sollte es dann hier anders sein. Denn während ich das Markup und das CSS für diese Seite schrieb und mich aus Sven Wolfermanns privatem Open Device Lab bediente, um das flexible Layout zu testen, sind so einige Dinge aufgefallen, die ich gerne teilen möchte, jenseits von 140 Zeichen drüben bei Twitter.

Google Webfonts

Eigentlich bin ich kein großer Freund der googleschen Schriftsammlung für Webautoren. Ein paar Schmuckstücke kann man dennoch finden, was die hier eingesetzten Fonts unter Beweis stellen wie ich finde. Nutzt man Fonts über google.com/fonts werden diese normalerweise per link rel="styleheet" im Head der HTML-Seite eingebettet. Es gibt auch noch andere Möglichkeiten. Nun passiert es, dass Amazons Kindle Fire HD genau diese Methode scheinbar gar nicht toll findet, denn weder über Typekit noch über Google eingebettete Fonts werden dargestellt. Liegen die Schriften auf dem eigenen Server und werden per @font-face direkt im CSS eingebunden, kann aber das Kindle Fire HD plötzlich Webfonts. Leider lässt sich das "Warum?" nicht klären, da man bei Amazon keine Infos darüber findet. In unserem Fall müssen die User mit einem Kindle halt den Text ohne schicke Fonts lesen.

iOS und :hover

Jeder sollte mittlerweile wissen, dass :hover im CSS für iOS-Geräte keine unbedingt so gute Idee sind, zumindest wenn man nicht direkt :focus auch mit definiert. Aber das gehört ja eh zum guten Ton. Der Sven hatte zu diesem Thema schon mal einen Testcase angefertigt, in dem er Android und iOS genauer unter die Lupe genommen hat. Es lässt sich festhalten, dass Android eigentlich auf jedem Element einen :hover darstellen kann. Über Sinn oder Unsinn lässt sich streiten. Jedenfalls es geht. Bei iOS sieht das etwas anders aus, hier reagieren nur Hyperlinks und Bilder auf Veränderungen mittels :hover. Noch spannender wird es, wenn man WP8 auch noch betrachtet. Hier wird ein :hover auf jedem Element ausgelöst, allerdings nur so lange wie sich der Finger wirklich über dem Element befindet. So passiert es schnell, dass man beim Scrollen "nette" Nebeneffekte erzielt. Bei unseren Avatar-Bildern im Footer kann man das sehr gut testen, wenn man will. Hier wird nur per :hover ein transform: scale & rotate zusammen mit transition ausgeführt. Würde man diese Anweisungen auf ein div legen, interpretiert Android das wie gewünscht, bei iOS passiert nichts.

Testen, testen, testen

Es hat Spass gemacht den Kollegen und Sven die Gadgets mal für einen Augenblick wegzunehmen und das Design direkt auf den Devices zu testen und zu sehen wie unterschiedlich die Darstellungen tatsächlich sind. Was lernen wir daraus? Emulatoren hin oder her, um sicher gehen zu können, ob ein Layout für die einzelnen Geräte funktioniert, sollte man stets versuchen die für das Projekt relevanten Gadgets als Testgeräte in greifbarer Nähe zu haben.