Ich möchte mir mit Ihnen einige Gedanken über die Gestaltung von Internet-Seiten machen, die oft auch Homepages genannt werden. Dabei spielt es keine Rolle, ob Sie selber Seiten für das Internet erstellen oder ob Sie Ihre Entwürfe durch einen Web-Designer realisieren lassen. Sie brauchen auch keine Befürchtungen zu haben, dass wir in das Eingemachte von
Wenn man sich an das Layout einer Web-Seite macht, überlegt man zuerst, wer die angesprochene Zielgruppe ist und was der eigentliche Zweck der Homepage sein soll. Die Seite wird sicher für die sachliche Präsentation von Informationen anders aussehen als für eine Werbung, die vor allem die Aufmerksamkeit der Besucher auf sich ziehen soll. Überlegen Sie doch einmal, wie Sie sich ein Layout für eine Seite vorstellen, die Sie bei Problemen beim Hauskauf in der Algarve unterstützen will. Erwarten Sie leuchtend-grelle Farben? Das Ganze mit schmissiger Rock-Musik untermalt? Und jetzt versetzen Sie sich in die Lage eines Seitenerstellers, der eine bekannte Pop-Gruppe präsentieren möchte. Sicher wird sich die Seite optisch gravierend von der Hauskauf-Seite unterscheiden.
Eine Web-Seite besteht aus vielen Elementen. Beim Surfen im Internet fällt schnell auf, dass einige Seiten sehr aufwendig mit Farben arbeiten, viele Grafiken machen aus einem langweiligen Text erst eine interessante Präsentation, selbst Musik und kleine Filme sind immer häufiger anzutreffen. Vielleicht haben Sie sich als Surfer aber auch schon das eine oder andere Mal über lange Wartezeiten geärgert, bis Sie die Seite komplett sehen konnten. Wie kann man als Designer diese Probleme vermeiden?
Das größte Problem sind derzeit die verschiedenen Varianten von Web-Browsern, also den Programmen, mit deren Hilfe Sie sich auf Ihrem PC die Internet-Seiten ansehen können. Da gibt es für jedes Betriebssystem wie Windows 95, OS/2, Linux oder MacOS jeweils verschiedene Browser. Und selbst für ein Betriebssystem gibt es verschiedene Browser in verschiedenen Versionen. Am häufigsten eingesetzt werden die Browser Internet Explorer von Microsoft und Navigator (bzw. Communicator) von Netscape. Beide Anwendungen tragen momentan die Versionsnummer 4. Leider unterscheiden sich alle diese Programme darin, wie Sie Web-Seiten darstellen.
Stellen Sie sich einmal vor, dass Sie auf Ihren Seiten eine spezielle Schriftart wie Arial einsetzen wollen. Normalerweise stellt der Anwender bei seinem Browser ein, in welcher Schrift er die Seiten dargestellt haben möchte. Standardmäßig ist dies oft Times New Roman. Als Designer haben Sie die Möglichkeit, diese Einstellung zu übersteuern. Die Schriftart selber muss allerdings auf dem PC des Surfers vorhanden sein. Bei Arial ist das normalerweise kein Problem, aber bei etwas exotischeren Schriften wie Comic Sans MS wird das schon schwieriger. Besonders bei Benutzern anderer Betriebssysteme dürfen Sie das Vorhandensein dieser Schrift nicht unbedingt voraussetzen. Der Browser verwendet dann eine ähnliche Schrift, die auf dem PC verfügbar ist. Es ist nur die Frage, ob Sie das wollen, weil das Aussehen der Seite nachhaltig beeinflusst werden kann. Wir merken uns deswegen:
Möglichst keine speziellen Schriftarten verwenden! Wenn dies nötig sein sollte, dann wählen wir eine bekannte Schrift aus. Auf jeden Fall machen wir das Layout nicht von einer bestimmten Schriftart abhängig!
Ein Ausweg aus dieser Situation ist der Einsatz von Grafiken, den Sie sich aber durch erhöhten Aufwand und vor allem längere Ladezeiten erkaufen. Dazu erstellen Sie den Text in einem Grafikprogramm, formatieren ihn so, wie es Ihren Vorstellungen entspricht, und speichern ihn dann als Grafik-Datei (im Internet verwendet man üblicherweise entweder das GIF- oder das JPEG-Format). Auf diese Weise sieht die Schrift auf allen Systemen gleich aus.
Die Schrift kann man mit vielen Attributen wie fett, kursiv oder unterstrichen versehen. Das Unterstreichen eines Textes kollidiert aber leider mit der standardmäßigen Markierung von Hyperlinks, also den Stellen im Text, die auf weitere Seiten oder auf ganz andere Web-Sites verzweigen. Wenn Sie jetzt normalen Text unterstreichen, wird ein Besucher Ihrer Seite sehr wahrscheinlich auf diese Textstelle klicken, weil er dahinter eine Verzweigung wittert. Fehlanzeige! Ich kann das Grummeln richtig hören! Also
Das Unterstreichen von Wörtern ist tabu!
Neben diesen herkömmlichen Textattributen können Sie Ihre Texte auch farblich hervorheben. Aber auch hier ist weniger oft mehr. Gezielt eingesetzt, ist diese Gestaltungsmöglichkeit durchaus empfehlenswert. Auf keinen Fall darf dabei die Lesbarkeit leiden: eine graue Schrift auf einem grauen Hintergrund bereitet nun einmal den meisten Menschen Probleme beim Lesen. Wechseln Sie nach Möglichkeit nicht innerhalb eines Wortes die Farbe. Manche Farben haben Signalwirkung: ein Rot wird ein „Achtung“ implizieren, also sparsam verwenden.
Neben dem reinen Text ist die Grafik das zweithäufigste Element einer Web-Seite. Eine Seite über eine Gegend wie die Algarve wird ohne Fotografien nicht auskommen. Die wichtigste Frage, die wir uns stellen müssen, lautet: Welche Dateigröße und damit Ladezeit kann ich meinen Besuchern zumuten?
Da die Dateigröße massgeblich die Ladezeit beeinflusst, soll eine Grafik immer so klein wie möglich sein. Ein Rohscan im TIFF-Format mit einer Auflösung von 600 dpi ist absolut unbrauchbar. Wenn Sie eine Grafik auf einem Computer-Bildschirm darstellen möchten, so lassen Sie das Bild auf 96 dpi herunterrechnen oder scannen Sie gleich mit diesem Wert (dann haben Sie aber keine Reserve für nachträgliche Vergrösserungen). Als nächstes entscheiden Sie sich für eins der beiden Grafikformate GIF oder JPEG. Generell wählen Sie GIF für Grafiken oder Zeichnungen, JPEG für Fotos. Beide Formate komprimieren die Bilddaten, wobei bei JPEG Bildinformationen verlorengehen. Dafür ist GIF aber nur in der Lage, maximal 256 Farben zu speichern, was für Fotografien meistens nicht genug ist. Je mehr Farben Sie darstellen möchten, desto mehr Informationen müssen allerdings gespeichert werden, was die Dateigröße erhöht.
Nun haben wir also das Bild im Rechner. Mit der Darstellungsgröße sind wir noch nicht zufrieden, also kurz mit der Maus an einer Bildecke gezogen, und schon ist das Bild verkleinert. Denken Sie jetzt aber nicht, dass Sie damit auch nur ein einziges Byte eingespart haben. Sie können auf diese Weise ein Bild auf Briefmarkengröße schrumpfen, ohne dass sich die Ladezeiten irgendwie ändern. Die Bildinformationen sind nämlich nach wie vor komplett in der Bilddatei gespeichert! Ein anderer Weg ist besser: Laden Sie das Bild in ein Bildverarbeitungsprogramm, lassen Sie die Bildgröße herunterrechnen, und speichern Sie es wieder ab. Nun wurde die Datei von unnötigen Informationen bereinigt, und die Dateigröße ist dementsprechend kleiner.
Als Immobilienmakler haben wir zum Beispiel eine Reihe von Bildern Web-gerecht vorbereitet, die ein Objekt von allen Seiten präsentieren. Die Web-Seite mit einem Bild lässt sich schnell laden. Bei zwei Bildern verdoppelt sich die Ladezeit bereits, bei zehn Bildern ist die Ladezeit nicht mehr erträglich. Wie werden wir mit diesem Problem fertig? Es bietet sich eine Technik an, die mit Thumbnails, also verkleinerten Abbildern der Ursprungs-Dateien arbeitet. Erzeugen Sie sich von Ihren Bildern je eine auf Briefmarkengröße verkleinerte Version. Alle Briefmarken zusammen ergeben so vielleicht gerade mal die Dateigröße von einem einzigen Original-Foto und lassen sich somit in vertretbarer Zeit laden. Diese Thumbnails werden dann als Hyperlink ausgelegt, die erst beim Anklicken auf das eigentliche Bild verzweigen. Der Besucher kann also jederzeit selber entscheiden, ob er das Bild laden möchte oder nicht. Besonders freundlich vom Designer ist es, wenn er bei den Thumbnails noch die Größe der Datei angibt, die beim Anklicken nachgeladen wird.
Neben diesen großen Dateien werden auch kleine Bilder eingesetzt, die die Seite einfach optisch ansprechender machen. Dies können Navigationssymbole sein, die zum Beispiel auf andere Seiten verzweigen. Hier spielt die Dateigröße meistens nicht eine so entscheidende Rolle. Dennoch kann der Einsatz vieler verschiedener dieser Symbole die Gesamtladezeit deutlich verlängern. Wir können uns hier zunutze machen, dass die Browser die gerade geladenen Elemente alle auf dem PC des Besuchers zwischenspeichern. Setzen Sie eine Grafik lieber mehrmals auf einer Seite ein, als jedesmal eine andere Grafik zu laden. Denn die Grafik wird tatsächlich nur einmal übertragen und steht dann, praktisch ohne Zeitverlust, für wiederholte Darstellung auf der Seite zur Verfügung.
Die ganze Sache mit den Grafiken hat allerdings einen großen Haken: viele Internet-Surfer schalten in ihren Browsern die Darstellung von Grafiken einfach komplett ab! Damit werden natürlich besonders kurze Ladezeiten erreicht. Leider sind Ihre schönen Bilder dann völlig nutzlos. Eine Web-Seite darf also die zu transportierenden Informationen niemals ausschließlich als Grafiken verfügbar machen. Hyperlinks in Bildform sollten immer einen kurzen Text bei sich haben, über den die Verzweigung auch ohne die Grafik möglich ist.
Von einer einzelnen Grafik ist der Schritt zu einer Animation nicht besonders groß. Das GIF-Format ist in der Lage, mehrere Einzelbilder in einer einzigen Datei zu speichern, die dann vom Browser zyklisch nacheinander angezeigt werden, was den Eindruck einer fortlaufenden Animation im Sinne eines Daumenkinos erzeugt. Kleine Animationen können Leben in eine Web-Seite bringen. Manche Effekte sind ausgesprochen gelungen. Aber fragen Sie sich dabei immer, ob die Animation den Inhalt der Seite unterstützt oder ob sie vom Inhalt ablenkt. Das darf natürlich nicht der Fall sein. Eine Grafikdatei, die mehrere Einzelbilder enthält, ist natürlich auch größer und benötigt deswegen eine längere Ladezeit. Hier gilt es abzuwägen, inwiefern die Vorteile überwiegen. Schlimmstenfalls wartet Ihr potentieller Kunde nicht das Ende des Ladens ab, sondern klickt sich gleich zu einer anderen Seite weiter.
Animationen sparsam und gezielt einsetzen!
Wenn Sie alle Texte und Grafiken zusammengetragen haben, werden Sie alle diese Elemente möglichst sinnvoll zu einer Internet-Seite zusammenstellen. Verlieren Sie dabei nicht aus dem Blick, dass auf einer Bildschirmseite nicht unbegrenzt viel Platz für die Gestaltung zur Verfügung steht. Auch fällt es vielen Menschen schwer, größere Textmengen direkt am Bildschirm zu lesen. Aus diesen Überlegungen ergibt sich automatisch, dass größere Internet-Seiten besser auf mehrere aufgeteilt werden. Es ist nicht unbedingt notwendig, dass Sie den Text und die Grafiken so aufteilen, dass sie immer genau auf eine Bildschirmseite passen, aber wichtigen Abschnitten sollte eine eigene Seite gewidmet sein. Auch hier gilt natürlich, dass eine Seite, die kürzer ist, auch schneller aus dem Internet auf dem Bildschirm erscheint, weil weniger Daten übertragen werden müssen.
Normalerweise besucht ein Internet-Surfer Ihre Homepage über eine genau spezifizierte Eingangsseite. Soll der Besucher auch die anderen Seiten zu Gesicht bekommen, müssen Sie ihm auf Ihrer Seite die Möglichkeit dazu bieten. Das geschieht zum Beispiel über Navigationshilfen in Form von Hyperlinks, die „eine Seite weiter“ und „eine Seite zurück“ genannt werden. Eine weitere Möglichkeit ist, eine Navigation in Form einer Themenübersicht anzulegen, von der auf die weiteren Seiten verzweigt wird.
Teilen Sie größere Seiten in mehrere kleinere auf!
Wir haben uns bereits Gedanken darüber gemacht, wie man dem Besucher die Navigation auf mehreren Internet-Seiten erleichtert. Es ist nun einmal nicht jedermanns Sache, sich die exakte Adresse jeder einzelnen Seite zu merken. Deswegen bauen wir Verweise in Form von Hyperlinks ein, die den Besucher möglichst bequem auf die anderen Seiten weiterleiten. Eine Technik, die immer häufiger verwendet wird, ist das Arbeiten mit Frames, also „Rahmen“. Darunter versteht man das Aufteilen der zur Verfügung stehenden Bildschirmfläche in mehrere unabhängige Fensterbereiche. Leider setzen einige Designer Frames sehr exzessiv ein, so dass der Bildschirm mit vielen kleinen Fenstern überladen wird. Dies ist dann natürlich nicht mehr besonders übersichtlich. Und auch hier bedeutet der Einsatz von Frames eine längere Ladezeit, weil der Inhalt jedes Frames eine eigene, komplette Internet-Seite darstellt.
Dennoch lässt sich diese Technik hervorragend einsetzen, um dem Besucher eine Art Fernbedienung für die Navigation zur Verfügung zu stellen. Dazu erzeugt man meistens am linken Rand ein eigenes Fenster, in dem eine Stichwortliste angezeigt wird, über die durch Anklicken mit der Maus auf die entsprechenden Seiten verzweigt wird. Diese Liste könnte zum Beispiel die Rubriken „Übersicht“, „Produkte“, „Preise“, „Impressum“ und „Home“ enthalten.
Der Vorteil dabei ist nun, dass der Navigations-Frame am Rand nicht verschwindet, sondern von jeder anderen Seite weiterhin voll verwendbar ist.
Frames werden nur gezielt und sparsam eingesetzt!
Bisher haben wir uns auf der reinen HTML-Ebene bewegt, die ja weniger eine Programmiersprache, als eine Dokumentenbeschreibungssprache (ähnlich wie das Adobe Acrobat Reader Format, allerdings nicht so weit entwickelt) ist. Will man aufwendigere Effekte erreichen oder mit dem Benutzer in Interaktion treten, kommt man nicht daran vorbei, sich mit einer richtigen Programmiersprache auseinanderzusetzen. Diese teilen sich in zwei Gruppen ein, je nachdem, ob die Programme auf dem Web-Server oder auf Ihrem eigenen PC ablaufen. Uns interessiert hier nur die zweite Gruppe.
Ein großes Problem bei Programmiersprachen ist, dass sie nicht plattformunabhängig sind. Das bedeutet, dass ein Programm für jedes Betriebssystem wie Windows 95, OS/2, Linux oder MacOS neu erstellt oder zumindest stark angepasst werden muss. Aus diesem Grunde hat man sich eine Erweiterung der HTML-Sprache ausgedacht, die heute Javascript heißt. Im Grunde handelt es sich dabei auch nicht um eine richtige Programmiersprache, aber zumindest erlaubt sie es, relativ einfach die Web-Seiten aufzupolieren. Der Programmtext wird dazu direkt in das HTML-Dokument geschrieben und verlängert damit wieder einmal die Ladezeit. Üblicherweise sind Javascript-Programme sehr kurz, so dass sich dieser Aspekt ausnahmsweise mal fast vernachlässigen lässt. Wenn sie aber in Ihrem Javascript weitere Ressourcen wie zusätzliche Bilder benötigen, dann müssen diese natürlich ebenfalls nachgeladen werden.
Reichen auch die Möglichkeiten von Javascript nicht mehr aus, so kann man die richtige Programmiersprache Java einsetzen. Obwohl der Name es beinahe impliziert, haben die beiden nichts miteinander zu tun. Betrachten Sie den Namen „Javascript“ einfach als Marketing-Trick. Java Programme sind eigenständige Dateien, die wie die anderen Web-Dokumente (HTML-Seiten, Bilder) auf einem Web-Server abgelegt werden. Die Verknüpfung geschieht durch eine kurze Anweisung im HTML-Dokument, weswegen sich die Ladezeit des Dokuments praktisch nicht verlängert. Allerdings muss jetzt das komplette Programm inklusive der benötigten Ressourcen (weitere Bilder zum Beispiel) über das Internet übertragen werden, und dies kann erhebliche Zeit beanspruchen, je nachdem, wie umfangreich das Java Programm ist.
Mit dem Laden des Programms ist es aber noch nicht getan. Das Programm muss auf Ihrem PC ausgeführt werden. Das bedeutet, dass Ihr PC zusätzlich zur Darstellung der Web-Seiten nun auch noch durch die Abarbeitung des Java-Programms beansprucht wird. Wenn Ihr System schon etwas älter ist (im EDV-Bereich ist es leider so, dass ein PC mit drei Jahren schon zu den Greisen gehört), kann es durchaus sein, dass das ganze System so träge wird, dass ein sinnvolles Arbeiten unmöglich ist. Vielleicht verfügen Sie über einen modernen PC, dann vergessen Sie aber nicht, dass dies nicht auf Ihre Kunden zutreffen muss.
Weil das alles so ist, hat man in den Web-Browsern eine Möglichkeit eingebaut, sowohl Javascript als auch Java abzuschalten. Das erinnert uns an die Bilder als Gestaltungselement, deren Darstellung man ja ebenfalls verhindern kann. Darum verlassen Sie sich nicht darauf, dass Ihre Besucher mit den Programmen etwas anfangen können, sondern bieten Sie im Zweifelsfall eine konventionelle Alternative in Form von Text.
Zu einem Java Programm immer eine alternative Darstellung anbieten!
Sehr in Mode gekommen sind auch sogenannte Plug-Ins, mit denen man die Fähigkeiten seines Web-Browers erweitern kann. Mit ihrer Hilfe kann man spezielle Dokumenten-Formate automatisch darstellen lassen. Dazu zählen beispielsweise Videos. Die Plug-Ins selber stellen nicht so sehr ein Problem dar, weil diese einmal auf Ihrem PC installiert werden und anschließend keine Auswirkungen mehr auf die Übertragungsgeschwindigkeit haben. Sie als Web-Designer können aber nie die Existenz eines bestimmten Plug-Ins bei Ihren Kunden voraussetzen. Somit ist es fraglich, dass das von Ihnen gewählte Spezialformat auf dem Browser Ihres Kunden dargestellt werden kann. Einziger Ausweg: erstellen Sie auf Ihrer Web-Seite einen Hyperlink zum Hersteller des Plug-Ins, so dass sich der Surfer bei Bedarf das Plug-In herunterladen kann. Wenn Sie Pech haben, findet er aber die Seite viel interessanter als Ihre eigene und kehrt nicht wieder zurück.
Plug-Ins nur für Spezialfälle einsetzen!
Zum Schluss möchte ich noch auf eine Unterlassungssünde hinweisen, die man immer wieder auf Homepages findet: das Fehlen eines Ansprechpartners.
Stellen Sie sich vor, dass Sie mit Ihrer Homepage das Interesse eines Besuchers geweckt haben. Dieser will Ihnen nun sofort eine E-Mail zuschicken, um weitere Informationen anzufordern. Aber soviel er auch auf Ihren Seiten herumsucht, nirgends findet er eine Kontaktadresse. Frustriert gibt er schließlich auf. Lassen Sie es nicht soweit kommen.
Von der Startseite muss eine Kontaktadresse direkt erreichbar sein!
Dies kann ein Verweis auf eine Impressum-Seite sein, die gleich noch genutzt werden kann, um einen vollständigen Anschriftenblock mit Adresse und Telefonnummern zu platzieren. Zumindest ein Text-Hyperlink sollte es aber schon sein, etwa in der Art: „Schicken Sie uns eine E-Mail“, der es dem Besucher über ein eingebautes HTML-Kommando (mailto:) ermöglicht, einen elektronischen Brief zu verschicken.
Für technische Probleme oder Kritik an der Web-Präsenz bietet es sich darüber hinaus an, die E-Mail Adresse des Webmasters verfügbar zu machen. So erreichen die E-Mails gleich den richtigen Ansprechpartner und können schneller bearbeitet werden.
Damit beenden wir unsere grundlegenden Gedanken zur Erstellung von Internet-Seiten. Wie versprochen, sind wir nicht weiter in das Dickicht von
Artikel gerettet am 20. Oktober 2010 – ursprünglich erstellt am 20. Februar 1998