Menü überspringen


Pfad: Du bist auf:
Untermenü Knowledge:
Icons: ChatWebcamWegweiser (Sitemap)

Ende des Menüs, Beginn der Seite:


Diese Seite ist noch nicht fertig, sie soll eines Tages zu einem "Meta-Tutorial" ausgebaut werden und viele Links auf andere Tutorials beinhalten. Bis dahin gibt es nur einen Überblick zum Thema.

Was ist professionelles Webdesign?



Eine Frage von Ideologie sowie Aufgabenstellung

Zur Frage, was gutes Webdesign ausmacht, gibt es geteilte Meinungen. Im Wesentlichen gibt es die beruflichen Webprogrammierer, die eine Seite schnell erstellen und dabei den Auftraggeber zufriedenstellen wollen. Es hängt vom Zielpublikum ab, ob man viel Grafik verwendet (z. B. für Autohersteller) (Fußnote: Benötigt JavaScript: www.bmw.de) oder ob man sich mehr auf Funktionalität konzentriert.

Als Computerfreak und Idealist stehe ich eher im Lager derjenigen, die technisch optimale Webseiten bevorzugen; Für mich ist die Wikipedia (Fußnote: Funktioniert auf jedem Handy: Wikipedia) eine perfekte Website: Sie sieht halbwegs gut aus, ist leicht zu durchschauen und bietet wirklich guten Inhalt. Dadurch, dass sie keine Grafik für das Grundlayout verschwendet, laden die Seiten auch sehr schnell.

(Fußnote: www.anybrowser.org) Ob man sich mehr auf Funktionalität oder eher auf die Wirkung einer Website konzentriert, ist eine Frage der Afnorderungen sowie auch des Geschmacks. Man kann auch "hochpolierte" Webseiten in technischer Hinsicht "gut" programmieren. Leider sind sehr viele der "hochprofessionellen" Seiten fast nur optisch gut gestaltet, der Quellcode hinter der Grafik ist oft ungültig oder fehlerhaft und sie werden nur mit Internet Explorer perfekt angezeigt.

Inhalt und Layout

(Fußnote: Wikipedia: HTML) HTML ist eine Auszeichnungssprache, mit der man Texte "logisch auszeichnet": Abschnitte des Textes wie Überschriften, Absätze, Zitate, Adressen, Querverweise ("Hyperlinks"), Listen, Tabellen oder betonter Text werden als solche gekennzeichnet. Der Browser des Besuchers entscheidet dann, wie diese Daten präsentiert werden.

(Fußnote: Wikipedia: Stylesheet) Um eine schöne, mit Farben und Grafik gestaltete Homepage zu machen, definiert man Stilangaben, die beschreiben, wie die einzelnen HTML-Elemente formatiert werden sollen. Auf diese Weise bleibt dem Besucher die Wahl, ob er die Seite so sehen will, wie es der Designer vorgesehen hat, oder ob sein Browser die Stilangaben ignorieren soll.

(Fußnote: CSS Zen Garden - Demonstriert die Anwendung von CSS) Stilangaben können in einer eigenen Datei gespeichert werden und von allen Seiten einer Website gemeinsam benutzt werden. Änderungen im grafischen Design der gesamten Website sind auf diese Weise sehr einfach. Dadurch, dass die HTML-Dokumente keine Formatierungsangaben beinhalten, werden sie übersichtlicher und ebenfalls einfacher zu warten.

Browser zeigen HTML-Texte auch ohne explizite Stilangaben in einem Standardlayout an (Überschriften sind größer, Absätze erzeugen Abstände, etc.). Man kann daher HTML-Angaben mißbräuchlich dazu verwenden, den Text zu formatieren. So könnte man Überschriften dazu benutzen, größeren Text zu erwirken, oder man markiert einen Bereich als Zitat, um einen Absatz einzurücken. Auf diese Weise verliert das Dokument nicht nur einen Teil der Information, die es beinhalten könnte und sollte, sondern es beinhaltet sogar Desinformation. Das wirkt sich besonders dann negativ aus, wenn das Dokument durch ein anderes Programm verarbeitet werden soll (Suchmaschinen, Konvertierung in ein Word-Dokument, (Fußnote: Wikipedia: Screenreader) Screenreader für Blinde). Außerdem weiß man nicht, ob der Browser des Besuchers die HTML-Elemente überhaupt so wie erwartet formatiert.

