Mittlerweile gibt es sehr viele Geräte mit den unterschiedlichsten Bildschirmgrößen. Da Besucher von Webseiten in der Regel jedoch kein vertikales Scrollen mögen, bietet es sich häufig an, Webseiten für 1024 x 768 Auflösungen zu konzipieren. Doch können diese teilweise nicht unbedingt schön aussehen, sobald sie auf einem großen Screen dargstellt werden.

Eine Möglichkeit dem entgegen zu wirken, ist die Verwendung von Fluid Layouts in CSS, dass heisst Arbeiten mit relativen Größen anstatt fester Pixelzahl, um so den ganzen Bildschirmraum zu füllen.

Bei sehr textintentiven Seiten verschlechtert sich jedoch die Lesbarkeit, wenn die Spaltenbreite zu groß wird. Zu klein darf die Spaltenbreite zwar auch nicht sein, da das Auge sonst zu viele Sprünge machen muss und daher schneller ermüdet. Nach Angaben des Smashing Books liegt die optimale Zeilenbreite bei Textblöcken im Web bei 66 Zeichen im Schnitt inklusive Interpunktion.

Adaptive Spaltenanzahl mit CSS3 und Media Queries

Eine interessante Idee zur Lösung des Problems kommt von mindgarden.de, mit Hilfe von CSS Media Queries und dem Multi-column layout-Feature in CSS3 lassen sich Bedingungen formulieren, anhand derer Ihr definieren könnt, ob ein Text mit einer, zwei oder mehr Spalten angezeigt wird.

Einen kleinen Eindruck könnt Ihr in der folgenden Demo kriegen:

Demo: Adaptive Layouts

Der untere Code-Auschnitt zeigt das benötigte CSS:

#postHolder {
	line-height: 1.7em;
	height: 420px;
}
#postHolder p {
	text-align: justify;
	clear:both;
	margin: 5px;
}
#postHolder p img {
	float: left;
}
@media all and (min-width: 70em) {

  #postHolder {
    -moz-column-count: 2;
    -moz-column-gap: 4em;
    -webkit-column-count: 2;
    -webkit-column-gap: 4em;
  }
}

Soll man CSS3 bereits benutzen?

Gerade im Web versuchen Webdesigner stets, dass ein Design in allen Browsern gleich (gut) aussieht, was regelmäßig zu Komplikationen führt, wenn man beispielsweise an die Probleme durch den IE6 denkt. Dazu bringt Chris Erwin einen sehr interessanten Gedanken.
In einem Vergleich führt er aus, dass man zum Beispiel auch nicht erwartet, mit einem uralten Fernseher das neuste HD TV schauen zu können. Aber im Web gibt es diese Erwartungshaltung (noch) nicht.

Vielleicht wird es auch im Online-Bereich Zeit, mehr nach vorne zu schauen und neuen Technologien mehr Platz zu schaffen.

Schöne Typo namens karabine, die ich bei dafont.com fand. Als Inspiration und Motiv für obiges Cover musste mal wieder die Nine herhalten :-)

Laut der Zeitschrift PAGE liegen sogenannte Mega Drop Down-Menüs auch im Jahre 2010 immer mehr im Trend. Insbesondere im Bereich Online-Shops, bei denen der Zugriff über sehr viele (Unter-) Kategorien möglich ist, nimmt der Einsatz zu. Zur besseren Veranschaulichung habe ich zu diesen Zweck eine kleine Demo gebaut:

Demo: Mega Drop Down Download: DropDown.rar

Vor- und Nachteile

Vorteil solcher Mega-Menüs ist zum einen der schnelle Zugriff auf einen gewünschten Inhalt, wobei in der Regel weniger Klicks zum Ziel führen. Zudem lassen sich die Menüs auch in Hinblick auf die Zielgenauigkeit besser gestalten. Ein Beispiel hierfür ist die Navigation bei basecamp. Warum die Größe von Schaltflächen wichtig im Bezug auf die Benutzerfreundlichkeit eines Interfaces ist, hängt u. a. mit Fitts Gesetz zusammen.

Ein Problem kann dann entstehen, wenn der Menü-Layer relativ breit ist und der Nutzer von der oberen Schaltfläche diagonal auf einen entsprechenden Untermenüpunkt zusteuert (siehe Abbildung oben). In diesem Fall passiert es leicht, dass die Maus den Layer kurz verlässt und sich dadurch das gesamte Menü wieder schließt. Gerade bei etwas unerfahrenen oder ungeduldigen Nutzern dürfte dies zu Problemen führen.

