Kategorien
Webdesign

Sichere Techniken zur E-Mail-Spam-Bekämpfung

Spam ist ein altes Problem, mit dem wohl jeder Web-Entwickler, dessen Kunden und sowieso jeder Anwender zu tun hat. Moderne Spam-Filter, die zum Beispiel in GoogleMail in vollem Maße zum Einsatz kommen, liefern häufig verblüffende Ergebnisse, doch weitaus nicht jeder zeigt sich bereit, seine private E-Mail-Korrespondenz einem externen Onlinedienst anzuvertrauen. Also stellt sich die Frage, an welche Techniken Seitengestalter sich wenden sollten, um die E-Mail-Adresse des Kunden – etwa auf einer Kontaktseite – leserlich anzeigen zu lassen, den Posteingang des E-Mail-Inhabers jedoch vor aufdringlicher Werbung zu bewahren.

1. Vermeidung von Stereotypen
Eine bewährte Methode, mit der sich E-Mail-Adressen von Spam-Bots verstecken lassen, ist eine einfache Umschreibung der Adresse, damit sie nur von Besuchern der Seite – im Klartext: Menschen – entziffert werden kann. Bis dato konnte sich diese Vorgehensweise als erfolgreich erweisen, doch Spam-bots lernen genauso wie Seitenentwickler dazu, so dass unklar ist, ob sie sich auch in Zukunft bewähren kann. Außerdem kann es vorkommen, dass unerfahrene Anwender nicht in der Lage sein werden, eine E-Mail-Adresse korrekt zu entziffern. Unter anderem werden folgende Ansätze häufig verwendet:

  • Ersetzen von Punkten durch „d-o-t“, „@“ durch [at] und Ergänzung durch beliebig viele Leerzeichen dazwischen.
    Beispiel: e-mail@office.de -> e-mail [at] office [d-o-t] de.
  • Einfügen von Zeichen vor und nach dem „@“-Zeichen.
    Beispiel: e-mail@office.de -> e-mail {!@!} office.de
  • Vermeidung von Stereotypen: beim Crawlen im Web fügen Spam-Bots automatisch allgemeine Benutzerkontennamen wie „info“, „service“, „admin“ unter anderem zu einem gefundenen Domainnamen hinzu und legen diese in einer Spam-Datenbank ab. Deshalb ist es sinnvoll, solche Adressen wie info@office.de, service@office.de und admin@office.de nach Möglichkeit zu vermeiden.

2. Ersetzen des Textes durch Bilder
Die meisten Spam-Bots sind bisher noch nicht in der Lage, Bilder nach eingebetteten Textinhalten zu durchsuchen. Deshalb ist die Präsentation einer E-Mail-Adresse durch ein entsprechendes Bild ohne direkte Beziehung auf die Adresse im Quelltext eine viel versprechende Methode. Die Bilder für E-Mail-Adressen lassen sich durch mehrere Online-Tools „on the fly“ generieren, so dass Web-Entwickler diese nur geschickt in eine Seite einzufügen haben.

3. Ersetzen des Textes durch ASCII und Javascript-kodierten Text
Ein weiterer populärer Ansatz basiert darauf, E-Mail-Adressen als ASCII-Code oder Javascript-kodierte Text anzuzeigen. Bei dieser Methode sehen Seitenbesucher keinen Unterscheid in der E-Mail-Präsentation, doch Spam-Bots werden die Adresse beim Durchstöbern des Quelltextes nicht finden. Es gibt webbasierte Tools, die E-Mail-Links in wenigen Sekunden umwandeln lassen:

  • Online Email Protector: E-Mail-Adresse eingeben, generierten ASCII-Code oder komplexen Javascript-Code erhalten.
  • Spam-me-not E-mail Link Obfuscator: Web-Entwickler können verschiedenen Kodierungsalgorithmen verwenden, wie etwa dezimale, hexadezimale oder zufallsbasierte Notation.
  • Email Riddler verschlüsselt E-Mail-Adressen und wandelt diese in eine Folge von Ziffern (HTML-Kodierung).
  • Advanced Email Link Generator with Anti-Spam Encoder sagt das, was sein Name vermuten lässt, mit mehreren verfügbaren Optionen und Kodierung von mailto-Links.

4. Ersetzen der E-Mail durch ein Kontaktformular
Anstatt die E-Mail-Adresse mit schlauen Methoden zu verstecken, greift manch ein Seitenbetreiber zu einer radikalen alternativen Lösung. Auf die Anzeige der E-Mail-Adresse wird dabei ganz verzichtet, und stattdessen setzt man ein simples Kontaktformular ein, mit dem Seitenbesucher ihr Anliegen abschicken können. Designagenturen nutzen diese Gelegenheit gleich aus, um den potenziellen Kunden ein „Design Brief“ gleich mit ausfüllen und abschicken zu lassen.

Die Faustregel gilt: je weniger Felder ein Kontaktformular enthält, desto mehr Anfragen werden Sie erhalten. Häufig wird in solchen Formularen ein Captcha benutzt. Allerdings muss sie nicht einem kryptischen Erkennungsspiel ähneln (auch bekannt als „erkenne-fünf-kaum-lesbare-Ziffern-und-gebe-sie-an-Spiel). Meistens ist es genug, den Benutzer zu fragen, welche Farbe etwa für Apfelsine typisch ist oder zu beantworten, ob Eis eher für „kalt“ oder „warm“ steht.

5. Sichere Lösung
Eine der bekanntesten Regeln, der man unter allen Umständen zur Bewahrung seiner E-Mail-Adresse vor Spam folgen sollte, ist, die E-Mail-Adresse nie im Web zu veröffentlichen. Eine simple Methode, deren Effizienz selbst die Erwartungen von optimistischen Lesern übetreffen wird, basiert genau auf dieser Idee, die durch ein Zusammenspiel von zwei E-Mail-Adressen erweitert wird.

Als Seitenbetreiber erstellt zwei E-Mail-Adressen. Eine ist für seriöse geschäftliche Kontakte gedacht und wird nur für Kommunikation mit Partnern und Kunden benutzt. Die andere ist für kurze Anfragen der Öffentlichkeit gedacht; sie wird durch eine der oben aufgezählten Methoden kodiert und im Web veröffentlicht.

Der Clou liegt dabei darin, dass Seitenbetreiber bei einer wichtigen Kontaktaufnahme eines potenziellen Kunden die Korrespondenz über die „geschäftliche“ Adresse fortsetzen. Kleinere Fragen oder Anmerkungen werden dagegen aus „offener“ E-Mail-Adresse beantwortet, die auch im Web veröffentlicht ist. Sollte die letztere Adresse irgendwann in eine Spam-Datenbank aufgenommen werden, so genügt dem Seitenbetreiber ein schneller Wechsel zu einer neuen Adresse, die Spam-Bots noch nicht kennen.

Auf diese Weise lassen sich geschäftliche Kontakte ohne jegliche Sorgen über Spam-Überflutung pflegen und Spam-Anteil im Posteingang auf satte 0% reduzieren.

6. Verwendung des GoogleMail-Filters
Eine weitere nützliche Technik, mit der sich die Anzahl der Spam-Mails deutlich minimieren lässt, macht sich die Effizienz des GoogleMail-Filters zunutze. Leider bietet GoogleMail nicht die Option, Google’s Filter für eigene Mails direkt zu verwenden. Dennoch kann man alle E-Mails, die in Ihren Posteingang über Ihre Adresse gelangen, auf eine E-Mail von GoogleMail weiterleiten und gefilterte Mails wiederum an eine weitere, „saubere“ Adresse weiterzuleiten, die Sie anschließend ständig abrufen werden.

Sollte der GoogleMail-Filter gewisse E-Mails zufällig als Spam einstufen, so genügt ein kurzer wöchentlicher Blick in den Spam-Ordner, um wichtige Nachrichten nicht zu verpassen. Ergebnisse sind zwar nicht immer absolut korrekt, dennoch sieht man den Unterschied direkt – Hunderte von Mails lassen sich durch GoogleMail auf 2-3 pro Tag reduzieren. ™

Weiterführende Information

Kategorien
Webdesign

Browser: Produktiver und moderner Arbeiten mit Google Chrome

Was Google mit seinen Web-Applikationen erreichen konnte, sollte auch außerhalb der Browser-Schranken möglich sein. Dementsprechend stellte Google im Sommer 2008 den neuen Internet-Browser Google Chrome (für Windows XP/Vista; Versionen für Linux und Mac OS X sind in Entwicklung) vor — dieser sollte als Vorreiter für das kommende Betriebssystem Google Chrome OS ins Rennen geschickt werden und wird heute vielfach gelobt. Grund genug sich den Browser genau anzusehen.

Eines haben viele Google-Produkte gemeinsam: sie sind einfach, schnell, übersichtlich und demzufolge auch leicht zu bedienen. Nicht verwunderlich also, das viele Nutzer der Versuchung nicht widerstehen können, die hoch gelobten Google-Dienste auszuprobieren. Schließlich sind sie kostenlos und manchmal auch besser als bisherige Produkte. Die Popularität von Google-Diensten wie etwa Google Mail, Google Docs und Google Maps spricht für sich.

Google Chrome

Laut Google war die Grundidee, weniger den gängigen Browsern wie Internet Explorer oder Mozilla Firefox Konkurrenz zu machen, sondern eine vernünftige Plattform und Infrastruktur aufzubauen, auf der moderne Web-Applikationen schneller und effizienter laufen könnten. Ein optimaler Browser für die Ära des Cloud Computing sollte Chrome werden, eine Art schlanke und robuste Alternative zu gewichtigen Browsern aus den Häusern Microsoft und Mozilla.

Nach einem Jahr konnten Entwickler von Chrome dieses Ziel erreichen: Nicht nur hat der Browser eine simple, elegante Oberfläche; laut einschlägigen Studien ist der Browser der schnellste und kann auch bei Standardskonformitättests gut punkten. Andererseits wird er bisher nur von 2,8% der Nutzer weltweit als Standard-Browser eingesetzt (Quelle: Hitlink). Doch nun alles der Reihe nach.

Benutzeroberfläche

In der Tat konnte Google Chrome nach einem Jahr viele Nutzer überzeugen, nicht zuletzt durch seine simple, beinahe minimalistische Oberfläche, die intuitiv und einfach zu bedienen ist. Im Chrome findet man kaum überflüssige Funktionen. Dabei scheinen die Entwickler viel Wert auf die Kompaktheit des Browsers zu legen, so ist etwa der Toolbar-Bereich deutlich kleiner als bei anderen Browsern, während auf eine integrierte Statusleiste im unteren Browserbereich ganz verzichtet wird, diese wird nur eingeblendet, während die Seite geladen wird.

Google Chrome
Der Browser Google Chrome in Großaufnahme.

Beim Öffnen eines neuen Tabs zeigt Google Chrome – ähnlich wie Safari – die neun beliebtesten Webseiten als Thumbnails an; diese lassen sich beliebig anpassen, umsortieren und fixieren. Standardmäßig wird diese Seite auch beim Start des Browsers angezeigt. Die Oberfläche des Browsers lässt sich mit über 30 frei verfügbaren Themes leicht anpassen.

Sicherheit

Im Hinblick auf die Sicherheit bietet Google Chrome ein klassisches Arsenal an Browser-Optionen: Phishing- und Malware-Schutz ist standardmäßig aktiviert, alle private Dateien können mit einem Knopfdruck gelöscht werden und auch das Cookies-Management steht Nutzern zur Verfügung. Die frei zugängliche Google Safe Browsing-API liefert Chrome immer aktuelle Listen gefährlicher Internetseiten. Zudem kann man mit Strg+Umschalt+N in den Modus für anonymes Browsen schalten, indem etwa keine Cookies gespeichert werden. Lesezeichen und Einstellungen von anderen Browser lassen sich importieren, alle Downloads können durchsucht werden.

Allerdings ist die Frage, wie sicher der Browser eigentlich ist, nicht so leicht zu beantworten. So sind im Laufe des Jahres immer wieder schwerwiegende Sicherheitslücken aufgetaucht, die letzten zwei gerade mal Anfang September.

Leistung

Laut einschlägigen Benchmarks SunSpider und V8 (Stand: 16. September 2009) schneidet die JavaScript Rendering Engine des Browsers besser als jeder andere Browser ab; auch in puncto Web-Standards kann Google Chrome vorbildhaft punkten. Der Browser versteht sich gut mit dem Acid3-Konformitätstest und konnte zusammen mit Opera 10.0 und Apple Safari 4.0.3 die volle Punktzahl für sich gewinnen.

Benchmarks
Laut einschlägigen Benchmarks SunSpider und V8 (Stand: 16. September 2009) schneidet die JavaScript Rendering Engine des Browsers besser als jeder andere Browser ab; auch in puncto Web-Standards kann Google Chrome vorbildhaft punkten. Quelle: Computerbild

Subjektiv macht sich die Schnelligkeit des Browsers nach wochenlangen Tests deutlich bemerkbar, so dass der Übergang zurück zum Firefox häufig kontraproduktiv erscheint. Das Zusammenspiel von kleinen bemerkbaren Browsing-Verbesserungen führt zu deutlich besserer Produktivität und Effektivität, die man mit anderen Browser nur schwer erreicht. Auch scheint Chrome deutlich stabiler als andere Browser zu sein, vor allem im Vergleich mit Mozilla Firefox und Safari.

Bemerkenswert ist, dass die Leistungsvorteile von Chrome laut den Heise-Tests nur bei sehr hohen Bandbreiten ausgespielt werden können. Bei niedrigen Bandbreiten hingegen belegt Chrome den letzten Platz.

Was macht Google Chrome anders?

Interessant sind in Chrome kleine, kaum bemerkbare Details, die das Surfverhalten deutlich schneller und komfortabler machen. Charakteristisch für den Browser ist etwa das Verschmelzen der Adresseleiste mit der Suchbox (die so genannte Omnibox) — egal, ob Sie eine Adresse oder ein Schlüsselwort eingeben wollen, der Browser kümmert sich darum, dass die Anfrage richtig ausgewertet wird und eine neue Seite geladen wird oder eine Anfrage an die Suchmaschine geschickt wird (die letztere ist standardmäßig natürlich Google, lässt sich aber leicht anpassen). Beim Tippen in der Omnibox erscheinen Vorschläge des Browsers, mit denen Sie auswählen können, ob es sich um zuvor besuchte Seiten oder um Lesezeichen handelt.

Google Chrome
Beim Tippen in der Omnibox erscheinen Vorschläge des Browsers, mit denen Sie auswählen können, ob es sich um zuvor besuchte Seiten oder um Lesezeichen handelt.

Anders als in anderen Browsern, in denen alle Tabs im Wesentlichen Teile eines einzelnen laufenden Programms sind, sind die Tabs in Chrome separate, abgeschlossene Prozesse und sind auch so im Task-Manager vertreten. Somit wird verhindert, dass ein einziger Reiter, der einen rechenintensiven Prozess betreibt, den ganzen Browser verlangsamt und zum Absturz bringt. Besonders deutlich wird dies im Vergleich zu Mozilla Firefox, der für sein Appetit für Speicher bekannt ist und häufig beim Einsatz vieler Erweiterung langsam und schwer wird. Da die Prozesse der Reiter bei Chrome in einer Sandbox ausgeführt werden, ist es demnach schwierig, andere Prozesse zu beeinflussen. So wird eine zusätzliche Barriere für Malware-Seiten gegeben.

Und da alle Tabs separate Prozesse sind, ist es auch möglich, einen Reiter aus dem Browserfenster rauszuziehen und in einem neuen Browser-Fenster weiterlaufen zu lassen. Genauso einfach lassen sich Tabs innerhalb eines Fensters verschieben und gruppieren (diese Möglichkeit gibt es in der letzten Version von Firefox mittlerweile auch).

Interessant ist ebenfalls die Möglichkeit, Tastatur-Abkürzungen für häufig benutzte Web-Anwendungen sowie Übergabeparameter festzulegen (Adressleiste -> rechter Mausklick -> Suchmaschinen bearbeiten). Wer etwa als Redakteur eines Online-Magazins zum web-basierten Mailsystem schnell schalten möchte, ohne ein passendes Lesezeichen suchen zu müssen, kann etwa das Stichwort „mailsys“ vergeben und dieses in der Adressleiste angeben.

Goodies für Nutzer und Web-Entwickler

Für Web-Entwickler liefert Google Chrome die Unterstützung von Gears, einer Google-API, mit der Webapplikationen unter Anderem auch offline genutzt und anschließend online synchronisiert werden können. So ermöglicht der Browser zum einen Gears-Anwendungen mit mehreren Threads und zum anderen die Ausführung von server-basierten Anwendungen separat auf dem Desktop des Benutzers. Mit anderen Worten, mit Chrome können Sie auf Ihrem Desktop lokale Verknüpfungen zu beliebten Web-Anwendungen erstellen und diese abgekoppelt von anderen Reitern des Browsers laufen lassen (ähnlich zu Mozilla Prism und Fluid).

Google Chrome
Mit Chrome können Sie auf Ihrem Desktop lokale Verknüpfungen zu beliebten Web-Anwendungen erstellen und diese abgekoppelt von anderen Reitern des Browsers laufen lassen.

In seiner letzten Version unterstützt der Browser nun weitgehende Teile von HTML 5, darunter auch das Video-Tag. Die Fähigkeiten des Browsers demonstiert das Entwicklungsteam stolz auf ihrer Seite Chrome Experiments. Außerdem verfügt Google Chrome über eine Konsole, die dem Inspektor aus dem Firebug ähnelt. Zwar gibt es einige Google Chrome Plugins, dennoch scheint es noch keine gut dokumentierte API zu geben, die es ermöglichen würde, Erweiterungen schneller zu entwickeln.

Als Rendering-Engine nutzt der Browser WebKit. Die Grundlage für den Browser stellt das von Google geführte Open-Source-Projekt Chromium dar. Der Quelltext von Chromium ist unter der BSD-Lizenz veröffentlicht. Auch die in Chrome verwendete V8-JavaScript-Engine (geschrieben in C++) ist als Open Source veröffentlicht.

Eine massive Vielfalt von Webentwicklungs-Tools wie etwa bei Firefox findet man bei Chrome nicht. Dies ist unter anderem ein wesentlicher Punkt, warum der Umstieg auf Chrome für viele Designer und Entwickler nicht in Frage kommt.

Kritik und Nachteile

Trotz seiner minimalistischer Oberfläche und glänzender Performance gerät Google Chrome häufig in den Blickwinkel der Kritiker, die vor allem auf viele Datenschutz-Probleme hinweisen. Google Chrome räumt sich nämlich in seinen Datenschutzbestimmungen das Recht ein, diverse Informationen über den Browser und über das Surfverhalten zu sammeln und zu analysieren. Dabei enthält jede Kopie des Browsers eine eindeutige Identifikationsnummer, die bei der Installation und nach dem ersten Start an Google versendet wird.

