Greve - Medien

Der Weg zur eigenen Website — Teil 4: Die Farben

Thomas — Wed, 01 Sep 2010 13:57:48 +0000

Mit Hilfe der Farben wird das Erscheinungsbild einer Website mit am stärksten beeinflusst. Falls die Farben nicht schon aufgrund der Corporate Identity Ihrer Firma festgelegt sind, hat man hier viele Möglichkeiten die Stimmung der Seite zu beeinflussen.
Je nach Zielsetzung und Branche wird man sich für helle oder dunkle, monochrome oder bunte Farbzusammenstellungen entscheiden. Gerade bei der Kombination mehrerer Farben ist ein gutes Gefühl für die Harmonie der Farben wichtig. Hier hilft die Farbenlehre weiter, über die es zahlreiche Bücher gibt und die bereits Goethe intensiv beschäftigte.

Mit Hilfe des Farbkreises und speziellen Farbschemata kann man angenehme Kombinationen recht leicht erstellen. In obiger Abbildung sind sechs Schemata dargestellt:

monochrom — eine einzelne Farbe und hellere oder dunklere Abstufungen
analog — eine Gruppe von Farben, die im Farbkreis benachbart sind
komplementär — Farben, die sich im Farbkreis direkt gegenüber stehen
teilkomplementär — eine Farbe und die zwei benachbarten Farben ihrer Komplementärfarbe
triadisch — drei Farben, die im Farbkreis jeweils gleich weit voneinander entfernt sind
tetradisch — vier Farben, die im Farbkreis zwei komplementäre Farbenpaare bilden

Von Adobe gibt es das sehr gutes Online-Werkzeug “kuler” zur Erzeugung von Farbpaletten nach obigen Schemata.

Hier können Sie auch Farbpaletten anderer Besucher und deren Bewertungen anschauen oder selbst erstellte Paletten zur Bewertung frei geben. Somit sieht man auch in etwas, was aktuell im Trend ist.

Eine weitere Methode ist natürlich, das Internet aufmerksam in Hinsicht der verwendeten Farben zu durchstöbern. Wenn man von den Seiten, die einem gefallen Screenshots fertigt, kann man sie später miteinander vergleichen um sich letzten Endes für die Variante zu entscheiden, die am besten gefällt. Ich verwende seit einiger Zeit auf dem Mac das Tool “LittleSnapper” von Realmacsoftware , mit dem man sehr bequem Snaps von Browserfenstern incl. Link zur Seite speichern, verschlagworten und sortieren kann.

Der nächste Artikel wird den Einsatz der Schriften auf der Website behandeln.

PNG-Bilder optimieren

Thomas — Mon, 30 Aug 2010 19:04:57 +0000

Einstellungen bei Fireworks Version 4

Im Internet gibt es aktuell eigentlich nur drei verbreitete Formate zur Darstellung von Bildern: JPG, GIF und PNG.

JPG wird in erster Linie für Fotos verwendet.
GIF für einfache Grafiken mit Indextransparenz.
PNG32 oder PNG24 für Grafiken mit Alphatransparenz.
PNG8 mit Indextransparenz.

Die Indextransparenz vom GIF- und PNG8-Format ist nur dann geeignet, wenn es keine Verläufe von Nichttransparent zu Transparent gibt, da es nur ein Farbwert für die Transparenz gibt.

Die Alphatransparenz ist für saubere Überlagerung halbtransparenter Grafiken unabdingbar.

Leider sind die damit einhergehenden Dateigrößen ein mehrfaches so groß wie z.B. beim GIF-Format. Bei Photoshop kann man nur zwischen obigen Möglichkeiten entscheiden aber mit Firefox gibt es seit der Version 3 eine gute Alternative, die selbst bei erfahrenen Webdesignern oftmals nicht bekannt ist.

Firefox bietet unter dem Punkt “Optimieren” für den Export die Einstellung PNG8 mit Alphatransparenz an. Somit kann man das kompaktere Format PNG8 mit der Alphatransparenz kombinieren und hat das jeweilige Optimum von beiden Formaten vereint.

