Homepage | Webdesign

Man sieht es wohl auf fast jedem Blog. Der neueste Beitrag steht ganz oben. Doch wenn man ältere Beiträge lesen möchte, muss man häufig lange nach unten scrollen. In dem Blogscript WordPress ist eine Kleinigkeit, wenn man die langen Scrollseiten verkürzen möchte. Man kann einstellen, wieviel Beiträge pro (Scroll-) Seite angezeigt werden sollen. Eben habe ich für dieses Blog die Anzeige auf 7 Beiträge beschränkt.

Wenn der Besucher nun zu älteren Beiträgen gelangen möchte, kann er herunter scollen und oberhalb der Fusszeile auf “ältere Beiträge” klicken. Auf so einfach Weise kann man die Benutzerfreundlichkeit eines Blogs spürbar verbessern. …und so ganz nebenbei hat man auch die Ladezeit eines Blogs verkürzt.

WordPress zeigt eigentlich bei jedem Theme an, wann ein Eintrag erstellt wurde. Die Zeit des Publizierens wird im Script automatisch gespeichert. Wenn man aber ein blankes Theme nutzt, welches diverse Funktionen nicht mit bringt, werden die Einträge zwar auch chronologisch sortiert, doch Sie als Besucher haben die Info nicht.

Mit dem kleinen PHP – Schnipsel

“<div class=”cite”><?php the_time(“l, j. F Y”) ?>, <?php the_time() ?> Uhr <?php edit_post_link(‘Bearbeiten’); ?> – Kategorie: <?php the_category(‘,’) ?></div>”

lässt sich die Angabe auf die Index.php setzten. Diese Funktion habe ich soeben eingebunden und nun kann jeder Besucher sehen, wann welcher Artikel ins Netz gestellt wurde.

Wer den obigen Code liest, stellt fest, das

1. eine DIV – Klasse geöffnet wird, die in meinem Fall eine Schriftgröße von 9 Pixel beschreibt
2. das Script das Erstellungsatum des Beitrages aus dem System liest und wiedergibt
3. ein Komma
4. Die Uhzeit ausgelesen wird
5. ein Link mit dem Text “Bearbeiten” erscheint, sofern der Autor eingeloggt ist
6. und schließlich die Kategorie angezeigt wird, in der der Artikel abgelegt wurde
7. Die DIV – Klasse wird geschlossen

Mit Hilfe einiger Variablen und daraus resultierenden Funktionen lassen sich im WordPress-Script jede Menge sinnvoller (aber sicher auch unsinniger) Informationen auf die Seite “zaubern”.

Auf sehr vielen Websites findet man die Saubermann – Optik mit dem spiegelnden Effekt. Im Gegensatz zum Grunge Design ist der Look mit dem Lichteffekt schon kalter Kaffee, sieht aber immer noch nett aus, denke ich. Solange es nicht übertrieben wird, ist es doch ein netter Effekt.

So habe ich eben das “alte” Logo mit diesem Effekt versehen. Wie das geht, ist recht einfach und benötigt wenige Arbeitsschritte im Adobe Photoshop CS3.

1. In meinem Fall habe ich das Logo im Illustrator erzeugt. Da der Effekt besser und einfacher im Photoshop funktioniert, habe ich die Grafik als 72dpi – Bild in das Photoshop-Format *.psd exportiert.
2. Im Photoshop geöffnet, sollte man darauf achten, das sich der Schriftzug und der Hintergrund auf eigenen Ebenen befinden. Ferner muss der Schriftzug frei gestellt ist.
3. Sollte der Text noch als Textebene vorliegen, so muss dieser gerastet werden.
4. Nun dupliziert man die Ebene mit dem Schriftzug und spiegelt über das Menü Bearbeiten -> Transformieren -> “vertikal spiegeln” diese Ebene.
5. Nun schiebt man diese Ebene soweit nach unten, das sie sich unmittelbar unter der ersten Ebene befindet.
6. Auf der Ebene mit dem gespiegelten Text erzeugt man eine Ebenenmaske.
7. Über das Verlaufswerkzeug erzeugt man im Maskierungsmodus einen Verlauf mit der Farb- Standardeinstellung schwarz / weiß. Der Verlauf sollte von oben nach unten gehen, wobei er im Bereich der “echten” Schrift anfangen und im Bereich der “Spiegelschrift” enden sollte.
8. Nach dem Umschalten zurück in den Standardmodus kann man eine Auswahl sehen, diese löscht man und schon ist der Spiegeleffekt schon recht realistisch.
9. Um es etwas besser wirken zu lassen, kann man die Deckkraft der “Spiegel-Ebene” auf einen Wert zwischen 30% und 60% setzen. Das ist nun – wie so oft bei grafischen Arbeiten Geschmackssache.
10. Nun kann man noch mit der Füllmethode spielen, bei meinem Logo brachte dies aber nichts, da die Schriftart aus zwei unterschiedlichen Farben besteht.

