usability

Links über gesamte Box ohne JavaScript spannen

Gesamtes Element klickbar machen

Links über gesamte Box ohne JavaScript spannen

Viele Seiten im Netz verwenden oft für Teaser den gleichen Link mehrmals nur damit Bild, Überschrift und der "Weiterlesen"-Text verlinkt sind. Gerade für SEO-Optimierungen sollte versucht werden auf doppelte Verlinkungen zu verzichten. Auch JavaScript wird oft eingesetzt um…

CSS Textmarkierung

Textmarkierung deaktivieren

Elementen die nicht markiert werden sollen <style type="text/css"> .deselect ::selection { background: transparent; color: inherit; } .deselect ::-moz-selection { background: transparent; color: inherit; } .deselect { -ms-user-select:…

CSS3 Table nth-child

CSS3 Table nth-child

Tabellen-Design mit CSS3

<style type="text/css"> tr td {background: #fff;} tr:nth-child(odd) td {background: #eee;} /* :nth-child(even / odd / 2n+1) */ </style> Beispiel Value1Value2 1v1 2v2 3v3 4v4 5v5

Scrollbalken

Scrollbalken lassen zentrierte Seite springen

Unterschiedliche Contenthöhe erzeugt Scrollbalken

Bei Seiten mit wenig Content sind keine Scrollbalken vorhanden. Ragt der Inhalt einer Website jedoch über den sichtbaren Browser-Bereich hinaus, so entstehen Scrollbalken. Beim Durchklicken speziell bei zentrierten Homepages springt die Seite beim Wechsel zwischen wenig und…

Submit Button Cross Browser Angleichung

Submit Button Cross Browser Angleichung

Es ist kompliziert…

Um ein einheitliches Aussehen des Submit Buttons zu erzielen muss nicht nur im Internet Explorer getrickst werden sondern auch im Firefox. .submit { overflow: visible; /* IE */ width: auto; /* IE */ outline: 0; border: 0; cursor: pointer; white-space: nowrap;…

form Usability

form Usability

cursor: pointer; für form Elemente

Meistens verweist das label mit einem for auf die dazugehörige id. Wenn man nun mit der Maus auf das label klick landet man direkt im input-Feld. Hilf Deinen Usern in puncto Usability und zeige mit dem cursor auf diese interne Verlinkung. Auch Buttons benötigen diese…

-webkit-text-size-adjust

Text wird zu groß dargestellt

Textvergrößerung im iPhone, iPad und iPod deaktivieren

Kleine Texte werden im iOS automatisch größer dargestellt um die Lesbarkeit zu verbessern. Wurde eine Seite für mobile Geräte optimiert, führt die automatische Vergrößerung zu unschönen Effekten. Die automatische Textvergrößerung im iPhone, iPad und iPod deaktiviert…

Anzeigenkennung

Anzeigenkennung nur bei vorhandener Werbung anzeigen

AdBlocker mit CSS erkennen

Eine Anzeigenkennung ist für den Benutzer eine wichtige Hilfe. Da der Adserver nicht immer Werbung ausliefert und einige User Adblock installiert haben, bleibt manchmal die Anzeigenkennung verloren im Content stehen. Im folgenden Beispiel wird die Überprüfung der…

BackgroundImageCache

Internet Explorer 6 Hintergrundbilder verschwinden

BackgroundImageCache

Die Verwendung von vielen Hintergrundbildern kann dazu führen, dass die Bilder nach dem hover bzw. mousesover speziell im Internet Explorer 6 nicht mehr anzeigt werden. Dieses Problem kann in vielen Fällen mit JavaScript behoben werden <!--[if IE 6]> <script…

iPhone und iPad Hover-Effekt

iPhone und iPad Hover-Effekt

Hover-Workaround mit ontouch für iOS

Hover-Effekte können sehr hilfreich sein. Gerade bei mobilen Geräten ist dies aber oft ein Problem. Hiermit lassen sich einfache :hover-Pseudoklassen mit ontouch darstellen: <script type="text/javascript"> if ("ontouchstart" in…

Impressum