Checkliste für eure Homepage

[Walker]

So - hab mal eine Checkliste gemacht und versucht das eine oder andere ein bisschen zu erklären. Anmerkungen und Korrekturen ERWÜNSCHT!!!

[Walker]

Wenn Ihr die 27 Fragen in dieser Checkliste alle mit „ja“ beantworten können,
ist Eure Homepage bereit für das hochladen ins Internet.

1. Funktionieren alle internen und externen Hyperlinks?
ja? --> nächster Schritt

2. Öffnen sich Externe Hyperlinks in einem neuen Fenster?
ja? --> nächster Schritt
nein? --> Wenn ein neues Fenster mit einem Link geöffnet wird, sollte das angegeben werden.
Zum Beispiel direkt im Hyperlink mit <a>,
funktioniert mit jeden Browser.

3. Werden die Seiten schnell geladen?
ja? --> nächster Schritt
nein? --> "Je besser die Seite, desto einfacher das Design"
Eine Homepage* sollte inklusive Grafiken, Countern*, Scripts, etc. nicht mehr als 50KB groß sein.
Die Seite sollte 30KB nicht überschreiten. Ansonsten brechen die Besucher sehr wahrscheinlich den Ladevorgang ab
und surfen weiter. Wie so oft bestätigen Ausnahmen die Regel. Wenn die Besucher wissen,
was sie erwartet und dass sich das Warten lohnt, darf der Ladevorgang auch länger dauern.
Wer eine Homepage betreibt ohne daran zu denken, die Übertragungszeiten seiner Seiten zu optimieren,
bestraft letztlich seine Leser.
Der Irrglauben vieler Anfänger, Webdesigner zu sein hieße, tolles Grafikdesign abzuliefern,
ist weit ab von der Wirklichkeit. Die Aufgabe des Webdesigners ist es, die auf die Seite gehörigen Informationen
zu nehmen und so geordnet wie möglich unter minimalem Aufwand zu präsentieren.
Im Netz hat keiner mehr die Zeit, sich mit viel Schnickschnack abzugeben.
Der Besucher einer Seite möchte die Informationen, die er dort erwartet - und das so minimal verpackt wie möglich.

4. Haben Sie nicht mehr als 2 Werbebanner pro Seite?
ja? --> nächster Schritt
nein? --> Es bringt nichts, Webseiten von oben bis unten mit Werbe-Banner* zuzupflastern.
Um mit Werbung ernsthaft Geld zu verdienen braucht man ein paar tausend Besucher im Monat.
Deshalb kann in den meisten Fällen auf Banner verzichtet werden. Falls man es trotzdem versuchen möchte,
sollte man nur ein oder zwei Banner pro Seite verwenden, diese dann aber prominent platzieren.
Stellen Sie Sich vor jemand hat auf seiner Startseite 10 Werbebanner,
der Besucher sucht vergeblich nach dem Eingang. Nicht unwahrscheinlich,
dass eine Banner davon interessanter ist (...und der Besucher ist weg.)
Die Frage der Werbung wird im übrigen heiß diskutiert.
War sich die Internet-Gemeinde noch vor Kurzem einig in der Ablehnung jeglicher Kommerzialisierung,
so gibt es in letzter Zeit auch entgegengesetzte Strömungen - und das nicht von Seiten der Konzerne.
Klar ist jedenfalls, dass viele Angebote im Internet nur deshalb kostenlos sind, weil sie mit Werbung finanziert werden!

5. Webseite verwendet nur Standard- Schriftarten?
ja? --> nächster Schritt
nein? --> Im Web gibt es einige Schriftarten (Fonts) die sich auf den meisten Browsern darstellen lassen. Dazu zählen u.a.: Times New Roman, Arial, Verdana, Helvetica und Courier New.

Standardschrift für I.Explorer und Netscape sind Times New Roman (Serifenschrift mit "Füßchen"), Arial (Serifenlose Schrift ohne "Füßchen").
Es ist ratsam nur Standard Schriftarten zu benutzen. Denn sollte ein Besucher nicht die verwendete Schriftart haben benutzt der Browser* eine Standard Schrift. dadurch kann die ganze Seite anders aussehen.

