HP Design - worauf achten ?

Auf ein anders Thema ist diese Bemerkung gefallen:

Zitat

Leider mußte ich feststellen, dass die Meisten wohl hier eher weniger Ahnung von Webdesign haben, bzw. darin auch keine große Zeit investieren. Was ja auch verständlich ist

.... denn ihrer "Haupthobby" ist die Familienforschung und nicht HTML

Viele benutzen Webspace Angebote, weil sie gerne die Ergebniss ihrer Forschung zeigen wollen, aber sie haben keine Ahnung von Web-Programmierung oder HP-Bauen. Viele solche websites werden häufig durch "HTML-Export" bzw. "Webseiten erzeugen" von irgendwelche Ahnenforschungprogramme, oder von CMS-Baukasten-Systeme erzeugt.
Wer mehr Zeit dafür investiert, kann trotzdem ein schönen HP bauen und so manche Ahneforscher wird langsam "Web-Site-Profi", nur weil er sein Forschung "im besten Licht" darstellen will.

Ich bin Moderator auf ein englisches Ahnenforschung-Forum, wo Webspace für Mitglieder angeboten wird. Da ich berüflich Programmierer bin und Webseiten für mich selber und das Forum gebastelt habe, habe ich Erfahrung mit HTML, PHP, MySQL und CSS sammeln können (ohne dass ich mich gleich als Expert verkaufen will). Dort im Forum helfe ich viele in diesem Bereich und ich bin gerne bereit auch hier zu helfen.

Ich denke, wir können dieses Thema dafür benutzen, allgemeine Tips und Hinweise für Webseiten weiterzugeben.
Wie ich oben sagte, der HP selber ist nicht Hauptziel unserer Forschungsarbeiten, aber wenn wir schon einer haben, dann wollen wir dass die Leute dort gerne verweilen !!!!

Ein paar Begriffe:

• Web-Site: Die Summe alle Seiten, die zu einem Web-Angebot gehören.
• Home-Page (HP): Auf deutsch wird der Begriff HomePage oft benutzt, um eine gesamte Web-Site zu benennen. Streng genommen ist der Home Page nur die Anfangsseite des gesamten Web-Site.
  Um Verwirrung zu vermeiden habe ich für die erste Seite den englischen Begriff Index-Page oder Index-Seite benutzt
  (so genannt, weil die erste Seite häufig index.htm, index.html, index.php, usw. heisst)
• Thumbnail (Daumnagel): ein kleines Bild, das als Link zu einem größeren Bild fungiert. Große Bilder brauche lange Ladezeiten !

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Allgemeine Tips und Hinweise.

• Laut verschiedenen Untersuchungen verweilen die meisten Web-Surfer
  im Durchschnitt 8 Sekunden auf eine Seite.
  Dass heisst, wenn die Besucher nicht gerade Freunde, Verwandte oder anderen Ahnenforscher sind, die absichtlich deine Web-Site ausgesucht haben, dann hast du 8 sekunden Zeit, die Besucher zu überzeugen, "hier lohnt es sich, länger zu bleiben !"
  Also: Halte die Index-Seite - deine erste Seite - klein (schnell zu laden) und interessant.
  Keine große Bilder, nur "Thumbnails", um das Publikum zu verlocken.
  Diese Seite ist dein "Schaufenster" Wenn das Laden zu lange dauert, gehen die "Kunden" anderswo.
  Denk daran: nicht jede hat DSL und Flatrate, viele Web-Surfer haben immer noch Dial-Up-Modems und Call-by-Call-Verbindungen.
  

  
  

  EIn allgemeines Faustregel sagt, die Index-Seite, einschliesslich aller Grafik
  (Bilder, Ikone, Buttons, Banner, usw) nicht größer als 60 KB sein soll,

  
  