WordPress Themen

Thomas — Sat, 28 Aug 2010 15:17:27 +0000

Wer WordPress-Templates selbst erstellen oder bearbeiten möchte, muss sich mit diesem Thema natürlich vertraut machen. Die Dokumentation von WordPress ist sicher recht gut, befasst sich aber kaum mit dem Thema Templates.
Von den beiden unten dargestellten Büchern, die sich intensiv mit diesem Thema befassen, gibt es einige Kapitel im Internet zu lesen. Die Links zu den verfügbaren Texten habe ich unten aufgelistet.

“PHP für WordPress – Themes und Templates selbst entwickeln” von Clemens Gull, erschienen im Franzis-Verlag.
Es kann hier bestellt werden.

“WordPress-Themes – Design und Implementierung für WordPress 3” von Jonas Hellwig und Christian Gatzen, erschienen im Franzis-Verlag.
Es kann hier bestellt werden.

Viel Spaß beim Lesen

Der Weg zur eigenen Website — Teil 3: Wireframes

Thomas — Sat, 28 Aug 2010 13:37:43 +0000

Der letzte Artikel befasste sich mit der Struktur der Website und mit den sich daraus ergebenden Möglichkeiten der Navigation. Wireframes befassen sich dagegen mit der Struktur der einzelnen Seiten. Mit einem Wireframe wird jede einzelne Seite im Detail entworfen um die Wirkung zu testen und die beste Anordnung der Seitenelemente fest zu legen.

Auf jeder Seite gibt es Elemente, die bei allen Seiten an der selben Stelle platziert sind. Hiermit bekommen die Website ein Grundgerüst und eine einheitliche Linie. Je nach Funktion der einzelnen Seite gibt es hierfür unterschiedliche Elemente, deren Anordnung in dem individuellen Bereich der einzelnen Seite festgelegt wird.

Die nachfolgenden Abbildungen sollen dies am Beispiel unserer Website verdeutlichen:

Start- und Service-Seite

Portfolio und Blogroll

Kontakt und Impressum

Die Größen und Proportionen der einzelnen Blöcke in den Wireframes sind nicht so konkret, wie das obige Abbildungen vermuten lassen könnten. Bei der Umsetzung der Seiten und entsprechend dem gewählten Design ergeben sich die Größen und Proportionen meist zwangsläufig. Wird z.B. eine feste Seitenbreite von 960 Pixeln gewählt, so ergeben sich die Breite der Blöcke aufgrund der Teilungen und Zwischenräume. Die Höhe wird bei den meisten Blöcken durch den Inhalt dynamisch ermittelt.

Der nächste Artikel wird den Einsatz der Farben auf der Website behandeln.

8 Faces — neues Typographie Magazin

Thomas — Fri, 27 Aug 2010 16:51:24 +0000

»Wenn Sie für den Rest Ihres Lebens nur noch acht Schriften verwenden dürften, welche würden Sie wählen?«

8 Faces ist ein neues Magazin für Liebhaber der Typographie, welches diese Frage – und viele mehr – pro Ausgabe an acht führenden Designern aus den Bereichen Web-Design, Print Design und Illustration stellt.

Die erste Ausgabe ist bereits vergriffen, jedoch als PDF-Version für 3,00£ auf 8faces.com zu bekommen. Ich habe leider auch nur die PDF-Datei erwerben können. Trotzdem ist das Lesen und Betrachten des Magazins ein einziger Genuss

Die zweite Ausgabe erscheint noch vor Weihnachten und kann Anfang ab November vorbestellt werden. Das Magazin gibt es aktuell nur in englischer Sprache, was in unserer Branche aber sicher kein Problem sein sollte.

If you could only use eight typefaces for the rest of your life, which would you choose?

8 Faces is a new magazine for devotees of typography that asks this question — and many more — to eight leading designers from the fields of web design, print design, illustration, and of course type design itself.

