Apfelkuh - think <div>erent

Statt der Maßeinheit “px” gibt es im Webdesign zudem die Größe “em”. Em entspricht der Größe eines Gevierts(—), also der Schriftgröße. Diese ist entscheidend für das sogenannte “barrierefreie Webdesign”

Wenn der User nun mit Strg+ “+” oder dem Mausrad die Schriftgröße einstellt, so vergrößert sich alles, was mit “em” skaliert wurde proportional mit, was dafür sorgt, dass das Layout trotz großer Schriftgrößen der Clientseite richtig angezeigt wird

Da üblicherweise die Standard-Schriftgröße 12 pixel beträgt, ist es zuweil recht schwierig damit wirklich zu rechnen (50px wären in em angegeben dann 4.1666…em );

Um sich das rechnen zu ersparen gibt es einen einfachen Trick: Die Schriftgröße des gesamten Dokuments auf 10 Pixel (oder auch 62.5%) setzen. Somit beträgt das Geviert — oder auch m-dash oder em — nun 10 pixel und unsere 50px können als 5&rhinsp;em formatiert werden.

Dem, der schon immer einmal wissen wollte, wohin Ottonormaluser auf seiner Webseite zuerst schauen, sei nun geholfen.
Eine einfache Lösung dafür ist der kostenlose Online-Dienst Feng-GUI.

Die Prozedur ist einfach:

• Screenshot der Site oder das Visual (z.b. Print- oder Web-Anzeige/Banner) hochladen
• Automatisch generierte Heatmap ansehen

Feng-GUI analysiert Tonwertdifferenzen, Kontraste und Größe und Grupperung von Elementen auf der Website und verbindet dies mit statistischen Werten von User-Blickwechseln. Heraus kommt dabei eine Heatmap, d.h. eine Wärmebildaufnahme. Diese zeigt wie wahrscheinlich es ist, dass Usern bestimmte Elemente auffallen. Und wenn ja: in welcher Reihenfolge und wie oft.

Hundertprozentige Richtigkeit kann man bestimmt nicht erwarten. Nichtsdestotrotz ein wirklich nettes Tool.

Vorteil: Aufgrund der Kontrastdifferenzen und der Eyetracking-Statistiken die Feng-GUI benutzt, kann man selbst oder im Team das Ergebnis in die Gestaltung des jeweiligen Produktes einfliessen lassen. Dies kann zu einer visuellen Optimierung des Visuals führen und wirkt sich somit auf Konversionraten von Landingspages/Visuals und/oder die Usability einer Anwendung aus.

Webdesignledger hat eine kleine Linksammlung veröffentlicht, die einige nette Wege zeigt, User-Interfaces mit dem Javascript-Framework Mootools einfacher und schöner zu gestalten.

Bei vielen dieser Transitions entsteht aufgrund der relativ gut durchdachten Mootools Fx-Klasse der Eindruck als hätte man eine Flash-Anwendung vor sich. Viele Elemente des Frameworks erinnern auch an Actionscript 3.0 (z.B. Evenlistener).
In den Artikeln lässt sich alles vom zeitversetzten Bild- oder Seitenwechsel (demo) bis hin zu interaktiven Formularen (demo ) finden.

Auch falls man ein anderes Javascript-framework wie jQuery oder Prototype benutzen sollte ist dies kein Problem, da diese sich syntaktisch nur sehr marginal von Mootools unterscheiden. Sollten diese Funktionen also in anderen Framworks nicht verfügbar sein, so sollte es doch kein Problem darstellen sie entweder nach umzuschreiben, oder das sehr modulare und leichtgewichtige Mootools zusätzlich zu implementieren.

Inspiriert von BinaryBonsai habe ich versucht für einige wichtige Informationen wie Alarme, Bestätigungen, oder anderes valide CSS-Klassen zu schreiben.

benötigt wird hierfür – wieder einmal – das Silk Icon Set von famfamfam.com

je nach Helligkeit des Designs der eigenen Seite muss man eventuell die Farbe leicht nachjustieren, aber im großen und ganzen sind sie eher auf helle Designs ausgelegt.

Die Klassen funktionieren sehr simpel. Durch die Unterstützung des Icons und die jeweilige Farbassoziation entsteht momentan der richtige Eindruck von dem was gerade passiert ist. Ob nun…

(continue reading…)

Wer schöne State-of-the-Art silk Icons benötigt ist hier genau richtig. Das FAMFAM-Icon set bietet an die 1000 Icons für nahezu jeden Zweck.

Es beinhaltet nahezu alle notwendigen Icons für Social Networks, Front- sowie Backends und sogar für Grafik-Programme.
Wer also keine Lust hat, sich selber aufwändig Icons zu designen, der sollte hier definitiv Zuschlagen.

download