Die Schrift "Verdana", die Sie höchstwahrscheinlich gerade lesen wurde extra für den Einsatz am Bildschirm entwickelt.

Die folgenden Schriftarten sind auf jeden Fall auf dem Computer des Besuchers (Ihrer Webseiten) und können auf dem so dargestellt werden, wie bei Ihnen.

Schriftart Anzeige
Times New Roman Casablanca
Arial 12 Uhr mittags
Tahoma Star Wars
Helvetica Star Wars 2
Verdana Star Wars 3
Courier Jurassic Park
Courier New Der Herr der Ringe
Fixedsys Titanic

Tipp: Erstellen Sie für Überschriften kleine Grafiken, wenn Sie eine exotische Schriftart dafür verwenden möchten. So können Sie sicher sein, dass bei jedem Besucher Ihrer Homepage die Schriftart korrekt angezeigt wird.

Code: Alles auswählen

So binden sie eine Schriftart in einen Text ein.
Mit Html:
<font> Text </font>
Mit CSS&#58;
<div> Text </div>

Eine ganze Webseite mit der gleichen Schriftart
Mit Html&#58;
<basefont>
Mit CSS&#58;
<body>


Die CSS-Syntax erlaubt es, eine genauere Schriftgrößenangabe anzuzeigen.
In Html wird die Schriftgrößenangabe nur in Punkt dargestellt, in CSS dagegen in Punkt &#40;pt&#41;, Pixel &#40;px&#41;, Prozent &#40;%&#41;, Zentimeter &#40;cm&#41; oder Milimeter &#40;mm&#41;.

Hier einige Beispiele die den Unterschied deutlich machen.

Punkt &#40;pt&#41; Pixel &#40;px&#41; 
font-size&#58; 8pt font-size&#58; 8px 
font-size&#58; 9pt font-size&#58; 9px 
font-size&#58; 10pt font-size&#58; 10px 
font-size&#58; 11pt font-size&#58; 11px 
font-size&#58; 12pt font-size&#58; 12px 

Angaben zur Schriftfarbe mit Farbnamen oder Hexadezimal.
In Html&#58;
<font></font> oder
<font></font>

In CSS&#58;
<span></span> oder
<span></span> 

6. Keine Überflüssigen Gimmicks?
ja? --> nächster Schritt
nein? --> weg damit!!!


7. Sind die Inhalte Aktuell?
ja? --> nächster Schritt
nein? --> Viele Seiten werben mit "aktuellen News", die in Wirklichkeit Wochen alt sind. Wenn man aktuelle News verspricht,
dann sollte man diese auch bieten, ansonsten sollte man lieber darauf verzichten.
Anderes Beispiel: Was halten Sie davon wenn auf einer Homepage steht "Zuletzt geändert am 13. Februar 1998".
Ich meine diese Seite wurde vom Webmaster schon lange aufgegeben.

8. Eigenes Layout, kein Template oder eine Kopie?
ja? --> nächster Schritt
nein? --> ran an die Arbeit....

9. Kann der Besucher mit Ihnen Kontakt aufnehmen?
ja? --> nächster Schritt
nein? --> Nichts ist wichtiger als der Kontakt zu seinen Besuchern:
Nur so können Wünsche, Anregungen und konstruktive Kritik ausgetauscht werden.

10. Keine nervenden Gif-, Applets und Flash-Animationen?
ja? --> nächster Schritt
nein? --> Zu viel Animation, zum Beispiel mit animierten Gifs*, wirkt unprofessionell und lenkt ab.
Jede Seite sollte höchstens ein animiertes Element enthalten, besser man verzichtet ganz darauf.
(Alles, was über den Bildschirm hopst und zappelt und blinkt — weg damit! ;- )
Tipp für Surfer: Die blinkenden Gifs oder einen Hintergrund-Sound kann mit der [Esc]-Taste auf der
Tastatur abgeschaltet werden.

[Walker]

11. Ist bei jeder Grafik der ALT-Zusatz vorhanden?
ja? --> nächster Schritt
nein? --> erledigen!!!