• Pass auf, dass alle deiner Web-Seiten einen Titel haben.
  Als ich "untitled documents" in einer Suchmaschine eintrug, erhielte ich über 62.000.000 Treffer.
  Als allererstes sucht eine Suchmaschine nach dem Titel;
  also, wenn du nicht willst, dass deine Seite einer dieser 62 Millionen ist ...
  

  
  

• Vermeide "exotischen" Fonts
  Du magst sie, und sie sind auf deinem Computer installiert, aber nicht jeder hat sie,
  und dann weisst du gar nicht, wie deine Seiten bei den Besuchern aussehen werden.
  

  
  

• Vermeide zuviel Font-Wechsel
  Zuviele unterschiedliche Fonts auf eine Seite können auch verwirren. Wenn schon mehrere Fonts, dann ist am Sinnvollsten eine einheitliche Font für Überschriften, eine einheitliche Font für normalen Texte, eine einheitliche Font für Zitaten, usw, zu benutzen.
  (sehe hierzu auch den Beitrag unten, von Gahmann, über CSS)
  

  
  

  Viele Ratgeber schlagen vor: Bildschirmseiten in Fonts ohne serif, gedruckte Seiten mit Serif-Fonts.
  (dieses Font is ohne serif - aber dieses Font is mit Serif

  
  

• Links sollen offensichtlich sein !
  Benutze eine einheitliche Farbe oder Systematik für alle Links. Normale Texte dürfen nicht untersticken werden, da viele Leute meinen werde, hier sei ein Link.
  

  
  

• Keine toten Links !
  Da kannst du Besucher schnell vergraulen. Überprüfe regelmäßig alle Links auf deinen Seiten.
  

  
  

• "Im Bau" geht nicht !!
  Die Leute wollen nicht wissen, dass etwas erst später kommt. Entweder ein kurzes Kommentar oder gar nichts, aber mach kein Links zu Seiten, wo nur darauf steht "Im Bau", "Kommt noch" usw.
  

  
  

• Erkennbarer Stil
  die Leute können das allgemeine Lay-Out einers Web-Site sehr leicht erkennen, halte deshalb alles einheitlich:
  - Seiten-Formatierung und Lay-Out soll für jede Seite ähnlich sein
  - klare, deutlicher Navigations-Links sollen auf jede Seite immer an die gleichen Stellen sein
  - ein "Home"-Link, zur Index-Seite ist auf jede Seite ein "Muß"
  

  
  

• Vergiss nicht die ALT-Tag für Grafiken
  Dies ist insbesonders für Barrierefreie-Webseiten sehr wichtig, und auch für wenn die Bilder fehlen.
  Und am alle wiichtigsten: Sie werden von Suchmachinen gelesen ! Das bedeutet, dass wenn alle Bilder auf deine Web-site mit ALT-Tags 'dokumentiert' wurden, so kann eine Suchmaschine "die Welt davon erzählen"
  

  
  

• Bildschirm-Auflösung.
  Laut eine Studie ( http://www.onestat.com ) von einigen Millionen Web-Seiten kam folgendes heraus:
  55 % aller Anweder benutzen eine 1024 x 768 Monitordarstellung (standard Laptop-Größe)
  17 % aller Anwender benutzen eine 1280 x 1024 Monitordarstellung (standard 19" Monitor-Größe)
  In 3. Stelle kommt eine 1280 x 800 Monitordarstellung (Breite Laptop-Monitor, wird wahrscheinlich demnächst 1400 x 900 werden)
  8 % aller Anwender benutzen noch eine 800 x 600 Monitordarstellung (vor 5 Jahren was dies der Standard)
  Probiere aus, wie dein HP bei anderen Bildschirm-Auflösung aussieht - du könntest ein Schreck bekommen !
  

  
  

• Jeder Browser hat seine Tücken. Versuche, dein HP auf so viele unterschiedlichen Browser wie möglich anzusehen.
  Installiere mehrere Browser bei dir (IE5, IE6, IE7, Firefox, Opera,Safari, Lynx, usw), bitte Freunden und verwandten mit anderen Browser um Rückkopplung .. (insbesonders wenn du Windows hast, und sie einen Mac, oder umgekehrt)
  Was bei dir zu Hause schön aussieht, mag anderswo ganz anders aussehen.

Weitere Überlegungen:

• Sei sparsam mit Farben. Zuviele Farben machen ein "unrühiges" Bild.
  Insbesonders auf Farbkombinationen achten: manche "flimmern" gerade, wenn man sie länger ansieht. Im Extremfall führt dies sogar zu Migränen, Kopfschmerzen und allgemeines Unwohlsein.
  

  
  

  Noch dazu kommt, dass viele Internet-Anweder unter verschieden Variationen von Farbblindheit leiden. Deshalb werden manche "tolle" Farbeffekte schlichtweg übersehen.

  
  

• Keine "Angst vor Lücken".
  Viel Text auf einmal zu lesen ist ermüdend. Du kannst deinen Besuchern helfen, in dem du nicht zuviel Texte direkt hintereinander präsentierst.
  Der englische Begriff dafür ist "white space". Benutze die Leerstellen- und die Zeilenumbruch-Tasten, um viel "White Space" zu erzeugen und deine Texte aufzulockern.
  

  
  

• Nicht zu "breit" schreiben.
  Wenn dein Text die volle breite des Bildschirms nimmt, so musst der Leser die Augen und/oder den Kopf ständig drehen, um die Texte zu lesen. Denke an Zeitschriften und "Spalten".
  

  
  

  Ein gutes Faustregel ist "das Halbe Bildschirm" Eine Navigationsspalte hilft, das Bildschirm einzuengen, ein paar Bilder, zwischen den Text verstreut, helfen auch.
  Noch ein Faustregel: kurze Absätze, mit einer Leerzeile dazwischen !

  
  

  Obwohl nichts mit Familienforschung zu tun, habe ich zufälligerweise gerade diese Website entdeckt, der (für mich) ein gutes Beispiel dafür ist, wie man es nicht machen soll.
  Das Lettehaus, Berlin

  
  

Zu Punkt im Beitrag #2:

Zitat

Erkennbarer Stil
die Leute können das allgemeine 'Design' bzw. 'Lay-Out' einer Web-Site sehr leicht erkennen, halte deshalb alles einheitlich:
- Seiten-Formatierung und Lay-Out soll für jede Seite ähnlich sein
- klare, deutlicher Navigations-Links sollen auf jede Seite immer an die gleichen Stellen sein
- ein "Home"-Link, zur Index-Seite ist auf jede Seite ein "Muß"

Es gibt bei Websites alle möglichen Stile. Wichtig ist, dass du dich für einen Stil entscheidest, und dabei bleibst.

Hier ist ein typischer Stil:
forum.genealogy.net/core/index.php?attachment/3975/
Im Allgemein sind die Teile 1-4 statisch, das heisst, die haben den gleichen Inhalt für alle Seiten.
Nur der 5. Teil, die Seiteninhalte, ändern sich.

Ob dein HP 1 oder 1000 Seiten hat, wenn du die statischen Teile änderst, dann muß du allen Seiten editieren und ein neues Upload machen (einheitlicher Stil !!)

Falls dein Webspace-Provider es anbietet, kann man hier PHP gut einsetzen. PHP ist eine mächtige Programmiersprache, die du überhaupt nicht kennen muß, ausser dem einen Befehl - include
Grob gesagt, für jeden der statischen Teile schreibst du alle dazugehörenden Zeilen in einer getrennten Datei.
z.B.
kopf-teil.php
linke-spalte.php
fuss-teil.php
und evtl rechte-spalte.php

In jeder deine Webseiten, die allerdings jetzt irgendeinename.php heissen müssen, brauchst du nur zu schreiben:

<? include "kopf-teil.php ?>
<? include "linke-spalte.php ?>
:
... deine Seiteninhalte
:
[evtl.: <? include "rechte-spalte.php ?>]
<? include "fuss-teil.php ?>

Falls du irgendwann die statischen Teilen ändern willst - eine neue Kopfzeile, eine neu Menü-Punkt usw. - dann, ob du 1 oder 1000 Webseiten hast, brauchst du diese Änderungen nur einmal zu machen (und "uploaden") und sofort gilt es für dein gesamtes Website.

Dies ist natürlich nur eine sehr gedrängte, vereinfachte Erklärung. Wer mehr davon erfahren will, bitte darüber ein neues Thema aufmachen. Ich bin gerne bereit zu helfen, Gahmann hat an eine andere Stelle auch seine Hilfsbereitschaft angekündigt, und sicherlich gibt es noch ein paar Leute hier, die gerne mithelfen werden.

Gruß,
Bob

Auch wenn ich hier "du" schreibe, bitte betrachte dies als eine allgemeine Antwort auf Birgits Frage.
(ich schreibe "du", da es freundlicher klingt, als immer "man tue .." usw. zu sagen )

Ich werde die Frage ein bisschen ausführlicher beantworten, da die Grafik auch eine Thema für sich ist.

Um eine Grafik mit HTML darzustellen, brauchst du einen img-Tag
Im einfachsten Form sieht das HTML dann so aus: <img src="deine-grafik-datei.jpg" />

Dazu kommen dann noch verschieden "Attribute" , wovon die wichtigsten width, height, alt, und title sind

• width="..." height="..." (breite/höhe) gibt an, wie groß das Bild sein soll, in Pixeln. Wenn keine Größe angegeben wurde, wird einfache die aktuelle Größe des Bildes genommen.
  

  
  

• Größen anzugeben, bedeutet, dass das Bild auf diese Größe vergrößert/reduziert wird. Das kann zwar manchmal für "Verzerrungseffekte" gezielt benutzt werden, aber i. A. ist es sinnvoll die genaue Größen des Bildes anzugeben, damit der Browser nicht so viel arbeiten muss.
  In anderen Worten, beim Entwurf deines Websites, wenn du weisst, wie viel Platz auf eine Seite für das Bild vorhandenen ist, dann benutze einen Grafikprogramm, um das Bild auf genau dieser Größe zu reduzieren, und gebe diese Größen in width=/height= an.
  

  
  

• Wenn der Browser eine Seite lädst, werden zuerst alle Texte geladen und danach die Bilder. Wenn der Browser nicht weiß, wie groß das Bild ist , dann macht er einen Platzhalter (meistens einen roten Kreuz) and macht weiter, die Texte auszugeben.
  Danach werden die Texte auseinandergeschoben, um Platz für die Grafik zu machen. Das kann man bei vielen Webseiten beobachten, wie der Text hin und her "springt" während die Bilder eins nacheinander erscheinen. Wenn du die width=/height= Attribute benutzt, dann weißt der Browser vorher wieviel Platz soll für das Bild reserviert werden und wenn die Bilder nachher eingefügt werden, bleiben die Textteile "rühig".
  

  
  

• alt="Bildbeschreibung": Falls der Browser deine Bilder nicht findet, erscheint normalerweise einen roten Kreuz.
  (was häufig zu der Frage führt "warum sehe ich nur einen roten Kreuz statt meine Bilder ??" ).
  Sollte der Browser kein Bild finden, dann sucht er nach einem "alt" Tag und schreibt stattdessen der Text, den er da findet
  Der alt-Tag ist auch sehr wichtig, falls deine Besucher einen "nur Text"-Browser benutzt, oder aus "Kosten-/Geschwindigkeitsdenken", die Grafikausgabe abgeschaltet hat, denn hier wird nur den alt-Text ausgegeben.
  

  
  

• title="Bildbeschreibung": Wenn du mit dem Cursor über einen Bild schwebst, dann wird der angegebenen Text angezeigt.
  Bei manchen Browsern passiert dies auch mit dem alt-Tag. Meine Erfahrung ist, das Firefox nur den title-Text anzeigt.
  Besonders bei einem Thumbnail empfiehlt es sich, einen Hinweis hinzuzufügen: "Meine Großvater - Klick hier für Vergrößerung" (oder ähnliches). Übrigens, der title-Tag kann auch bei Links eingesetzt werden, um eine kleine Beschreibung mitzugeben.
  

  
  

• Noch eine sehr wichtige Aspekt bei alt- und title-Tags ist die, der Barrierefreiheit (sehe oben, den Beitrag von Gahmann).
  Um die Anwendung der Internet für Sehbehinderten zu erleichtern gibt es Software, die Webseiten liest, und als Audio-Ausgabe wiedergibt. Bei Grafiken wird hier der alt-Text wiedergegeben.

Beispiel:
Mit Grafikdatei auf Hauptverzeichnis deines HPs
<img src="maha1889-001.jpg" width="300" height="450" alt="Mein Großvater 1891"
title="Mein Großvater, Hans Margulies 1891" />

mit Grafikdatei in einem "bilder"-Folder deines HPs
<img src="./bilder/maha1889-001.jpg" width="300" height="450" alt="Mein Großvater 1891"
title="Mein Großvater, Hans Margulies 1891" />

und als Thumbnail (target="_blank" bedutet "öffne in neuen Fenster/Tab"):
<a href="./bilder/maha1889-001.jpg" target="_blank">
<img src="./bilder/maha1889-001-t10.jpg" width="100" height="150" alt="Mein Großvater 1891"
title="Mein Großvater, Hans Margulies 1891 (Klicke für Vergrößerung in neuen Fenster) " /></a>

(das "-t10" an der Name des Thumbnail-Bild ist mein "System" , um Thumbnails zu bezeichnen - tnn = Thumbnail mit 10xnn pixels Breite )

Aus einen anderen Thema hierher verschoben:

Zitat

@ Bob hier habe ich mal versucht, Deine Hinweise zu berücksichtigen.
Allerdings bekomme ich mit target="_blank" die Seite nicht auf extern.
Was mache ich falsch?

Hi Birgit,

das target="_blank" gehört in einer <a href= ......> -Tag. Also, wenn du mit kleinen Thumbnails auf eine grösseres Bild zeigen willst.

Ich schicke dir eine PN.

Gruß,
Bob

Ach so ! habe dich misverstanden

wenn du auf Bearbeiten klickst, wirst du die folgende Zeile sehen

[url=http://www.ahnen-ploeger.de/foren/bilder/hannover08/]Bilder aus Hannover[/url]

Das ist keine HTML sonder eine Art "abgespeckte HTML" für Bulletin Boards und Foren, wie diese. HTML ist nicht erlaubt, weil man viel Unsinn und viel Gefährliches damit machen kann. Das Forum-Software wird wahrscheinlich alle HTML-Anweisungen entweder übersehen, oder die "erlaubten" Teile umsetzen.

Sorry,
Bob

ps. Thumbnails (= Daumennagel), sehe Beitrag #2

Birgit,

tut mir leid, aber du bekommst es hier gar nicht, weil du hier in Forum-Beiträge keine 'reine' HTML benutzen darfst, nur die "abgespeckte" Version.

Bob

Aus Antwort #2:

Zitat

Also: Halte die Index-Seite - deine erste Seite - klein (schnell zu laden) und interessant.
Keine große Bilder, nur "Thumbnails", um das Publikum zu verlocken.

Soeben habe ich in einen Artikel gelesen, dass Google die Seiten-Ladezeit als Faktor in seinem "Page-Rankings" einschliesst.

In Klar(er)text ausgedruckt:
Kurze Seiten, die sich schnell laden lassen kriegen gute Noten,
Lange Seiten mit vielen Grafik, die viel Zeit brauchen, im Browser geladen zu werden, kriegen schlechtere Noten.

"Small is beautiful"

Gruß,
Bob