Lösung: zeitverzögerte Menüs

Eine Möglichkeit dieses Problem zu entschärfen lässt sich zum Beispiel bei Online-Shops wie OTTO oder auch Neckermann beobachten. Bei diesen Seiten wird das Menü mit einer gewissen verzögerung ausgeblendet, so dass der oben geschilderte Fall kein Problem darstellt. Der Nutzer kann also auch kurz den Menü-Layer verlassen (wie bei der gestrichelten Linie im obigen Bild), ohne dass sich die Navigation wieder schließt.

Mega Drop Down-Menü mit jQuery

Um eine Verzögerung des Aufklappens zu realisieren, bietet sich das jQuery-Plugin hoverIntent an. Das Plugin erlaubt euch genau einzustellen, wieviel Zeit zwischen dem Mouseover und der Anzeige des Layers vergehen soll. Als Hilfe dienen die Vroschläge von Jakob Nielson:

1. Wait 0.5 seconds.
2. If the pointer is still hovering over a navbar item, display its mega drop-down within 0.1 seconds.
3. Keep showing it until the pointer has been outside both the navbar item and the drop-down for 0.5 seconds. Then, remove it in less than 0.1 seconds.

Ergonomische Gestaltung

Besonders positiv aufgefallen ist mir beim OTTO-Shop die farbliche Kodierung der verschiedenen Oberkategorien, was zu einer Art Doppelkodierung führt.

Das Prinzip ist ähnlich wie bei einer Ample, der entsprechende Zustand wird einmal durch die Position im Menü signalisiert und zum zweiten durch die Farbwahl. Dadurch fällt dem Nutzer deutlicher auf, wenn er zwischen den Bereichen wechselt.

Digitale Verzierungen, erstellt mit Photoshop. -> Bild auf Flickr.

In diesem Beitrag möchte ich kurz zeigen, wie ihr euer jQuery-Plugin selber erstellen könnt. Mittlerweile gibt es ja zahlreiche solcher Plugins, wie die Listen auf noupe oder Smashing Magazine zeigen.

Warum ein Plugin?

Ich persönlich finde es hilfreich im Bezug auf die Wiederverwendbarkeit von bestimmten Funktionen. Die Verwaltung von Plugins ist meiner Meinung nach einfacher als ein “normales” JavaScript mit vielen verschiedenen Funktionen.

Zudem fügt Jonathan Snook den Vorteil der Verkettung (chainability) an. Mit jQuery ist es beispielsweise möglich, mehrere Anweisungen mit dem Punkt in einer Zeile zu verknüpfen.

Wie geht es los?

Als Beispiel möchte ich den mit jQuery erstellten ToolTip aus einem früheren Beitrag nun als Plugin umwandeln.

Zuerst erstelle ich ein Skript mit den Namen jquery.toolTip.js

Als nächstes erweitere ich den jQuery-Funktionsumfang durch meine eigene Methode mit Hilfe jQuery.fn.extend:

