biz4you-Blog | WebDesign und Internet-Marketing aus Wien

Im Webdesign trifft man immer wieder auf Mißverständnisse die immer wieder auftreten.

Einige davon im Gespräch mit Kunden (vor allem was die Homepage angeht), andere trifft man aber auch immer wieder unter Kollegen, auf Websiten oder in Foren und Blogs.
Hier einige davon:

1. Die Homepage
   Eine Homepage ist die Startseite einer Website und nicht wie oft vermeintlicherweise angenommen die gesamte Website selbst.
2. Der alt-tag
   Der alt-tag ist kein Tag, sondern ein Attribut. Tags sind umgeben von < und >. Alt-Attribute müssen übrigens zu jedem Bild angegeben werden.
3. Der title meta-tag
   Der title-tag ist kein meta-tag wird aber meist im Zusammenhang mit diesen genannt.
4. Tabellen immer vermeiden
   Häufig wird versucht Tabellen um jeden Preis zu vermeiden und durch div-container zu ersetzen. Was für Struktur und Aufbau einer Website auch durchaus richtig ist macht aber nicht immer Sinn. Sollen z.B. Datensätze in Tabellenform dargestellt werden, sind Tabellen auch immer noch die beste Wahl.
5. jpg oder gif - ist doch egal!
   Ganz und gar nicht - beide Dateiformate haben ihre Vorteile und bevorzugte Einsatzgebiete. jpg-Grafiken können bis zu 16,7 Mio. Farben darstellen und sind daher vor allem für Farbverläufe und Fotos geeignet. gif-Grafiken können nur bis zu 256 Farben darstellen und sind daher vor allem für einfache Grafiken und Farbflächen ideal. Außerdem können gif-Grafiken auch mit transparentem Hintergrund oder animiert gestaltet werden.

Da sich einige Kunden auch dafür interessieren wie wir Webdesigner eigentlich unsere Zeit verbringen, habe ich mir mal überlegt und die letzten Projekte rekapituliert.

Dabei bin ich selbst auf einige interessante Entdeckungen gestoßen, da einige der Zeitblöcke vielleicht doch nicht richtig genutzt werden.

So setzt sich die Zeit für die Gestaltung von Webseiten WIRKLICH zusammen:

Klar ist das Ganze etwas überzeichnet und nicht ganz ernst zu nehmen, doch einige Wahrheiten sind doch enthalten.

Um einige der größten Zeitkiller zu umgehen sollte jeder Webdesigner einige Dinge beachten:

1. Mit dem Kunden genau die Inhalte der Website abklären und darauf basierend ensprechende Layouts für die Startseite und die wichtigsten Unterseiten erstellen und vom Kunden freigeben lassen.
2. Wenn das Design feststeht nicht einfach drauflos programmieren, sondern sich erstmal Gedanken über den Aufbau machen, dann sollte auch die Umsetzung mit CSS einfacher gehen.
3. Der Großteil der unterschiedlichen Darstellungen zwischen Firefox und Internet Explorer ist aufgrund der unterschiedlichen Interpretation des Box-Modells.
4. CSS-Hacks werden meist verwendet um die Darstellung für den Internet Explorer zu optimieren und basieren auf unterschiedlicher Interpretation verschiedener Anweisungen in Stylesheets.

Auf Business Week Online findet man eine Übersicht über die Marktanteile der Webbrowser in verschiedenen Länder.

Interessant ist dabei vor allem der markante Unterschied der Marktanteile von Firefox in den USA und Deutschland (wobei die Daten für Deutschland auch annähernd für Österreich gültig sein sollten).

Liegt der Marktanteil von Firefox in den USA noch unter 10%, beträgt er in Deutschland bereits ca. 27%. Jeder Vierte Internet-User ist hier also bereits mit dem Firefox unterwegs. Zu den 8% sonstiger Browser gehören u.a. Opera, Safari (Mac), usw. Dies deckt sich übrigens auch sehr genau mit unseren eigenen Zugriffstatistiken.

Marktanteile in Deutschland (Stand Juni 2006):

Für erfolgreiches WebDesign bedeutet dies das die Zeiten in denen Webseiten nur für Internet Explorer - User optimiert werden vorbei sind. Keine Firma sollte es sich leisten auf jeden vierten Besucher zu verzichten weil die Website nicht korrekt dargestellt wird.

Bevor mit der Programmierung einer Website losgelegt werden kann, muss erst einmal die Entscheidung getroffen werden ob HTML oder XHTML verwendet werden soll.