Usability und Barrierrefreiheit

(Fußnote: Wikipedia: Web Accessibility Initiative) Wichtig für gutes Webdesign ist auch das Bedenken der Bedienbarkeit:
  • Nicht jeder Benutzer surft mit Internet Explorer
  • Nicht jeder verwendet einen Homecomputer
  • Viele surfen mit deaktiviertem Scripting (Fußnote: country-verlag.de: Warum JavaScript deaktivieren?)
  • Einige Gäste (z. B. "Berufssurfer") schalten das Anzeigen von Grafiken in ihrem Browser ab
  • Die meisten Gäste sind auf der Suche nach einer bestimmten Information
  • Kaum jemand versucht länger als ein paar Sekunden lang die Navigation der Seite zu begreifen
  • Es gibt immer noch viele langsame Internetleitungen (z. B. Firmen, die keine besonders starke Leitung, aber viele Mitarbeiter haben)
  • Nicht jedem steht eine Maus zur Verfügung (z. B. Körperbehinderte, defekte oder vergessene Maus)
  • (Fußnote: Wikipedia: Nachteile eines Touchpad) nicht jeder benutzt die Maus gerne (z. B. Viel-Surfer, die lieber die Tastatur benutzen oder Leute mit verschmutzter Maus/unbequemen Touchpad)
  • Manche Besucher brauchen eine größere Schrift (Sehbehinderte, hohe Bildschirmauflösug)
  • Nicht jeder Besucher ist überhaupt ein Mensch (z. B. Suchmaschinen-Spider)
(Fußnote: Wikipedia: Lost in Hyperspace) Besonders sollte man beachten, daß die meisten Surfer gezielt nach einer bestimmten Information suchen. Umständliche Menüs und ein Zuviel an Grafik und Designelementen, sowie auch lange Ladezeiten, bewirken oft, dass der Besucher den Zurückknopf betätigt und den nächsten Eintrag des Suchmaschinenergebnisses ansurft.

(Fußnote: Wikipedia: Page Rank) Je mehr Möglichkeiten man den Benutzern lässt, umso weniger werden sie die Seite als unpraktisch empfinden. Das betrifft fixe Schriftgrößen und Seitenbreiten (Der Benutzer hat sein Browserfenster meistens mit Absicht auf eine bestimmte Breite eingestellt und möchte, dass die Webseiten sich anpassen), Erzwingen des Öffnens von Seiten in einem neuen Fenster (das kann der Benutzer mit der rechten Maustaste selber machen, wenn er es will), u. v. m. Eventuell wird die Seite auch wegen der guten Benutzbarkeit in eine Linksammlung aufgenommen, wodurch der Page Rank steigt.

Häufigste Fehler sogenannter "Webdesigner"