Stimmt der Nutzer darüber hinaus bei der Installation zu, Programmfehler an Google automatisch zu übermitteln, so werden „Daten über momentan geöffnete Dateien, Programme und Dienste sowie Datei-Inhalte“ ebenfalls an Google geschickt. Mit der Anwendung Kill-ID können Sie Ihre persönliche Identifikationsnummer löschen, die entsprechenden Einstellungen deaktivieren und jegliche Datenwege an Google blockieren.

Kill-ID
Mit Kill-ID können Sie Ihre persönliche Identifikationsnummer löschen, die entsprechenden Einstellungen deaktivieren und jegliche Datenwege an Google blockieren.

Ein weiteres Problemfeld stellt die Omnibox dar. Damit Vorschläge beim Eintippen von Daten in die Adressleiste angezeigt werden können, müssen sie an Google übermittelt werden. Laut Spiegel, „gab ein Google-Sprecher zu, man wolle „etwa zwei Prozent“ der über die Omnibox anfallenden Daten speichern – und zwar in Verknüpfung mit der IP-Adresse des jeweils benutzten Computers“. Wer also bloß etwas eintippt, ohne die Daten zu übermitteln, kann damit rechnen, dass der eingetippte Text irgendwo auf den Google-Servern landet. Um dieses zu vermeiden, können Sie die „Auto-Suggest“-Funktion in Einstellungen des Browsers deaktivieren.

Dass Google keine klare Linie im Bezug auf den Datenschutz hat, zeigt etwa, dass die Entwickler in früheren Versionen der Nutzungsbedingungen ein sogenanntes Eula (End User License Agreement) hatten, in dem vom Nutzer die Abtretung aller Verwertungsrechte an allen von ihm über Chrome erarbeiteten und veröffentlichten Werke gefordert worden sind. Als Datenschutz-Experten mit einer scharfen Kritik an Google reagierten, haben die Entwickler den Absatz schnell gelöscht und als Grund für das „Missverständnis“ zugegeben, diese Passagen des Eula versehentlich aus den Nutzungsbedingungen eines anderen Produktes übernommen zu haben.

Nicht verwunderlich also, dass das Bundesamt für Sicherheit in der Informationstechnik (BSI) vor zwei Wochen an die Deutschen Nutzer appellierte, den Browser Google Chrome, zusammen mit anderen Google Produkten, zu meiden. Grund: Daten werden auf einem Google Server gespeichert, sodass der Nutzer keine vollständige Kontrolle über die Verwendung dieser Daten mehr hat.

Zusammenfassung

Google Chrome überzeugt vor allem mit seiner Schnelligkeit und Benutzerfreundlichkeit; schneller als die anderen Browser, zeigt er wie Surfen komfortabel and robust sein kann, ohne dass der Nutzer sich in den unzähligen Optionen verliert. Für Entwickler ist Chrome das Vorbild für den schlauen standardkonformen Browser. Für die Entwicklung und Debugging von Web-Seiten wird man jedoch ohne Mozilla Firefox nicht auskommen können – zur Zeit gibt es für Chrome nur wenige Plugins.

Im Datenschutz liegt das große Problemfeld des Browsers. Wer im Web schneller unterwegs sein möchte, sollte sich mit Chrome vertraut machen, jedoch durch zusätzliche Tools und angepasste Browsereinstellungen jegliche Datenübermittlung an Google vermeiden.

Google Chrome kann man hier herunterladen; zur Zeit stehen nur Versionen für Windows Vista/Windows XP SP2 zur Verfügung. Linux- und Mac OS X-Versionen sind laut Google in Entwicklung.

Weiterführende Ressourcen

  • Google Chrome Frame
    Ein Internet Explorer-plugin, mit dem die Funktionalität und Schnelligkeit von Google Chrome an IE übertragen wird. Unter anderem wird dadurch die schnelle JavaScript-Rendering Engine in IE integriert. Im Moment als Entwicklungs-Release verfügbar für Internet Explorer 6, 7, und 8 auf Windows Vista / XP SP2.
  • The Power User’s Guide to Google Chrome
    Eine Übersicht von nützlichen Tricks und Tastaturkürzeln für Google Chrome.
  • Chromium
    Ein Open-Source Projekt, das die Grundlage für Google Chrome darstellt.
  • The genius behind Google’s browser
    Die Geschichte und Entwicklung des Browsers in einem Beitrag des Magazins „Financial Times“.
  • Google Chrome Bookmarklets
    Eine Sammlung von nützlichen Bookmarklets für Google Chrome.
  • Google on Google Chrome – comic book
    Als Comic verfasste Beschreibung des Browsers von Scott McCloud. ™
Kategorien
Design HTML/CSS

CSS: vertical-align – wie geht man damit um?

Dieser Beitrag basiert zum Teil auf dem Beitrag „What is Vertical Align?“ von Chris Coyier. Dieser Beitrag ist allerdings erweitert und wurde recherchiert. Die Genehmigung des Autors für die Verwendung von Bildern sowie Teil des Textes liegt vor (hinzugefügt um 14:20, 16. Juli 2009).

Die CSS-Eigenschaft vertical-align wird häufig als ein kryptisches, nicht gerade intuitives Attribut gesehen, mit dem man nur selten etwas anfangen kann. Sie wird gerne in eine Ecke zusammen mit CSS Spezifizität, CSS Floats, z-index und weiteren anspruchsvollen CSS-Konzepten gestellt – dabei hat sie doch dort nichts zu suchen. Und als ob es nicht schon genug wäre: oft hält man vertical-align für ein längst überholtes („deprecated“) Attribut aus den Zeiten der tabellen-basierten Layouts (erinnert sich noch jemand an das legendäre <td valign=“top“>?), das somit der Vergangenheit angehört und in modernen CSS-basierten Layouts nichts zu suchen hat.

Gute Nachrichten: vertical-align ist nicht überholt und kann – wenn richtig eingesetzt – manch einem Designer Nerven, Arbeit und Workarounds ersparen. Doch alles der Reihe nach. Zunächst einmal: worum handelt es sich überhaupt?

Was ist vertical-align?

vertical-align ist eine CSS-Eigenschaft, mit der man die vertikale Ausrichtung von Inline-Elementen innerhalb einer Textzeile oder die vertikale Ausrichtung von Inhalten einer Zelle (table cell) innerhalb einer Zeile (table row) in der Tabelle festlegen kann. Mit anderen Worten bedeutet es, dass man mit vertical-align nur die Platzierung eines Elements innerhalb eines Blocks, der eine einzige (Text- oder Tabellen-)Zeile umfasst, ausrichten kann. So lassen sich etwa nebeneinander stehende Elemente mit unterschiedlicher Höhe, zum Beispiel Textpassagen mit unterschiedlicher Schriftgröße innerhalb einer Zeile im Verhältnis zueinander ausrichten.

Es liegt nahe, vertical-align auf Bilder in einem Beitrag anzuwenden, da img ein Inline-Element ist. Dies kann nützlich sein wenn man beispielsweise ein Icon neben einem Wort perfekt platzieren will, ohne auf die background-image und background-position-Eigenschaften in CSS zu zugreifen. Dies wird im Folgenden als Standardbeispiel benutzt.

Welche Werte kann vertical-align annehmen?

Insgesamt kann vertical-align 10 verschiedene Werte annehmen: baseline, text-bottom, text-top, bottom, top, middle, sub, super, length und %-Angaben.

Baseline (img { vertical-align: baseline; })
Standardmäßig (by default, ohne explizite Angaben) hat die Eigenschaft den Wert „baseline“. Dabei werden Bilder im Textfluss genauso platziert wie der davor- oder auch darauffolgende Text. Jede Zeile Text hat eine Art Grundlinie, auf der sie „sitzt“. Wenn vom Designer nicht anders gewünscht, wird das Bild also ebenfalls auf dieser Grundlinie sitzen (siehe Beispiel unten).

Screenshot
Standardmäßig ist der Wert der Eigenschaft „vertical-align“ bei einem Bild „baseline“ – das Bild sitzt genauso wie Text auf der Grundlinie.

Text-Bottom (img { vertical-align: text-bottom; })
Dieser Wert sorgt dafür, dass das Bild-Element am unteren Schriftrand ausgerichtet wird, also etwa genau dort wo die Unterlängen der Buchstaben „g“ oder „p“ enden.

Screenshot
Man kann das Inline-Element (hier Bild) auch am unteren Schriftrand ausrichten.

Text-Top
Was für den unteren Schriftrand gilt, kann auch für den oberen Schriftrand gelten. Im Beispiel unten ist der oberste Punkt nicht zu sehen, anscheinend gibt es bei Georgia einen Buchstaben, der eine höhere Oberlänge hat.

Screenshot
Man kann das Inline-Element (hier Bild) auch am oberen Schriftrand ausrichten.

Bottom und Top
Im Wesentlichen bewirken diese beiden Werte das gleiche wie Text-Bottom und Text-Top, allerdings beziehen sie sich nicht nur auf Text, sondern auch auf alle andere Elemente, die in der Zeile vorkommen können (etwa auf ein anderes Bild auf der selben Zeile). Sind etwa zwei Icons auf der selben Zeile, die unterschiedliche Höhe haben und beide höher als die Schrifthöhe auf dieser Zeile sind, so würden ihre Oberpunkte (oder Unterpunkte) perfekt zueinander passend ausgerichtet, unbeachtet des sie begleitenden Textes.

Middle
Dieser Wert wird wohl am häufigsten eingesetzt, um etwa Icons, die neben einem Wort auftreten, vertikal zu zentrieren. „Middle“ richtet das Inline-Element mittig aus; der vertikale Mittelpunkt hat den Abstand gerade die Hälfte der x-Höhe von oben und von unten (x-Höhe = Mittellänge, Höhe eines Kleinbuchstabens ohne Ober- und Unterlänge). Das heißt der vertikale Mittelpunkt, entlang dem das Bild ausgerichtet wird, liegt äquidistant in der Mitte des Textes im Bezug auf die Mittellänge. Unklar? Siehe Beispiel unten.

Screenshot
„Middle“ richtet das Inline-Element mittig aus

Beachten Sie: wenn ein Bild höher ist als die aktuelle Schriftgröße, so wird es die darauffolgenden Textzeilen nach unten schieben und somit das Textbild verzerren:

Screenshot
Wenn ein Bild höher ist als die aktuelle Schriftgröße, so wird es die darauffolgenden Textzeilen nach unten schieben und somit das Textbild verzerren

Sub und Super
Sub stellt das Inline-Element tiefer und Super stellt das Inline-Element hoch, beide ohne die Schriftgröße zu reduzieren.

Screenshot

Length
Gibt man bei der Eigenschaft einen positiven Wert an (etwa 3px), so wird die Inline-Box um diesen Wert vertikal nach oben (mit dem Ausgangspunkt Grundlinie) verschoben (also um 3px nach oben). Ist der Wert negativ, so wird die Box nach unten verschoben.

%-Angaben
Ähnlich wie beim vorigen Fall, kann man mit %-Angaben die Inline-Box nach oben oder nach unten (mit dem Ausgangspunkt Grundlinie) verschieben. Der Prozent-Wert bezieht sich dabei auf die Zeilenhöhe (line-height).

Bei Tabellen haben Inhalte innerhalb einer Zelle standardmäßig den Wert „middle“ (also nicht „baseline“ wie das bei Textzeilen der Fall ist); sie werden also mittig ausgerichtet. Falls man die Ausrichtung ändern will, lässt sich dies zum Beispiel mit den Angaben td { vertical-align: bottom; } oder td { vertical-align: top; } anpassen.

Screenshot

Der simple Grund, weshalb vertical-align häufig missverstanden wird, liegt daran, dass die Eigenschaft immer wieder im falschen Kontext benutzt wird und demzufolge auch so gut wie nie zur Lösung eines Problems beiträgt. Ein fast schon klassisches Beispiel ist etwa der Versuch, einen kleineren Div-Block innerhalb eines größeren Div-Blocks vertikal zu zentieren – natürlich mithilfe der vertical-align-Eigenschaft in CSS. Das funktioniert nicht, weil vertical-align laut Spezifikation nur auf Inline-Elemente angewendet werden darf, also nicht auf Block-Level-Elemente.

Man kann natürlich jedes Block-Level-Element explizit in den „Inline-Mode“ mittels display:inline schalten, doch meistens hillft dies nicht, da der Div-Block etwa nicht unbedingt auf eine Textzeile passt (Frank Mey, danke für den Hinweis!). Wer dennoch wissen möchte wie das oben beschriebene Problem gelöst werden kann, findet ein paar interessante Techniken im Douglas Heriots Beitrag Vertical Centering with CSS (engl.)

Screenshot
Die meisten modernen Browser können mit der Eigenschaft vertical-align umgehen. Allerdings ist die Darstellung in verschiedenen Browsern teilweise unterschiedlich.

Wie es zu erwarten ist, verstehen sich nicht alle Browser auf die vertical-align-Eigenschaft. Verschiedene Browser interpretieren die Angaben unterschiedlich, auch wenn moderne Browser damit mehr oder weniger gut klarkommen. In Internet Explorer bis Version 7 (Win) werden „bottom“ und „text-bottom“ sowie „top“ und „text-top“ identisch interpretiert. Zudem beziehen sich „length“-Angaben, %-Werte, sub, super, text-bottom und text-top in diesem Browser bei Tabellenzellen nicht auf die Grundlinie. In Firefox und Internet Explorer für Windows wird „vertical-align“ – wenn angewandt auf eine Tabellenzeile – „vererbt“ und automatisch auf alle Zellen dieser Zeile angewandt, was jedoch nicht der Spezifikation entspricht.

Beachten sollte man, dass „valign“ im (X)HTML-Markup für die vertikale Ausrichtung von Tabellenzellen (etwa <td valign=“top“>) als  überholte Praktik gilt und wenn möglich vermieden werden sollte. Schließlich gibt es eine elegante alternative Lösung, die leicht mit „reinem“ CSS realisiert werden kann. (sl)

Weitere Informationen zum Thema:

Kategorien
Design HTML/CSS

Variablen in CSS: Werkzeuge und Lösungsansätze

Die Einführung von Variablen in CSS scheint eine vernünftige Idee zu sein. Schließlich wäre es nicht verkehrt, nur einmal eine Farbe oder eine Schrift zu definieren und diese weitgehend im ganzen Stylesheet zu nutzen. Einige Experten halten dagegen, die Stylesheet werden komplexer, die CSS-Dateien werden größer und unübersichtlicher. Doch, während sich CSS-Experten streiten, ob die Einführung von Variablen in CSS eine vernünftige Sache sei, arbeiten Designer und Entwickler heftig daran, das Design von Cascading Stylesheets mittels Variablen zu erleichtern und zu beschleunigen. Die Vorteile liegen auf der Hand.

Eigentlich ist die Idee weder neu noch revolutionär. Die Nachfragen, Variablen in CSS einzuführen, gibt es seit Jahren, ebenso verschiedene Techniken, mit denen dies „künstlich“ realisiert werden kann (auf der „Pre-Processing“-Ebene). Grundsätzlich kann jetzt schon jeder mit PHP, ASP, Ruby, Perl et cetera einen eigenen Preprocessor schreiben, der die Aufgabe übernimmt. Das Problem ist dabei nur, dass das Stylesheet unübersichtlicher wird, weil es nun nicht mehr abgekoppelt ist und zuerst durch einen Preprocessor „laufen“ soll. Dadurch kann die Wartung des Stylesheets komplexer und unübersichtlicher werden. Somit ist die Entscheidung, ob man CSS Variables einsetzt oder nicht eine individuelle Frage, die jeder Designer für sich beantworten muss. Machbar und leicht zu realisieren ist dies auf jeden Fall.

Eins vorweg: CSS Variables sollten nicht mit JavaScript implementiert werden, denn sonst wird die Seite in Browsern, die keine JavaScript-Unterstützung mitbringen, unlesbar dargestellt. Wenn überhaupt, sollten CSS Variables mit serverseitigen Skriptsprachen realisiert werden. Das ist also eine schlechte Lösung.

Wir haben uns umgeschaut und einige interessante Ansätze zur Implementierung von CSS Variables mit serverseitigen Sprachen gesammelt. Haben wir etwas vergessen? Bitte teilt es uns in Kommentaren mit!

CSS Variables With Moonfall
Moonfall erzeugt einen Abstraktionslayer für die Designer von Stylesheets. Die CSS-Datei kann mittels der Programmiersprache Lua (das für „World of Warcraft“ benutzt wird) Variablen enthalten; das Preprocessing findet mittels eines CGI-Skripts oder der Kommandozeile statt. Interessante Alternative zu üblichen Techniken.

Screenshot

HSS
HSS ist eine Kommandozeilen-Anwendung, die HSS-Dateien (in denen unter Anderem CSS-Variablen, Block-Variablen und Nested Blocks definiert werden können) kompilieren kann – lokal, auf dem Rechner des Entwicklers.

Screenshot

CleverCSS
CSS-Variablen mit Python. Bonus: auch „Rechenoperationen“ wie etwa Addition von Farbei und Schriftgrößen lässt sich mit CleverCSS bequem realisieren.

Screenshot

Variables in your CSS via PHP
Chris J. Davis beschreibt eine Technik, mit der man Objekt-Orientierung in PHP nutzen kann, um etwa color-, font-family– oder gar margin und padding-Attribute dynamisch festzulegen. Siehe auch Embedding PHP in CSS, CSS Variables Using PHP, Variables in CSS via PHP, Faster Development with CSS Constants und CSS Constants.

Screenshot

CSS Handler
CSS Handler ist ein HttpHandler, der CSS-Dateien mit Variablen, relativen Dateipfaden und @import-Direktiven arbeiten kann und auch die CSS-Dateien „on the fly“ komprimieren kann. Mehr Informationen dazu.

Sass
Sass ist eine Metasprache, mit der Stylesheets eleganter und einfacher geschrieben werden können. Ein CSS-Layout könnte etwa in wenigen Zeilen Code realisiert werden (siehe Screenshot unten). Eine ausführliche Einführung in Sass finden Sie im Beitrag Dynamic CSS.

Screenshot

CSS Cacheer
Ein robustes Werkzeug, mit dem Entwickler nicht nur Variablen, sondern auch serverseitige Imports, Konstanten und verschachtelte Selektoren-Definitionen festlegen können. Siehe auch CSSExtra Plugin.

