Homepage | Webdesign

Nachdem ich eben den Artikel von Jan Tißler auf seinem Upload-Magazin gelesen habe, muss ich sagen, das ich ihm voll und ganz zustimme. Jeder, der einen Blog betreibt, hat ein bestimmtes Thema zum Inhalt. Es ist aber schlicht unmöglich alle Unterthemen, Ansichten und Gedanken, die es zum gewählten Thema gibt, zu bloggen. Daher ist es sinnvoll, weiterführende Informationen zu verlinken. Diese Links können auch durchaus zu Mitbewerbern führen. Warum auch nicht, der Blogleser will sich vordergründig informieren und das möglichst neutral.

Eine neutrale Informationsquelle ist das Internet (zum Glück) nach wie vor. Vorausgesetzt, als Nutzer besucht man mehrere, möglichst unabhängige Seiten. So kann man sich ein neutrales Bild des jeweiligen Themas machen.

Wie das Upload-Magazin schreibt, sollte man als Blogger und Besitzer einer privaten Homepage zu themenrelevanten Seiten verlinken. So hilft man erstens dem Nutzer, weitere Informationen zum gewählten Thema zu erhalten und – ganz nebenbei – auch den Suchmaschinen themenrelevante Seiten zu finden und zu indezieren.

Ich kann nur jedem, der eine Homepage (egal, ob statische Seite, Blog oder Forum) betreibt, zu dem Thema, welches auf der Seite behandelt wird themenrelevant extern zu verlinken. Es macht wenig Sinn auf einer Seite, die sich mit Armbanduhren beschäftigt, zu einer Seite mit Autoreifen zu verlinken, nur weil beide Gegenstände üblicherweise rund sind.

Die Meinungen, wie gut Google und Co. die Themenrelevanz bei Links berücksichtigt, gehen aus einander, doch darf man wohl davon ausgehen, das die Semantik einen immer größeren Stellenwert im Netz einnehmen wird.

Zwei weiterführende Links:

• Mythos Themenrelevanz
• Google und die Semantik

Wer professionelle Webseiten erstellen muss, kommt um fundierte Kenntnisse im Bereich (x)HTML und diversen Scriptsprachen nicht herum. Doch das es auch einfacher geht, zeigt Apple mit dem zum iLife ’08 gehörendem Webeditor iWeb. In der aktuellen Version 08 kann man allerdings nicht von einem Editor im klassischem Sinne nicht sprechen.

Im Gegensatz zu Quelltext-orientierten Editoren ist iWeb eher ein Grafikprogramm mit eingeschränktem Funktionsumfang. Der Vorteil ist allerings mehr als klar: Beinahe ohne jegliche Kenntnisse lasen sich fast spielerisch Webseiten erzeugen. Auf Basis vorgefertigter Vorlagen (Templates) lassen sich bequem in den vorgegeben Textbereichen eigene Texte einfügen, Bilder sind schnell aus iPhoto importiert und können sehr intuitiv der Seite angepasst werden. Links sind sehr einfach und schnell eingefügt und sämtliche Formatierungsarbeiten  – sofern gewünscht – sind auch schnell erledigt.

Doch wie gut ist das Ergebnis, welches auf dem Server landet?

Da Apple recht viele aktuelle (Web 2.0) Funktionen in den Templates eingebunden hat, ist der Quelltext recht umfangreich und die Ladezeiten der Seiten sind dementsprechend lang. Dies enttäuscht sicher, doch wenn man bedenkt, das sich jeder Mac OS X – Nutzer ohne Zusatzkosten schnell seine eigene Homepage bauen kann, muss man von einem gelungenem Produkt ausgehen. Professionellen Ansprüchen genügt iWeb sicher nicht, doch das ist auch gar nicht beabsichtigt.