Während HTML den meisten als Skriptsprache geläufig ist, ist XHTML zwar auch bekannt - die genauen Unterschiede sind jedoch meist nicht ganz klar.

Was ist eigentlich XHTML? 

Grundsätzlich ist XHTML der Nachfolger von HTML der einige Vorteile bietet, aber auch zusätzliche Anstrengungen erfordert. XHTML wurde vom W3C auf Basis der erheblich flexibleren und moderneren Auszeichnungssprache XML neu definiert. Das X in XHTML steht für die zusätzlichen Möglichkeiten HTML mit anderen Skriptsprachen zu verknüpfen.

Die wichtigsten Vorteile im Einzelnen:

1. Trennung von Inhalt und Gestaltung
   Der größte Vorteil von XHTML ist, dass es im Gegensatz zu HTML die Trennung von Inhalt und Gestaltung fördert. Der Inhalt soll in der Datei selbst stehen, während die Gestaltung über ein ausgelagertes CSS gesteuert wird.
2. Erweiterbarkeit
   Durch die offene Gestaltung ist XML/XHTML erweiterbar und kann mit anderen Skriptsprachen verknüpft werden.
3. Kompatibilität
   XHTML-Dokumente werden auch auf alternativen Ausgabegeräten wie Drucker, mobilen Browsern oder Screen-Readern angezeigt. Durch die Trennung von Inhalt und Gestaltung muss für die verschiedenen Ausgabegeräte einfach ein eigenes Stylesheet angelegt werden um die Dokumente wie gewünscht anzuzeigen.
4. Fehlersuche
   Auch bei der Fehlersuche bietet XHTML Vorteile, da für ein korrektes XHTML-Dokument der Code verschiedenen Regeln entsprechen muss, die für einen schlanken Quellcode sorgen und so die Fehlersuche erleichtern.
5. Zukunftsicherheit
   Die Entwicklung geht immer mehr in Richtung XML/XHTML, auch das W3C empfiehlt XHTML 1.0 als Programmiersprache.

Die verschiedenen XHTML-Versionen:

1. XHTML 1.0
   XHTML 1.0 ist die Weiterentwicklung von HTML 4.01 und kann mit den Dokumenttypen Frameset, Transitional und Strict ausgegeben werden.
2. XHTML 1.1
   Ist die aktuelle XHTML-Variante in der bereits einige Elemente von HTML und XHTML 1.0 nicht mehr erlaubt sind.
3. XHTML 2
   Wird gerade vom W3C entwickelt als Sprache die Dokumente für eine Vielzahl von Anwendungen im Internet darstellen soll.

Einige Unterschiede zwischen HTML und XHTML:

1. Dokumenttyp-Deklaration
   Die Dokumenttyp-Deklaration findet immer am Beginn eines Dokumentes statt und teilt dem Browser mit um welche Art des Dokumentes es sich handelt.
2. Einhalten des HTML-Grundgerüstes
   Besteht in HTML noch die Freiheit einzelne Teile des HTML-Grundgerüstes wegzulassen (z.B. html, title oder body), muss für ein valides XHTML-Dokument dieses Grundgerüst eingehalten werden.
3. Gross-/Kleinschreibung
   In XHTML müssen alle Element- und Attributnamen kleingeschrieben werden.
4. Leere Elemente
   Leere Elemente wie Zeilenumbrüche oder Linien müssen mit einem abschließenden / gekennzeichnet werden. Auch Elemente mit optionalem Abschlusstag müssen mit diesem gekennzeichnet werden.
5. Alleinstehende Attribute
   Diese müssen für korrektes XHTML immer einem Wert zugewiesen werden.

Wir empfehlen unseren Kunden sich immer an die aktuellen Standards zu halten, in diesem Fall das vom W3C empfohlene XHTML. Bei entsprechender Kenntnis der wichtigsten Regeln ist dabei auch kein Mehraufwand im Vergleich zu HTML notwendig.

Gefunden bei Scott Manning und ich konnte nicht widerstehen es frei zu übersetzen und noch einige Erfahrungen einzubauen!

Wenn Architekten wie WebDesigner arbeiten müssten

Lieber WebDesigner,

Bitte bauen Sie uns ein Haus. Wir wissen zwar noch nicht genau was wir wollen, aber das werden wir im Laufe der Errichtung schon herausfinden. Das Haus sollte zwischen 4 und 28 Zimmer haben - es sollte nur berücksichtigt werden, dass im Nachhinein noch leicht welche angebaut werden können. Wenn Sie die Pläne fertiggestellte haben, werden wir uns entscheiden was wir wollen und was nicht. Senden Sie auch bitte eine Kalkulation für alle möglichen Optionen damit wir uns entsprechend entscheiden können.