Compass
Compass baut auf Sass auf (siehe oben) und stellt ein CSS Meta-Framework zur Verfügung, das direkt in Ruby-Applikationen benutzt werden kann und über die Kommandozeile funktioniert. Das Werkzeug stellt zudem Bausteine für die Erzeugung von Layouts auf der Grundlage von Blueprint, YUI und 960.gs-Frameworks bereit. Siehe auch Don’t use css or table layout, use Sass and Compass.

Screenshot

CSS Variables With Rack Middleware
Phil Burrows beschreibt eine simple Technik, mit der CSS Variables in Rails mittels Rack Middleware implementiert werden. Ein .rb-Skript dafür wird mitgeliefert.

CSScaffold
Ein Plugin für den Editor Coda, mit dem CSS-Code mittels Variablen und Shortcodes eleganter und schneller geschrieben werden kann. Video dazu.

CSS Variables TextMate Bundle
Ein CSS Variables-Plugin für die Quellcode-Editoren TextMate und E-TextEditor.

Screenshot

Techniken, Beiträge und Tutorials

How to Add Variables to Your CSS Files
Dieses Schritt-für-Schritt-Tutorial erläutert, wie CSS Variables ganz einfach mit PHP realisiert werden können. Die Generierung von Stylesheet wird Apache auf ein PHP-Skript deligieren; dieses öffnet das Stylesheet, liest es Zeile für Zeile und ersetzt benutzerdefinierte Variablen durch vorgegebene Werte. Anschließend nutzt Apache das Output, um dem Browser eine perfekte „ausgewertete“ Stylesheet-Datei vorzugaukeln. Wahrscheinlich eine Overkill-Lösung, die zu komplex ist. Geht aber dennoch.

Screenshot

Dynamic CSS A.K.A. CSS Variables
Eine weitere simple Technik, mit der CSS Variablen mittels PHP implementiert werden können.

Screenshot

CSS Constants
Eine Übersicht von verschiedenen Techniken, mit denen CSS Variables eingeführt werden können. Natürlich können CSS Variables auch mit SSI realisiert werden. Von Christian Heilmann.

Dynamic CSS in WordPress
Wie erreicht man in WordPress, dass jede Rubrik ein eigenes Hintergrundbild hat? Auch das geht mit dynamisch erzeugtem PHP/CSS-Code.

CSS Variables Proposal
Ein CSS Variables-Proposal von Entwicklern der WebKit Rendering Engine. Anfang 2008 sind CSS Variables in WebKit nightlies aufgetreten, ein paar Monate später hatten WebKit-Entwickler die Idee wieder aufgegeben. Die test builds existieren aber immer noch.

Was könnte man noch mit CSS Variables machen?