Extensive examples of these designers’ work and further contributions from other leading artists mean that the magazine is a beautiful artifact to behold. 8 Faces is available internationally from this website and in a few selected retail outlets in the UK.

#1 features interviews with eight incredible designers.
— Team of 8 Faces

Verwendete Plugins für WordPress

Thomas — Fri, 27 Aug 2010 15:10:34 +0000

WordPress ist »out of the Box« schon ein phänomenales System zur Erstellung von Websites, egal ob für Blogs oder seitenorientierte Sites.

Dennoch gibt es bei jeder Website Bereiche, die mit den Basisfunktionen nicht abgedeckt werden können. Hier kommen die Plugins ins Spiel, die WordPress um verschiedene Funktionalitäten erweitern.

Die nachfolgende Liste zeigt die von mir verwendeten Plugins für diese Website auf.

FD Feedburner Plugin von John Watson

Hiermit werden die Feeds zu FeedBurner umgeleitet, was unnötigen Traffic vermeidet und mehr Möglichkeiten bietet. Ich hatte bereits einen Artikel geschrieben in dem man hierzu Näheres erfahren kann.

Google XML Sitemaps von Arne Brachhold

Dieses Plugin erzeugt eine XML-Sitemap und hält diese automatisch aktuell. So hat Google immer den aktuellen Stand der Website verfügbar.

Landing Sites von The undersigned and Frank Bültge

Wennn Besucher von einer Suchmaschine auf die Website kommen, suchen sie spezifisch nach etwas. Meist durchsuchen sie nur das Suchergebnis. Mit diesem Plugin wird dem Besucher einer Auswahl an relevanten Artikeln der Website angeboten.

Math Comment Spam Protection von Michael Woehrer

Erzwingt die Lösung einer kleinen Rechenaufgabe bei Eingabe eines Kommentars . Dies ist in halbwegs wirksamer Schutz vor Spam-Robots, schützt aber nicht vor Spam, der manuell eingetragen wird.

Mit diesem Plugin kann man eine kleine Auflistung ähnlicher Artikel unter einem Artikel erstellen lassen. Das WordPress-Plugin Related Posts by Category listet ähnliche Beiträge eines beliebigen Artikels auf. Als Suchfaktor verwendet das Plugin nicht den Beitragstitel und auch nicht die Gewichtung des Inhalts. Vielmehr dient die Kategorie, die dem aufgerufenen Beitrag zugewiesen wurde, als Quelle der Übereinstimmung.

Secure WordPress von jremillard

Kleine Grundlagen für die Sicherheit der WordPress Installation. Durch gezielte kleine Modifikationen der Installation kann die Sicherheit erhöht werden.

SyntaxHighlighter Evolved von Viper007Bond

Zur Darstellung von Programmcode in Artikeln ist dieses Plugin bestens geeignet. Für gängige Programmiersprachen gibt es unterschiedliche Darstellungen.

Widon’t von Shaun Inman

Das ist eine kleine Typo-Hilfe für WordPress. Als »Witwe« bezeichnet man einen Fehler im Umbruch des Schriftsatzes. Das sieht dann so aus, dass z.B. das letzte Wort einer Überschrift allein auf einer neuen Zeile landet. Das Plugin ersetzt einfach das Leerzeichen vor dem letzten Wort durch ein »non breaking space«, wodurch die letzten beiden Wörter nur noch gemeinsam umbrochen werden können. Ein einsames letztes Wort, die »Witwe«, auf einer Zeile ist also nicht mehr möglich.

Fehlt in dieser Aufstellung noch etwas? Welche Plugins bevorzugt ihr? Über Hinweise und Kommentare würde ich mich freuen.

Der Weg zur eigenen Website — Teil 2: Struktur und Navigation

Thomas — Thu, 26 Aug 2010 11:53:16 +0000

Im letzten Artikel ging es um grundsätzliche Überlegungen zur Erstellung der Website. Mit der Recherche und der Ideen- sowie Informationssammlung beginnt der Prozess. Dann die Überlegung ob eine statische oder besser eine dynamische Website zum Einsatz kommen soll.