Wichtig ist dass nur Top-Materialen verwendet werden dürfen und das neue Haus nicht mehr kosten darf als unser jetziges. Wir bitten Sie auch zu bedenken dass einer unserer Neffen Architektur studiert und dies ebenfalls übernehmen könnte falls es bei Ihnen zu teuer ist.

Um sicherzustellen dass alle Familienmitglieder mit dem Haus zufrieden sind, setzen Sie sich bitte mit allen in Verbindung um einzeln gewünschte Änderungen zu besprechen. Sie sollten diesbezüglich auch mit Freunden - die uns von Zeit zu Zeit besuchen - sprechen, eine entsprechende Namensliste können Sie von unserer Tochter besorgen. Wbei ich mir bei allem natürlich die letzte Entscheidung vorbehalte.

Bezüglich der Ausstattung können Sie sich gerne das Haus unseres Nachbarn ansehen, vor allem der 60m Swimmingpool mit Sprungturm und Whirlpool begeistert uns sehr. Ich bin mir sicher dass Sie dies mit guter Planung berücksichtigen können, ohne die Gesamtkosten zu erhöhen. Ein wichtiges Element sollte auch die Garage werden, denn wenn ich von der Arbeit nach Hause komme, sollte die Tür ins Haus zum Wohnzimmer führen - wenn aber meine Frau kommt sollte die Tür direkt in die Küche führen. Falls wir beide gemeinsam kommen sollten wir die Wahl haben wohin die Tür führt. Und wir haben natürlich zwei Autos aber nur Platz für eines, also sollten Sie eine Art Liftsystem für die Autos einplanen, das ist sicher nichts aufwendiges und sollte sich nicht in den Kosten niederschlagen.

Wir sollten jetzt erstmal die genaue Gestaltung der einzelnen Zimmer besprechen da wir dann eine Woche auf Urlaub sind und Sie dann ausreichend Zeit haben das Haus zu bauen. Es wäre wirklich wichtig nach unserem Urlaub das Haus beziehen zu können, da wie schon eine Einweihungsparty angesetzt haben. Falls es nicht anders geht reicht es auch dass Wohnzimmer und Küche bis dahin komplett fertig sind, die anderen Räume haben dann noch einige Tage Zeit.

Was wir jetzt ganz dringend benötigen sind die genauen Pläne und Skizzen wie Sie sich das Haus vorstellen. Wir können zwar noch nicht garantieren dass Sie den Auftrag erhalten, möchten Sie aber darauf hinweisen dass wir bei Auftragserteilung keine zusätzlichen Kosten als die angeführten akzeptieren werden. Bezüglich der Zahlungsmodalitäten werden wir uns nach dem Bau des Hauses sicher einig werden.

Sie sind sicher ganz begeistert an solch einem Projekt arbeiten zu dürfen, vor allem da wir Ihnen so viel Freiraum lassen die neuesten Materialien zu verwenden und eigene Ideen einzubringen. Sie können auch sicher sein, dass Sie von uns dann auch viele Empfehlungen erhalten, da in unserem Bekanntenkreis sehr viele Interesse an einem neuen Haus haben.

Ein persönliches Treffen geht sich von unserer Seite im Moment leider nicht aus, falls Sie noch Fragen haben können Sie aber gerne noch unserem Sohn eine Mail schreiben - er leitet sie dann an uns weiter.

MfG
Max Musterkunde

Usability-Guru Jakob Nielsen stellt laufend die Top Ten der schlimmsten Fehler im Web Design vor.

Dazu gehören:

1. Mangelhafte Suchfunktionen
   Problematisch ist vor allem wenn Suchfunktionen nicht verschiedene Schreibweisen, Einzahl/Mehrzahl, u.ä. in Verbindung bringen können.
2. Eingebundene PDF-Dateien
   PDF-Dateien sollten nur zum Download angeboten und nicht zum Online lesen vorgesehen werden.
3. Keine Linkauszeichnung
   Bereits besuchte Links sollten deutlich gekennzeichnet werden um die Navigation zu erleichtern.
4. Zu große Textblöcke
   Falls Sie viel Text für das Internet aufbereiten, verwenden Sie aussagekräftige Überschriften, Absätze, Textauszeichnungen, Listen, u.ä. um eine klare Gliederung zu schaffen.