(Fußnote: Goldene Regeln für schlechtes HTML) Viele bekannte Firmen und auch internationale Konzerne haben zum Teil aus nicht nur technischer Sicht sehr schlecht umgesetzte Websites. Da gibt es Homepages, die ohne JavaScript nicht einmal die Startseite anzeigen, manche Websites funktionieren nicht oder nur teilweise, wenn man sie mit anderen Browsern als Internet Explorer ansieht und die meisten Seiten sind nicht barrierrefrei. Gutes grafisches Design vermisst man auch häufig. Die üblichen Fehler sind:
  • Absolute Angabe für Schriftgröße ("font-size:16px" - Internet Explorer läßt dann das Vergrößern nicht mehr zu)
  • Fixe Breite der Webseite (Veränderungen der Fenstergröße sind dann nutzlos)
  • "Optimiert für Browser XY" (Das Gegenteil von Geräteunabhängigkeit)
  • Hyperlinks nicht als Text, sondern als Grafik (Blinde und Suchmaschinen können den Link nicht benutzen)
  • Überflüssiges Verwenden von Flash und Java (Fußnote: Wikipedia: Adobe Flash) zwecks Effekthascherei
  • Seitennavigation funktioniert nur mit JavaScript oder Flash (Suchmaschinen können dann nur die erste Seite scannen)
  • Seitennavigation ist nicht intuitiv oder gar auf jeder Seite anders
  • Links öffnen neue Fenster, nur damit die eigene Seite geöffnet bleibt (Dadurch verlieren der Zurück-Knopf und der Verlauf ihre Funktion)
  • Bilder werden nicht mit alternativen Beschreibungstexten versehen
  • Der Kontrast zwischen Text und Hintergrund ist zu gering
  • (Fußnote: w3c HTML Validator) Fehler im HTML Quelltext (Dadurch wird das Anzeigen der Seite langsamer). Solche Fehler lassen sich vermeiden, indem man den offiziellen HTML-Validator des w3c benutzt.
  • (Fußnote: Wikipedia: PageRank Manipulation) Versuche, den Page Rank durch "schmutzige Tricks" zu verbessern
  • Verwenden nicht standardkonformer HTML Angaben (Funktionieren nur in einem bestimmten Browser)
  • Die Seite hat geringen Informationsgehalt, dafür aber viele hübsche Grafiken
  • Die Seite besteht aus mehr HTML Code als eigentlichem Inhalt
  • Versuche, die rechte Maustaste zu deaktivieren
  • (Fußnote: Selfhtml: Meta-Angaben) Metainformationen (unsichtbar eingebettete Zusatzangaben für Suchmaschinen, Browser und alternative Anzeigegeräte) fehlen oder werden mißbräuchlich verwendet. (Z. B. Fehlende Angabe des Character Set bewirkt, dass manche Browser bei bestimmten Sonderzeichen falche Zeichen anzeigen) (Fußnote: Wikipedia: Zeichenkodierung)

Vorzüge von standardkonformen Webseiten

  • In den nächsten Jahren werden öffentliche Websites europaweit zu Barrierefreiheit verpflichtet sein. (Fußnote: Wikipedia: Barrierefreie Informationstechnik Verordnung)
  • Optimale Darstellung in jedem Browser
  • Weniger Wartungsaufwand
  • Weiterverwendbarkeit des Textes in anderen Programmen zu unterschiedlichsten Zwecken (z. B. Druck)
  • Vorteile für die "Zugänglichkeit" ("Accessibility") mit verschiedenen Lesegeräten
  • Schnellere Ladezeit, da der Browser nicht erst Fehler ausmerzen oder versuchen muss, eine geeignete Darstellung zu finden.
  • Wesentlich bessere Durchsuchbarkeit mit Suchmaschinen
  • Besserer Page Rank (Fußnote: Google Richtlinien für Webmaster) (Plazierung in den Suchergebnissen) durch richtige Strukturierung

Gründe für ungültigen HTML-Code

(Fußnote: Wikipedia: Frameset) Es ist manchmal schwierig bis unmöglich, bestimmte Layoutvorstellungen des Kunden zu verwirklichen und zugleich validen HTML-Code zu schreiben. So darf man in HTML 4.01 STRICT kein "Target" für einen Link angeben (Das würde man machen, um eine Seite in ein anderes Frame des Frameset zu laden oder zu erzwingen, daß ein neues Fenster geöffnet wird, wenn man den Link anklickt). Fußzeilen funktionieren nur richtig, wenn man (Fußnote: Wikipedia: Browserweiche) Browserweichen einbaut. Mit ungültigen Befehlen kann man in solchen Situationen dennoch sein Ziel erreichen, da die meisten Browser unbekannte Befehle entweder ignorieren oder die Angabe trotz Ungültigkeit beachten (Eines von vielen Beispielen: Microsoft Internet Explorer akzeptiert die Angabe "scroll=no" im <BODY>-Tag, die bewirkt, daß die Bildlaufleiste nicht angezeigt wird. Dieses Attribut war aber noch nie Teil von HTML). Entweder aus Unwissenheit oder aus Kalkül wird invalides HTML eingesetzt, da letztlich der Kunde mit dem Endergebnis zufrieden sein muß. Manchmal funktioniert die Website dann nur auf dem Computer des Kunden richtig. Wer die freie Wahl hat oder seinen Kunden davon überzeugen kann, sollte auf "schmutzige Tricks", veraltete/ungültige/browserspezifische HTML-Angaben sowie Browserweichen verzichten.