12. Klare und Übersichtliche, gut durchdachte Navigation?
ja? --> nächster Schritt
nein? --> Eine gute Navigation ist sehr wichtig. Die Links sollten verständlich und übersichtlich angeordnet sein.
Verwendet man Bilder als Navigationslinks, sollte man auf keinen Fall den alternativen Text vergessen,
der angezeigt wird, wenn die Grafiken noch nicht geladen sind, oder der Besucher Grafiken deaktiviert hat.
Der beste Inhalt nützt nichts, wenn sich die Besucher nicht zurechtfinden.
Verwenden Sie deutliche Kennzeichen, damit man die Seiten von einander unterscheiden kann.
Benutzen Sie einfache und leicht merkende Namen, zur Verbesserung der Navigation.
Der Besucher sollte nicht nach 15minütigem stöbern auf der Homepage das Gefühl haben, sich im Kreis zu bewegen.

13. Keine Under Construction-Schilder bzw. Baustellen Seiten?
ja? --> nächster Schritt
nein? --> beheben!!!

14. Werden die Bilder und Grafiken schnell geladen?
ja? --> nächster Schritt
nein? --> kleinere Bilddateien verwenden! - ein Bild sollte nicht größer als 30 kb sein

15. Genug Speicherplatz auf dem Homepage-Server vorhanden?
ja? --> nächster Schritt
nein? --> Rechnen Sie mal zusammen, was Sie an Webspace haben (benötigen).
Zu diesem Zweck schauen Sie einfach in die Ordner, in die Sie Ihre Webpräsenz abgespeichert haben,
markieren Sie alle Dateien und Unterordner. Gehen Sie mit der rechten Maustaste ins Kontextmenü
und wählen "Eigenschaften" aus. Angezeigt wird nun die Größe der Dateien in KB.

17. Keine überladenen Seiten die den Besucher erschlagen?
ja? --> nächster Schritt

18. Kein nervender Hintergrund-Sound?
ja? --> nächster Schritt
nein? --> Ein gutes Mittel um Besucher zu vergraulen.
Hintergrundsound erhöht die Ladezeiten, hat eine billige Qualität und lässt sich oft nicht abschalten.
Jeder hat einen anderen Musikgeschmack, den Sie so oder so fast nie treffen können.
Daher bieten Sie einen Ein- und Ausschaltknopf für Hintergrundmusik an.
So kann jeder Besucher individuell die Musik ein/ausstellen.

19. Ist auf jeder Seite ein aussagekräftiger Seitentitel vorhanden?
ja? --> nächster Schritt
nein? --> Der Seitentitel ist sehr wichtig <title> Seitentitel </title>,
in diesem Teil vorkommende Wörter werden von den Suchmaschinen besonders stark gewertet.
Außerdem, wenn die Seite zu den Favoriten/Bookmarks hinzugefügt wird, wird dort auch der Seitentitel angezeigt.
Oder können Sie sich unter einem Bookmark mit dem Namen "Seite 2" etwas vorstellen??
Tipp: Wechseln Sie einfach mal zu den diversen Suchdiensten wie Google oder Yahoo!
und geben Sie dort als Suchbegriff "NEWPAGE" ein. Ich habs versucht und schlappe 22000 Treffer erzielt.
"INDEX" hat noch mehr ergeben

20. Einheitliches Design auf allen Seiten?
ja? --> nächster Schritt
nein? --> Wichtig für eine gute Homepage ist ebenfalls das sogenannte Corporate Design«.
Damit sind bestimmte Merkmale der einzelnen Seiten gemeint, die diese eindeutig Ihrer Homepage zuordnen.
Das können zum Beispiel sein:
• Ein Logo, das immer an der selben Stelle einer Seite eingebunden wird.
• Gleiche Farben für Hintergrund, Text und Links.
• Gleiche Gestaltung von Textabschnitten oder Überschriften.
• Gleiche grafische Symbole für bestimmte Dinge, zum Beispiel Links, Hinweise, und so weiter
Ein einheitliches Design wirkt immer viel professioneller als "kunterbunt zusammen-gewürfelte" Seiten.