5. Fixierte Schriftgrößen
   Schriftgrößen sollten nicht in fixen Werten angegeben werden, sondern vom User veränderbar sein.
6. Schlechte Seitentitel
   Der title-Tag wird verwendet um den Inhalt einer Webseite zu beschreiben und wird von Suchmaschinen in den Ergebnisseiten angezeigt. Deshalb sollten Sie genau darüber nachdenken wie Sie die besten Platzierungen erhalten und die meisten User dazu bringen auf Ihre Website zu klicken.
7. Werbeähnliche Inhalte
   Durch die große Anzahl an Werbeeinblendungen hat sich mittlerweile eine Werbeblindheit eingestellt die dazu führt das alle Inhalte die erfahrungsgemäß wie Werbungen aussehen automatisch ignoriert werden.
8. Nichtbeachten von Design-Regeln
   Da User die meiste Zeit auf anderen Webseiten verbringen, haben sie in verschiedenen Dingen bestimmte Erwartungen die erfüllt werden sollten (z.B. Position der Navigation, des Logos, u.ä.).
9. Neue Browser-Fenster öffnen
   Links sollten immer im eigenen Fenster geöffnet werden um die User nicht durch zu viele geöffnete Fenster zu verärgern.
10. Nicht auf die User eingehen
    User haben bestimmte Erwartungen und Fragen wenn Sie Ihre Website besuchen - diese gilt es zu beantworten.

Bevor Sie einen Auftrag für die Gestaltung Ihrer Website vergeben, sollten Sie Ihrer WebDesign Firma einige wichtige Fragen stellen.

1. Wie lange sind Sie bereits geschäftlich tätig?
2. Haben Sie nur Kunden im Raum Wien, oder auch landesweit/international?
3. Wieviele Webseiten haben Sie bereits gestaltet?
4. Welche sind die bekanntesten Firmen für die Sie gearbeitet haben?
5. Wo finde ich Beispiele für Ihre Arbeit?
6. Welche Rolle im Entwicklungsprozess der Website spielen wir als Kunde?
7. Können wir nach Fertigstellung der Website auch selbst Änderungen daran vornehmen?
8. Wie sieht die weitere Vorgehensweise aus nachdem ich mich für Sie entschieden habe?
9. Wie lange dauert die Erstellung einer Website?
10. Müssen wir entsprechende Texte und Bilder für die Website innerhalb eines gewissen Zeitplanes zur Verfügung stellen?
11. Wieviel kostet eine Website?
12. Wie erfolgt die Bezahlung?
13. Entspricht die Programmierung der Website allgemeinen Standards?
14. In welchen Browsern wird die Website fehlerfrei dargestellt?
15. Werden die Webseiten suchmaschinenfreundlich programmiert?
16. Kann die Website auch bei Ihnen gehostet werden?
17. Welche Referenzen können Sie im Bereich Internet-Marketing und Suchmaschinen Optimierung vorweisen?
18. Können Sie gute Platzierungen garantieren?
19. Halten Sie sich an die Optimierungsrichtlinien die von den Suchmaschinen vorgegeben werden?
20. Wie wird die Website instandgehalten?

Unsere Antworten auf diese Fragen finden Sie übrigens auf unserer Website.

Ein beliebtes Thema bei der Konzeption einer Website ist die Einrichtung einer Startseite mit fetzigem Intro und Sprachauswahl.

Aus unserer Sicht ist es zwar durchaus nachvollziehbar sein Ego mit einem tollen Intro zu streicheln, trotzdem überwiegen aber die Nachteile einer solchen Intro-Seite bei weitem:

1) Suchmaschinen Optimierung
Beinhaltet eine Intro-Seite nur ein Flash-Movie heisst dies für Suchmaschinen die diese Seite indizieren dass keine auswertbaren Inhalte vorhanden sind. Dementsprechend schlecht wird diese Seite auch bewertet und in den Suchergebnissen gelistet werden. Im schlimmsten Fall ist auch der Skip-Button Teil des Films und kann daher nicht von den Suchmaschinen erkannt werden. In diesem Fall kann auch die gesamte restliche Website nicht indiziert werden.

2) Usability
Eine der Grundregeln der Usability besagt, dass jede Information auf einer Website mit mindestens drei Klicks erreichbar sein muss. Fällt alleine ein Klick durch die Intro-Seite weg kann es bei umfangreichen Websites schon recht knapp werden eine übersichtliche Struktur einzuhalten.