CSS Variables stellen nicht nur das alleinige Konzept dar, mit dem das Design von Cascading Stylesheets erleichtert und verbessert werden könnte. Eine Möglichkeit wäre es etwa, Variablen zu nutzen, um darauf basieren Rechenoperationen (wie etwa bei CleverCSS durchführen zu können. Dies würde etwa die Berechnung von Containterbreiten deutlich vereinfachen. In seinem Beitrag Future CSS Variables and Calculations setzt sich Peter Gasston mit dem Thema auseinander. Der Quellcode könnte etwa so aussehen:

@define { box_padding: 100px; }

div {
padding: $box_padding;
width: calc(100% - $box_padding);
}

Einen anderen Vorschlag hat Jens Meiert: die Zuweisung von Stilen sollte mittels Gleichsetzung der Selektoren erfolgen. Etwa

.old = .new;

oder

@foo = .old, .new;

Mehr dazu finden Sie in Jens Beitrag Selector Variables.

Was meinen Sie?
Was meinen Sie? Ist es vernünftig, CSS Variables einzusetzen? Gehören CSS Variables in die Web Standards? Und welche weitere Features vermisst Ihr in CSS? ™

Kategorien
Webdesign

Kostenloses Typo-Poster mit Regeln für gute Typografie

Wer als Seitenbetreiber einen hohen Wert auf die Qualität seiner Seite legt, sollte sich mit den wesentlichen Richtlinien für korrekte, zeitgemäße Textgestaltung auseinandersetzen. Schließlich werden Inhalte publiziert, um gelesen zu werden. Sind sie jedoch unlesbar oder fehlerhaft, so wird auch manch ein ungeduldiger Seitenbesucher der Seite den Rücken kehren. Dagegen kann ein klares typografisches Bild die Benutzerfreundlichkeit der Seite deutlich erhöhen und einen guten Eindruck hinterlassen.

Kostenloses Typo-Poster
Typo-Poster listet einige wichtige Regeln für gute Typografie und erläutert typografische Begriffe.

Und genau dafür eignet sich eine kurze Übersicht der wichtigsten Regeln und Grundbegriffe aus der Typografie – ein kompaktes A2-Poster, das 12 goldene Regeln für gute Typografie zusammenstellt. Unter anderem erläutert es solche Begriffe wie Durchschuss, Laufweite, Kerning, x-Höhe sowie Unterschiede zwischen Anführungszeichen und Strichen und Umgang mit Schriften im Fließtext. Das Poster kann auch kostenlos im PDF-Format heruntergeladen werden (3.4 Mb). Bitte beachten Sie, dass das .zip-Archiv unter Anderem auch eine Werbebroschüre der Herausgeber enthält.

Wem dies nicht genug ist, kann bei glossar: typografie & layout (deutsch), typolexikon.de (deutsch) oder bei Typeface Anatomy and Glossary (englisch) die jeweiligen Typo-Begriffe genauer nachschlagen – die Seiten stellen ausführliche Glossare zum Thema „Typografie“ bereit. Mehr wichtige Regeln der Typografie findet man im deutschsprachigen Typografie-Handbuch (wir berichteten). Auf knapp 12 Seiten wird Ihnen ein schneller Überblick über die wesentlichen typografischen Merksätze, die anhand zahlreicher Beispiele veranschaulicht und erklärt werden. Auch das Handbuch ist kostenlos als PDF verfügbar. ™

Typeface Anatomy and Glossary
Typeface Anatomy and Glossary: ein englischsprachiges Glossar zum Thema „Typografie“.

Kategorien
Inspiration Tutorials

Kreative Kalender-Designs – Kalender gestalten

Wie viele kreative Kalender-Designs gibt es da draußen? Wenn Sie sich umsehen werden Sie feststellen, dass die meisten Kalender konventionell gestaltet sind. Kalenderblätter sind normalerweise immer gleich gestaltet: Der Monat ist fett geschrieben, während die Tage darunter in einem Gitter platziert sind. Aber das muss man ja nicht so machen. Tatsächlich gibt es eine ganze Reihe kreativer Ansätze, wie man einen Kalender gestalten kann.

Sicher, Designer wagen manchmal ungewöhnliches Design. Allerdings muss ungewöhnliches Design nicht unbedingt auch gutes Design sein. Wichtig ist, dass Ihr Kalender seine Funktion erfüllt und benutzbar bleibt. Die Funktion ist wichtiger als das Design. Tatsächlich sind einige der hier vorgestellten Designs wahrscheinlich nicht sehr benutzerfreundlich. Sie können aber ein Anfang sein und Ihnen Ideen für eigene Designs geben.

Dieser Beitrag präsentiert Beispiele für kreatives Kalender-Design. Wir haben versucht, sowohl kreative als auch visuell ansprechende und interessante Designs mit aufzunehmen. Hoffentlich ist für jeden und jede etwas dabei. Bitte beachten Sie: In diesem Beitrag geht es um Informationsvisualisierung als um schönes Grafikdesign. Unser Ziel ist ein anderes, nämlich kreative Designkonzepte für Kalender zu präsentieren. Sollten Sie einige Links vermissen, so sind diese leider nicht mehr erreichbar, die Beispiele haben wir im Beitrag belassen.

Schöne und kreative Kalender

Magnetischer Kalender (engl.)
Ein ewiger, einfach anpassbarer Kalender. Sogar mit 32 möglichen Tagen im Monat, nur für den Fall. Die Monatsnamen sind auf drei Buchstaben gekürzt. Die Magnete können übereinander platziert werden. Den besonderen Reiz dieses Kalenders machen die eigens gestalteten Magnete aus wie der “Deadline”-, “Ankunft”-, “Abflug”-, “Fünf-Tage-Gelage”- und der “Ein-Tag-Abstinenz”-Magnet. Gestaltet von Serhiy und Igor Chebotaryov.

Sexy und kreative Kalender-Designs

Sexy und kreative Kalender-Designs

Tielens Ewiger Kalender (engl.)
Gestaltet von Sander Tielen aus den Niederlanden.

Sexy und kreative Kalender-Designs

A Calendar (engl.)
Ein kleines Spaßprojekt: Dieser Kalender zeigt die Sonnenscheindauer eines Tages vor 30 Jahren an, als Prognose für das Jahr 2008. Das war eine Menge Arbeit. Gestaltet von Sven Ellingen.

Sexy und kreative Kalender-Designs

Sexy und kreative Kalender-Designs

Zu gut für Worte
Eigentlich ist der Kalender extrem einfach: Man muss sich nur merken, das .|..|…|~|,,,|,,|, > Januar bis Dezember bedeutet. Wenn sie wissen wollen, welcher Tag der 20.11.2007 war, gehen Sie zur 20, dann hoch bis November und lesen sofort ab, dass es ein Dienstag war. Der Kalender hat auch eine schön große Schrift.

Sexy und kreative Kalender-Designs

Ewiger Kalender (engl.)
Dieser mutig gestaltete Kalender kann jedes Jahr genutzt werden. Man bewegt die beiden magnetischen Kugeln, um das Datum zu markieren. Gemacht für das Museum für Spritzguss-Plastik und -Magnete. Er kann an der Wand montiert oder auf einem Schreibtisch platziert werden. Gestaltet von Gideon Dagan.

Sexy und kreative Kalender-Designs

Faltbarer Kalender (engl.)
Dieses Design nutzt eine “Falt-Dimension”, um die Monatsnahmen auszurichten. Gestaltet von Luis Pabon.

Sexy und kreative Kalender-Designs

Farben-Kalender (engl.)
Ein recht farbenfrohes Kalender-Konzept. Jede Farbe ist mit einem Monat assoziiert. Beispielsweise steht Blau für Januar und Rot für Juli. Die letzte Seite enthält Informationen über das Portfolio des Designers. Das ist ein effektives Prospektdesign. Gestaltet von Jonathan Davies.

Sexy und kreative Kalender-Designs

Sexy und kreative Kalender-Designs

Sexy und kreative Kalender-Designs

Pulse-Kalender (engl.)
Ein kreisförmiges Kalender-Designkonzept aus Finnland. Gestaltet von der Design-Agentur Pulse247.

Sexy und kreative Kalender-Designs

Farben-Kalender (engl.)
Farben-Kalender 2008 – auch hier hat jeder Tag seine ganz eigene Farbe vom schweizerischen Design-Genie Moritz Zwimpfer erhalten. Dieser ansprechende, spiralgebundene Schreibtischkalender ist ein wenig wie ein Pantone-Buch mit Platz für Notizen. Jede Tagesfarbe hat seinen eigenen Duft, Geschmack und Klang, seine eigene Bedeutung von Erinnerung und Möglichkeiten für die Zukunft. Ein schönes kleines Objekt, welches tadellos gedruckt und ideal für den Schreibtisch oder den Aktenkoffer eines Design-Liebhabers ist, auch lange nach 2008 noch Freude verspricht. Der Anhang beinhaltet eine Kalender-Vorschau für 2008-2009, Pantone-Codes für die 365 Farben und leere Seiten für Memos. Gestaltet von Moritz Zwimpfer.

Sexy und kreative Kalender-Designs

Orangene Diagonale mit Nummern außen (engl.)
Orange und Grau sind eine großartige Kombination, noch mehr schätze ich die jenseitige Verrücktheit des Kalenders. Ich glaube Grund für diese Fremdartikeit ist die Erweiterung der alltäglichen zweidimensionalen Tabellen um eine weitere Dimension. Es ist verwirrend, schwierig zu verstehen und nicht perfekt, aber dennoch faszinierend.

Sexy und kreative Kalender-Designs

Sexy und kreative Kalender-Designs

Kompakter Kalender (engl.)
Gestaltet von David Seah.

Sexy und kreative Kalender-Designs

Post-It-Kalender (engl.)
Kalender aus Post-Its, Layout und Design benötigen noch etwas Arbeit (wie immer sind Vorschläge und Ideen willkommen), aber dies ist das grobe Konzept. Das Funktionsprinzip: Jedes Post-It steht für einen Tag, hat ein Datum und eine Todo-Liste. Bevor Sie das Haus verlassen, nehmen Sie das Post-It von heute ab und stecken es in Ihre Geldbörse. Gestaltet von Andrei Slobtsov (engl.).

Sexy und kreative Kalender-Designs

Steps Ewiger Kalender
Einfachheit und gutes Design machen dieses ansprechende und dennoch Platz sparende Schreibtisch-Accessoire aus. Der zweiteilige ewige Schreibtischkalender besteht aus Holz.

Sexy und kreative Kalender-Designs

Dupont-Corian-Kalender (engl.)
Corian 40 years/40 designers wurde als Anerkennung für die bisherigen und fortwährenden Leistungen der Designer in Bezug auf Corian geschaffen. DuPont hat 40 international bekannte Designer beauftragt, einzigartige funktionale Objekte zu schaffen, Tisch- oder Schreibtischaccessoires, welche die Designmöglichkeiten von Corian wiederspiegeln.

Sexy und kreative Kalender-Designs

Klassisches Kalender-System (engl.)
Einfachheit und gutes Design machen dieses ansprechende und dennoch Platz sparendes Schreibtisch-Accessoire aus. Der zweiteilige ewige Schreibtischkalender besteht aus Holz.

Sexy und kreative Kalender-Designs

Kalender 2008 (engl.)
Ein Kalendar mit nicht linear sein, er kann auch in Form einer Spirale gestaltet sein. Allerdings ist nicht klar, wie man dieses Konzept benutzen soll. Vielleicht haben Sie eine Idee? Geschaffen von Krizan Design Studio.

Sexy und kreative Kalender-Designs

Akryl-Kalender MUJI (engl.) (Link 404)
Dieser Kalender besteht aus einem Gitter beweglicher Acryl-Kuben mit Wochentagen und Zahlen, die jeden Monat angepasst werden können. Wird mit einem Sockel geliefert, mit dem man ihn auf dem Schreibtisch platzieren kann. Gemacht aus Acryl.

Sexy und kreative Kalender-Designs

108time box (engl.)
Der Kalender für 9 Jahre. Die endlose Zeit fließt aus der Zeit-Box. 108 visual pictures consisted of the numerals depicted different axes (??? Den Satz verstehe ich nicht).

Sexy und kreative Kalender-Designs

Pershing-Kalender (engl.)
Auch ein einfacher Kalender muss nicht wie ein Kalender aussehen. Mit sparsam eingesetztem White-Space kann ein Kalender nahtlos in einen Prospekt oder eine Broschüre integriert werden. Gekonntes Design von Manuel Dall’olio.

Sexy und kreative Kalender-Designs

Sexy und kreative Kalender-Designs

Sexy und kreative Kalender-Designs

Circular calendar (engl.)
Gestaltet von Entropia.

Sexy und kreative Kalender-Designs

Information Esthetic Calendar (engl.)
Eine PDF-Version ist verfügbar.

Sexy und kreative Kalender-Designs

Sexy und kreative Kalender-Designs

Kalenderblatt
“Es gibt noch eine Reihe von ungelösten Problemen mit diesem Design, insbesondere das Herausfinden des Wochentages eines Datums. Ich habe versucht, mit weißen Punkten Montage hervorzuheben, um das Problem zu lösen. Die Schrift könnte auch zu klein sein.” Gestaltet von Ben Stevens.

Sexy und kreative Kalender-Designs

Meatpixel-Kalender
Ein Kalender, der Mondphasen, Solar-Zyklen und andere Phasen anzeigt, plus/minus 30 Tage. Der letzte Kalender ist ein einfacher Taschenkalender für Leute, die Schwierigkeiten mit kleiner Schrift haben. Die römischen Zahlen sind die Monate.

Sexy und kreative Kalender-Designs

Sexy und kreative Kalender-Designs

Sexy und kreative Kalender-Designs

Slow printings (engl.)
Series of “self-printed” calendar and plant posters (??? Pflanzen-Poster?) made by controlling the ink bleeding (??? weiß, was gemeint ist, kenne aber keine passende Übersetzung) on the paper. Gestaltet von Oscar Diaz.

Sexy und kreative Kalender-Designs

Helvetica 2008-Kalender (engl.)
Der Kalender besteht aus 365 perforierten Seiten mit Monat, Tag und Datum in Fettschrift. Jeder Monat wird auf jeder Seite oben gezeigt mit überlagerten Outlines der sieben Tage von Montag bis Sonntag, Ziffern 0 bis 3 auf der linken und 0 bis 9 auf der rechten Seite. Jede Seite steht für einen Tag des Jahres. Gestaltet von der Agentur EffektiveDesign.

Sexy und kreative Kalender-Designs

Sexy und kreative Kalender-Designs

Runde Kalender-Aufkleber (engl.)
Die machen so viel Spaß! Gleichzeitig aufräumen und Spaß haben kann man mit den runden Kalender-Aufklebern. Kleben Sie sie auf Fotoalben, Tagebücher, Karten oder in die Speisekammer! Auch nützlich, um an Schularbeiten oder Abgabetermine zu erinnern. Die Einsatzmöglichkeiten sind Grenzenlos!

Sexy und kreative Kalender-Designs

Triangular-Kalender (engl.)
“Orange und Grau sind eine großartige Kombination, noch mehr schätze ich die jenseitige Verrücktheit des Kalenders. Ich glaube Grund für diese Fremdartikeit ist die Erweiterung der alltäglichen zweidimensionalen Tabellen um eine weitere Dimension. Es ist verwirrend, schwierig zu verstehen und nicht perfekt, aber dennoch faszinierend.” Wer weiß, vielleicht können Sie die Idee weiterentwickeln?

Sexy und kreative Kalender-Designs

Kalender-Tapete (engl.)
Echte Design-Profis erschaffen Kalender-Wallpaper aus dem Nichts, drucken es und nutzen es als (echte) Tapete. Gestaltet von Christiaan Postma.

Sexy und kreative Kalender-Designs

Der letzte Klick

Calendario Azteca (engl.)
Gutes Kalender-Design lernen von den Azteken.

Sexy und kreative Kalender-Designs

2008 Calendar (engl.)
Dies ist das ultimative Design. Keine Zahlen, nur Bilder. Definitiv ein unverwechselbares Design, aber wie nützlich ist es? Gestaltet von Cecilie Ellefsen.

Sexy und kreative Kalender-Designs

Kreidetafel-Kalender (engl.)
Ein Heimbüro ist der ideale Ort für einen Familien-Terminkalender. Verschieden schattierte Quadrate für sechs Wochen können mehrere Zeitpläne aufnehmen.

Sexy und kreative Kalender-Designs

Kaffeebecher-Kalender (engl.)
Gestaltet von Takeshi Nishioka.

Sexy und kreative Kalender-Designs

Sexy und kreative Kalender-Designs

Weitere Links:

Dieser Beitrag erschien zu erst im Englischen im Smashing Magazine. Mit freundlicher Genehmigung. Die Übersetzung fertigte Rene Schmidt an.

Kategorien
Inspiration Showcases

100 schöne iPhone Wallpaper

Nur wenige Produkte haben je eine solche Euphorie ausgelöst wie das iPhone. Sein Design und der große Multi-Touch-Bildschirm sind einfach unwiderstehlich. Obwohl die Oberfläche schön gestaltet ist vermissen viele Besitzer individuellen Stil und einen Ausdruck der eigenen Persönlichkeit. Spätestens jetzt wird es Zeit für ein neues Wallpaper!

Wir präsentieren Ihnen die 100 schönsten iPhone Wallpaper von einigen der besten und kreativsten Künstler. Diese Wallpaper haben eine Auflösung von 320 × 480 Pixel und sind auch auf dem iPod Touch benutzbar. Die Motive sind Typografie, Natur, Retro Illustrationen und Grafiken, Apple, Abstraktes und Weltraum. Alle Abbildungen sind anklickbar und führen zur Originalquelle.

Typografische iPhone Wallpaper

TypeNuts iPhone Wallpapers

iPhone wallpaper iPhone wallpaper
iPhone wallpaper iPhone wallpaper

ILoveTypography iPhone Wallpapers

iPhone wallpaper iPhone wallpaper

Tylor J. Reimer’s iPhone Wallpapers

iPhone wallpaper iPhone wallpaper

Poolga iPhone Wallpapers

iPhone wallpaper iPhone wallpaper

‘We Made This’ iPhone Wallpapers
Serien von Alistair Hall und James White.

iPhone wallpaper iPhone wallpaper

Veer iPhone Wallpapers

iPhone wallpaper iPhone wallpaper
iPhone wallpaper iPhone wallpaper
iPhone wallpaper iPhone wallpaper

Various typographic iPhone wallpapers:

iPhone wallpaper iPhone wallpaper
iPhone wallpaper iPhone wallpaper

Natur

AlliPhoneWallpapers

iPhone wallpaper iPhone wallpaper
iPhone wallpaper iPhone wallpaper iPhone wallpaper iPhone wallpaper

Interface Lift iPhone Wallpapers
Derzeit über 400 Wallpaper. Auflösung 320×480 – kostenloser Download.

iPhone wallpaper iPhone wallpaper
iPhone wallpaper iPhone wallpaper
iPhone wallpaper iPhone wallpaper

Interface Lift iPhone Wallpapers

iPhone wallpaper iPhone wallpaper
iPhone wallpaper iPhone wallpaper
iPhone wallpaper iPhone wallpaper
iPhone wallpaper iPhone wallpaper

Retro and Vintage

Cosmic Retro iPhone Wallpapers
iPhone Wallpaper von James White.

iPhone wallpaper iPhone wallpaper

iPhone iTouch Wallpaper Pack
By GabO-GarabO.

iPhone wallpaper iPhone wallpaper
iPhone wallpaper iPhone wallpaper

Airbag iPhone Wallpapers
Gestaltet von Greg Storey.

iPhone wallpaper iPhone wallpaper
iPhone wallpaper iPhone wallpaper

The Antidote iPhone Wallpapers

iPhone wallpaper iPhone wallpaper

Poolga iPhone Wallpapers

iPhone wallpaper iPhone wallpaper
iPhone wallpaper iPhone wallpaper
iPhone wallpaper iPhone wallpaper

Illustrationen und Kunst

Duoh iPhone Wallpapers

iPhone wallpaper iPhone wallpaper

LOV-E iPhone Wallpapers

iPhone wallpaper iPhone wallpaper

Camilo Bejarano’s iPhone Wallpapers

iPhone wallpaper iPhone wallpaper

l’Amour iPhone Wallpapers

iPhone wallpaper iPhone wallpaper

CMYK Lovers

iPhone wallpaper iPhone wallpaper

Glennz iPhone Wallpaperse

iPhone wallpaper iPhone wallpaper
iPhone wallpaper iPhone wallpaper
iPhone wallpaper iPhone wallpaper

Painting

iPhone wallpaper iPhone wallpaper
iPhone wallpaper iPhone wallpaper

Coffee iPhone Wallpapers

iPhone wallpaper iPhone wallpaper

Vladstudio iPhone Wallpapers

iPhone wallpaper iPhone wallpaper
iPhone wallpaper iPhone wallpaper

Smart iPhone Wallpapers

iPhone wallpaper iPhone wallpaper

Pedro Dale’s Collection

iPhone wallpaper iPhone wallpaper
iPhone wallpaper iPhone wallpaper

Pixelgirl iPhone Wallpapers

iPhone wallpaper iPhone wallpaper
iPhone wallpaper iPhone wallpaper

Iconfactory iPhone Wallpapers

iPhone wallpaper iPhone wallpaper

Various illustrations and artwork for iPhone:

iPhone wallpaper iPhone wallpaper iPhone wallpaper iPhone wallpaper
iPhone wallpaper iPhone wallpaper

Piktorama iPhone Wallpapers

iPhone wallpaper iPhone wallpaper

Target iPhone Wallpaper

iPhone wallpaper iPhone wallpaper

Apple iPhone Wallpaper

iPhone wallpaper iPhone wallpaper
iPhone wallpaper iPhone wallpaper
iPhone wallpaper iPhone wallpaper

Abstraktes

Sarah France’s iPhone Wallpapers

iPhone wallpaper iPhone wallpaper

iPhone Wallpapers Storytellin

iPhone wallpaper iPhone wallpaper
iPhone wallpaper iPhone wallpaper

Abstract Waves iPhone Pack

iPhone wallpaper iPhone wallpaper`

Fractal Wallpapers iPhone Pack

iPhone wallpaper iPhone wallpaper

Abstract iPhone Wallpapers

iPhone wallpaper iPhone wallpaper

Kosmos und Weltraum

iPhone wallpaper iPhone wallpaper
iPhone wallpaper iPhone wallpaper
iPhone wallpaper iPhone wallpaper
iPhone wallpaper iPhone wallpaper
iPhone wallpaper iPhone wallpaper

Space iPhone Wallpapers

iPhone wallpaper iPhone wallpaper

Cult

iPhone wallpaper iPhone wallpaper
iPhone wallpaper iPhone wallpaper

Weitere Quellen und Sammlungen

Dieser Beitrag erschien auf Englisch im Smashing Magazine. Mit freundlicher Genehmigung.

Kategorien
Webdesign

Formulardesign-Strukturen – Teil 2: Registrierungsformulare

Letzte Woche haben wir den ersten Teil unserer Formulardesign-Bestandsaufnahme veröffentlicht. Das Hauptanliegen der Bestandsaufnahme ist, Designern und Entwicklern ein Gefühl dafür zu geben, wie effektive Web-Formulare gestaltet werden. Wir haben dazu auch einige Richtlinien ausgearbeitet, wie benutzerfreundliche Web-Formulare gestaltet werden können.

Im ersten Teil haben wir uns jedes Registrierungsformular der ausgewählten Websites angesehen und analysiert, wie sie aufgebaut sind. Nun folgen die Ergebnisse des zweiten Teils unserer Bestandsaufnahme von 100 beliebten Websites, bei denen Web-Formulare eine wichtige Rolle spielen (sollten). Beachten Sie bitte, dass wir hier keine Checkout-Formulare betrachtet haben.

3. Funktionen der Formulare

Im ersten Teil unserer Bestandsaufnahme haben wir uns auf die Platzierung der Links zu den Registrierungsformularen, den Registrierungsformularen selbst und auf das visuelle Erscheinungsbild der Formulare konzentriert. Mag ein Formular aber noch so schön gestaltet sein — wenn es nicht richtig funktioniert, wird die Abschlussquote des Formulars niedrig bleiben. Lassen Sie uns nun die Funktionen von Registrierungsformularen, typische Probleme, Design-Strukturen und Lösungen betrachten.

3.1. Werden Hover-, Active-, Focus-Effekte genutzt?

Anscheinend vermeiden Designer alle möglichen Arten von Ablenkungen und produzieren klare, eindeutige und einfache Web-Formulare, um die Abschlussquoten zu verbessern. Das ist der Hauptgrund dafür, dass bei der Registrierung visuelle Effekte nur moderat eingesetzt werden, wenn überhaupt.

Screenshot

  • 84% der betrachteten Web-Formulare haben keine Hover-, Active- oder Focus-Effekte.
  • 16% verwendeten Hover-Effekte nur sehr subtil.

3.2. Hilfe, Unterstützung, Tooltips: statisch oder dynamisch?

Manchmal ist die Feldbeschreibung, der Name eines Eingabefeldes, nicht ausführlich genug. Allerdings müssen die Nutzer verstehen, welche Daten sie eingeben sollen. Welche Zeichen sind im Benutzernamen erlaubt? Wie viele Zeichen sollte ein Kennwort haben? Ist die angegebene E-Mail-Adresse für den Login zu verwenden?

Hinweise und Tooltipps bieten Hilfestellung beim Ausfüllen des Formulars. Es gibt nichts nervigeres als ein Eingabefeld, das eine Eingabe nicht akzeptiert, obwohl sie völlig korrekt erscheint. Um das zu vermeiden, geben Designer (meistens) klare Hinweise.

Screenshot

57% der betrachteten Websites boten “statische” Hilfe an. Diese Hilfen sollen erklären, welche Eingaben vom Benutzer erwartet werden und sind gut sichtbar neben dem Eingabefeld platziert. 10% boten bei Bedarf Tooltipps an, normalerweise nach einem Klick auf ein Hilfe-Symbol oder wenn der Nutzer Eingaben in einem Feld gemacht hat.

3.3. Hilfe, Erklärungen, Tooltipps: wo sind sie zu finden?

Es ist aber nicht nur wichtig, Nutzern Hilfe anzubieten. Hilfe muss auch einfach zu finden und verständlich sein. Es ist wichtig sicherzustellen, dass Hilfe zu einem bestimmten Eingabefeld auch vom Nutzer richtig zugeordnet wird. Um das zu erreichen, muss man wissen, wo Nutzer diese Hilfe erwarten. Wo also werden Eingabetipps und -hilfen in einem Web-Formular normalerweise platziert?

Screenshot

Wenn Eingabetipps und -hilfen erscheinen, sind sie

  • unter dem Eingabefeld (57%),
  • rechts vom Eingabefeld (26%),
  • über dem Eingabefeld (13%) oder
  • links vom Eingabefeld (4%)

zu finden.

Man kann einen starken Trend zu über dem Eingabefeld platzierten Hinweisen erkennen. Normalerweise sind diese Hinweise in einer leichteren Farbe geschrieben, verglichen mit normalem Text.

3.4. Eingabeüberprüfung: statisch oder Ajax?

Obwohl Ajax in den letzten Jahren Websites scheinbar regelrecht überflutet hat, konnte es bei beliebten Web-Services bislang keine kritische Masse erreichen. Überraschenderweise konnten wir keinen Trend zu Ajax feststellen. Die “klassische” Validierung, welche die Eingaben nach dem Abschicken überprüft, ist beliebter als die Echtzeitvalidierung mit Javascript.

Unsere Ergebnisse

  • 30% der Formulare zeigen nur eine Fehlermeldung über dem Formular an. Eingabefelder wurden nicht hervorgehoben.
  • 29% der Formulare heben Eingabefelder mit daneben stehenden Fehlermeldungen hervor. Über dem Formular wurden keine Fehlermeldungen angezeigt.
  • 25% zeigen sowohl Fehlermeldungen als auch Eingabefelder an.
  • 22% verwendeten Echtzeitvalidierung mit Ajax,
  • 14% verwendeten JavaScript-Fehlermeldungen.
  • 1% verwendeten eine System-Meldung mit einem “Zurück-Link”.

3.5. Gestaltung der Fehlermeldungen

Wie Sie sehen, haben wir sechs verschiedene Arten der Eingabevalidierung gefunden. Es ist bemerkenswert, dass 14% der Formulare Fehlermeldungen noch immer mit Javascript-Fehlerfenster anzeigen, beispielsweise YouSendIt, Mail.ru, Newsvine, Clipmarks, Yandex (siehe folgenden Screenshot). Nur 22% haben eine zumindest teilweise mit Ajax realisierte Validierung, meist um zu prüfen, ob ein Benutzername noch verfügbar ist. Ebenfalls bemerkenswert ist, dass nicht eine einzige Website keine Eingabevalidierung hatte.

Screenshot
Newsvine verwendet Javascript, um Fehlermeldungen anzuzeigen.

Designer tendieren dazu, Fehlermeldungen nach dem Abschicken des Formulars anzuzeigen, oder falsch ausgefüllte Eingabefelder visuell zu kennzeichnen. Im ersten Fall werden Fehlermeldungen üblicherweise als Liste über dem Formular angezeigt. Im zweiten Fall wird normalerweise das Eingabefeld und dessen Feldname meist rot umrandet.

Manchmal kombinieren Designer beide Techniken und zeigen sowohl Fehlermeldungen über dem Formular als auch Eingabefeld-Hervorhebungen an, wie beispielsweise beim Registrierungsfomrular von Ning (siehe folgenden Screenshot).

Screenshot

Normalerweise wird Rot verwendet, um Fehler hervorzuheben. Allerdings ist das nicht immer so. Tickspot, Mixx.com und Furl verwenden Gelb, um Probleme beim Ausfüllen des Formulars zu kennzeichnen.

Wenn überhaupt eine Farbe für eine erfolgreiche Registrierung verwendet wird, dann ist es Grün. Das war bei 97% der Websites der Fall, die dafür eine Farbe verwenden.

Screenshot

3.6. Muss die E-Mail-Adresse wiederholt werden?

Nur in 18% der Fälle war es notwendig, die E-Mail-Adresse zu wiederholen (Odeo, Ning). Ehrlich gesagt sehen wir keinen logischen Grund dafür. Die Nutzer sehen schließlich, was sie eingeben und nicht nur Sterne wie beim Kennwort.

Screenshot

3.7. Muss das Kennwort wiederholt werden?

Es klingt vernünftig, die Nutzer das Kennwort wiederholen zu lassen, schließlich sieht man ja nur Sterne und nicht das, was man eingegeben hat. Allerdings haben sich viele Designer dafür entschieden, die Kennwort-Wiederholung wegzulassen, um die Registrierung zu beschleunigen.

Screenshot

In 72% der Fälle war es notwendig, das Kennwort zu wiederholen. Viele große Websites wie Facebook, Friendster, LinkedIn, Stumbleupon, Pownce und Twitter verlangen keine Wiederholung

3.8. Wird ein Captcha verwendet?

Viele Nutzer wären sicherlich froh, gäbe es keine Captchas. Tatsächlich sind sie notwendig, um Spambots davon abzuhalten, automatisch zahlreiche Benutzerkonten anzulegen, die man später aus der Datenbank herausfiltern müsste.

Unseren Ergebnissen zufolge

  • verwenden 52% der Websites kein Captcha und
  • in 39% der Fälle war es möglich, das Captcha unabhängig vom Formular neu zu laden.

Allerdings konnten wir bei Captchas keinen Trend feststellen. Wenn Sie Captchas nutzen, stellen Sie bitte sicher, dass Captchas entweder einfach zu lesen oder neu geladen werden können. Einige Websites bieten keine Möglichkeit, das Captcha neu zu laden. Digg, AOL, Slashdot, Google und Last.fm bieten Nutzern die Möglichkeit, das Captcha zu hören, falls es für sie zu schwer zu entziffern sein sollte.

3.9. Wird ein Abbrechen-Button angeboten?

Während wir uns Gedanken über die Designprobleme bei Web-Formularen gemacht hatten, haben nicht damit gerechnet, auf Abbrechen-Buttons zu stoßen. Eigentlich ergibt es keinen Sinn, wenn der Nutzer nach all seinen Eingaben auf diesen Knopf drückt. Doch damit lagen wir teilweise falsch.

Einen Abbrechen-Button gab es nur bei 8% der betrachteten Registrierungsformulare.. In einigen Fällen erschien der Knopf direkt nach den Geschäftsbedingungen wie bei Zoho Writer. Nutzer müssen den Geschäftsbedingungen nicht zustimmen und können den Registrierungsvorgang so abbrechen. Auf der anderen Seite zeigen einige Websites vor dem Registrierungsformular eine Tarifübersicht an, beispielsweise Crazyegg. Falls Nutzer sich für einen anderen Tarif entscheiden, können sie mit dem Abbrechen-Knopf zurück gehen und einen anderen wählen.

Screenshot

Abgesehen davon verstehen wir allerdings nicht, warum es auf Dzone auf der linken Seite des Registrierungsformulars einen Abbrechen-Button.

Wenn es einen Abbrechen-Knopf gibt, ist er rechts vom Absenden-Knopf platziert (4%). Bei den betrachteten Websites gab es keinen großen optischen Unterschied zwischen Absenden- und Abbrechen-Buttons. Die Buttons waren nebeneinander platziert. Vom Standpunkt der Benutzerfreundlichkeit betrachtet wäre es sinnvoll, zwischen Haupt- und Sekundärfunktionen zu unterscheiden und sie räumlich voneinander deutlich zu trennen.

3.10. Ausrichtung des Absenden-Buttons

Abhängig vom Formular-Layout ergäbe es Sinn, den Absenden-Button, links, rechts oder in der Mitte des Layouts zu platzieren. Designer scheinen eine besondere Vorliebe für linksbündig ausgerichtete Absenden-Buttons zu haben (56%), gefolgt von zentrierten Buttoins (26%).

Screenshot

Rechtsbündig platzierte Buttons sind weiterin beliebt (17%). Allerdings machen die meisten Designer das, um zu zeigen, dass es einen weiteren Schritt im Registrierungsprozess gibt. In den meisten Fällen sind sie mit “Fortfahren” oder “Weiter” beschriftet (engl. “Continue”, “Next”). Der Grund: In Desktop-Anwendungen ist der “Weiter”-Button ebenfalls rechtsbündig angeordnet.

3.11. Danke-Nachricht

Noch vor ein paar Jahren zeigten die meisten Websites eine einfach gehaltene Danke-Meldung nach einer erfolgreichen Registrierung, üblicherweise mit einem Link zur Login-Seite. Heute werden die Nutzer nach einer Registrierung motiviert, die Website sofort weiter zu erkunden.

  • 45% der Formulare fragen gerade registrierte Nutzer, mit der Angabe weiterer Informationen fortzufahren, Freund im Netz zu finden, die Website weiterzuempfehlen oder das Profil zu vervollständigen.
  • 33% der Formulare zeigten “Interessante Orte” und Funktionen in einem motivierenden, freundlichen Ton.
  • 4% zeigten eine einfache “Danke”-Nachricht.
  • 2% hatten eine Weiterleitung zur Homepage.

Weitere Erkenntnisse

  • Mit Ausnahme von Habrahabr wurde der Tab-Index in 99% aller Fälle korrekt verwendet.
  • 24% der Formulare sprachen Nutzer in Konversations-Stil an. In diesem Kontext sind Phrasen wie “Wie lautet Dein Name?”, “Deine E-Mail-Adresse bitte” oder “Ich möchte…” üblich.
  • 38% der Websites bevorzugen formale geschäftliche Ansprache, um Nutzer nach Informationen zu fragen, beispielsweise mit “Ihr Name” , “Kennwort wiederholen” usw.),
  • 38% der Websites verwenden eine technische Ansprache. Hier werden Nutzer nach “Login”, “Benutzerkennwort” und “Ort” usw. gefragt.

Fazit

Lassen Sie uns mit einem kurzen Ergebnisüberblick abschließen. Beachten Sie bitte, dass wir nur Registrierungsformulare berücksichtigt haben.

  • Registrierungsformular haben keine Hover, Active- oder Focus-Effekte (84%),
  • Tipps und Hinweise sind entweder statisch (57%) oder dynamisch (33%) und erscheinen unter (57%) oder rechts vom Eingabefeld (26%),
  • Statische Eingabevalidierung ist so beliebt wie dynamische, aber es gibt keinen Trend zu Ajax.
  • E-Mail-Adressen müssen nicht wiederholt werden (82%).
  • Kennwörter müssen wiederholt werden (72%).
  • Captchas können verwendet oder nicht verwendet werden (48% zu 52%).
  • Abbrechen-Button wird nicht verwendet (92%).
  • Der Absenden-Button ist linksbündig (56%) oder zentriert (26%).
  • Ein “Danke schön” nach dem Absenden des Formulars motiviert die Nutzer, den Dienst weiter zu erkunden (45%).

Von Vitaly Friedman, Übersetzung von René Schmidt; mit Genehmigung von Smashing Magazine

Kategorien
Webdesign

Alles nur geklaut. Wie findet man Plagiate im Netz?

Ein Problem, das so alt wie das Web selbst ist, gute Inhalte werden gerne kopiert, interessante Konzepte werden gerne nachgeahmt und Duplikate werden nur selten gefunden und ausgemerzt. Wer seine Gedanken im Web veröffentlicht (und etwa via RSS verbreitet), muss im Hinterkopf behalten, dass er nicht nur von gut gesinnten Lesern entdeckt und gelesen werden kann. Auch manch ein abgebrühter  Geschäftemacher kann auf der Suche nach ausbeutungswürdigen Quellen darauf stoßen. Und diesen schlicht und einfach als Contentfutter für den eigenen Seitenauftritt nutzen, ohne dabei den Autor um eine Erlaubnis zu bitten oder wenigstens auf den Autor zu verweisen. Schließlich kann man der Seite dadurch mit wenigen Clicks mehr Substanz und Professionalität verschaffen und gesucht wird nach Duplikaten eher selten.

Copyright

Schon bei der Veröffentlichung eines Beitrages haben Sie das exklusive Urheberrecht auf den Beitrag. Um dies noch deutlicher zu machen, nutzen viele Sites das ©, das „copyright“-Zeichen. Auch in Deutschland, obwohl es hier gar kein Copyright gibt. Hier gilt das Urheberrecht. Bildquelle.

Warum sollten Sie auf das Plagiat achten?

Sie wissen nie, auf welchen Seiten Ihre Inhalte auftreten können. In vielen Fällen werden es Spam-Sites sein, die RSS-Feeds ausnutzen, um fremde Inhalte regelmäßig in Tausenden von Spamblogs zu veröffentlichen. Der Zweck der ganzen Geschichte: Google-Traffic anlocken, um mehr Pageviews und mehr Werbeanzeigen einblenden zu können und dadurch Werbeprovisionen zu kassieren. Enthalten solche Seiten einen Backlink zur Quelle des Beitrages, kann auch der Originalbeitrag plötzlich „in eine schlechte Nachbarschaft“ geraten, mit Linkfarms, Spamseiten und Seiten mit illegalen Inhalten — vorausgesetzt die Spamseite ist nicht bereits aus dem Index ausgeschlossen. Dies kann unter Umständen das Ranking des Originalbeitrags in Google beeinflussen oder gar zum Ausschluss einer ganz harmlosen Seite aus dem Index führen. Das kann natürlich nicht im Sinne eines wohlwollenden Blog-Betreibers sein.

Was bei „klassischem“ Plagiat (Inhalte werden in einem Einzelfall manuell kopiert und eingefügt) für die meisten Suchmaschinen relativ unwichtig ist (sie sind schlau genug, um Originale von Nachahmern zu unterscheiden), ist für Autoren, Journalisten und Blogger eine wichtige Angelegenheit. Denn nicht jeder mag seine Inhalte in merkwürdiger Form zusammen mit recht kreativen Werbeanzeigen sehen. Doch auch für Seitenbetreiber ist es sinnvoll, potenziellen Rechtstreiteren so früh wie möglich vorzubeugen. Etwa damit es nicht peinlich wird, wenn eine bodenständige Internet-Präsenz plötzlich aus dem Google Index entfernt wird, weil ein Mitarbeiter sich fleißig den Texten anderer Web-Auftritte bedient hat.

Kann man sich gegen Plagiat schützen?

Nur bedingt. Wenn Sie einen Beitrag im Web frei veröffentlichen, machen sie ihn automatisch zugänglich für alle — es sei denn, Sie sorgen explizit dafür, dass der Beitrag von Suchmaschinen nicht indiziert wird, und zwar mit einer entsprechenden robots.txt-Datei. Der Urheber von Bildern und anderen Multimedia-Dateien kann durch eingefügte Wasserzeichen eindeutig gekennzeichnet werden. Leider schützt dies nicht gleichzeitig von ungewünschten Kopien Ihrer Dateien (falls diese im Web frei verfügbar sind). Bei Multimedia-Dateien ist das Umgehen mit Plagiat besonders schwierig und mühselig, da die Suche nach solchen Duplikation mit einschlägigen Suchmaschinen beinahe unmöglich ist. Für Urheber ist der Umgang mit illegalen Kopien von Texten deutlich einfacher zu handhaben.

Wie kann man gegen Plagiat effektiv vorgehen?

Dies hängt natürlich vom guten Willen des Betreibers der Site, auf der Sie ein Plagiat entdeckt haben. Häufig reicht etwa eine strenge E-Mail an den Seitenbetreiber vollständig aus, damit ein kopierter Beitrag entfernt wird. Alternativ liefert häufig eine Benachrichtigung des Hosting-Providers der fragwürdigen Seite Abhilfe bereit. Im schlimmsten Fall kann man sich an Google wenden und die Entfernung der Duplikat-Seite aus dem Index beantragen (das entsprechende Online-Formular findet man bei Google unter Digital Millennium Copyright Act Takedown Request). Bei der Bearbeitung der Anfragen nimmt sich Google Zeit, genauso wie bei der Wiederaufnahme einer gesperrten Seite in den Index.

DMCA
Gegen Plagiat kann man effektiv vorgehen. Etwa indem man die Entfernung der Duplikat-Seite aus dem Google Index beantragt. Das entsprechende Formular findet man unter Digital Millennium Copyright Act Takedown Request bei Google.

Doch bevor das Plagiat gemeldet wird, muss ein Duplikat zuerst gefunden werden. Dafür gibt es eine Reihe Online-Tools, die Sie nutzen können, um etwa Quellen von Duplikaten zu unterscheiden oder sicherstellen, dass ein vorliegendes Dokument in der Tat authentisch ist. Beachten Sie, dass sie meistens keine perfekten Ergebnisse liefern. Es lohnt sich immer, das Original mit der Kopie sorgfältig zu vergleichen, bevor man zeit- oder auch kostenintensive Maßnahmen dagegen ergreift.

Online-Tools

  • Copyscape
    Dieses Tools nutzt Google API, um nach Duplikaten einer Web-Seite zu suchen. Die kostenlose Version schränkt sich auf die ersten 10 Ergebnisse ein, der Rest ist nur für Premium-Nutzer verfügbar ($0.05 pro Suche). In den Suchschlitz kann nur die URL-Adresse der Originalseite eingefügt werden.
    Copyscape
  • .htaccess Hotlink Protection
    Dieser Beitrag erklärt, wie man sich gegen Hotlinking der Bilder schützt, damit externe Seiten die Bandbreite Ihres Servers nicht ausnutzen können. Alternative Lösung mit PHP. Außerdem können Sie mit coldlink anti-hotlinking testing tool testen, ob andere Seitenbetreiber Bilder von Ihrem Server laden können.
  • Bad Behavior
    Ein Plugin für WordPress und MediaWiki, mit dem automatisches Kopieren von veröffentlichten Inhalten erschwert wird. Kann das Plugin einen RSS-Leser als SpamBot identifizieren, erhält er keine Benachrichtigungen über neue Beiträge auf Ihrer Seite.
  • Google Alerts
    Um nicht permanent nach Duplikaten suchen zu müssen, können Sie einen Google Alert erstellen, der Sie regelmäßig über neue Kopien Ihrer Arbeit per E-Mail informieren wird. Dabei geben Sie einige Begriffe oder Sätze ein, die Ihr Werk eindeutig identifizieren – um den Rest kümmert sich Google Alerts selbst.
    Google Alerts
  • ©Feed WordPress Plugin
    Dieses Plugin fügt einen digitalen Fingerpint dem RSS-Feed hinzu und kann dies nutzen, um nach Duplikaten in anderen Feeds und Seiten zu verfolgen. Fragwürdige Seiten präsentiert das Tool direkt in der WordPress-Engine. Alternative: Digital Fingerprint Plugin (lässt sich mit Google Alerts kombinieren).
  • PlagiarismDetect.com
    Dieses kostenloses Werkzeug führt eine sorgfältige Analyse der eingefügten Texte aus und präsentiert Ergebnisse in einer detaillierten Übersicht. Um den Dienst nutzen zu können, ist eine Registrierung erforderlich. Der Dienst wurde für Studenten entwickelt, leistet jedoch auch für Webworker eine gute Arbeit.
  • The Plagiarism Checker
    Dieses Tool der Universität des Maryland vergleicht Ausarbeitungen von Studenten und Schülern mit anderen Essays und Hausarbeiten, die in der Datenbank des Systems vorliegen. Es reicht, den Inhalt einer fragwürdigen Arbeit einzufügen, das System liefert eine Liste mit möglichen Quellen als Ergebnis zurück.
    Plagiarism Checker
  • Doc Cop
    Mit diesem Online-Dienst können Sie bis zu 8 PDF- oder DOC-Dokumenten kostenlos miteinander vergleichen und feststellen, ob eines davon die Kopie des anderen ist. Auch der Vergleich eines Dokuments mit verfügbaren Materialen im Web ist möglich. Die Ergebnisse des Vergleich sind ausführlicher als bei anderen Tools — nicht verwunderlich, dass die Bearbeitung eines Dokuments 20-30 Minuten Zeit benötigt. In der kostenlosen Version können nur Textauszüge mit bis zu 50 Wörter analysiert werden. Eine kostenlose Registrierung ist erforderlich.
  • PlagiarismChecker.com
    Dieser Dienst kann Kopien eines Textauszugs mittels Google und Yahoo aufspüren sowie nach Duplikaten einer Webseite suchen. Mit dem Tool können Sie automatisch Google Alerts erstellen und über neue Kopien per E-Mail benachrichtigt werden.
  • Plagiarism.org
    Ein Portal zum Thema Copyright mit zahlreichen Informationen, Hinweisen, Ressourcen und weiterführenden Links zum Thema.
    Plagiarism.org
  • 20 Best Free Anti-Plagiarism Tools
    Eine Übersicht von nützlichen Werkzeugen und Ressourcen zum Thema. ™
Kategorien
Webdesign

Formulardesign-Strukturen – Teil 1: Registrierungsformulare

Wenn Sie den Erlös Ihrer Dienstleistungen maximieren wollen, müssen Sie die Abschlusshäufigkeit Ihrer Web-Formulare erhöhen. Solange Sie Besucher nicht mit einer revolutionären Idee auf der Stelle zu Kunden machen, wird es nicht reichen, einfach nur eine Registrierungsmöglichkeit anzubieten. Damit der Dienst maximal ausgelastet wird, sollten wir, die Designer, den Nutzern eine positive Erfahrung bieten. Wir müssen sie einladen und beschreiben, wie der Dienst funktioniert und erklären, warum sie das Formular ausfüllen sollten und deutlich machen, welche Vorteile sie dadurch haben. Und natürlich sollten wir es ihnen so einfach wie möglich machen.

Allerdings ist es nicht einfach, effektive Web-Formulare zu gestalten. Dafür gibt es einen einfachen Grund: Niemand füllt gerne Formulare aus, weder offline noch online. Als Designer sollten wir daher herausfinden, wie man Formulare macht, die einfach, schnell und intuitiv ausgefüllt werden können.

Aber wie genau finden wir heraus, wie das gemacht wird? Wohin im Layout gehört der Link zum Formular? Wie sollten wir das Formular gestalten? Wie sollten wir die Feld-Labels hevorheben und wie sollten sie ausgerichtet sein? Wie sehen Web-Formular-Design-Strukturen auf modernen Websites aus? Dies waren exakt die Fragen, die wir uns stellten. Um die Antworten darauf zu finden, haben wir eine Bestandsaufnahme gemacht. Unten zeigen wir nun die Ergebnisse unserer Bestandsaufnahme von 100 beliebten Websites, auf denen Web-Formulare eine Rolle spielen. Wir beginnen mit Registrierungsformularen, danach folgen die Ergebnisse. Der zweite Teil der Bestandsaufnahme folgt nächste Woche.

Bestandsaufnahme der Registrierungsformulare

Das Hauptanliegen der Bestandsaufnahme ist, Designern und Entwicklern ein Gefühl dafür zu geben, wie effektive Web-Formulare gestaltet werden. Auch wollen wir einige Leitsätze formulieren, die dabei helfen. Wir haben 100 große Websites ausgewählt, auf denen Web-Formulare wichtig sind. Für die Auswahl haben wir Technorati, Alexa, die ersten Treffer in Suchergebnissen und verschiedene Charts genutzt. Die Beliebtheit der ausgewählten Websites haben wir als Indikator verwendet. Insbesondere Registrierungsformulare sind für Social Networks essentiell.

Bei diesen Websites werden Registrierungsformulare daher eine hohe Priorität haben, deshalb haben wir viele Social Networking-Sites ausgewählt. Jedes Formular haben wir mit der Adresse eines speziellen E-Mail-Kontos und einem speziellen Benutzernamen ausgefüllt. Um die Betrachtung so aussagekräftig wie möglich zu machen, haben wir 29 verschiedene Design-Probleme und Fragen formuliert, welche beim Gestalten von Web-Formularen auftauchen können. Diese haben wir in Kategorien eingeordnet und versucht, Ähnlichkeiten der Design-Entscheidungen und Design-Ideen zu finden. Wir werden nicht nur positive, sondern auch negative Aspekte ansprechen. Wir betrachten nur Registrierungsformulare. Andere wichtige Formulare wie beispielsweise Checkout-Forms, behandeln wir separat.

1. Platzierung der Formulare

1.1. Wie ist der Link zum Registrierungsformluar benannt?

Nutzer wissen, dass sie sich Registrieren oder Anmelden sollen (engl. Sign-up, Register, Join), um Mitglied zu werden oder ein Benutzerkonto zu erstellen. Daher suchen Sie nach diesen Begriffen, um mitmachen zu können. Nutzer erwarten hinter diesen Links ein Registrierungsformular. Die Erwartung wird leider nicht immer erfüllt.

Web-Formular Design Patterns

Der beliebteste Link-Titel war “Sign up” (40%), gefolgt von “Join” (18%), “Register” (18%) und “Create account” (17%). Auf große, laute und leuchtende “Start here”-Buttons, wie sie in den letzten Jahren oft zu sehen waren, sind wir nicht so häufig gestoßen. Offensichtlich wollen Designer Information und Funktionen inzwischen mehr als das Design hervorheben.

1.2. Wo ist der Link zum Registrierungsformular platziert?

Wenn Nutzer eine Website zum ersten Mal besuchen, schauen sie zunächst, welche Layout-Blöcke es gibt und was in ihnen steht. Augenbewegungen führen über die ganze Seite. Die Nutzer versuchen herauszufinden, welche Bereiche wichtig sind und wo die gesuchten Inhalten zu finden sein könnten. Um die Erwartungen der Nutzer zu erfüllen, müssen Designer intuitiv vorausahnen, was notwendig ist, damit sich die Nutzer registrieren und den Dienst nutzen. Wenn die Nutzer den Link zum Registrierungsformular nicht finden, registrieren sie sich nicht für Ihre Dienstleistung. Daher ist es ausschlaggebend, den Link deutlich sichtbar zu platzieren. Wo sollten Designer den Registrierungslink am besten platzieren? Gemäß unserer Bestandsaufnahme sollte der Registrierungslink

  • im Kopfbereich platziert sein. Das war bei 59% der Websites der Fall. Bei 76% von denen war er oben rechts platziert.
  • eine hervorstehende Position einnehmen. Bei 21% der Websites war der Link oder das Formular auf der Homepage platziert.
  • hinter einem “Login”-Link versteckt sein. 9% der betrachteten Websites machten das so, beispielsweise Craigslist.

Nicht überraschend ist die Tatsache, dass der Registrierungslink selten in der Seitenleiste platziert war. (7% – Propeller, Xing). Allerdings bieten 4% der Websites den Dienst direkt an und verlangen nur eine Registrierung, wenn das für das Speichern von Einstellungen notwendig ist.

2. Design der Formulare

2.1. Ist das Layout des Registrierungsformulars vereinfacht?

Da der Nutzer nun auf den Registrierungslink geklickt hat, wird er sich für den von Ihnen angebotenen Dienst registrieren wollen. Wichtiger ist jedoch, dass er den Link nicht angeklickt hat, um weitere Navigationsoptionen oder attraktive Werbeangebote zu prüfen. Konsequenterweise tendieren Designer dazu alle unnötigen Details und Ablenkungen zu entfernen, die dem Nutzer nicht dabei helfen, das Formular auszufüllen. Oft wird nur ein Logo und das Formular selbst präsentiert, ohne Navigation oder weitere Informationen. Die Idee: der Nutzer muss sich auf das Ausfüllen des Formulars konzentrieren. Jede Ablenkung steht dem im Weg um muss daher entfernt werden. Web-Formular Design Patterns

Weil Nutzer das wollen, was auf der anderen Seite des Formulars liegt, muss das Ausfüllen der Formulare so offensichtlich und einfach wie möglich sein. Daher verwenden Designer oft “vereinfachte” Layouts für Registrierungsformulare. Nach unserer Bestandsaufname verwenden 61% der Websites vereinfachte Layouts, beispielsweise MovableType, Livejournal, Amazon, Yandex.ru.

Web-Formular Design Patterns

Schauen Sie sich das Registrierungsformlar auf Yahoo an. Besucher bekommen nur das Formular zu sehen, das notwendig ist, um ein Benutzerkonto einzurichten. Sonst ist da nichts und daher gibt es auch keine Ablenkungen. Beachten Sie, dass Benutzer direkt und persönlich angesprochen werden. Das ist ansprechend und benutzerfreundlich.

Web-Formular Design Patterns

Web-Formular Design Patterns

Flixster ist wahrscheinlich unser bestes Beispiel für ein überladenes Formular, welches die Bedürfnisse der Besucher nicht berücksichtigt. Das Registrierungsformular bietet jede mögliche Navigationsoption an. Die Login-Seite zeigt auffallende Werbung direkt neben dem Login-Formular an. Das ist nicht benutzerfreundlich. Das zweite überfrachtete Formular das wir entdecken konnten ist Photobucket.

2.2. Werden Zusatzinformationen angeboten?

Viele Designer versuchen Benutzer mit Zusatzinformationen wie “Hilfe”, Hinweise zu Pflichtfeldern oder sogar mit Copyright-Hinweisen zu ermuntern, das Formular auszufüllen. Das variiert von Website zu Website. In den meisten Fällen werden die Vorteile einer Registrierung neben dem Formular angezeigt.

  • 41% der Formulare zeigen die Vorteile der Registrierung neben dem Formular an (MySpace, Del.icio.us, Last.fm, LinkedIn, Digg, Mister Wong, Break.com)
  • 28% der Websites zeigen keine weiteren Informationen auf der Seite mit dem Registrierungsformular an. Nur das Registrierungsformular wird angezeigt (Pownce, DeviantArt, Dailymotion)
  • 11% informieren die Besucher darüber, wie lange es dauert, das Formular auszufüllen. (Threadless, Newsvine, WordPress)

Nur einige Websites erwähnen schon zu Anfang, welche Informationen für eine Registrierung notwendig sind (6%), welche Schritte folgen (8%) oder bieten Warnungen, Hinweise usw. an (6%, zum Beipsiel 37signals, Bloglines).

2.3. Einseitige gegen mehrseitige Formulare

93% der Formulare aus der Bestandsaufnahme haben sich als einseitige Formulare entpuppt. Offenbar versuchen Designer, den Registrierungsprozess so einfach und schmerzlos wie möglich machen. Einige der Websites mit mehrseitigen Formularen versuchen, den Registrierungsprozess mit Einstellmöglichkeiten des Benutzerkontos zu kombinieren. Meebo beispielsweise kombiniert ein Registrierungsformular mit einer vollständigen Registrierung und bietet einen Registrierungs-Wizard in einem Popup-Fenster an. Das Formular besteht aus sechs Seiten, welche den Nutzer von der Einrichtung des Benutzerkontos bis hin zu den Details der Einstellmöglichkeiten führen.

Web-Formular Design Patterns

2.4. Wie sind die Namen der Eingabefelder hervorgehoben?

Bei 62% der Registrierungsformulare waren die Feldnamen der Eingabefelder fett geschrieben, um sie hervorzuheben. Bemerkenswert ist, dass sie auf keiner einzigen Website zu diesem Zweck kursiv geschrieben waren. Um die Feldnamen weiter hervorzugeben, verwendeten 20% der Formulare Farben und 18% Text.

Web-Formular Design PatternsGroße Version

2.5. Ausrichtung der Feldnamen

Entgegen unserer Erwartung haben wir hier einen starken Trend zu einer Ausrichtung feststellen können.

Web-Formular Design Patterns Nach Matteo Penzos Untersuchung zur Feldnamen-Ausrichtung (engl.) (1996) und Luke Wroblewskis Ergebnissen (engl.) (pdf) können nach oben ausgerichtete Feldnamen die Dauer für das Ausfüllen eines Formulars erheblich reduzieren, weil das weniger Augenfixierung erfordert. Wenn Sie das gleiche Ziel erreichen wollen, aber vertikal nicht genug Platz haben, sind rechtsbündige Feldnamen besser. Linksbündige Feldnamen sind besser, wenn die Nutzer die Feldnamen lesen müssen um zu erfahren, was eingetragen werden soll, beispielsweise bei ungewohnten oder komplizierten Eingaben.

2.6. Wie viele Pflichtfelder?

Während der Untersuchung haben wir einen starken Trend festgestellt, nur wenig Pflichtangaben abzufragen.. Vor einigen Jahren fragten Designer die Besucher nach Vorname, Nachname, Adresse, Land und persönlichen Vorlieben. Heute reichen Benutzername, Kennwort und Kennwortbestätigung aus.

Web-Formular Design Patterns

Wir haben herausgefunden, dass 54% aller Formulare Eingaben in fünf Feldern verlangt haben. In 6% der Fälle konnte der Dienst ohne Registrierung genutzt werden. 34% aller Formulare hatten sechs bis acht Eingabefelder, während 12% die Geduld der Nutzer mit über neun Pflichtfeldern strapazierten.

2.7. Wie viele optionale Eingaben?

Ähnlich wie bei den vorangegangenen Ergebnissen kann man hier beobachten, dass die meisten Websites optionale Eingabefelder vermeiden und die Nutzer erst nach dem Registrierungsprozess nach optionalen Angaben fragen. 62% der Formulare hatten überhaupt keine optionalen Felder und 98% hatten Formulare mit weniger als fünf optionalen Felder. Web-Formular Design Patterns

2.8. Eingabefelder horizontal oder vertikal anordnen?

Hier gibt es einen eindeutigen Trend zu vertikal angeordneten Feldern, die einen klaren Weg bis zum Abschicken des Formulars aufzeigen. 86% der Websites haben vertikal angeordnete Eingabefelder. Davon abgesehen sind 15% der Formulare besonders gestaltet, was Nutzer anziehen und ein angenehmes Ambiente beim Ausfüllen des Formulars bieten soll.

Web-Formular Design Patterns

Box.net bietet ein einfaches Registrierungsformular mit vertikal arrangierten Eingabefeldern. Wenn Besucher ihre Eingaben machen, sind deren Augen über die vertikale Achse auf der linken Seite des Eingabefelds fixiert.

Web-Formular Design Patterns

Mint hat ein Registrierungsformular, bei welchem die Eingabefelder waagerecht angeordnet sind. Wenn Besucher Eingaben machen, müssen deren Augen von einem Feld zum anderen springen.

Weitere Erkenntnisse

  • 18% haben ein Registrierungsformular oder einen Link zum Registrierungsformular direkt daneben (z. B. YouTube, Reddit, Digg, Lulu, Metacafe);
  • 78% kennzeichnen Pflichtfelder nicht mit Sternchen. In den meisten Fällen sind Pflichtfelder weder mit Sternchen noch sonstwie gekennzeichnet.
  • 9% verwenden eine Fortschrittsanzeige, um dem Nutzer mitzuteilen, wo sie gerade sind und Wie viele Schritte bis zu einer erfolgreichen Registrierung noch erforderlich sind.
  • 85% der Websites gruppieren Eingabefelder nicht mit <legend> und <fieldset> und bevorzugen ein einfaches Formular mit so wenig Eingabefeldern wie möglich.
  • Eingabefelder werden üblicherweise mit Leerräumen gruppiert (69%), CSS-Ränder („border“) werden genutzt (22%), ebenso wie unterschiedliche Hintergrundfarben (9%).

Fazit

Schließen wir den ersten Teil der Formular-Bestandsaufnahme mit einem kurzen Überblick der wichtigsten Erkenntnisse. Beachten Sie bitte, dass wir hier nur Registrierungsformulare betrachtet haben.

  • Der Link zum Registrierungsformular heißt “Registrieren” (engl. “sign up”, 40%) und ist in der Ecke rechts oben platziert.
  • Registrierungsformulare haben ein vereinfachtes Layout, um Ablenkungen für die Benutzer auszuschließen (61%),
  • Registrierungsformulare bestehen nur aus einer Seite (93%),
  • Registrierungsformulare ziehen Besucher an, in dem sie die Vorteile einer Registrierung erläutern (41%),
  • Feldnamen sind zu 62% fett hervorgehoben
  • Es gibt keinen Trend bei der Ausrichtung von Feldnamen.
  • Es gibt eine Tendenz dazu, nur wenige Pflichtangaben abzufragen.
  • Es gibt eine Tendenz dazu, nur wenige optionale Angaben abzufragen.
  • Vertikal angeordnete Eingabefelder werden gegenüber horizontal angeordneten bevorzugt (86%).

Von Vitaly Friedman, Übersetzung von René Schmidt; mit Genehmigung von Smashing Magazine.

Kategorien
Essentials Icons & Fonts

20 Professionelle Fonts – Zum Nulltarif, kostenlos, nada

Kostenlose hochwertige Freefonts sammeln wir fleißig und regelmäßig. Denn wer nach einem schönen Schnitt sucht, wird entweder tief in die Tasche greifen müssen oder viel Zeit mit zahlreichen Fonts-Repositories verbringen, die eigentlich eher Quantität als Qualität liefern. Die Arbeit möchten wir unseren Lesern gerne abnehmen und präsentieren deshalb immer wieder die schönsten Perlen, die wir im Laufe der letzten Monate veröffentlicht haben oder die inzwischen aktualisiert wurden.

Alle unten aufgelisteten Schriftarten können kostenlos heruntergeladen und verwendet werden. Bitte beachten Sie, ein Blick in die Lizenzbestimmungen lohnt sich, um eventuellen Rechtsstreitigkeiten und Missverständnissen vorzubeugen.

Sketch Rockwell
Eine skizzenhafte, handgezeichnete Schreibschrift, die von Lukas Bischoff entworfen wurde und zum kostenlosen Download für PC und Mac OS X bereitsteht. Der Schnitt überzeugt durch unregelmäßige und elegante Konturen, die ihn informell, aber dennoch elegant und sehr deutlich erscheinen lassen. „Sketch Rockwell“ kann insbesondere in Überschriften wirksam eingesetzt werden. Die Schrift darf nur zu privaten Zwecken verwendet werden – etwa in Blogs.

Screenshot

Weitere Schreibschriften finden Sie im Beitrag 10 Handwritten Fonts You Can’t Miss, der unter anderem Estrya’s Handwriting und Imitation zum Download anbietet. Weitere professionelle kostenlose Schreibschriften finden Sie hier und hier.

Screenshot

Freebooter Script
Ein schöner Schreibfont mit eleganten, windenden Kurven. Beachten Sie, dass alle Buchstaben schön aneinander gepaart sind, wodurch das authentische kalligrafische Bild entsteht. Der Schnitt lässt sich insbesondere im Verpackungsdesign und in Retro- und Vintage-Designs einsetzen. Verfügbar in Formaten „PC Type 12, „PC True Type“ und „Mac Type 1“, doch leider nicht „OpenType“. Entworfen von Graham Meade.

Freebooter Script

Myndraine
Diese Schrift ist „work in progress“, zeigt aber jetzt schon einige interessante typografische Details und eignet sich ganz gut im Einsatz für Überschriften. Der Schnitt ist von Christopher Miller entworfen und enthält 182 characters. Auf den ersten Blick erinnert Myndraine an „Myriad Web“, hat jedoch deutliche Unterschiede, was vor allem in Fließtext deutlich ist. Einige Buchstaben „sitzen noch nicht richtig“ oder passen nicht ganz in das Schema wie etwa „p“ und „g“. Freeware, PC und Mac OS X-Versionen stehen zum kostenlosen Download bereit. [via]

Screenshot

Quicksand
„Quicksand“ ist eine sehr sorgfältig gestaltete serifenlose Schriftfamilie, die in verschiedensten Situationen zum Einsatz kommen kann. Entworfen von Andrew Paglinawan und kostenlos verfügbar. Es liegen insgesamt 7 Schnitte vor — Light, Bold, Dash, Book, Light Oblique, Bold Oblique und Book Oblique.

Quicksand

Gentium (specimen) und Gentium Basic | Lizenz (Open-Source)
„SIL International“, eine amerikanische wissenschaftliche Organisation zur Förderung des linguistischen Wissens, veröffentlichte vor kurzem die Release-Version von „Gentium Basic“ und „Gentium Book Basic“ – eine Modifikation der in 2004 veröffentlichen Schriftfamilie „Gentium“.

Die letztere wurde entworfen, um diversen ethnischen Gruppen eine hochwertige, gut lesbare und universelle Schriftart bereitzustellen, die neben klassischen Symbolen des lateinischen Alphabets zahlreiche Glyphen aus verschiedenesten Sprachen der Welt darzustellen vermag. Dies erklärt auch, weshalb SIL Gentium gerne als das „typeface for nations“ bezeichnet. Es ist erwähnenswert, dass beim Design ein besonderer Schwerpunkt auf den Symbolen aus der griechischen Sprache lag. Demnächst soll ein weiteres Release folgen, in dem kyrillische Glyphen sowie sämtliche Symbole aus Unicode 5.1 vollständig umgesetzt werden sollen.

Screenshot

Screenshot

Gentium Basic und Gentium Book Basic basieren auf dem Typodesign der Schnittfamilie Gentium, verfügen jedoch über zusätzliche Gewichte. Die “Book”-Familie ist ein wenig kräftiger und braucht mehr Platz zu ihrer Entfaltung.

Beide Familien verfügen über die Schnitte regular, bold, italic und bold italic. Der verfügbare Zeichensatz ist bei Gentium Basic und Gentium Book Basic jedoch wesentlich bescheidener als bei Gentium. Sie unterstützen nur „Basic Latin“ und „Latin-1 Supplement Unicode“, einige wenige, häufig eingesetze Buchstaben aus dem lateinischen Alphabet sowie einige diakritische Zeichen und die Interpunktion. Sowohl Gentium als auch seine Abkömmlinge können sicherlich sowohl in Fließtexten als auch in Überschriften für die optimale Lesbarkeit und ein glasklares typografisches Bild sorgen. Gentium und seine Nachfolger können ohne jegliche Einschränkungen in privaten und kommerziellen Projekten verwendet werden. Sie wurden vom britischen Typo-Designer Victor Gaultney entworfen.

Gentium ist open-source und kann beliebig modifiziert und weiterentwickelt werden. SIL ruft Designer explizit dazu auf, weitere Schriftarten auf der Grundlage von Gentium zu entwerfen. Die Organisation erhofft sich daduch viele frei verfügbare „reichhaltige“ Schnittfamilien, in denen das typografische Erbe unserer Kultur manifestiert wird.

Screenshot

Mayberry Pro SemiBold (Registrierung ist erforderlich)
AscenderFonts stellte vor kurzem den Schnitt „Mayberry Pro Semi Bold“ zum kostenlosen Download bereit. Der Schnitt gehört zur Schriftfamilie „Mayberry Pro“, die extra für die optimale Bildschirmdarstellung und Druckausgabe entworfen wurde. „Mayberry Pro“ ist eine humanistische serifenlose Schriftart, die ihre Stärke insbesondere in Nutzerschnittstellen (UIs), etwa in Web-Applikationen, zeigen kann. Um den Font herunterzuladen, muss man zuerst ein Anmeldeformular ausfüllen. Mayberry Pro wurde von Steve Matteson gestaltet.

Mayberry Pro SemiBold

Aller Sans | Specimen | Lizenz | Download
Henrik Birkvig gestaltete die serifenlose „Aller Sans“ im Rahmen eines Projekts, das durch das dänische Verlagshaus „Aller“ finanziert wurde – daher der Name der Familie. Die Schrift steht im Format „OpenType“ zum kostenlosen Download bereit und kann sowohl in privaten als auch kommerziellen Projekten kostenlos verwendet werden. Beachten Sie, es gibt Unklarheiten wegen der Lizenz.

Aller Sans

Birra Stout (Registrierung ist erfoderlich) | Specimen
Seine Ausmaße hat „Birra Stout“ den Einflüssen der Kalligrafie des frühen 20. Jahrhunderts zu verdanken. Der Schnitt hebt sich durch breite handgezeichnete Formen hervor, die gerne groß, stark und überwältigend wirken. Entworfen und veröffentlicht durch die Typedesign-Agentur „Darden Studio“. OpenType.

Birra Stout

Museo Sans
Jos Buivenga veröffentliche die Sans-Version seiner Schriftfamilie Museo. „Museo Sans“ ist ein kräftiger Schnitt, der schwache Kontraste aufweist und durch präzise geometrische Formen stark geprägt ist. Er wurde insbesondere im Hinblick auf die Lesbarkeit entworfen und passt demnach ausgesprochen gut für die Darstellung auf dem Bildschirm und in Fließtexten. Die OpenType-Familie unterstütze europäische Sprachen und sogar Esperanto. Darüber hinaus kann der Schnitt elegante Ligaturen und „oldstyle“-Zahlsymbole aufweisen. Die ganze Familie besteht aus 10 Schnitten: 5 Gewichte (100 300 500 700 900) und dazu kommen noch Kursive zu jedem Gewicht. 2 Schnitte können kostenlos heruntergeladen werden (500/500 italic). Eine Registrierung ist erforderlich, um die Schrift herunterzuladen.

Screenshot

Screenshot

FF Nuvo OT Medium | Herunterladen
Ein klassischer, sauberer Schnitt mit schönen Ligaturen, die der Schrift einen soliden Eindruck verleihen. Entworfen von Siegfried Rückel. Diese Schrift ist ein Beispiel für modernes Typodesign mit einem starken vertikalen Kontrast und kalligrafischen Einflüssen (siehe die Symbole „a“, „g“ und „y“). Am besten ist die Schrift für Überschriften geeignet, aber auch im Fließtext kann sie ihre Lesbarkeit gut ausnutzen. Auch in der Werbung, im Verpackungsdesign oder in Corporate-Designs ist sie durchaus geeignet. Der Schnitt kann zu privaten und kommerziellen Zwecken verwendet werden und steht nur kurze Zeit zum kostenlosen Download bereit. OpenType.

Screenshot

The Fell Types
Igino Marini hat sich die Mühe gemacht und einige klassische Frakturen und Schriften mit Ligaturen, Ornamenten und Zierbuchstaben mittels iKorn digitalisiert. Als Vorlage nutzte der Typodesigner Schriften aus den 17.-19. Jahrhunderten (Stilrichtungen Black Letter und The Roman Italic). Das Ergebnis stellt der Typodesigner nun zum kostenlosen Download bereit — in Formaten TrueType und OpenType. Um die Schriften verwenden zu können, müssen Sie die Anmerkung «The Fell Types are digitally reproduced by Igino Marini. www.iginomarini.com» in Ihre Werke einfügen. Das Archiv enthält insgesamt 13 Schnitte, darunter 8 reguläre Gewichte und 7 Kursive. [via]

Screenshot

Megalopolis Extra | Specimen | EULA License
Eine eigentümliche moderne, und dennoch klassische Schriftart mit vielen Unregelmäßigkeiten, Ligaturen und einem großen Zeichensatz mit verschiedensten Stilen. Im Fließtext lässt sich „Megalopolis Extra“ definitiv nicht einsetzen, dafür aber in Plakaten, im Verpackungsdesign und in Überschriften. Mit ihren geschwungenen Glyphen zieht sie die Aufmerksamkeit auf sich und kann dadurch gewisse Botschaften der Seite attraktiv und originell kommunizieren. Die Schrift steht zum kostenlosen Download bereit und darf im Rahmen der EULA-Lizenz zu privaten und kommerziellen Zwecken verwendet werden. [ via ]

Sketch Rockwell

Sansation
Ein moderner serifenloser Schnitt mit interessanten, ungewöhnlichen Details. Die Glyphen weisen Unregelmäßigkeiten auf, wie etwa das „t“, „A“ und „k“, die in dieser Gestalt im Fließtext nur selten auftreten. Entworfen von Bernd Montag und verfügbar für PC und Mac OS X. „Sansation“ darf in privaten und kommerziellen Projekten ohne jegliche Einschränkungen verwendet werden.

Advent

Miso | Vorschau
MISO ist eine kompakte und gut lesbare Schriftart, die sich vor allem zu Annotationen und Anmerkungen eignet (etwa in Bauplänen – deshalb wird MISO als „architectural lettering font“ bezeichnet). Entworfen von Mårten Nettelbladt und verfügbar in drei Gewichten (light, regular, bold). Formate: TrueType und OpenType.

Miso

Rally Character Set | Specimen | Vorschau | Download
Lukyan Turetsky veröffentlichte einen Zeichensatz mit Rallye-Symbolen- und Icons. Die Schrift enthält klassische Schilder und Verkehrszeichen, Infografiken u.a. „Rally Character Set“ steht als OpenType zum Download bereit und kann in privaten und kommerziellen Projekten verwendet werden.

Rally Character Set

Weitereführende Links

  • 30 Free Grunge Fonts
    Eine umfangreiche Sammlung von Grunge-Schriften. In der Liste sind unter anderem Grunge Serifa und BB Petie Boy vertreten. Weitere Grunge-Freefonts.
    Screenshot 

    Screenshot

  • 21 Awesome Free Fonts
    Abduzeedo präsentiert eine Sammlung von ungewöhnlichen, kreativen Schriften. ™
Kategorien
Webdesign

Rechte-Maus-Taste-Zauberei

Häufig können kleine Veränderungen große Auswirkungen hervorrufen. Was im Arbeitsablauf zunächst als eine kleine Verbesserung aussehen mag, kann Ihre Produktivität im Alltag deutlich erhöhen und Routineaufgaben schnell und schmerzlos erledigen helfen. So kann man sich etwa einige nützliche Browser-Tastaturkürzel merken und diese permanent verwenden. Wem das nicht genug ist, der kann darüber hinaus seiner Maus einige hilfreiche Eigenschaften beibringen und etwa das Kontext-Menü, das beim Klick auf die rechte Maus-Taste erscheint, mit zusätzlichen Funktionen ausstatten.

Mit zusätzlichen Tools kann nämlich dieses Kontextmenü beliebig modifiziert, ausgeräumt, ergänzt und mit zusätzlichen Funktionen erweitert werden. Welche Aufgaben können Sie damit schneller und leichter erledigen?

FileMenu Tools (Win, kostenlos)

FileMenu Tools (Freeware, 6.4 Mb, Win) ist ein anerkannter Meister der Rechte-Maus-Taste-Zauberei. Nach der Installation integriert sich das Tool als Registerkarte in das Kontextmenü und kann von dort aus gestartet und konfiguriert werden.

Screenshot
Die Anwendung FileMenu Tools kann viel leisten, nur in externe Desktop-Applikationen integriert sie sich nicht.

Das Tool lässt das Kontextmenü in Windows zu einem leistungsstarken und multifunktionalen Dateimanager werden. Mit dem Tool können Sie das Kontextmenü entweder aufräumen oder zusätzliche Funktionen einfügen und anordnen. So kann man mit dem Tool nicht nur beliebige Applikationen mit beliebigen Parametern aus dem Kontextmenü starten lassen, sondern auch spezielle „built-in“-Funktionen nutzen. Beispielsweise lassen sich etwa mit einem Mausklick zwei Ordner synchronisieren, Dateien aufspalten und zusammenführen, alle Dateien eines Typs mit Wildcards löschen, alle Dateinamen aus einem Ordner kopieren oder ein Renamer-Tool beziehungsweise ein Search-and-Replace-Tool starten.

Der einzige, wesentliche Nachteil der Anwendung ist, dass das Kontextmenü in Desktop-Anwendungen wie etwa Browser, E-Mail-Client et cetera nicht angezeigt wird. Sie ist nur im Windows Explorer und bei Klicks auf Dateisymbole, Dialogboxen, Desktop oder Startknopf zu sehen ist.

OpenMenu X (Mac, 10$)

Für Mac-Nutzer wird eine optimale Alternative durch OpenMenu X geliefert. Vom Funktionenumfang ähnelt die Anwendung sehr FileMenu-Tools. So können Sie im Kontextmenü etwa beliebige Dokumente, Anwendungen, AppleScripts und URLs öffnen. OpenMenu X kann problemlos mit Applikationen umgehen, die Carbon- und Cocoa-APIs verwenden. Eine Single-User-Lizenz kostet $10.

Screenshot
OpenMenu X: schöne Oberfläche, gute Leistung, kleiner Preis.

Menu-Editor (Firefox, Thunderbird)

Firefox- und Thunderbird-Nutzer können zudem neben dem Kontextmenü im Betriebssystem auch das Kontextmenü im Browser und in der E-Mail-Software verändern und anpassen. Darum kümmert sich die Erweiterung Menu Editor, die unter anderem auch die Menü-Einträge im Hauptmenü entfernen oder einfügen kann. So können Sie mit dem Tool unwillkommene und aufdringliche Firefox-Erweiterungen, die allzu gerne den Platz im Kontextmenü des Browser besetzen, in die Schranken weisen und ein übersichtliches Kontextmenü erzeugen. ™

Screenshot

MenuEditor bringt Ordnung in Kontextmenüs in Firefox und in Thunderbird.

Kategorien
Webdesign

Fünf nützliche Lösungen für Designer und Entwickler

Oftmals bleiben kreative und außergewöhnliche Designlösungen unbekannt, weil wir Designer sie schlicht übersehen. Neben unseren eigenen Projekten müssen wir manchmal an mitunter schwer verständlichen Werken anderer Designer arbeiten und nachvollziehen, wie sie ihre Designideen umgesetzt haben. Tatsächlich können wir dabei viel lernen und stoßen oftmals auf Lösungen, mit denen wir die Qualität eigener Projekten erhöhen können.

Sie wissen, dass wir neugierige Leute sind. Wir sind sehr an ungewöhnlichen Arbeitsansätzen und an kreativen Lösungen interessiert. Daher suchen wir stets nach ihnen, analysieren sie, versuchen sie zu verstehen und wägen Vor- und Nachteile ab. In diesem Beitrag zeigen wir ihnen einige interessante Ansätze.

1. Vertikal gleitende Navigation + Overlay

In den letzten Jahren haben wir einen starken Trend hin zu gleitenden Horizontalmenüs beobachtet. Diese Menüs sind auch als Coda Slider-Effekt (engl.) bekannt. Insbesondere werden sie auf Unternehmenswebsites benutzt, wo ein Produkt und seine Eigenschaften im Designlayout im Vordergrund stehen. Kobe (engl.) verwendet einen ähnliches Menü, allerdings mit einem anderen Ansatz.

Kobe

Die Navigationselemente oben sind dezent animiert und sorgen trotzdem für eine passende Atmosphäre. Sobald man auf ein Menüpunkt klickt, wird der Inhaltsbereich vertikal verschoben — erst das Hintergrundbild, dann der Inhalt. Falls der Inhaltsbereich auch über Navigationselemente verfügt, werden sie ebenfalls vertikal verschoben. In dieser Situation wäre es vielleicht sinnvoller, eine horizontale Navigation zu benutzen. So wäre es für Besucher leichter, zwischen Haupt- und Subnavigation zu unterscheiden.

Alle Inhaltsblöcke werden mit der ganzen Seite zusammen geladen, nicht erst bei Bedarf. Obwohl die ganze Seite animiert zu sein scheint, wird Flash nur sparsam eingesetzt — im Wesentlichen besteht die Seite aus CSS und JavaScript. Das Hauptproblem besteht darin, dass man nicht navigieren kann, wenn JavaScript nicht aktiviert ist, weil die Navigationselemente nicht sichtbar sind. Als Profi sollten Sie solche Situationen berücksichtigen.

Wie wird das gemacht? Für die horizontale Navigation oben auf der Seite benutzt Kobe CSS-Sprites. Alle Grafiken für die Navigationselemente befinden sich in einer einzigen Bilddatei. Der Ausschnitt für ein Navigationselement wird über das CSS-Attribut

background-position

ausgewählt. Der Sprite selbst ist ein transparentes .gif (Die Datei finden Sie hier). Die animierten Funken werden mittels Javascript in Abhängigkeit des gewählten Menüpunktes absolut positioniert.

Kobe

Der Haupt-Inhaltsbereich besteht aus einem Hintergrundbild und einem Overlay, welches dazu gehörende Informationen manchmal weitere Navigationsoptionen anzeigt. Overlays (für die Navigationsoptionen) werden mit der Seite geladen, aber erst angezeigt, wenn ein entsprechendes Navigationselement ausgewählt wurde. das Gleiten wird mit der SlidePanel-Komponente von jQuery realisiert.

Das Overlay-Bild ist halbtransparent und wird im Haupt-Inhaltsbereich absolut positioniert und mit dem Attribut

z-index

über das Hintergrundbild gelegt. Die Hintergrundbilder für die Navigationselemente werden mittels CSS den Overlays zugewiesen.

Sroown

Einen recht ähnlichen Ansatz verwendet Ican Aleksic auf seiner Website (engl.), um Projektbeschreibungen darzustellen. Anfangs sehen Besucher nur Vorschaubilder seiner abgeschlossenen Projekte. Bewegen sie die Maus über eines der Vorschaubilder, werden weitere Informationen zu diesem Projekt über dem Vorschaubild angezeigt. Das Overlay verwendet den Platz, den vorher das Vorschaubild und das darunter eingenommen hat. Der kleine Pfeil auf der rechten Seite ermöglicht Besuchern, mit einem Klick ganz nach oben auf die Seite zu springen.

2. Navigation

EllisLab (engl.) verwendet einen interessanten Ansatz, um seine Mitarbeiter zu präsentieren. Anstatt sie einfach nacheinander mit einem kleinen Bild und einer Beschreibung aufzulisten, haben sie sich für einfache und dennoch intuitiv zu bedienende und untereinander platzierte Haupt- und Subnavigationselemente entschieden.

Um die Besucher davon zu überzeugen, dass das Team seine Arbeit sehr ernst nimmt, werden zusätzlich neben dem Menü geheimnisvolle Comics dargestellt.

Ellis

Sowohl in der Haupt- als auch in der Subnavigation wird mit Pfeilen und leichten Farbakzentuierungen angezeigt, wo sich der Nutzer zur Zeit befindet. Beachten Sie, dass die Menüs nicht einfach nebeneinander platziert sind, sondern noch durch eine scharfe vertikale Linie getrennt sind. Außerdem ist das Submenü relativ zum Hauptmenü etwas nach unten versetzt. So wird die Hierarchie der beiden Menüs deutlich.

Der gesamte Inhaltsbereich ist in zwei Hauptbestandteile gegliedert — Die Hauptnavigation auf der linken und der eigentliche Inhalt auf der rechten Seite. Letzterer enthält die Subnavigation und einen weiteren Unterbereich auf der rechten Seite für Beschreibungen (wie im folgenden Screenshot zu sehen). Das Hintergrundbild für den Inhaltsblock wird über CSS definiert und über die ID zugeordnet. Ein halbtransparentes Hintergrundbild wird im Block für die Beschreibungen auf der rechten Seite des Inhaltsblocks verwendet. Der Rest ist reines CSS und (X)HTML. Eine einfache und doch elegante Lösung.

Ellis

3. Panel-Element

In den letzten Monaten hat es sich offenbar durchgesetzt, mit dem Design einer Website den Blick des Nutzers auf die Hauptaussage einer Website zu fokussieren. Unwichtige Details werden nur noch bei Bedarf eingeblendet. Wishingline (engl.) beispielsweise zeigt Kontaktinformationen und Links zu sozialen Netzwerken in einem halbtransparenten Panel-Element an. Das Panel wird geöffnet, wenn der Nutzer auf einen bestimmten Link klickt und wird vorher nicht angezeigt.

Wishingline

Beachten Sie, dass verschiedene Dienstleistungen unterschiedlich gekennzeichnet sind. Designer nutzen sowohl Farben als auch Symbole, um Links zu externen Diensten zu kennzeichnen. Normalerweise ist es nicht sinnvoll, Links verschiedenfarbig anzuzeigen. In diesem Fall scheint das aber gut zu funktionieren.

Alle “sozialen” Informationen sind in dem Panel versteckt, wahrscheinlich um das Design nicht mit bunten oder zum Design nicht passenden Symbolen zu überladen. Dieser Ansatz hat den Vorteil, dass das Design sauber bleibt und den Nachteil, dass die Subnavigation versteckt ist. Solche Kompromisse sind wie immer die Entscheidung des Designers. Wahrscheinlich hätte es anders genauso gut funktioniert.

Wishingline

Wie wurde es gemacht? Das Panel selbst hat einen halb transparenten Hintergrund, welcher mit absoluten Koordinaten und einem

z-index

fix positioniert ist. Daher ändert er sich nicht, wenn die Schriftgröße oder die Größe des Browser-Fensters geändert wird. Das ist nicht unbedingt gut, aber man kann damit leben.

Ein Panel besteht aus zwei nebeneinander platzierten und absolut positionierten Containern. Der erste beinhaltet einen transparenten Zeiger als Hintergrundbild und ist direkt neben dem “click to view”-Link platziert. Der zweite Container beinhaltet einen Hintergrund-Rahmen, der neben dem ersten platziert wird. Das erzeugt den Eindruck eines “Bubble”-Panels. Die Einträge (die Links zu den sozialen Netzen) im zweiten Container werden über eine

-Liste realisiert.

Designer verwenden gern traditionelle Elemente grafischer Benutzeroberflächen. So ist unten im Panel ein Knopf plaziert, mit dem verdeutlicht wird, dass das Panel geschlossen werden kann. Eigentlich wäre es aber sinnvoller, den Knopf oben rechts zu platzieren, weil die Nutzer diese Funktion an dieser Stelle erwarten.

Woork

Antonio Lupetti (engl.) hat einen ähnlichen Ansatz gewählt, um Optionen für seine RSS-Feeds anzuzeigen. Es wäre sinnvoll, die Punkte um den “Feed RSS”-Link mit

outline: 0;

zu entfernen. Allerdings sollte man vorsichtig mit dem Outline-Attribut sein, weil es recht nützlich für die Navigation mit der Tastatur ist.

4. Tag-Ranglisten

Es gibt viele Möglichkeiten, Tag-Wolken zu gestalten. Wenn man die Tags gewichtet, wird über verschiedene Farben und Schriftgrößen verdeutlicht, wie wichtig ein Thema auf einer Website ist. So können Tag-Wolken zwar ein Gesamtbild der Seite anschaulich darstellen, doch sie liefern nur unpräzise Informationen dazu, wie beliebt diese Tags eigentlich sind.

Jeff Croft (engl.) verwendet keine Tag-Wolke, sondern eine Rangliste. Sie zeigt nicht nur die beliebtesten Tags, sondern auch wie beliebt sie sind.

Jeff Croft

Die Liste zeigt nicht nur die Tags selbst, sondern auch wie oft die Tags verwendet wurden und wie beliebt sie im Vergleich zu den anderen Tags sind. Jeff Croft verwendet drei Ebenen der visuellen Kommunikation: die Position der Tags in der Liste, die vertikalen Balken und der Wert auf der rechten Seite. Visuelle Redundanz ist oftmals nicht überflüssig, wie man meinen könnte, sondern hilft den Lesern, den Kontext zu erfassen, in dem die Informationen präsentiert werden.

Sobald man die Maus über eines der Tags bewegt, wird dieses Element mit einer helleren Hintergrundfarbe hervorgehoben. Der Balken und der Wert werden ebenfalls hervorgehoben. Wie hat er das umgesetzt? Jeff Croft verwendet eine Aufzählungsliste. Jeder Listeneintrag enthält drei Block-Elemente: ein Link zum Tag, ein

span

-Element (span.count), welches den Wert auf der rechten Seite enthält und ein weiteres

span

-Element (span.index), das den Balken anzeigt. Das HTML-Tag

span

ist natürlich ein Inline-Element, wird hier in Jeff Crofts Stylesheet zu einem Block-Element deklariert.

Tag ranking

Tag-Links sind mittels relativer Positionierung linksbündig angeordnet. Die Werte auf der rechten Seite werden innerhalb der relativen Positionierung mittels absoluter Positionierung rechtsbündig angeordnet. Diese Methode ist auch als das Absolute relativ machen (engl.) bekannt. Der Balken eines jeden Tags hat anfangs die Breite 100%. Wenn die Seite geladen wird, wird die Breite mit PHP Python über

style="width: xx%"

geändert. Das wird natürlich mit CSS gemacht. Die Lage des Balkens wird absolut innerhalb eines absolut positionieren Listenelements definiert.

Der

hover

-Status wird mit

li:hover .index

,

li:hover .count

und

li:hover

definiert.

Erwähnenswert ist, dass Jeff Croft einen barrierefreien Designansatz gewählt hat. Wenn keine visuellen Elemente angezeigt werden können, zeigt das Index-Element die Beliebtheit eines Tags in Prozent an. Anderenfalls wird dieser Text mit dem

text-indent

-CSS-Attribut entfernt.

Diese Lösung ist flexibel. Wenn beispielsweise die Seitenleiste aus irgendeinem Grund breiter gemacht werden soll, wird sich die Tag-Liste automatisch anpassen, weil die Breite in Prozent angegeben ist. Das ist effizient.

5. Intelligente Archivnavigation

Eine Navigation für Archive zu gestalten ist keine einfache Aufgabe, insbesondere weil Designer die Besucher nicht mit zu vielen Informationen überfordern wollen. Besucher wollen schnell zu den Informationen gelangen, die sie suchen.

Chris Shiflett (engl.) hat auf seiner Website eine einfache, kompakte und benutzerfreundliche Archivnavigation eingebaut.

Shift

Jon Gibbins, Jon Tan und Chris Shiflett haben beide Ebenen der Navigation, also die Navigation für Jahre und Monate, in einem kompakten zweizeiligen Block untergebracht. Der aktuell gewählte Monat ist mittels Farben und Pfeilen hervorgehoben und gut zu erkennen, ebenso die zur Verfügung stehenden Navigationsoptionen. Sobald ein Besucher sich für das Archiv entschieden hat, muss er das gewünschte Jahr und den Monat auswählen. Das geht recht einfach, weil der Monat automatisch nach der Wahl des Jahres selektiert wird.

HTML und Javascript sind unkompliziert. Der Designer verwendet Aufzählungs- und Definitionslisten für die Jahre. Eine CSS-Klasse sorgt dafür, den gewählten Monat und das Jahr hervorzuheben. Wenn ein Jahr angeklickt wird, erscheint unter der Navigation für die Jahre ein neuer Layer. Darin können die Besucher den gewünschten Monat wählen. Es scheint dort aber einen Fehler zu geben: Wenn die Seite das erste Mal geladen wird, werden alle verfügbaren Jahre und deren Navigationsoptionen angezeigt.

Shift

Die Idee, die Archivnavigation auf jeder Archiv-Seite zu zeigen, ist eine einfache und doch gute Idee. Auf diese Weise können Besucher im Archiv stöbern, ohne dass sie immer wieder auf die Archiv-Übersicht zurückgehen müssen. Beachtenswert ist auch die Navigation für die Monate unten auf der Seite. Vielleicht wäre es sinnvoller, dort die Navigation für das gesamte Archiv anzubieten.

Übersetzung von René Schmidt; mit freundlicher Genehmigung von Smashing Magazine

Kategorien
Themes WordPress

20 funktionale und schöne WordPress-Themes

Ein sorgfältig aufgebautes WordPress-Theme kann man immer gebrauchen – und sei es um zu lernen, wie ein Profi ein (fast) perfektes Theme erstellt hat. Ein gut strukturiertes, aufwendiges Theme kann man zudem weiterentwickeln, an eigene Bedürfnisse anpassen und somit mit wenig Aufwand recht beeindruckende Ergebnisse erzielen.

WordPress-Themes gibt es mehr als genug, richtig gute findet man dagegen nicht überall. Die folgende Übersicht soll Ihnen Anregungen liefern, die Sie in Ihrem Blogdesign einsetzen und weiterentwickeln können. Alle Themes wurden in 2008 veröffentlicht, viele davon sind eher unbekannt, einige davon haben wir selbst im Smashing Magazine herausgebracht. Die Themes stehen kostenlos zum Download bereit — vor der Nutzung lohnt sich ein Blick auf Lizenz- und Nutzungsbedingungen, diese können sich jederzeit ändern.

Typebased

Screenshot

Masinop

Screenshot

Portfolio

Screenshot

Wp.Fun

Screenshot

Color Paper

Screenshot

Agregado

Screenshot

Infinity

Screenshot

Scruffy

Screenshot

Outdoorsy

Screenshot

Black Magic

Screenshot

Zine Press

Screenshot

Crafty Cart

Screenshot

Curious

Screenshot

Fervens

Screenshot

Ashford

Screenshot

Creative Art

Screenshot

Pixeled

Screenshot

Desk Space

Screenshot

Google Chrome

Screenshot

Changing Room

Screenshot

Launchpad

Screenshot

Andere WordPress-Sammlungen: ™

Kategorien
Webdesign

JS Bin: Collaborative Testing und Debugging

Eine bekannte Situation: In einem scheinbar fehlerfreien Code tritt plötzlich ein merkwürdiger Fehler auf, der eigentlich gar nicht vorkommen sollte. Wer nach mehreren Versuchen, eine Lösung zu finden, nicht mehr weiter weiß, wendet sich mit dem Problem an einen Bekannten oder Kollegen. Wäre es in diesem Fall nicht praktisch, eine virtuelle Testumgebung zu haben, in der fehlerhafte Code-Snippets gemeinsam getestet und debuggt werden können?

Genau dies setzt sich JS Bin zum Ziel — eine simple Web-Applikation, mit der JavaScript-Code in einer Art Sandbox von mehreren Nutzen getestet und debuggt werden kann. Mit JS Bin können Entwickler Quelltexte online ablegen, editieren und anderen Nutzern zur Verfügung stellen.

JS Bin
JS Bin ist kompakt, nützlich und benutzerfreundlich – falls Sie Ihren Quellcode noch nicht abgespeichert haben, erscheint in der Tab-Überschrift ein Sternchen neben dem Snippet-Namen, hier ‚ikuve*‘.

Ist ein merkwürdiges Problem aufgetaucht, so können Sie JavaScript- und (X)HTML-Quellcode einfügen, abspeichern, die URL-Adresse („Live URL“, etwa http://jsbin.com/qwerty) kopieren und diese an einen hilfswilligen Entwickler schicken. Der Entwickler kann dann wiederum den Quellcode anschauen, editieren und sich die Ausgabe des Quellcodes direkt ansehen — diese wird im Tab „Output“ ausgeführt und angezeigt. Die Live URL zeigt dem Entwickler bloß die Ausgabe des Skrips. Um den Quellcode editieren zu können, muss der Enwickler jedoch in den Quellcode-Modus wechseln. Dafür genügt es, der Live URL /edit hinzuzufügen, also im oberen Beispiel http://jsbin.com/qwerty/edit. Wurde ein Fehler gefunden, so kann die (hoffentlich) korrekte Version des Snippets wiederum abgespeichert werden – jedoch unter einem anderen Namen.

Die populärsten Bibliotheken (jQuery, Prototype, YUI, MooTools, dojo und script.aculo.us) kann das Werkzeug automatisch in den (X)HTML-Code einfügen – der Entwickler braucht keine Dateien hochzuladen. Code-Snippets werden nach drei Monaten automatisch gelöscht. Mit dem JS Bin Bookmarklet können Sie einen im Browser selektierten Quellcode auomatisch in die Sandbox einfügen.

Es ist erwähnenswert, dass JS Bin sowohl von JavaScript-Entwicklern als auch CSS+(X)HTML-Designern benutzt werden kann, um etwa ein merkwürdiges CSS-Problem gemeinsam zu lösen. Leider funktioniert die Anwendung in Internet Explorer 6 nicht, die Unterstützung des Browsers in Zukunft wird nicht erwartet. ™

Kategorien
Webdesign

Der Goldene Schnitt im Web-Design

Übersetzung von René Schmidt; mit exklusiver Genehmigung von Smashing Magazine

Effektives Web-Design muss nicht unbedingt schön oder farbenfroh sein. Es muss klar und intuitiv sein. Eigentlich haben wir die Prinzipien effektiven Web-Designs bereits analysiert. Also: Wie erreichen Sie klares und intuitives Design? Nun, es gibt da eine Reihe Möglichkeiten. Zum Beispiel können Sie Grids verwenden, die einfachsten Lösungen bevorzugen oder sich auf Benutzerfreundlichkeit konzentrieren. Dennoch müssen Sie in jedem der genannten Fälle sicherstellen, dass Besucher das Design als natürlich, klar, harmonisch und ansprechend empfinden. Hier kommt der sogenannte Goldene Schnitt ins Spiel.

Dieser Beitrag erklärt, was der Goldene Schnitt und was die Drittel-Regel ist und zeigt, wie Sie sie anwenden. Natürlich gibt es immer mehrere Wege. Ziel ist es, Ihnen einen Weg zu effektiveren und schöneren Web-Designs zu zeigen oder wenigstens ein paar Anhaltspunkte für eigene Überlegungen zu geben.

Goldener Schnitt

Seit der Renaissance proportionieren Künstler und Architekten ihre Werke, um sie dem Goldenen Schnitt (engl. „Divine Proportion“) anzunähern, insbesondere mit Hilfe des Goldenen Rechtecks, bei dem das Verhältnis der langen Seite zur kürzeren den Goldenen Schnitt darstellt. Hintergrund ist der Glaube, dass dieses Verhältnis natürlich, universell, harmonisch und ästhetisch ansprechend ist. Der Goldene Schnitt, der auch „stetige Teilung“, „göttliche Teilung“ oder in diesem Zusammenhang kurz Φ (Phi) genannt wird, ist überall im Universum zu finden. Vieles um uns herum kann man mit diesem Verhältnis beschreiben. Der Goldene Schnitt ist wahrscheinlich das bekannteste Gesetz der Proportionslehre und kann die Aussagekraft Ihrer Designs drastisch steigern.

Wie Mark Boulton in seinem Beitrag Design and the Divine Proportion schreibt, ist “eines der Schlüsselelemente in der Kommunikation […] die Komposition. In der Designausbildung wird sie als etwas gelehrt, das man eher fühlen als logisch herbeiführen sollte.” Wenn Sie Ihren Besuchern ein ansprechendes und natürlich aufgebautes Design präsentieren möchten, sollten Sie den Goldenen Schnitt in Erwägung ziehen. Was genau ist der Goldene Schnitt? Grundsätzlich ist es das Verhältnis 1.618033988749895 ≈ 1.618 zwischen Objekten im selben Zusammenhang.

Goldener Schnitt

Betrachten Sie das oben gezeigte Beispiel. Angenommen, Sie möchten ein Layout mit fester Breite verwenden. Die Breite des Layouts ist 960px. Eine Spalte soll der Inhaltsbereich #content sein, eine kleinere Spalte die Seitenleiste #sidebar. Wie berechnet man nun die Breiten beider Layoutspalten?

  1. Berechnen Sie zunächst die Breite Ihres #content-Blocks. Stellen Sie sicher, dass das Verhältnis zwischen der Breite des Inhaltsblocks und der des Gesamtlayouts 1.62 beträgt. Sie teilen daher 960px durch 1.62, was ungefähr 593px ergibt.
  2. Ziehen Sie 593px von der Breite des Gesamtlayouts (960px) ab. Diese Rechnung ergibt 960px – 593px = 367px.
  3. Wenn Sie nun die Verhältnisse zwischen #content-Block und der Seitenleiste #sidebar (593px durch 367px ≈ 1.615) sowie zwischen Gesamtlayout und dem Inhaltsbereich prüfen (960px durch 593px ≈ 1.618) stellen Sie fest, dass sie im nahezu gleichen Verhältnis zueinander stehen.

Das ist die Idee hinter dem “Goldenen” Schnitt. Das gleiche gilt für flexible und skalierbare Layouts.

Natürlich müssen Web-Layouts nicht nach dem Goldenen Schnitt proportioniert sein. Dennoch kann es in einigen Fällen nicht nur die Aussagekraft Ihres Designs, sondern auch Ihr Layout vervollkommnen. Schauen Sie sich als Beispiel das 404 Blog (engl.) an. Dessen Design ist visuell ansprechend, bietet ruhige Farben und ist schön arrangiert.

Allerdings folgt das Design nicht dem Goldenen Schnitt, wie im folgenden Bild zu sehen ist. Nutzer sehen das aber nicht, weil sie intuitiv das Layout in zwei separate Blöcke mit 583px (630px – 11px – 11px) und 299px (330px – 31px) Breite teilen. Der Grund dafür ist, dass der Freiraum des Hauptbereichs passiv ist (drei Spalten mit jeweils 31px Breite). Es unterstützt den Inhaltsbereich daneben und ist nicht selbst der Inhalt.

Das Verhältnis zwischen den Layout-Blöcken ist 630 zu 330px ≈ 1.91 ≠ 1.62, Zwischen Inhaltsblöcken ist es 583 zu 299px ≈ 1.92 ≠ 1.62. Der Grund dafür, dass das Layout trotzdem nahezu perfekt aussieht ist, obwohl es nicht dem Goldenen Schnitt entspricht, ist die Tatsache, dass es ausgewogen ist. Beide Layout-Blöcke haben dieselben Proportionen. Daher macht das Design einen in sich geschlossenen und strukturell harmonischen Eindruck.

Das Interessante ist nun, dass Texte durch eine nicht optimale Layout-Breite eine nicht optimale Länge von 90 Zeichen pro Zeile haben. Angenehm zu lesende Texte haben pro Zeile zwischen 60 und 80 Zeichen. Eine Verbesserung des Layouts würde daher auch zu einer besseren Lesbarkeit der Inhalte führen. Ein netter Nebeneffekt der zeigt, wie man Dinge erreicht, in dem man den Gesetzen der Natur folgt.

Für Grob-Entwürfe können Sie das Verhältnis 5 : 3 verwenden, welches zwar nicht genau der Goldene Schnitt ist, aber als Faustformel nützlich sein kann, wenn Sie gerade keinen Tasschenrechner zur Hand haben. Der Goldene Schnitt liefert verlässliche Werte, die man in fast jedes Design verwenden kann. Bei Ihrem nächsten Projekt könnten Sie vielleicht die folgenden Tools nutzen, um Maße auf die Schnelle zu berechnen:

  • Phiculator
    Der Phiculator ist ein einfaches Programm, welches zu einem beliebigen Wert den Goldenen Schnitt berechnet. Es ist für Windows und Mac verfügbar.
  • Golden Section Ratio Design Tool
    Golden Section von Atrise ist ein Programm, welches Anwendern Routinearbeiten, Umgang mit Zahlen und Planen von Gruppierungen erspart. Man kann die harmonischen Elemente und Maße sehen und direkt verändern, während Sie an Ihrem Projekt arbeiten.

Die Drittel-Regel

Im Grunde genommen ist die Drittel-Regel eine vereinfachte Variante des Goldenen Schnitts und ist daher eine mehrteilige Faustregel. Eine Bildkomposition zu dritteln ist ein einfacher Weg, ohne jede Berechnung den Goldenen Schnitt anzuwenden.

Die Regel besagt, dass jede Bildkomposition durch jeweils zwei waagerechte horizontale und vertikale Linien in gleichem Abstand zueinander in neun gleiche große Teile geteilt werden kann. Hervorzuhebende Elemente können in der Nähe der Linien-Schnittpunkte platziert weden, damit sie eine hervorgehobene oder dominante Position im Design einnehmen. Ein Komposition mit der Drittel-Regel anzuordnen erzeugt mehr Spannung, Energie und Interesse als es einfaches Zentrieren vermag.

Rule of Thirds
Beispiel für die Drittel-Regel. Quelle: Wikipedia

In den meisten Fällen ist es weder möglich noch sinnvoll, alle vier Schnittpunkte zum Hervorheben von Website-Funktionen oder Navigationselementen zu nutzen. Sie können aber einige Punkte (üblicherweise ein oder zwei) verwenden, um die wichtigste Aussage oder Funktion einer Seite zu platzieren. Der Punkt links oben ist normalerweise der beste, weil Nutzer Websites visuell in Form eines “F” erfassen.

Wie teilen Sie nun ein Layout in neun gleiche Teile? Jason Beiard erklärt (engl.) die folgende Methode, mit der die Drittel-Regel auf ein Layout angewendet wird:

  1. Zeichnen Sie zunächst ein Rechteck. Die vertikale und horizontale Dimension spielt keine Rolle, zeichnen Sie aber sauber und 90-Grad-Winkel.
  2. Teilen Sie Ihr Rechteck horizontal und vertikal in drei Teile.
  3. Teilen Sie das obere Drittel Ihres Layouts erneut in drei Teile.
  4. Teilen Sie jede der Spalten in zwei Hälften, um ein Gitter zu erhalten.
  5. Sie sollten nun ein Quadrat haben, das dem Gitter der Drittel-Regel ähnlich ist.

Stellen Sie sich die folgende Situation vor. Angenommen, Ihr Layout hat eine fixe Breite von 960px. Beachten Sie den Bereich über der Falz, welcher wahrscheinlich eine Höhe von 750 bis 950px hat.

  1. Teilen Sie die Breite Ihres Layouts durch drei. In dem Beispiel erhalten Sie 960px / 3 = 320px.
  2. Teilen Sie die Höhe Ihres Layouts durch drei. In dem Beispiel erhalten Sie ( (750 + 950 px) / 2 ) / 3 ≈ 285px.
  3. Jedes Rechteck sollte jetzt 320px mal 285px groß sein.
  4. Zeichnen Sie ein rechteckiges Gitter wie in Schritt 4 beschrieben, in dem Sie Linien durch die Enden der Rechtecke ziehen.
  5. Platzieren Sie die wichtigsten Elemente Ihres Designs an den Schnittpunkten der vertikalen und horizontalen Linien.

Betrachten Sie unten das Design von demandware.com (engl.). Es wirkt trotz der lebendigen Farben nicht unruhig, sondern klar und gradlinig. Die Navigationsoptionen sind deutlich sichtbar und die Struktur der Website ist einfach zu erfassen.

Rule of Thirds

Wenn Sie die Effektivität des Designs untersuchen, werden Sie feststellen, dass es perfekt ausbalanciert ist. Es wendet die Drittel-Regel fast perfekt an. An zwei der vier Schnittpunkte (rosa Blöcke im folgenden Bild) sind die Informationen platziert, die das Unternehmen besonders hervorheben will — nämlich, worum es auf der Website überhaupt geht und Arbeitsbeispiele. Beachten Sie auch, dass die Hauptbereiche genau entlang der zweiten horizontalen Achse plaziert sind. Das ist effektiv.

Rule of Thirds
Drittel-Regel im Einsatz: An zwei der vier Schnittpunkte (rosa Blöcke) sind die Informationen platziert, die das Unternehmen hervorheben will.

Zusammenfassung

In einigen Fällen können Goldener Schnitt und Drittel-Regel die Aussagekraft Ihres Designs erheblich steigern. Mit dem Goldenen Schnitt geben Sie Ihrem Design Struktur, ein natürliches Gleichgewicht und machen es einfacher zu erfassen.

Mit der Drittel-Regel können Sie wichtige Funktionen Ihrer Website hervorheben und Ihren Besuchern ein Design präsentieren, das die Website benutzbar macht und die Informationen rüberbringt, die Sie vermitteln wollen. ™