Der Gebrauch von Grafik- und Fotoelementen ist nicht das wichtigste an einer erfolgreichen Internetseite.
Klar ist, dass eine anspruchsvolle Internetseite über ein gewisses "Corporate Design" verfügen muss.
Ein Logo sollte vorhanden und ein "gewisser" Gestaltungstiel (Farben, markante Gestaltungselemente, Schriften etc.)
sollte durchgehenden genutzt werden. Auch sollte der Einsatz von Animationen kontrolliert erfolgen.
In diesem Zusammenhang ist es wichtig sämtliche Grafiken, Fotos und sonstige Multimediaelemente auf den
Einsatz im Internet zu optimieren.

21. HTML, JavaScript, CSS und PHP fehlerfrei?
ja? --> nächster Schritt
nein? --> schleinigst bereinigen!!! Suchmaschinen wollen korrekten Code...

22. Ist die Schrift auf dem Hintergrund gut lesbar?
ja? --> nächster Schritt
nein? --> Der Hintergrund sollte nicht zu grell sein. Grelle Hintergründe belasten das Auge stark und machen Text schwer lesbar.
Falls man ein Hintergrundbild verwendet sollte es den Besucher nicht zu stark ablenken
(keinesfalls: Steinkacheln, 3D-Reliefs, Holzmaserungen, Linienmuster... verwenden).
Wichtig ist ein ausreichender Kontrast zwischen Text und Hintergrund.
Gut ist zum Beispiel schwarze Schrift auf einem weißen oder pastellfarbenen Hintergrund.
Hellgrün auf Gelb ist indiskutabel.
Sie sollten eine einheitliche Hintergrundfarbe oder einen einheitlichen Hintergrund sowie
zwei oder drei aufeinander abgestimmte Grundfarben verwenden, eine sogenannte "gebundene Palette".
Der 3D-Effekt zwingt das Auge immer zwischen räumlicher Tiefe im Bild und einer ganz anderen räumlichen Ebene
auf der sich der Text befindet hin- und herzuspringen.
Tipp: Testen Sie die Seite auch, ohne Grafiken und Hintergründe zu laden!

[Walker]

23. Sind die wichtigsten Metatags definiert?
ja? --> nächster Schritt
nein? --> Referenziert werden HTML-Seiten mit sogenannten "MetaTag*-Angaben".

Mit Hilfe von solchen Meta-Angaben können Sie z.B.:
nützliche Anweisungen für WWW-Server, WWW-Browser machen
Angaben für automatische Suchmaschinen notieren
Angaben zum Autor und zum Inhalt der Datei geben
HTTP-Befehle absetzen (automatische Weiterleitung)

Einfache Erzeugung von "Meta-Tags" mit dem Meta-Tag Generator

Angenommen, Sie wollen Ihre Site bei Fireball anmelden.
Dazu müssen Sie nicht mehr tun, als Ihre Webadresse in ein dazu vorbereitetes Fireball Formular zu tippen.
Daraufhin erhalten Sie Besuch vom Fireball Spider.
Und da dieser Robot weder mit Grafiken noch mit Javascript etwas anfangen kann, helfen die Meta Tags. Platziert zwischen <head> und</head>

Beschreibungstexte
meta name="author" content="Autorenname"
Bestimmt den Namen des Autors für diese HTML-Seite

meta name="date" content="[Datum/Uhrzeit]"
Bestimmt, wann die Datei publiziert wurde

meta name="description" content="Beschreibung"
Bestimmt einen Beschreibungstext

meta name="keywords" content="[Wortliste]"
Bestimmt die Stichworte für ein Suchprogramm


Zusätzliche Meta-Angaben
meta name="robots" content="index"
Damit erlauben Sie einem Suchprogramm ausdrücklich, Inhalte aus der aktuellen HTML-Datei
an seine Suchdatenbank zu übermitteln (index = Indizierung).

meta name="robots" content="follow"
Damit erlauben Sie einem Suchprogramm ausdrücklich, Inhalte aus der aktuellen
HTML-Datei und aus untergeordneten
Dateien Ihres Projekts, zu denen Verweise führen, zu besuchen und an seine Suchdatenbank zu übermitteln.