In gewisser Weise vereinigt iWeb einige Funktionen, die selbst so hochwertige Programme wie der Adobe Dreamweaver nicht mitbringt. So lassen sich im iWeb ein Blog zusammenklicken, Fotogalerien mit wenigen Mausklicks erstellen und sogar Filme und Podcasts einfügen. Wer also für sich , seine Familie oder einen Verein eine kleine Webseite erstellen will, kann mit iWeb brauchbare Ergebnisse erzeugen. Solange keinerlei Ansprüche im Bereich Suchmaschinen-Optimierung, schnelle Ladezeiten und individuelles Webdesign liegen, kann man mit iWeb nett arbeiten.

Besonders gut muss hervorgehoben werden, wie reibungslos iWeb mit den anderen (und auch auch fremden) Programmen auf dem Mac zusammen arbeitet. Der Import von Daten (Filme, Bilder, Texte, etc.) in eine Homepage geht sehr einfach per Drag n’ Drop – wie es sein soll.

Wer gern sehen möchte, wie Seiten, die mit iWeb erzeugt worden sind, sollte sich die Homepage mit iWeb mal ansehen. Auf dieser Seite beschreibt der Autor in einem auf iWeb aufgebautem Blog, wie er mit dem Programm arbeitet, welche Vorteile existieren und was er vermisst.

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.

Wer gestern etwas verwirrt war beim Anklicken des Links “So sah es bisher aus” sah auf den ersten Blick nur ein Bild (Screenshot) der Seite, wie sie bis gersten aussah.

Seit heute habe ich ein Zusatzprogramm namens “Lightbox” aktiviert. Diese kleine Script verhilft das Öffnen von Bilder in grosser Darstellung mit einer netten Animation. Wenn man die Bilder anklickt, bekommt man nicht nur das Bild, sondern auch zwei Schaltflächen gezeigt, die eine einfache Vorwärts / Rückwärts – Navigation durch die kleine Bildergalerie ermöglichen.

Ein Beispiel kann man sehen, wenn man eines der folgenden Bilder klickt:

So, in den nächsten Tagen werde ich mich an das eigentliche Design der Website machen. Bevor die Farben definiert werden, kommt das grobe Layout dran. Mehr dazu im nächsten Beitrag.

So, heute am Dienstag, den 13. Mai 2008 starte ich mit dieser Seite, die (noch) äußerst einfach daher kommt. Das liegt daran, das ich mir überlegt habe, das Sie als Besucher dieser Seite im Laufe der Zeit mit erleben können, wie eine Webseite entsteht. Dabei können Sie nicht nur den Verlauf und deren Berabeitung im Bereich Webdesign, sondern auch in inhaltlicher Hinsicht verfolgen, wie diese Homepage wächst.

Als Basis dient auf dieser Seite ein Blogsystem namens “WordPress”. Dieses Script bietet enorme Ausbaumöglichkeiten. Einige werden auf dieser Seite nach und nach implementiert und Sie als (regelmäßiger) Besucher können so sehen, wie es weiter geht.

Doch das Script WordPress genügt nicht, denn neben den Funktionen muss eine Seite ein Aussehen haben. Diese wird bei WordPress mit Themes bewerkstelligt. Da ich es für unschön gefunden hätte, irgend eines der vielen fertigen Designvorlagen (Themes) zu nehmen, nutze ich hier das “Basis-Theme” von Frank Bueltke. Dieses Theme werde ich also im Laufe der Zeit bearbeiten, so dass von dem jetzigen sehr einfachen Layout – wenn man es denn überhaupt so nenne kann -  bald nicht mehr viel zu sehen sein wird.

Bis jetzt ist “hinter den Kulissen” bewusst fast nichts erarbeitet, denn es soll ja alles “live” für Sie als Besucher entstehen. Lediglich ein WordPress Plugin namens “All in One SEO Pack” ist installiert. Dieses Zusatzprogramm erlaubt die individuelle Anpassung / Editierung jedes einzelnen Beitrages in Hinblick auf die Suchmaschinen-Optimierung der Beiträge.

Selbstverständlich freue ich mich über jede Art von Anregungen, konstruktiver Kritik oder gar Lob. Wenn Sie mehr als nut Zuschauer sein möchten, hinterlassen Sie gern einen Kommentar.

So, für heute erstmal Tschüß!