Natürlich muss das Logo dann noch als *.gif (oder *.jpg) datei gesichert werden und auf den Server hoch gespielt werden. Im WordPress muss es dann in der header.php eingebunden werden und ggf. die CSS Datei angepasst werden.

So sieht dann der spiegelnde Effekt aus:

So kann es aussehen, wenn der Spiegeleffekt verwendet wurde

Eine oft unterschätzte Eigenschaft muss jede Homepage haben: Sie muss benutzbar sein, schön aussehen genügt sicher nicht. Wie in dem Buch “Don’t make me think” beschrieben, sollte eine Homepage so gestaltet sein, das jeder Besucher sie möglichst ohne langes Nachdenken benutzen kann. Man sollte sofort erkennen können, wo man klicken kann, wo der Inhalt steht und was ggf. Werbung ist.

Dazu gehört natürlich auch, das die Begriffe, die Verwendung finden, leicht verständlich sind. Wenn man eine Website erstellt, die Franzosen als Zielgruppe hat, sollte man keine norwegischen Texte verwenden, sondern in der Landessprache der Franzosen schreiben. Das klingt zwar logisch und man mag meinen, das es eine Selbstverständlichkeit sei, doch die Realität sieht erschreckend oft anders aus. Ich beobachte dieses Phänomen sehr häufig bei Hardware und Software – Herstellern. Hier werden die Produkte, die man kaufen soll in deutscher Sprache angepriesen. Hier werden ausführliche Produktbeschreibungen, aufwendige Animationen und kleine Filmchen gezeigt. Doch wenn man sich zum Support bewegt, wird es oft englisch. Ok, man darf in der heutigen Zeit davon ausgehen, das die englische Sprache kein Hindernis mehr sein muss, doch im Sinne der Benutzerfreundlichkeit (und der besseren Dienstleistung nach dem Kauf eines Produktes) wäre es angebracht, wenn auch hier die Inhalte in der Sprache zu lesen wären, wie sie beim Kauf waren.

Es wäre unfair, über andere Seiten zu meckern, wenn man auf der eigenen diese Grundsätze nicht beachtet. Daher habe ich heute die Lightbox – Schaltflächen (auf englisch: Buttons) “eingedeutscht”. In dem Original-Script werden die Buttons als *.gif-Datei mitgeliefert. Diese haben aber von Haus aus englische Texte. Ok, close und next versteht man sicher noch sehr leicht, doch mit “prev” kann es ggf. schon etwas schwieriger werden. Wer englisch versteht, weiss, das es “previous” – also vorhergehend bedeuten soll.

So baut man im Photoshop die Buttons um

Ich arbeite mit Dreamweaver und habe die Buttons (drei Gif-Dateien) ausfindig gemacht und diese dann im Photoshop geöffnet.