meta name="robots" content="nofollow"
Damit erlauben Sie einem Suchprogramm, Inhalte aus der aktuellen
HTML-Datei an seine Suchdatenbank zu übermitteln.
Sie verbieten dem Suchprogramm jedoch, untergeordnete Dateien Ihres Projekts, zu denen Verweise führen, zu besuchen.

meta name="robots" content="noindex"
Damit verbieten Sie einem Suchprogramm, Inhalte aus der HTML-Datei an seine Suchdatenbank zu übermitteln.

meta http-equiv="pragma" content="cache"
An Proxy-Agenten: Datei bitte auf Proxy-Server speichern!

meta http-equiv="pragma" content="no-cache"
An Proxy-Agenten: Datei nicht auf Proxy-Server speichern!

meta http-equiv="content-type" content="text/html; charset=iso-8859-1"
Diese Angaben helfen dem WWW-Browser, die Inhalte der HTML-Datei im Zweifelsfall korrekter zu interpretieren.
Vor allem die Angabe zum Zeichensatz ist wichtig, falls Sie innerhalb der HTML-Datei Umlaute usw. nicht maskieren.

meta http-equiv="Content-Script-Type" content="text/javascript"
meta http-equiv="Content-Style-Type" content="text/css"

Die Angabe zur bevorzugten Scriptsprache leiten Sie mit %u2022 <meta> ein.
Mit dem Attribut "content=" müssen Sie den Mime-Type der gewünschten Sprache angeben.

meta name="generator" content="MS Frontpage 2.0"
meta name="generator" content="Netscape Composer"
Wird von HTML-Editoren, vor allem von Wysiwyg-Editoren ohne Wissen des Autors eingefügt.
Software-Hersteller können so prima das Web durchsuchen und feststellen,
wo und wieviel mit ihrer Software gearbeitet wird.

meta name="revisit-after" content="25 days"
An Such-Robot: bitte nach 25 Tagen erneut vorbeikommen und Datei neu auslesen!

Trotz all dieser Meta-Angaben sollten Sie regelmäßig überprüfen, ob Ihre Homepage bei den Suchmaschinen noch aufgelistet wird. - gegebenenfalls optimieren lassen *gg* (achtung Insider!!)

24. Seiten auf Rechtschreibfehler überprüft?
ja? --> nächster Schritt
nein? --> Man sollte gut auf korrekte Rechtschreibung achten.
Rechtschreibfehler wirken sehr unprofessionell, besonders bei Firmenseiten.
Tipp: Den Text in einer Textverarbeitung wie Word schreiben und eine Rechtschreibprüfung durchführen.
Dann den Text kopieren und in die Seite einfügen.

25. Haben Sie mehr als fünf Seiten anzubieten? Inhalt/Content
ja? --> nächster Schritt
nein? --> Oder auch Usability. Viele Webseiten glänzen mit einem tollen Design aber %u201EOhne Inhalt%u201C.
Ein bischen Text, 5 Bilder, 4 Seiten Text, einige Witze und eine E-Mail-Adresse... das war es?!
Wer nicht mehr zu bieten hat, bekommt auch nicht viele Besucher. Und platzieren Sie kein "billiges Zeug" oder
inkorrekte Information. Enttäuschte Besucher sind kaum zurück zu gewinnen.
Auch das Aufführen von Links zu anderen Seiten macht noch keine interessante
und damit sehenswerte Homepage aus. Verzichten Sie auch möglichst auf private Informationen aus Ihrem Leben
(zum Beispiel Lebensläufe und tiefgründige Familienangelegenheiten).
Mit solchen Themen locken Sie heute keinen "Hund hinter dem Sofa" mehr hervor.
Eine kurze Info zum Ersteller oder vielleicht auch Webmaster inkl.
E-Mail Adresse reicht in der Regel vollkommen aus.
Im Netz gibt es viele nützliche oder interessante Angebote, um seine Homepage zu ergänzen beziehungsweise
um sich von anderen Seiten zu unterscheiden. Dies sind zum Beispiel Content-Anbieter, Gästebücher, Newsletter, Newsticker,
Foren und so weiter Gut kommentierte Übersichten über solche kostenlosen Angebote gibt es zum Beispiel unter:
kostenlos.de , gratis2000.de oder geizkragen.de