Bekannte Websites unter der Lupe


http://de.selfhtml.orgExternal Link Gutes Design, gültiges HTMLExternal Link
http://de.wikipedia.orgExternal Link Gutes Design, gültiges HTMLExternal Link
http://www.ibm.comExternal Link Gültiges HTMLExternal Link, leider eine fixe Seitenbreite
http://www.google.atExternal Link Gutes Design, ungültiges HTMLExternal Link
http://www.drei.at/External Link Durchschnittliches Design, ungültiges HTMLExternal Link
http://www.one.atExternal Link Durchschnittliches Design, ungültiges HTMLExternal Link
http://www.telekom.atExternal Link Durchschnittliches Design, ungültiges HTMLExternal Link
http://www.wienstrom.atExternal Link Durchschnittliches Design, ungültiges HTMLExternal Link, die erste (Umleite-)Seite beinhaltet Stichworte in weißer Farbe auf weißem Hintergrund um den Page Rank zu manipulieren


http://harald.ist.org



Viele Jahre lang habe ich mir zu meiner Homepage keinerlei Gedanken über Suchmaschinenoptimierung gemacht, sondern einfach nur Material eingestellt, das ich gerade als interessant für meine Besucher hielt. Eines Tages fand ich dann heraus, dass ich mit manchen Stichworten auf der ersten Seite der Google-Suchergebnisse gelistet war und begann zu recherchieren, wie ich das eigentlich geschafft hatte. Die derzeitige Version meiner Homepage ist im Grunde immer noch genauso aufgebaut und nocht immer nicht speziell für Suchmaschinen optimiert. Was den Erfolg einer Site bei den Suchmaschinen ausmacht sind hauptsächlich folgende Punkte:

Inhalt, Inhalt und noch mehr Inhalt

Meine Homepage besticht nicht gerade durch ihr Aussehen, das Besondere liegt in den verschiedenen Möglichkeiten, die zur Verfügung stehen. Das bezieht sich zum Teil auf sichtbare sowie auf unsichtbare technische Details, aber auch auf meinen Versuch, für möglichst viele Menschen nützliche Inhalte bereitzustellen, wie z. B. Freie Downloads, Tutorials, Onlinesoftware. Das sind alles Sachen, die andere gerne auf ihren Homepages verlinken.

Backlinks

Wenn du einen Link auf eine andere Homepage setzt, dann wertest du diese damit bei Google auf. Wenn du dann beim Betreiber dieser anderen Seite um einen "Backlink" anfragst, kommst du auf diese Weise leicht zu "guten" Inbound-Links. Oft setzen andere sogar ganz von alleine Backlinks, wenn sie mitbekommen, dass sie viele Besucher von deiner Seite bekommen. Meine generell gute Plazierung bei Google ist zum Teil durch die Homepage meines Corewar-Simulators ARESExternal Link entstanden, die ihrerseits von einigen anderen Websites verlinkt wurde. Darüber hinaus haben mehrere Web-Directories die ARES-Seite in ihren Index aufgenommen, was ebenfalls sehr wertvolle Links für meine Google-Wertung sind.

Standardkonform und Barrierrefrei

Das (Fußnote: Wikipedia: Parser) Content Management System meiner Homepage habe ich in PHP geschrieben. Es beinhaltet einen Parser für "EasyCode", eine Abstraktion von HTML, die das Ändern und Hinzufügen von Inhalten stark vereinfacht sowie sicherstellt, daß der erzeugte Quellcode den w3c-Standards entspricht und somit auch barrierrefrei ist. Google mag das.

Überlegter Einsatz von neueren Technologien

(Fußnote: Wikipedia: Ajax) Es ist aus mehreren Gründen nicht immer von Vorteil, die modernsten Technologien wie Cookies, Ajax, XHTML oder nicht mehr ganz so neue wie Flash oder Java zu verwenden, da es immer noch alte oder einfache Geräte (z. B. Mobiltelefone) gibt, die diese Methoden nicht unterstützen. Meine Seite ist in HTML 4.01 strict geschrieben, was weitgehend auch von sehr alten Browsern noch gut verstanden wird.