1. Zunächst habe ich die Datei “closelabel.gif” geöffnet.
2. Um eine Gif-Datei bearbeiten zu können, muss sie über den Menüpunkt Bild -> Modus in eine RGB – Datei umgewandet werden.
3. Im Ebenen – Fenster habe ich eine Ebene hinzugefügt und diese mit weisser Farbe komplett gefüllt.
4. Mit dem Textwerkzeug den Text “schliessen” geschrieben, den Text innerhalb des Bildes ausgerichtet und unterstrichen formatiert. Der Besucher interpretiert unterstrichenen Text als Link, den er anklicken kann und das soll er ja auch, wenn er das Bild nicht mehr sehen möchte.
5. Nun habe ich das Bild über Datei – > Für Web speichern als closelabel.gif gespeichert wobei ich die alte Datei überschrieben habe.
6. Mit den beiden Buttons next und prev habe ich es im Prinzip genauso gemacht, nur das ich beide GIF – Bilder aus einer Photoshop – Datei erstellt habe, denn die beiden Bilder sind gleich groß. So kann man sich ein paar Arbeitsschritte sparen.
7. Zum Schluss müssen die Bilder auf den Server hochgespielt werden. Beim nächsten Aufruf der Lightbox – Funktion, also dem Anklicken eines Bildes werden die Schaltflächen in deutscher Sprache dargestellt.

So ist diese deutsche Homepage dem Zustand einer fertigen Website ein kleines Stück näher gekommen.

Seit gerstern Abend ist ein grobes Layout zu sehen. Ich entschied mich für die “klassische” Variante, die in vielen Blog Verwendung findet – dem zweispaltigen Aufbau. In der CSS (Cascading Style Sheets) – Datei habe ich 4 <div> – Container erstellt, die die 4 erkennbaren Bereiche dieser Seite darstellen.

1. Der Header Container: Der breite Balken, indem sich das “Logo” und die Hauptüberschrift befindet. In der CSS Datei sind im Wesentlichen die Hintergrundfarbe und die Aussenmaße definiert.
2. Der “Post” Container: In diesem (hellblau unterlegtem) Bereich befinden sich die eigentlichen Inhalte wie dieser Text. Dieser Container stellt die linke Spalte des Layouts dar.
3. Ein weiterer <div> – Container namens “Sidebar”. Diesen habe ich zunächst mit einem schwarzen Rahmen und grau eingefärbten Hintergrund versehen. Die Sidebar dient in erster Linier der Navigation. Hier werden also künftig sämtliche Links zu den einzelnen Seiten, die Suchfunktion, der Kalender, das Archiv und vermutlich weitere Inhalte folgen.
4. Ebenfalls grau hinterlegt habe ich den 4. Container namens “footer”. Wie auf einem Briefbogen oder einer Broschüre haben auch Webseiten eine Fusszeile.

Da sich das Layout in nächster Zeit ändern wird, habe ich zwei Screenshots erstellt, die den optischen Vergleich zu späteren Arbeitsständen zu lassen.

Auf der Suche nach dem richtigen Logo für diese Seite bin ich noch nicht so richtig fündig geworden, bzw. der richtige Einfall kam noch nicht, aber im Gegensatz zu offiziellen Projekten kann ich hier einfach mal ein schnell im Illustrator erstelltes “Logo” einbinden. Ob es bei den Farben bleiben wird, weiss ich noch nicht, aber ein wenig Farbe ist schon mal nett, oder?

So sah es bisher aus – ohne Logo

In diesem Fall habe ich ein blaues Rechteck aufgezogen und mit einer Schriftweite von 50% den Text in unterschiedlicher Farbe platziert. Logos haben häufig klare, einfache Formen und glänzen weniger mit grafischen Tricks, sondern sollen in erster Linie nur eines: Für Produkte oder Firmen dienen sie als unverwechselbares Wiedererkennungsmerkmal und Identifikationswerkzeug.

Da es sich hier (noch) um eine Seite handelt, die keine grossen Anforderungen hat, kann das Logo – wenn man es denn so nennen möchte – erstmal so lassen.

Wenn man up to date im Web 2.0 sein will, müsste man leicht plastisch wirkende Schriftzüge mit nach unten spiegelnder Darstellung wählen. Ob der auch als “Aqua-Look” bezeichnete Trend immer das Beste sein muss, sei einmal dahin gestellt. Ich bin halt ein Freund von klaren Kontrasten und weniger grafische Spielereien, obwohl ich da im Laufe der Zeit einiges zeigen werde.

Verbesserungsvorschläge zum Logo?