Archiv der Kategorie "Web-Gestaltung"
Kurzvortrag: Wie wir 2016 Websites aufbauen werden
Bei einem London Web Standards Treffen, hat Peter Gasston einen interessanten Lightning Talk mit dem Titel How we’ll lay out websites in 2016 gehalten. Er stellt darin vor allem drei Varianten vor, die aktuell vom W3C zur Diskussion gestellt sind: Flexible Box Layout, Template Layout und Grid Positioning.
Die Folien zu seinem Vortrag gibt es auch online:
von Matthias Zellmer
Texte im Web … mal anders
Kürzlich wurde ich mit der Frage konfrontiert, inwiefern sich auf Websites auch Schriftarten nutzen lassen, die nicht zu den üblichen Verdächtigen wie etwa Arial, Verdana oder Times New Roman zählen. In der Folge nun der Versuch einer allgemeinverständlichen Antwort.
De facto war es bis vor kurzem so, dass auf den Websites nur Schriften für die Darstellung von reinem Text genutzt wurden, die auch auf den Rechnern der Nutzer lagen. Da es ein paar Schriftarten gibt, die bei jedem Betriebssystem standardmäßig mit ausgeliefert werden, wie z.B. Arial, Times New Roman, etc., gelten diese als “websicher”.
In jedem Browser sind Schriftarten als Standard-Schriftarten voreingestellt. D.h., wenn man in eine HTML-Datei einfach nur einen Text reinschreibt und für diesen nicht via CSS speziell eine andere Schriftart angibt, dann wird dieser Text im Browser in der voreingestellten Standard-Schriftart dargestellt.
CSS gibt einem zudem noch die Möglichkeit eine Art Schriftarten-Favoriten-Liste anzugeben. Das sieht dann z.B. folgendermaßen aus:
font-family: Helvetica, Arial, sans-serif;
Diese Angabe interpretiert der Browser, in dem er von vorne nach hinten schaut, ob eine der Schriftarten auf dem Computer installiert ist und sobald er eine findet, stellt er den dazugehörigen Text in dieser dar. In dem Beispiel oben, schaut er zunächst, ob die Schriftart Helvetica installiert ist. Hat der User einen Mac, so ist dies in aller Regel der Fall. Bei einem Windows-Rechner eher nicht. Hat der User also einen Windows-Rechner, so wird der Text höchstwahrscheinlich in Arial dargestellt werden. Sollte auf dem benutzten Rechner weder Helvetica noch Arial installiert sein, so greift der Browser in der Darstellung des Textes auf die in seinen Einstellung als Standardschriftart für eine Sans-Serif-Schriftart zurück.
So ist sichergestellt, dass der Text im Normalfall in einer Schriftart dargestellt wird, die auch zum Design passt. D.h. wahrscheinlich sieht die Website mit der Schriftart Helvetica genau so aus, wie es sich der Designer gewünscht hat. Da aber Arial zwar nicht so gut aussieht, aber zumindest die Gesamtoptik nicht empfindlich stören wird, wurde diese als erste Fallback-Schriftart gewählt. Da viele Browser für Fließtext meist eine Serifen-Schriftart als Standard-Schriftart definiert haben, kann man mit sans-serif als der zweiten Fallback-Angabe immerhin noch beeinflussen, dass der Text zumindest in einer serifenfreien Schriftart dargestellt wird.
Via CSS hat man jedoch eine interessante Möglichkeit, Text in einer selbst gewählten Schriftart darzustellen, in dem man @font-face nutzt. Damit kann man eine auf einem Webserver liegende Schrift-Datei einbinden, auf die man dann in in der CSS-Eigenschaft font-face zugreifen kann. Im CSS-Code sieht dies z.B. so aus:
@font-face {
font-family: 'XYZschrift';
src: local('XYZschrift'), url('XYZschrift.ttf') format('truetype');
}
Und das Beispiel von oben lässt sich dann folgendermaßen erweitern:
font-family: XYZschrift, Helvetica, Arial, sans-serif;
In diesem Beispiel versucht der Browser zunächst die Schriftart XYZschrift zur Darstellung des entsprechenden Textes zu nutzen. Bei modernen Systemen und Browsern wird dies auch gelingen. Dort wo dies nicht gelingt, wird wieder der Reihe nach versucht werden eine Schriftart zu finden, in der sich der Text darstellen lässt.
Da es bei der Nutzung einer Schriftart auch auf die entsprechenden Lizenzen zu achten gilt, muss man beim Erwerb einer Schriftart auch darauf achten, dass man auch die Nutzungsrechte fürs Web mit erwirbt. Zudem gibt es inzwischen auch Webschrift-Anbieter, bei denen man das Recht eine Schriftart auf der Website erwerben kann, die Schriftarten jedoch auf deren Servern verbleiben. Zu diesen Anbietern gehören u.a. Typekit oder Typotheque. Auch Google gehört zu diesen Anbietern, meines Wissens muss man dort aber für die Nutzung nichts zahlen.
von Matthias Zellmer
Firefox 3.6 unterstützt WOFF
Die in der vergangenen Woche veröffentlichte Version 3.6 des Firefox unterstützt als erster Web-Browser das WOFF. Viele denken jetzt wahrscheinlich “Das Was?”.
WOFF steht für das Web Open Font Format. Dies ist ein komprimiertes Dateiformat für Schriftarten. So wie etwa auch die Bilder und Fotos des Webs in aller Regel auch in einem komprimierten Dateiformat wie JPG, GIF oder PNG dargestellt werden, soll es in Zukunft auch möglich sein, im Bezug auf ihre Dateigröße schlanke Schriftarten in Web-Browsern zu nutzen.
Interessant ist diese Neuerung, da sich im Zuge von HTML5, der aktuellen Diskussion um das wieder entdeckte @font-face, Schriftarten-Services wie typekit usw., die Webdesigner dieser Welt sich nicht mehr mit den so genannten sicheren Web-Schriften begnügen wollen, und somit mit WOFF ein weiterer kleiner Schrift in Richtung Gestaltungsvielfalt im Web gemacht wurde.
Weitere Beiträge zu WOFF: So kannst Du den ersten .woff-Font testen auf Fontblog und Web Open Font Format for Firefox 3.6 auf hacks.mozilla.org.
von Matthias Zellmer
Morgendlicher Web-Spaziergang
Was ich heute Morgen gemacht habe, prägte in ähnlicher Form irgendwann einmal den Begriff “durchs Web surfen”. Mit meinem RSS-Reader als Ausgangspunkt, habe ich mich durchs Web treiben lassen. Hier die Wegpunkte meines Web-Spaziergangs:
Mein RSS-Reader führte mich zuerst zum Dr. Web Autorenwettbewerb, genauer gesagt zum heutigen Beitrag Das Kaufhausbummeldesign – Wie der Alltag Ihnen bei Design-Ideen hilft. Besonders gut hat mir darin die Metapher “Das Supermarktregal – auf Augenhöhe sein” gefallen. Damit wollte der Autor Björn Dammann noch mal klar machen, dass das jeweils Wichtigste auf jeder Seite auch wirklich “auf Augenhöhe” platziert werden soll. Im Web ist das: Sichtbarer Bereich, Mitte. Eine Anforderung, die das nur all zu oft uniformierte Design vieler Websites nur bedingt bedienen kann. Wir setzen darum immer häufiger auf das Inhaltselement der Bühne.
In dem Artikel wird auf savethechildren.de hingewiesen, mein nächster Anlaufpunkt. Dies ist eine Kinderrechtsorganisation, die sich Themen verschrieben hat, wie weltweit das Überleben und die Gesundheit zu sichern oder auch die Ausbildung von Kindern zu fördern. Gutes und wichtiges Thema.
Mein nächster Anlaufpunkt ist netzwertig.com, wo sich Marcel Weiss mit Twitters für 2010 angekündigter Echtzeit-API Firehose beschäftigt. Marcel geht stark davon aus, dass das Implementieren auf Basis dieser Firehose-API kostenpflichtig und damit zum ersten richtigen Geschäftsmodell von Twitter wird.
Im Webzeugkoffer Blog beschäftigt sich dann Björn Seibert mit minimalistischem Webdesign und verweist auf einen gelungenen Beitrag When Minimalism Backfires: When Too Little Is Not Enough im Webdesigner Depot. Auf dieser Website gefällt mir, dass beim Überfahren des Logos mit der Maus, eine kleine, aber auffällige Info dargestellt wird. Diese macht deutlich, dass wenn man dem Link folgt, man zur Startseite zurück kommt. Eine angenehme Lösung des Problems, dass auch heute noch viele Leute nicht wissen, dass man in aller Regel nach einem Klick aufs Logo wieder zur Startseite der Website zurückkommt.
Ein weiterer Artikel auf Webdesigner Depot informiert mich darüber, dass es eine Wikipedia Usability Initiative gibt und dass man auf Wikipedia über den Try this-Link zu einer Beta-Version der optimierten Wikipedia-Ansicht gelangen kann. Neugierig geworden, schaue ich nach, ob es das auch auf der deutschsprachigen Wikipedia gibt und werde fündig. Der Link Beta ausprobieren am oberen Rand jeder Seite war mir bisher völlig entgangen. Ich beginne mit dem “Betatesten” und habe schon wieder eine Idee für einen weiteren Blogeintrag im Hinterkopf …
von Matthias Zellmer
iA nennt es: 100% Easy-2-Read
Die international tätige Web-Agentur iA gehört sicher zu den innovativsten Läden was unsere Branche zu bieten hat. Kürzlich haben die Information Architects den Auftritt der ZEIT neu gestaltet und wenn sie die neuste Version ihrer Web Trends Map präsentieren, geht dies auch regelmäßig durch die Blogs der Welt.
Und schon 2006 haben sie in einem Artikel 100% Easy-2-Read veröffentlicht … abgekürzt: 100e2r. Von seiner Aktualität hat dieser Beitrag aber nichts verloren.
Bei 100e2r handelt es sich um einige Dos and Don’ts im Bezug auf die Darstellung von Inhalten auf einer Website. Die iA kritisieren, dass nur all zu oft auf einer Webseite zu viele Inhalte auf zu engen Raum gepackt werden.
Stichpunktartig ihre Kritikpunkte:
- Don’t tell us to adjust the font size
- Don’t tell us busy pages look better
- Don’t tell us scrolling is bad
- Don’t tell us text is not important
- Don’t tell us to get glasses
Als Folge darauf … Fünf einfache Richtlinien:
- Standard font size for long texts
- Active white space
- Reader friendly line height
- Clear color contrast
- No text in images
Die oben aufgeführten Punkte werden auf der Beitragsseite näher erläutert. Eine kurzweilige und lehrreiche Lektüre für alle, die in irgendeiner Form mit der Gestaltung einer Website zu tun haben … ob visuell oder non-visuell.
von Matthias Zellmer
WordPress-Erweiterung WPtouch optimiert Blog-Ansicht für iPhone
Möchte man seine auf WordPress basierende Website im typischen Look & Feel einer iPhone-App auf Apples Smartphone anzeigen lassen, sollte man sich mal mit der WordPress-Erweiterung WPtouch beschäftigen.
Die Installation von WPtouch ist WordPress-typisch sehr einfach und somit ist die grundlegende Arbeit, um die Erweiterung zum Laufen zu bekommen, in wenigen Minuten erledigt. Wer jetzt noch möchte, kann im WordPress-Backend einige Einstellungen im Bezug auf Optik und Verhalten vornehmen.
Laut Herstellerseite soll die Erweiterung auch für Android funktionieren … getestet habe ich das jedoch noch nicht.
Kleine Anmerkung am Rande: Ich selbst habe keine iPhone und um euch die Screenshots oben im Bild zeigen zu können, habe ich mal bei Twitter gefragt, ob man mir diese Screenshoots per Mail schicken könnte. Vielen Dank an die mehr als ein Dutzend Mails. So macht Social Web richtig Spaß! Danke.
von Matthias Zellmer
Studie: Was gehört auf einer Startseite wohin?
Zum dritten Mal nach 2003 und 2005 hat in diesem Sommer die eResult GmbH ihre Studie zur Nutzergerechte Startseiten-Gestaltung von Internetauftritten und Online-Shops namens Imagery III durchgeführt und jetzt deren Ergebnisse veröffentlicht. Die Studie als PDF-Dokument kann für für 99.- Euro zzgl. MwSt. online bestellt werden. Ein kostenlose Kurzversion ohne die Interpretationen und Schlussfolgerungen von eResult kann man in deren Download-Bereich herunterladen.
Wie in der Grafik oben am Beispiel der Werbe-Elemente zu sehen ist, gibt es immer wieder Verschiebungen in den Erwartungen der Nutzer, welche zentralen Elemente auf einer Website wo zu platzieren sind. Das und ob die Nutzer ein Element überhaupt auf einer Website erwarten, lässt sich aus dieser Studie recht gut ablesen.
Besonders interessant ist die aktuellste Ausgabe dieser Studie, da diesmal zwischen Online-Shops und anderen Internet-Auftritten unterschieden wurde. So erwarten zum Beispiel immerhin 86,4% bei einem Online-Shop einen Link zu einer Hilfe-Seite, aber nur 63,1% bei einer anderen Website.
Ich empfinde diese Art von Erhebungen als sehr hilfreich. So lassen sich schon früh im Entstehungsprozess einer Website, grundlegende Missverständnisse vermeiden, indem zentralen Elemente im Zweifelsfall eher erwartungsgemäß positioniert werden. Vielleicht kann man sich auch die Umsetzung teurer Funktionalitäten ganz ersparen, da die Nutzer sie sowieso nicht erwarten.
von Matthias Zellmer
Do’s and Don’ts im Web: Verlinken
So simple es klingen mag, die scheinbare Selbstverständlichkeit, dass man im Web Seiten untereinander verlinken kann, ist offensichtlich gar nicht so selbstverständlich.
Ein leider negatives Beispiel für diese Erfahrungswert liefert wissen.de. Konsequent verweigert dieses Web-Angebot, das ansonsten zum Beispiel mit Kommentar- und Bewertungsfunktion recht modern daher kommt, in seinem Lexikon-Bereich die Verlinkung der bei Lexika klassischen weiterführenden Begriffe. Dies kann man konkret am Beispiel des schönen Adjektivs solipsistisch sehen. Seine Erläuterung auf wissen.de lautet nämlich:
sol|ip|sis|tisch
so|lip|sis|tisch [Adj. , o. Steig.] zum Solipsismus gehörig, auf ihm beruhend
Leider hilft einem diese Erläuterung wohl kaum weiter, wenn man nicht weiß was Solipsismus ist. Doch statt diesen Begriff … wie ich es getan habe … zu verlinken, muss man den Begriff nochmals ins Suchfeld eintippen. Das ist die klassische “Buch-Denke” und hat im Prinzip im Web nichts mehr zu suchen. Denn das World Wide Web ohne Hyperlinks ist wie Fernsehen ohne Bilder.
Dieses Phänomen findet man leider nicht nur im Lexikon von wissen.de, sondern auf zahlreichen Websites … vor allem auf solchen, bei denen die Menschen dahinter von den klassischen Medien herkommen. Also: In Zukunft immer schön verlinken, dass macht das Web erst zu dem was es ist.
von Matthias Zellmer
Große Wahlfreiheit lähmt und macht unglücklich
Die Menschen vor allem in den industrialisierten, westlichen Gesellschaften haben eine ganz besondere Freiheit: Die Freiheit zu Wählen. Und damit ist nicht nur die Stimmabgabe bei einer Parlamentswahl gemeint, sondern auch die alltäglichen Wahlmöglichkeiten zum Beispiel beim Einkaufen von Pasta im Supermarkt oder beim Kauf einer Hose. Der Psychologe Barry Schwartz ist nun der Ansicht, dass uns diese Wahlfreiheit nicht freier und glücklicher gemacht hat, sondern sie lähmt uns und macht und unzufrieden.
Dies ist eine wichtige Erkenntnis, wie ich finde. Auch bei Software-Systemen wie Textverarbeitungsprogrammen oder Websites kann es sein, dass wenn man zu viele Nutzungsmöglichkeiten hat, man sich erschlagen fühlt und statt einen Forschungsdrang zu entwickeln, verharren wir nur all zu gerne und lassen dann auch mal gerne unserem Ärger freien lauf.
So bin ich mir ziemlich sicher, dass die meisten Problem, die Menschen bei der Nutzung von Microsofts Word haben, grundsätzlich zu vermeiden wären. Aber die schiere Vielfalt der Funktionen von Word lässt uns all zu oft den Wald vor lauter Bäumen nicht sehen. Ein Gegenbeispiel ist Googles Suchmaske. Und auch wenn die Google-Suche nach und nach mit immer mehr Funktionen ausgestattet wird, die simple Kern-Optik wird nur wenig verändert. Alles andere wäre im Sinne von Barry Schwartz’ Ausführungen zu gefährlich.
Für uns, die wir Websites gestalten, kann das nur bedeuten, dass wir unseren Nutzern immer wirklich nur die Funktionen zur Auswahl stellen sollten, die sie wirklich unbedingt brauchen. Für alles andere müssen wir unseren Nutzern die Entscheidung abnehmen oder, so wie Google, uns immer wieder was einfallen lassen, wie wir die weniger gebrauchten Funktionen gekonnt vor den nicht so versierten Nutzern verstecken.
Dies war übrigens auch ein Beitrag zum Thema User Experience. Usability-Experten sollten jetzt bitte erst mal tief durchatmen … vielleicht während sie sich den wunderbaren Vortrag von Barry Schwartz ansehen.
von Matthias Zellmer
Balsamiq Mockups in der Praxis
So angetan wie von Balsamiq Mockups war ich ewig nicht mehr von einem Stück Software. Wie schon in einem früheren Beitrag beschrieben, kann man damit Wireframes skizzieren, die ein bisschen das Look & Feel von auf Papier geskribbelten Wireframes haben. Die hat den Vorteil, dass sie bei der Präsentation nicht aus Versehen oder Unkenntnis für Layout-Entwürfe gehalten werden.
Diese Tatsache finde ich gut und praktisch, aber wirklich begeistert bin ich aus anderen Gründen. Zum einen ist Balsamiq Mockups ein wirklich sehr gut durchdachtes Programm, das das was es tun soll, wirklich sehr gut tut. Hört sich selbstverständlich an, ist es aber leider nicht. Die Bedienung ist so einfach und gut zu handhaben, dass es eine wahre Freude ist, damit seine Wireframes zu entwickeln. Aber das zeig ich jetzt am besten mal an einem kleinen Anwendungsbeispiel:
Horizontales Navigationsmenü
Ein horizontales Navigationsmenü zu skizzieren, ist ein typischer Anwendungsfall in einem Wireframe. Dazu zieht man in Balsamiq Mockups per Drag-and-Drop das Element “Button Bar / Tab Bar” auf die Arbeitsfläche. Diese sieht dann folgendermaßen aus:
Die Eigenschaften-Box, die hier unter der Menü-Leiste dargestellt ist, zeigt immer die Bearbeitungs- und Einstellungsmöglichkeiten des aktiven Elements an. Wenn man, wie in diesem Beispiel getan, mit der Maus drüber fährt, wird diese Box aktiv dargestellt und man die dort zur Verfügung stehenden Möglichkeiten nutzen. Hier sieht man etwa, dass das Menü-Feld “One” hervorgehoben bzw. aktiv ist.
Um jetzt die Default-Werte in der Menü-Bar zu ändern, macht doppelklickt man auf das Element und schon kann man die Werte komma-separiert ändern.
Das sieht dann so aus:
Natürlich kann man nun auch das aktive Menü-Feld wechselt:
Was dann, wenn man nun z.B. “Zwei” auswählt, das Folgende zum Ergebnis hat:
Wie man an diesem einfachen Anwendungsbeispiel vielleicht schon sehen kann, ist Balsamiq Mockups ein sehr durchdachtes und gut zu handhabenden Tool. Doch wie geschrieben, dies ist nur ein ganz, ganz einfaches Beispiel zur Nutzung des Tools. Natürlich ist der Zweck des Tools z.B. eine Webseite zu skizzieren … wie etwa diese:
von Matthias Zellmer