if(jQuery)( function() {
	jQuery.extend(jQuery.fn, {	

		toolTip: function(obj) {

                     this.each( function() {
				      ...
                     }
	        }
	});
})(jQuery);

jQuery erlaubt ja mittels Selektoren die Übergabe mehrere Elemente. Daher sollte this.each verwendet werden, damit jedes übergebene Element angesprochen werden kann (siehe Doku).

In den Platz der 3 Punkte setze ich später den Programm-Code meines ToolTip.

Exkurs: JavaScript Objekte

Für diejenigen, denen die obige Schreibweise mit dem Doppelpunkt nicht vertraut ist, folgt ein kurzer Exkurs. In JS sind Funktionen auch Objekte und Objekte können durch Variablen und Methoden definiert werden. Methoden sind Funktionen innerhalb eines Objekts.

Beispiel von Leigh Kaszick:

var myObject = {
        iAm : 'an object',
        whatAmI : function(){
            alert('I am ' + this.iAm);
        }
    }

Konfigurierbarkeit

Meine toolTip-Methode erwartet ein Objekt als Parameter. Dieses kann in der JSON-Notation angegeben werden {animate: ‘150′}. So mit kann ich nun angeben, wie schnell oder langsam mein Tooltip erscheinen soll. Abgefragt wird der Wert über:

if( obj.animate == undefined ) return false;

Initialisierung des Plugins

In meiner Webseite kann ich nun meine toolTip-Methode einsetzen:

$(document).ready(function(){

 $('.keyword').toolTip({
     animate: '150'
 });
});

Zum Schluss

Wer das Plugin einmal fertig sehen möchte, kann sich das Beispiel komplett runterladen.

tooltip-plugin.rar

Viel Spass.

Video auf YouTube ansehen.

Nun gibt es ein Rollout der Seite mit einer neuen JavaScript-Bibliothek: jqTouch, wodurch Ihr nun die folgenen Zusatzfunktionen genießen könnt:

1. Geringere Ladezeiten der dynamischen Inhalte
2. Cache-Funktion der statischen Inhalte
3. Animationen beim Laden der Daten
4. Vollbildfunktion
5. Startbildschirm

Das Online-Magazin Dr.Web berichtet in einem interessanten Artikel über den Vorteil von Ebenenkompositionen in Photoshop im Bereich Webdesign. Natürlich können sie nicht nur zum Experimentieren von visuellen Designentwürfen genutzt werden, sondern auch in früheren Konzeptionsphasen zur Erstellung von Wireframes.

Kurz zusammengefasst lassen sich mit so genannten Ebenenkompositionen bestimmte Sichten definieren. Jede Komposition beinhaltet jeweils verschiedenen sichtbare und unsichtbare Ebenen, je nach Status der Webseite.

Was ich jedoch im Artikel noch vermisse – und heute endlich rausgefunden habe – ist, wie sich die einzelnen Sichten später als Bild speichern lassen. Dies geht nämlich sehr leicht über folgenden Befehl. Im Menü geht ihr auf:

Datei > Skripten > Ebenenkomp. in Datei…

Dort im Menü dann nur noch die entsprechenden Einstellungen anpassen und auf Ausführen klicken.

Ein cooles Feature, auf das ich kürzlich stieß, sind sogenannte Smart Objects in PS. Ein Smart Object (SO) ist im Prinzip eine Referenz auf ein Grafikobjekt. Es wird nur die Referenz verändert, jedoch nicht das Original.

Nützlich sind SOs insbesondere in 2 Fällen:

1. Ihr wollt ein Bild skalieren ohne Verluste in der Bildqualität.
2. Ihr habt viele visuell gleiche Objekte, die eventuell später wieder geändert werden.

Stellt euch vor, Ihr erstellt ein Wireframe oder Mockup für eine Webseite in Photoshop. Ein Beispiel für eine Seite mit vielen sich wiederholenden Elementen ist uxmag.com (die vielen Kästchen auf der Startseite). Beim Entwurf einer solchen Seite könnt ihr mit Hilfe von Smart Objects einmal ein solches Kästchen entwerfen und x-Mal kopieren sowie anordnen. Wollte ihr nun später das Layout ändern, braucht ihr nicht alle 16 Elemente einzeln ändern, sondern nur einmal das Smart Object. Und so wird es gemacht:

Erstellen des Webseitenelements

Zuerst erstellt ihr eine neue Gruppe, also einen Ordner im Ebenenbereich. Dort baut ihr euch euer Element zusammen.

Anschließend klickt ihr im Kontextmenu (rechte Maustaste) auf die Gruppe (den Ebenenordner) -> und dann auf “In Smart Object konvertieren”.

Nun kopiert ihr das SO so oft ihr es benötigt und ordnet es entsprechend auf der Seite an.

Bearbeiten des Smart Objects

Möchtet ihr später die Elemente verändern, klickt ihr nun im Kontextmenü auf “Inhalt bearbeiten”.

Es erscheint anschließend eine Benachrichtigung: “Wählen Sie … . Die Datei muss am selben Ort …”. Hier müsst ihr einfach auf “OK” klicken.

Nun seht ihr wieder die einzelnen Ebenen und könnt sie ändern. Wenn ihr fertig seid, drückt (Strg + S) und schließt die Datei! Andernfalls kann es zu ungewünschten Verhalten führen.

Ihr müsstet nun sehen, dass sich alle eure kopierten SOs geändert haben.