Mit der Sortierung und Strukturierung der Informationen, die auf der Website dargestellt werden soll, geht es weiter. Der Besucher der Website soll sich schnell zurecht finden, problemlos den Weg zur gesuchten Information finden und hierbei mit möglichst wenigen Klicks oder Eingaben zum Ziel kommen.

Die Grundstruktur kann man einfach mit Stift und Papier skizzieren:

Informationen strukturieren und zu Papier bringen

Es gibt auch Programme oder Websites, mit deren Hilfe man recht zügig die Struktur dokumentieren kann. Anwendungen wie Microsoft Visio, OmniGraffle oder ConceptDraw MINDMAP oder Websites wie writemaps.com sind einige Beispiele hierfür.

Mit writemaps.com erstellte Struktur bzw. Sitemap

Abhängig von der Komplexität der Struktur gibt es unterschiedliche Möglichkeiten, wie die Navigation der Website realisiert werden kann. Hierüber sollte man sich Gedanken machen, bevor man beginnt, das Layout der einzelnen Seiten zu planen.

In der Praxis haben sich bestimmte Formen der Navigation eingebürgert, die den Anforderungen möglichst optimal Rechnung tragen sollen.

Es gibt die Hauptnavigation, die auf allen Seiten verfügbar ist und über die alle wichtigen Seiten erreicht werden können.
Dann gibt es die Hilfsnavigation, die auch auf allen Seiten verfügbar ist, jedoch nicht das gleiche Gewicht hat, wie die Hauptnavigation. Ein Impressum oder ein Login wäre hierfür zwei Beispiele.
Die Untermenüs unterstützen die Hauptnavigation, indem sie bestimmte Teile der Hauptstrukturbereiche ansteuerbar machen.
Die lokale Navigation hilft auf Einzelseiten mit viel Inhalt, bestimmte Bereiche über Sprungmarken direkt ansteuerbar zu machen.
Mit der Brotkrumennavigation behält man in tief verschachtelten Ebenen der Struktur den Überblick und kann sich in der Hierarchie immer problemlos wieder “nach oben hangeln”.
Mit der Paginierung kann man eine große Anzahl zusammenhängender Informationen auf mehrere kleinere Seiten verteilen und ansteuern.

Hauptnavigation und Unternavigation

Bei obigem Beispiel sieht man eine horizontale Hauptnavigation. Die Unternavigation liegt als horizontale Leiste direkt unter der Hauptnavigationsleiste.

Hauptnavigation und Unternavigation

Hier wird die horizontale Hauptnavigation durch eine vertikale Unternavigation auf der linken Seite unterstützt. Es gibt in diesem Beispiel noch eine weitere Unterebene, die optisch ansprechend dargestellt wird. Zudem wird eine Brotkrumennavigation unterhalb der Hauptnavigation angezeigt.

Hilfsnavigation

Die Hilfsnavigation wird meist recht schlicht in reiner Textform im unteren Bereich der Seite realisiert. Manchmal steht sie auch ganz oben am Bildschirmrand, in die rechte Ecke gedrängt.

Lokale Navigation

Bei obigen Beispiel ist die Hauptnavigation und die lokale Navigation identisch. Der gesamte Inhalt der Website steht auf einer einzigen Seite. Per Navigation zu den Sprungmarken wird der gewünschte Ausschnitt der Seite dargestellt.
Diese Technik ist aktuell im Trend, ist aber nur bei kleinen Websites mit wenig Inhalt empfehlenswert. Bei viel Inhalt würde die Flexibilität und die Ladezeit doch sehr leiden.

Paginierung

Die Paginierung steht meist unten links oder mittig unter dem eigentlichen Inhaltsbereich der Seite.

Im nächsten Artikel wird es um die Wireframes gehen, mit deren Hilfe man das Seitenlayout planen kann.

100 freie WordPress Themen in hoher Qualität

Thomas — Wed, 25 Aug 2010 20:31:43 +0000