Wenn ich eine Website programmiere, dann beginne ich mit purem HTML, bis alle Funktionen so bequem wie möglich zu benutzen sind, erst dann füge ich gelegentlich JavaScript hinzu, um die Bedienbarkeit zu verbessern. Auf diese Weise stelle ich sicher, dass ein Beuscher, dessen Browser JavaScript blockiert, die Seite trotzdem als gut empfindet.

Eine sehr schlechte Idee ist es, die Hauptnavigation nur in JavaScript zu realisieren, da die Suchmaschinen-Spider JavaScript nicht ausführen und dadurch die Unterseiten nicht finden. Leider muss man Einschränkungen in der Optik und Bedienbarkeit in Kauf nehmen (z. B. kann man Pull-Down-Menus (Fußnote: Wikipedia: Pull-down.Menü) nur mit JavaSscript realisieren), oder man bietet zusätzlich "Hard-Links" (also reine HTML-Links) an, etwa über eine Sitemap, die selbst wiederum von jeder Seite aus ebenfalls hart verlinkt ist.

Plazierung in den Suchmaschinen

(Fußnote: Wikipedia: Page Rank) Durch gültiges HTML, barrierrefreien Aufbau, gut strukturierte und für Benutzer wertvolle Inhalte sowie durch andere "gute" Seiten, die auf die eigene Seite verlinken, bekommt eine Website über kurz oder lang einen besseren Page Rank (Plazierung in den Suchergebnissen). Es gibt Tricks und Hilfsprogramme, die angeblich helfen sollen, den Page Rank einer Site zu verbessern, jedoch sind diese Methoden meistens nicht nachhaltig wirksam; Da die Suchmaschinenbetreiber ihre Page-Rank-Algorithmen stetig verbessern, kommt es immer öfter vor, dass der Gebrauch von zwielichtigen Methoden, die meistens veruschen, die Suchmaschinen zu täuschen, sogar zu einer Abwertung der Seite führt. (Fußnote: Google Richtlinien für Webmaster) Der Trick ist, sich einfach an die Regeln zu halten und sinnvollen Inhalt bereitzustellen.

Google-Suchergebnisse für diverse Stichworte, Stand Ende 2007: Die Site harald.ist.org zeichnet sich durch folgende Eigenschaften aus:
  • Überlegte Benutzerführung
  • (Fußnote: Wikipedia: w3c) w3c-konformes, fehlerfreies HTML (BeweisExternal Link)
  • Perfekte Durchsuchbarkeit für Suchmaschinen
  • Weitgehend Barrierrefrei
  • Mehrsprachigkeit
  • Fußnoten ("Sidelinks")
  • Floatcam (Verschiebbares Webcam"fenster" auf jeder Seite)
  • Freeware Download ohne Registrierung
  • Tutorials
  • Keine Browserweichen
Die Anzeige paßt sich automatisch an Fenstergröße, Schriftgröße oder Ausgabeform (Browser, Screenreader, mobile Internetgeräte, alternative Browser, abgeschaltetes CSS) an.

Screenshot des Firefox-Menus "Ansicht/Webseiten-Stil/Kein Stil" Du kannst es selbst ausprobieren: Meine Homepage sieht auch mit anderer Schriftgröße nicht kaputt aus (Taste Strg halten und Mausrad benutzen). Du kannst auch die Darstellung von Styles abschalten, um ein Mobiltelefon oder einen Textbrowser zu simulieren. Wenn du nicht weißt, wie man das Anzeigen von Styles in deinem Browser abschaltet, dann kannst du dir diese Seite von meinem Server ohne CSS ausliefern lassen.

