Archive for the ‘Usability’ Category

JQuery: Bildbreite ermitteln um Bildunterschriften korrekt darzustellen

Solange Bildunterschriften nicht breiter als ein Bild sind, fällt diese Problem kaum auf. Doch sollte eine Bildunterschrift länger bzw. breiter als die zugehörige Grafik sein, kann es schnell zur fehlerhaften Darstellung des Layouts kommen.

1
2
3
4
<div class="grafikbox">
  <img src="pfad/zum/bild.jpg" alt="Alt-Text" />
  <p>Bildunterschrift</p>
</div>

Wird jetzt die Bildunterschrift länger, richtet sich die umschließende Div-Box an dem P-Element aus und die Box wird entsprechend breiter. Gewünscht ist allerdings, dass das Div die Grafik umschließt, die Bildunterschrift jedoch umbricht sobald sie breiter als die Grafik wird.
(weiterlesen…)

JQuery: Confirm – Dialoge mit dem JQuery UI Plugin erstellen

Mit dem JQuery UI Plugin lassen sich u.a. beeindruckende Dialogboxen erzeugen und dynamisch gestalten. So lässt sich z.B. der Titel der Dialogbox individuell gestalten, genauso wie der Text, der innerhalb der Box oder die einzelnen Buttons der Box. Ebenfalls können beliebig viele Buttons für die Dialog-Box erstellt werden und mit unterschiedlichen Bezeichnungen und Funktionen versehen werden.
(weiterlesen…)

CSS: externe Links kennzeichnen

externer Link

externer Link

Links, mit der die eigene Seite verlassen werden, sollten aus Barrierefreiheitsaspekten wie auch aus Benutzerfreundlichkeitsgründen entsprechend gekennzeichnet werden. Die beste Lösung dafür ist via CSS solche Links zu kennzeichnen. Hierfür gibt es in CSS3 die Möglichkeit über Attribut-Selektoren solche Links gesondert zu markieren.
(weiterlesen…)

Usability: Status-Boxen per CSS für eine bessere Interaktion

Den Benutzer über durchgeführte Aktion eine Rückmeldung geben, ist besonders wichtig für eine gute Bedienbarkeit der Webpräsenz. Um diese Informationen zu transportieren bieten sich kleine Statusboxen an.  Um diese Statusboxen optisch und inhaltlich hervorzuheben, bietet sich die Verwendung der Signalfarben rot, gelb und grün an.  Für neutrale Statusmeldungen kann blau verwendet werden.
(weiterlesen…)

Twitter Delicious Facebook Digg Stumbleupon Mister Wong Technorati Favorites More