Auf der Website von Smashing Magazine wurde eine Liste von 100 Themen für WordPress in wirklich guter Qualität erstellt.

Die Liste ist sortiert nach Themen für:

Gallerie und Portfolio Themen
Blogger Themen
E-Commerce Themen
Cleane Themen
Themen in Magazin-Aufmachung
Minimalistische Themen
Mobil-taugliche Themen
Pre-Launch Themen
Anwendungsveränderte Themen
Tools zur Themenerweiterung
Starterthemen

Hier der Link zum Beitrag.
Die nachfolgenden Abbildungen sind Links zu den jeweiligen Websites mit den Themen und Downloads und stellen nur eine kleine Auswahl der Themen dar.

Der Weg zur eigenen Website — Teil 1: Recherche

Thomas — Sun, 22 Aug 2010 17:15:26 +0000

Mit einer Folge von Artikeln möchte ich beim Entstehungsprozess einer Website Hilfestellung geben. Oft haben Kunden, wenn sie zu mir kommen, keine konkrete Vorstellung wie ihre Website aussehen soll und was sie beinhalten sollte. Diese Artikelserie richtet sich nicht an Web-Designer/-Entwickler sondern an potenzielle Kunden, die sich informieren wollen, was sie alles beachten müssen, um zu einer guten Website zu kommen.

Ein guter Anfang ist sicher, wenn man sich Websites der gleichen Branche anschaut und sich dabei eine Liste mit Punkten erstellt, die einem gefallen und solchen, die man nicht gut findet. Hierbei bekommt man auch ein Gefühl dafür, welche Informationen im allgemeinen veröffentlicht werden.
Mit jeder Branche werden in unseren Kulturkreisen bestimmte Stilrichtungen, Formen, Farben und Schriften assoziiert. Eine Steuerberater wird sich z.B. anders im Web darstellen wollen als eine Heavymetal-Gruppe. Das bedeutet aber nicht, dass man sich in ein enges Korsett stecken lassen muss, nur um die landläufigen Erwartungen zu erfüllen. Es gilt ein Design zu erstellen, mit dem man sich perfekt identifizieren kann, das zur Branche passt und doch möglichst eigenständig ist.

Vergleich Website Steuerberater vs. Heavy Metal

Bei der Recherche entwickelt man ein Gefühl, welche Informationen und in welchem Umfang auf einer Website sinnvoll dargestellt werden können. Nun sollte man sich Gedanken machen, welche Informationen man auf der eigenen Website darstellen möchte und diese Informationen möglichst übersichtlich strukturieren.

Informationen strukturieren und zu Papier bringen

Abhängig vom Umfang der darzustellenden Informationen und der Häufigkeit, mit der Informationen geändert und ergänzt werden sollen, muss entschieden werden, ob man eine statische Website oder ein sogenanntes “Content Management System” einsetzen möchte.
Eine statische Website liegt in ihrer fertigen Form auf dem Webserver des Providers und stellt weniger Ansprüche an den Webserver. Änderungen können nicht so schnell realisiert werden und können meist nur von der Webagentur vorgenommen werden.
Beim Content Management System werden die Informationen der Website in einer Datenbank auf dem Webserver abgelegt und beim Abruf einer Seite dynamisch mit dem Layout zu einer HTML-Seite zusammengefügt und an den Browser des Besuchers ausgeliefert. Die Daten werden in einem sogenannten Backend verwaltet und hier kann der Besitzer der Website auch problemlos selbst Hand anlegen. Dadurch können Änderungen und Erweiterungen sehr schnell durchgeführt werden.

Siehe hierzu auch: Statische oder dynamische Website?

Statische Website vs. Content Management System

weiter geht es mit der Struktur und der Navigation

Kunden aus der Hölle — mal etwas zum schmunzeln

Thomas — Fri, 20 Aug 2010 19:28:08 +0000

Ich versichere, ähnliches ist mir zum Glück bei meinen Kunden noch nie passiert

Zur Website