CSS: Tipps & Tricks

Darstellungsprobleme auf Tablets beheben

Pixelbasierte Layouts können auf Displays mit einer hohen Pixeldichte (Hi-DPI oder Retina) wie beim iPad der dritten Generation (264 dpi), Amazons Kindle Touch (167 dpi) oder Kindle Fire HD (254 dpi) unlesbar erscheinen.

internet, webdesign, tipps, tricks, pixel, layout, kindle, ipad

© Internet Magazin

internet, webdesign, tipps, tricks, pixel, layout, kindle, ipad

Webkit-Browser auf Android OS und iOS verhindern das Darstellungsproblem, indem Sie gegenüber der Website eine virtuelle Auflösung angeben. Ein iPhone der vierten Generation verfügt über ein Retina-Display mit einer physikalischen Auflösung von 640 x 960 Pixeln und einer Pixeldichte von 326 ppi, gibt sich jedoch als ein 320 x 480 Pixel großes Gerät aus.

Amazon folgt mit dem Kindle einem völlig anderen Ansatz. So gibt zum Beispiel das Kindle Touch seine tatsächliche Auflösung mit 600 x 800 Pixeln an, setzt allerdings die Standardschriftgröße deutlich höher an als die branchenüblichen 16 Pixel beziehungsweise 14 Pixel.

Wenn Sie daher auf der px-Einheit basierende @media-Abfragen einsetzen, wird das Kindle Touch mit einem völlig ungeeigneten Stylesheet beliefert, das mit den völlig überdimensionierten Schriften das Layout durcheinander bringt. Um das Problem zu umgehen gilt es, @media-Abfragen ganz einfach in ems anzugeben, zum Beispiel so:

@media all and (min-width: 16em)

Performance: Leistung testen und optimieren

Wer seine Website so effizient wie nur möglich aufbauen möchte, damit sie den Server nicht unnötig belastet, braucht zuverlässige Tools, denn nur so lässt sich das versteckte Optimierungspotenzial, das zum Teil an unerwarteten Stellen schlummert, aufdecken. Eine Sammlung solcher intuitiver und zudem kostenloser Werkzeuge stellt Ihnen der Dienst Pingdom.com bereit.

Im Reiter Waterfall erhalten Sie einen Überblick über den Ladevorgang der einzelnen Ressourcen. Das ist an sich nichts Neues. Wenn Sie aber das ^-Symbol bei dem Eintrag einer Ressource aufklappen, können Sie die Anfrage-Antwort-Header im Detail einsehen. Im Reiter Performance Grade können Sie anhand der Wertung auf Problemstellen fokussieren.

Eine langsame Website lässt sich manchmal auf Fehler der DNS-Konfiguration zurückführen. Diesem Aspekt Ihrer Webpräsenz können Sie unter der Adresse dnscheck.pingdom.com mit ebenfalls rein kostenlosen Tests auf den Zahn fühlen.

internet, webdesign, tipps, tricks, pixel, layout, kindle, ipad

© Internet Magazin

Die deutsche Seite der Formel 1 (formel1.de) bringt es laut tools.pingdom.com auf eine Gesamtladezeit von gerade einmal 1,5 Sekunden und hat damit eindeutig die Nase vorne.

Illustrator: Erstellen von Hyperlinks

Adobe Illustrator verfügt zwar über kein Hyperlink-Werkzeug oder ein solches Bedienfeld, besitzt jedoch dennoch die Fähigkeit, Hyperlinks anzulegen. Zum Erstellen einer Webverknüpfung in Illustrator aktivieren Sie das betreffende Element der Illustration, öffnen das Bedienfeld Attribute (Strg-F11 oder Fenster/Attribute) und wählen darin den Eintrag Rectangle oder Polygon aus dem Menü Image Map aus.

Daraufhin tragen Sie die Ziel-URL der Webverknüpfung in das zugehörige Eingabefeld ein. Eine so erstellte Verknüpfung bleibt bei der Ausgabe als SVG-Datei erhalten. So erstellte Hyperlinks in einer Illustrator-Datei lassen sich allerdings in Adobe Reader und Adobe Acrobat nicht nutzen.

Falls Sie die Illustrator-Datei als PDF-Dokument fürs Web abspeichern möchten, müssen Sie entweder die benötigten Verknüpfungen in Acrobat anlegen oder sich in Illustrator mit einem Workaround behelfen.

  1. Tragen Sie die vollständige Ziel-URL der Verknüpfung in Ihr Dokument in Illustrator als Text ein. In der Illustration sieht man dann eine Textzeichenkette wie zum Beispiel diese: www.internet-magazin.de. Weisen Sie dem Text gegebenenfalls die gewünschte Formatierung zu.
  2. Wählen Sie alle Textzeichen, aus denen sich die gewünschte URL zusammensetzt, mit dem Textauswahlwerkzeug aus (das Auswählen des Textrahmens führt nicht ins Ziel).
  3. Wählen Sie den Befehl Object/Slice/Make aus.
  4. Mit dem Befehl Object/Slice/Slice Options... rufen Sie das Dialogfenster der Eigenschaften des aktiven Slice auf. (Sollten Sie inzwischen die Auswahl aufgehoben haben, wählen Sie den zuvor erstellten Slice mit dem Slice-Auswahlwerkzeug aus, bevor Sie diesen Befehl aufrufen.) - Im nun geöffneten Dialogfenster wählen Sie aus dem Menü Slice Type den Eintrag HTML-Text aus und aktivieren Sie die Option Text is HTML. Illustrator wird daraufhin die Attribute der aktiven Auswahl in Webcode umsetzen. Den Text in dem Kasten sollten Sie nun nicht mehr editieren.
  5. Jetzt können Sie zu guter Letzt die Illustration als ein weboptimiertes PDF-Dokument abspeichern.