3) Unterschiede im Design zwischen Intro-Seite und dem Rest der Website
Oft werden Flash-Filme zwar aufwendig und peppig gestaltet, haben mit dem Design der restlichen Website aber nur mehr wenig gemeinsam. Dadurch muss sich jeder Besucher erst wieder umorientieren und alle Teile der Navigation neu erkennen.

4) NIEMAND sieht sich die Intros an
Sicher einer der wichtigsten Gründe die gegen Intro-Seiten sprechen ist der dass sie sich schlicht und ergreifend niemand ansieht. Jeder ist schon mal auf einer Intro-Seite gewesen und der erste Blick geht zumeist ohnehin auf die Suche nach dem Skip-Button. Mag ein Intro noch so sinnvoll und erklärend sein, spätestens beim zweiten Besuch einer Website wird gar nicht abgewartet was da passiert sondern nur noch geskippt.

Im Rahmen eines neuen Bauprojektes sollte eine Website für die Fa. Cuta gestaltet werden, die auch in Zukunft eine übersichtliche und klare Darstellung verschiedener Bauprojekte ermöglicht. 

• Grafisches Konzept
  Entsprechend dem Logo ist das dunkle blau der vorherrschende Ton, die Benutzerführung sollte einfach und intuitiv sein.
• WebDesign & Programmierung
  Entsprechend den erstellten CI-Richtlinien wurde die Website gestaltet und in php programmiert.
• Printerfreundliche Version
  Alle Seiten können durch einen Link in einer druckerfreundlichen Version angezeigt werden. Dabei werden alle Hintergrundfarben und -bilder entfernt, Bilder werden automatisch in Graustufen angezeigt.
• Barrierefreiheit
  Die Website wird in allen gängigen Browsern (IE, Firefox, Netscape, Opera) korrekt dargestellt. Der Quellcode ist XHTML 1.0 valide.
• Suchmaschinen Optimierung
  Der Aufbau des Quellcodes ist stark auf Suchmaschinen Optimierung ausgelegt und die wichtigsten Keywords entsprechend platziert.

Checken Sie regelmäßig Ihre Website auf Entwicklungsmöglichkeiten in Hinsicht auf deren Zielsetzungen und Umsatzmöglichkeiten. 

Dies sollte beinhalten: 

• Design noch Up-To-Date?
  Oft wird das Design einer Website einmal festgelegt und dann als gegeben hingenommen und meist nur mehr an den Inhalten gearbeitet. Durch regelmäßige Änderungen an Ihrem Design können Sie aber auf geänderte Anforderungen und Erfahrungen mit Ihrer Website eingehen.
• Usability
  Die Usability bezeichnet die Effizienz und das Ausmaß an Zufriedenheit mit dem Ihre Besucher bestimmte Ziele auf der Website erreichen können. Eine gute Usability ist wichtig damit sich die Besucher der Website auch wohl fühlen.
• Kontaktmöglichkeiten
  Für Besucher der Website sollte immer klar ersichtlich sein, wie sie mit Ihnen Kontakt aufnehmen können.
• ECG-Konformität
  Für Unternehmen die Ihr Angebot im Internet darstellen bestehen verschiedene Richtlinien um dem E-Commerce-Gesetz zu entsprechen.
• Browserkompatibilität
  Eine Website sollte in den gängigsten Browsern fehlerfrei dargestellt werden. Den größten Anteil haben meist Internet Explorer (ca. 60-90%) und Firefox (ca. 10-20%), dies kann aber von Website zu Website unterschiedlich sein und kann mithilfe der Logfiles oder Zugriffsstatistiken ermittelt werden.
• Suchmaschinen Optimierung
  Die einfachsten OnPage Optimierungen die Sie durchführen können sind eine korrekte Auszeichnung der Meta-Tags, sowie der ALT- und TITLE-Attribute. Außerdem sollte auf validen Quellcode Wert gelegt werden. Zum einen ist dies ein wichtiger Schritt in Richtung barrierefreier Webseiten und zum anderen weist auch die Entwicklung der Suchmaschinen darauf hin, dass in Zukunft Webseiten mit validem Quellcode Vorteile haben werden.

Dies muss natürlich nicht wöchentlich durchgeführt werden, je nach Branche empfehlen wir aber im Schnitt alle 3-4 Monate Änderungen am Design durchzuführen, bzw. die Website zu erweitern.

Außerdem sollte alle 2-3 Jahre über eine komplette Überarbeitung nachgedacht werden da in diesem Zeitraum meist bereits viele Änderungen durchgeführt wurden die - von Anfang an geplant - effektiver umgesetzt werden können.