Ungeordnete Tipps


  • Besonders bei einer festen Seitenbreite Angaben nicht in Pixel, sondern in Zeilenhöhe ("em") angeben: Dadurch kannst du das Layout halbwegs unter Kontrolle halten und gleichzeitig Vergrössern ermöglichen.
  • Eine CSS-Klasse wie .only_without_css { display:none; } deklarieren und für Inhalte verwenden, die nur in Browsern angezeigt werden soll, die kein CSS darstellen (Betrachte diese Seite ohne CSS, um zu sehen, wofür).
  • Links nicht "hier" benennen ("Weitere Informationen gibt es hier"), sondern beschreibende Linktexte verwenden ("Es gibt weitere Informationen"): Das erleichtert das schnelle Überfliegen und Suchen nach Links auf einer Seite)
  • Obwohl es beim Einsatz von standardisiertem HTML und CSS egal sein sollte, mit welchem Browser man die Webseite betrachtet, gibt es doch immer geringe Unterschiede in der Darstellung. Daher sollte man das Aussehen der Webseiten, besonders dann, wenn man versucht, ein bestimmtes Layout genau umzusetzen, während des Schreibens immer wieder mit verschiednen Browsern überprüfen, ob noch alles so funktioniert, wie geplant. Ich verwende zur Zeit folgende Browser zur Kontrolle: Internet Explorer (Versionen 6 und 7), Firefox (Versionen 1.5 und 3), Opera, Safari, Netscape, Konqueror und Lynx.
  • Die meisten Surfer mit guten Augen wissen gar nicht, dass sie in ihrem Browser eine Einstellung für die Standardschriftart und -grösse haben. Dennoch stehen dem Browser nur die Schriftarten des jeweiligen Betriebsystems zur Verfügung, was zu leichten Unterschieden in der Darstellung führt, auch wenn es sich um den gleichen Browser handelt. Optimalerweise verwendet man Windows, Linux und einen Apple mit jeweils allen relevanten Browsern zur Kontrolle. Weiters ist es manchmal auch interessant, die Website mit alterativen Ausgabegeräten zu testen, wie etwa Screen Reader, Mobiltelefone oder einem Drucker. (Für solche Zwecke benutzt man virtuelle Geräte, z. B. einen Druckertreiber, der einen physisch gar nicht existierenden Drucker "ansteuert": Die Ausgabe erfolgt schlicht in eine Grafikdatei)
  • Wenn du ohne Browserweichen arbeiten willst, dann musst du auf bestimmte Methoden verzichten. Im Laufe der Zeit entwickelst du ein Gefühl dafür, "was geht" und was nicht.
  • Tabellenlayouts: Theoretisch kann man das gesamte Layout mit CSS-Angaben bewerkstelligen. Praktisch gesehen ist das aber der reinste Irrsinn, weil die Browser feine Unterschiede und Fehler in der Verarbeitung von CSS haben. Obwohl Tabellen eigentlich tabellenartigen Inhalt markieren sollten, ist es manchmal unumgänglich, sie für Layoutzwecke zu missbrauchen. Solange man es damit nicht übertreibt, ist das auch in Ordnung. Mir ist es am liebsten, wenn ich es schaffe, auf Tabellenlayouts zu verzichten.


Weiterführende Links


http://www.w3.orgExternal Link Das W3-Consortium veröffentlicht Recommendations, welche der Internet-Gemeinde als offizielle Standards dienen. Die Texte sind nicht gerade für Einsteiger geschrieben, sind aber teilweise in verschiedene Sprachen übersetzt worden. Gültigkeit haben jedoch nur die englischen Originalversionen.
http://www.w3.orgExternal Link Checklist of Checkpoints for Web Content Accessibility Guidelines 1.0
http://www.hacke.netExternal Link PHP Tutorials, beinhaltet unter anderem ein Tutorial für barrierrefreie Webseiten
http://www.bizeps.or.atExternal Link Sind in Österreich barrierefreie Internetseiten eine Verpflichtung?
http://www.site-check.ccExternal Link Tips & Hintergrundinfos zum Thema Suchmaschinenoptimierung
http://www.gaijin.at/olsmgen.phpExternal Link Meta-Tag Generator
http://www.joelonsoftware.com/items/2008/03/17.htmlExternal Link Why DOCTYPE is a myth

Ende der Seite, Beginn des Administrationsmenüs
Letzte Änderung am 28. 06. 2010, 13h03
β
Are you a spambot? If so, click here for an endless supply of bogus email addresses.