So erstellte Hyperlinks aus Illustrator funktionieren auch in PDF-Readern.

Performance: Minifizieren von Javascript, CSS-Stylesheets und HTML

Statt Javascript und CSS-Stylesheets manuell zu minifizieren, können Sie mit dieser Aufgabe Ihr CMS beauftragen, zum Beispiel mit einem Plug-in wie W3 Total Cache für Wordpress. Diesem Plug-in können Sie außerdem das Minifizieren von HTML überlassen; allerdings setzt diese Aufgabe die Erweiterung HTML Tidy voraus.

Wordpress: Fit für HTML5

Wer Wordpress einsetzt, aber noch kein HTML5-basiertes Theme verwendet, kann mit einem Plug-in namens 42U HTML5 Upgrade zumindest schrittweise auf das neue Markup umstellen. Das Plug-in lädt die Kompatibilitätsbibliothek Modernizr, aktiviert Unterstützung für HTML5-Schemata im Wordpress-Editor TinyMCE und ergänzt ihn zudem um HTML5-Elemente.

CSS: Darstellungsfehler responsiver Layouts

Pixelbasierte @media-Abfragen wie

@media all and (min-width:656px)

werden anhand der Pixelbreite des Viewports ausgewertet, ignorieren jedoch die benutzerspezifische Zoomstufe. Surft ein Besucher mit einer höheren Zoomstufe (sei es auf Grund geminderter Sehstärke oder zum Vorführen der Seite aus einer Distanz von einigen Metern), bekommt er dennoch dasselbe Stylesheet, obwohl die höhere Textgröße das zugehörige Layout völlig durcheinander bringt.

Um das Problem zu umschiffen, drücken Sie die @media-Abfragen anstatt in Pixeln lieber in ems aus, zum Beispiel so:

@media all and (min-width: 41em)

Diese @media-Abfrage nimmt die Zoomstufe der Schrift zur Kenntnis und beliefert den Browser mit einem Stylesheet, der sowohl für die Größe des Viewports optimal ist als auch die aktuelle Zoomstufe der Seite berücksichtigt (eine in em ausgedrückte @media-Abfrage löst für Sie außerdem noch ein weiteres Problem).

Ratgeber: Der richtige Umgang mit Captchas

Allerdings gilt es zu beachten, dass beim Wechseln der Zoomstufe die @media-Abfrage nicht neu ausgewertet wird. Wenn Sie beim Testen der Seite die Zoomstufe verändern, um das Verhalten des Layouts zu beobachten, müssen Sie daher die Seite neu laden, um die erneute Auswertung der @media-Abfrage auszulösen.

internet, webdesign, tipps, tricks, pixel, layout, kindle, ipad

© Internet Magazin

Bei der Eingabemethode <input type="number" /> bietet die iOS-Tastatur eine geringe Usability mangels ausreichendem Platz für große - oder eben müde - Finger.

HTML5: Benutzerfreundliche Webformulare

Um auf einem iPhone die numerische Tastatur mit großen Tasten für müde Finger einzublenden, genügt es leider nicht, den Eingabetyp des Formularelementes mittels

<input type="number" />

zu definieren. iOS schaltet die Anzeige der numerischen Tastatur mit großen Telefontasten standardmäßig nur für Eingabefelder vom Typ tel (zum Eintragen einer Telefonnummer) ein.

Es ist gut zu wissen, dass die Telefontasten eines iPhone und der Eingabetyp eines Webformulars nicht zwangsweise aneinander gekoppelt sind und dass Sie als Webentwickler dem Gerät das gewünschte Verhalten problemlos abverlangen können. Um die numerische Telefontastatur unter iOS zu Tage zu fördern, fügen Sie einem geeigneten Formularelement ganz einfach das Attribut

pattern="[0-9]*"

hinzu, so wie in diesem Beispiel

<input type="text" pattern="[0-9]*" />

Der Trick sollte eigentlich auch unter Android OS funktionieren, allerdings ist dies bei Amazons Kindle Fire und dem kürzlich vorgestellten Kindle Fire HD nicht der Fall. Kindle Fire (HD) basiert zwar auf einem Android-Fork, nutzt jedoch Amazons eigenen Silk-Browser und dieser stellt dem Benutzer standardmäßig immer die größeren Telefontasten zur Verfügung (und stört sich überhaupt nicht daran, dass das Gerät nicht telefonieren kann, da es ja höchstens nur mit einer SIM-Karte für Datenpakete und Skype ausgestattet ist).

Unter iOS gilt es zu beachten, dass das Aktivieren der numerischen Eingabe in einem Formularelement für Zahlen, so wie eben im Beispiel

<input type="number" pattern="[0-9]*" />

generell nach hinten los geht. iOS beschließt nämlich, die Benutzereingabe als einen Preis zu formatieren, indem es den letzten drei Ziffern (in Abhängigkeit von den Landeseinstellungen) ein passendes Interpunktionszeichen voranstellt. Um dieses Problem zu verhindern, nutzen Sie den Eingabetyp

<input type="text" pattern="[0-9]*" />

oder

<input type="tel" pattern="[0-9]*" />

und schon bleibt Ihren Besuchern das Fehlverhalten von iOS erspart.

Mehr zum Thema

Facebook stellte die neue Suche
Facebook

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?
Der BGH erklärt das Internet zur Lebensgrundlage.
Online-Recht

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.
Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.
Online-Recht in der Cloud

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…
Logistik im E-Commerce: Prozesse rund um die Logistik.
E-Commerce-Logistik

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.
Neuro-Marketing
Neuro-Marketing

Mit immer subtileren Methoden versuchen Marketer und Online-Händler die Nutzer zu einem schnellen Kaufabschluss zu verführen.