26. Homepage-Format (Auflösung) für alle Monitore geeignet?
ja? --> nächster Schritt
nein? --> Verwenden Sie einen 17 Zoll oder noch größeren Monitor? Bedenken Sie, dass Ihre Dokumente bei einer Bildschirmeinstellung
von 1024x768 Punkten bei Ihnen wohl gut aussehen, bei Anwendern mit einer kleineren Bildschirmdiagonalen
aber leicht zur Unleserlichkeit mutieren können. Es soll noch jede Menge Leute geben die mit
14 - oder 15 Zoll (800x600) Monitoren unterwegs sind.
Hinweise wie "best viewed with ..." (Beste Darstellung mit ...). Das merken die Leute selbst.

27. Ist ein Impressum* vorhanden?
ja? --> nächster Schritt
nein? --> Angabe in Veröffentlichungen, die die für den Inhalt und die Herstellung verantwortlichen natürlichen
und juristischen Personen benennt. Urheberrechtsangaben sind ebenfalls Bestandteil des Impressums.


Alle Frage mit JA beantwortet? - Dann ab ins Web mit der neuen Seite

Ich hoffe der Artikel hat euch ein wenig weitergeholfen und freue mich über Anmerkungen und Korrekturen

[Peter]

Hallo!
Eine Frage zu den Meta-Tags. Die benötigt eine Homepage, um von Suchmaschinen gefunden zu werden, das verstehe ich soweit. Aber in den Online-Anleitungen steht, dass man diese dann in den Kopfbereich einfügen soll!
Wie funktioniert den das??

[Zwerg]

..... dass man diese dann in den Kopfbereich einfügen soll!
Wie funktioniert den das??

Wenn Du Dir den Quelltext einer Webseite ansiehst, hast Du ziemlich weit oben den TAG "head" stehen <HEAD>.... dann kommen die entsprechenden Anweisungen, wie zum Beispiel Titel... Keywords und so weiter....

und dann wird der TAG "head" geschlossen </HEAD>

Diesen Bereich nennt man Kopfbereich der Webseite. Also alles was zwischen den beiden "head" Ausdrücken steht. Dieser Bereich wird nicht auf der Webseite dargestellt. Er dient reint als Information für den Browser bzw. für die Suchmaschine.

Zur Verdeutlichung: Eine stark vereinfachte html-Seite würde so aussehen: (die beiden head-TAGs habe ich rot eingefärbt - den eigentlichen Kopfbereich (header) blau...)

<HTML>
<HEAD>
METATAG
METATAG
METATAG
usw...
</HEAD>
....und jetzt kommt die eigentliche Webseite....

Ich hoffe, es war halbwegs verständlich....

Viele Fragen beantwortet diese Webseite (ist mehr oder weniger die Referenz http://de.selfhtml.org/
und unter dem folgenden Link bekommt man das Grundgerüst einer Webseite erklärt (somit auch den Kopfbereich)

http://de.selfhtml.org/html/allgemein/grundgeruest.htm

Wenn noch Fragen offen sind, bitte melden!

Liebe Grüße

Christian

[Peter]

Vorerst ein herzliches Dankeschön, werd gleich weiterbastln!

[Jason]

Bitte die Seite auch in verschiedenen Browsern ( Firefox, Opera, Netscape - Navigator evtl. ältere IE - Verionen ) probieren oder Bekannte, Stammkunden oder Kolleginnen befragen ob die Seite läuft.
Nichts ist nerviger wenn man auf einer Seite gefangen ist, oder sich die Links nicht öffnen lassen.
Es gibt auch noch Exoten da draußen ( ich zähle mich dazu ) die nicht den Einheitsbrei verwenden. Ich glaube sogar das deren Zahl wächst, wenn auch langsam.