Webseite - Wo anfangen?

Meine persönlichen Anforderungen an eine Webseite

Wo anfangen. Eine gute Frage...

Also, wenn ich im Internet etwas suche, dann benutze ich als Erstes mal eine Suchmaschine. Ich werde zwar dann von Millionen von Ergebnissen erschlagen, aber immerhin :-)

Vielleicht habe ich die gesuchte Seite auch schonmal früher besucht und dann als Lesezeichen abgespeichert.

TIP: Wie man im Internet richtig sucht steht hier bei Tante Google: https://support.google.com/websearch/answer/134479?hl=de

Nun bin ich auf der gesuchten Seite:

Und wie geht es jetzt hier weiter?

Genau hier beginnt nun die Informationsarchitektur. Die Lehre der Gestaltung, der Annäherung, der unterbewussten Führung,

"Informationsarchitektur bezeichnet den Prozess der Gestaltung der Struktur eines Informationsangebots. Zur Informationsarchitektur eines Informationsangebotes zählen die sinnvolle Unterteilung der Inhalte, die Navigationswege und Suchmöglichkeiten innerhalb des Angebots und die gebrauchstaugliche Gestaltung des Zugangs zu den Informationen...."

Lesenswerte Quelle: https://de.wikipedia.org/wiki/Informationsarchitektur

Strengen Sie sich also an: Keiner wird es Ihnen danken! :-)

Was erwarte ich von der besuchten Seite?

Keine Ablenkung durch irgendein Gezappel und Cookie-Generve:

Als Erstes erwarte ich, dass mir kein Cooky-Banner entgegen kommt. Warum?
Weil es z.B. auf meiner Seite nix zu "cookien" gibt. Ich möchte nicht wissen, wo der Besucher draufklickt, was er evtl. kauft, wie lange er sich einen Artikel anschaut und all dem <...zenziert>.
Wirkt die Seite überfrachtet? viel Blink, Blink, Animationen die mich ablenken? Dämliche Werbung die ich eigentlich nicht erwarte, schrille Farben?

Ich suche etwas Bestimmtes:

Wenn ich über einen Suchmaschinen-Link auf die Seite gekommen bin, dann suche ich etwas Bestimmtes. Der Grund warum ich auf den Link geklickt habe war ja der "Teaser-Text", den mir die Suchmaschine in ihren Suchergebnissen angezeigt hat.

Übersichtliche Seitennavigation:

Weiterhin erwarte ich von der Seite, dass ich mich zielgerichtet und deutlich auffindbar meinem ursprünglichen Suchwunsch nähern kann.

Orientierung: Wo befinde ich mich gerade und wie komme ich hier wieder heraus

Und überhaupt!... :-)

Semantische HTML-Grundstruktur

Semantische HTML-Elemente und der "Flow"

Was ist denn Semantik?

Semantik:
1. Teilgebiet der Linguistik, das sich mit den Bedeutungen sprachlicher Zeichen und Zeichenfolgen befasst
2. Bedeutung, Inhalt (eines Wortes, Satzes oder Textes)
Quelle: https://www.duden.de/rechtschreibung/Semantik

Wurde in den Anfangsjahren der Webseitengestaltung noch fast ausschliesslich mit Div's gearbeitet, hat sich mittlerweile die semantische Benennung als Standard etabliert.
Das hat den Vorteil, dass der Code besser "lesbar" ist und die Suchmaschinen sich etwas leichter tun. Auch die Zugänglichkeit für Menschen mit Einschränkungen ist dadurch verbessert worden.

Lesenswerte Quelle: https://de.w3docs.com/html-lernen/semantische-elemente-in-html5.html

HTML Flow: Den natürlichen Fluss ausnutzen

Ich beginne eine Webseite mit den benötigten semantischen HTML-Elementen.
Der natürliche Fluss (Flow) verläuft dabei von links nach rechts und von oben nach unten. Dies gilt allerdings nur für Länder, deren Schreibrichtung (dir="ltr") von links nach rechts verläuft und ist die Defaulteinstellung der Browser.

Das sind Header, Navigation, Main, Sections, Articles, abgestufte Überschriften h1, h2, h3... und Footer.
HTML-Elemente: https://de.w3docs.com/html-lernen/semantische-elemente-in-html5.html

header:
Ist das Elternelement von Firmenlogo, Navigation, evtl. Sprachumschaltung, evtl. ein fettes Hero-Bild/Video, Adresse?
nav:
Ist die korrekte semantische Bezeichnung für das Navigationselement.
Sind mehre Navigationen auf der Seite vorhanden so heissen sie alle nav!. Zur Unterscheidung bekommen sie jeweils eine zusätzliche "Klasse" oder "ID". Beispielsweise "top-nav" und "mobile-nav". Dazu später mehr...
main:
Hier beginnt der sichtbare Teil einer Webseite
section:
Artikel mit ähnlichen Themen z.B. "Fussball, Schwimmen, Turnen, sonstige Sportthemen kommen z.B. in eine Section "Sport". Wobei "Sport" auch die Sectionsüberschrift sein könnte.
article:
Artikel können, mit einem in sich geschlossenenen Thema, allein stehen.
footer:
Wichtig: Der Footer steht am unteren Ende einer Webseite und ist auf jeder Seite gleich.
Hier findet man Anschrift, Links zum Impressum/Datenschutzzeugs u.ä. Bei gewerblichen Seiten, Kontaktmöglichkeiten und evtl. nochmal eine Navigation.

Hier ein Beispiel für einen HTML-Flow:

Zuerst die semantischen HTML-Elemente der Grundstruktur:

Typ des Dokuments. Der Browser wird vorab darüber informiert. Es könnte ja auch ein Video oder PDF-Datei sein
<!DOCTYPE html>

Die Sprache des Inhalts mit Länderkürzel
<html lang="de">

Der Head-Bereich mit den, unsichtbaren, Steueranweisungen an den Browser
<head>

Zeichentabelle zur Darstellung von Umlauten u. anderer Fremdzeichen
<meta charset="utf-8">

Wichtig: Angaben zu responsivem Verhalten des Browsers auf unterschiedlichen Geräten
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Dieser Seitentitel erscheint oben im Browserfenster und in Lesezeichen nach dem Abspeichern
<title>Titel der Seite</title>

Dieses Grafikicon erscheint vor dem Browsertitel und dient der besseren Erkennbarkeit
<link rel="icon" href="favicon.ico" type="image/x-icon">

Wie vorher, aber in anderer Grösse für bestimmte ältere Browser
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">

Hier wird die CSS-Datei eingebunden und bestimmt das Aussehen der Seite
<link rel="stylesheet" href="design.css">

Das End-Tag des Heads
</head>

Ab dem Body sind alle Einträge im Browser SICHTBAR! (ausser den evtl. Kommentaren im HTML-Code)
<body>

Das erste Inhaltselement ist der Header. Ab hier beginnt nun die Kreativität :-)
<header>

Hier könnte ein Firmenlogo oder der Firmenname rein 
<div>Platz für Logo</div>

Hier beginnt die Hauptnavigation mit dem semantischen HTML-Element "nav"
<nav>

mit dem "ul"-Element geht es innerhalb des "nav" weiter. Man könnte auch nur "a"-Elemente benutzen
    <ul>
        <li><a href="index.html">HOME</a></li>
        <li><a href="produkte.html">PRODUKTE</a></li>
        <li><a href="referenzen.html">REFERENZEN</a></li>
        <li><a href="kontakt.html">KONTAKT</a></li>
        </ul>
        Ende der Navigation
</nav>
        
     evtl. Sprachumschaltung oder Adresse/Bild o.ä. 
     <div><a href="english-index.html">Sprachumschaltung</a></div>
     
Hier endet das Header-Element
</header>
     
     
Mit dem Main-Element beginnt nun der Hauptinhalt im Browser. Der Inhalt!
<main>

Das h1-Element beinhaltet die Hauptüberschrift einer Seite und darf nur einmal auf einer Seite vorkommen. Wegen SEO oder so... h1 könnte auch im Header stehen.
    <h1>Hauptüberschrift dieser Seite</h1>

In nachstehenden Beispiel kommt jetzt das section-Element mit zwei thematisch ähnlichen Artikeln über Sport
    <section>

Ab jetzt darf als grösste Überschrift nur noch "h2" oder kleiner verwendet werden. Es sollten die Überschriftenhierarchien eingehalten werden.
    <h2>Alles Wichtige zum Sport am Wochenende</h2>
        <article>   
            <h3>Bayern München zum 187ten mal deutscher Fussballmeister</h3>
            <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
                sed diam nonumy eirmod tempor invidunt ut labore et
                dolore magna aliquyam erat, sed diam voluptua. At vero... 
            </p>
        </article>   
    
        <article>   
            <h3>Skandal beim Eishockey</h3>
            <h4>Gegnerischer Spieler hat verbotenen Haarfön dabei</h4>
            <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
                sed diam nonumy eirmod tempor invidunt ut labore et
                dolore magna aliquyam erat, sed diam voluptua. At vero... 
            </p>
        </article>
        
    Ende der Sektion mit ähnlichen Themen
    </section>
    
    Thematisch alleinstehender Artikel über "Lippenstift"
    <article>   
        <h3>Der "blutigste" Job Spaniens - Vom Läusebauer zum Lippenstift</h3>
        <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
            sed diam nonumy eirmod tempor invidunt ut labore et
            dolore magna aliquyam erat, sed diam voluptua. At vero...
        </p>
        <a href="https://www.youtube.com/watch?v=NrXm7RERMxU">Ein Film auf Youtube</a>
    </article> 
        
 Hier endet "main" und somit der Hauptinhalt der Seite
 </main>
 
 Abschliessend das Footer-Element
 <footer>
 
    Hier beginnt die Adresse mit einem "ul" Listenelement   <ul>
        <li>Unsere Anschrift:</li>
        <li>Firma Raffke & Gierschlund</li>
        <li>Geldspeicherstrasse 1</li>
        <li>1234 Lummerland</li>
        <li><a href="tel:+491234567890">Tel. +49 1234-567890</a></li>
        <li><a href="mailto:Max.Mustermann@example.com">E-Mail: Max.Mustermann@example.com</a></li>
        <li><a href="#">Anfahrt</a></li>
    </ul>
    Ende der Adresse

    Und hier der Rest
    <ul>
        <li><a href="#">Datenschutzzeugs</a></li>
        <li><a href="#">AGB</a></li>
        <li><a href="#">Lieferbedingungen</a></li>
        <li><a href="#">Impressum</a></li>
    </ul>
    Ende Gelände!
    
<p>Copyright© by Mick Dschägger, 2022</p>

Ende footer
</footer>         
                      
 Ganz wichtig: Die schliessenden Tag's von "body" und dem Root-Element "html"
</body>                      
</html>

Mit dem browsereigenen Stylesheet würde es dann so aussehen:

Die browsereigene CSS-Datei, die bei jedem Browser mitinstalliert wird, sorgt für eine erste Konfiguration:
Font-family, Schriftgrösse, Abstände, unterschiedliche Abstände und Grössen der Überschriften, die Anordnung der Listenelemente, die "Punkte" vor den Listen, Farbe der Links usw...

Die wichtigste Botschaft hier ist: Es wird der gesamte Inhalt angezeigt, egal welches Endgerät Sie benutzen würden.
Sehen Sie selbst: Verkleinern Sie den Bildschirm

Und jetzt?

Die browsereigene CSS-Datei in Ihrem Browser hat schon mal für eine gewisse Lesbarkeit gesorgt. Nun käme das Styling mit CSS an die Reihe.
Nur -, wie spreche ich die Kästchen denn an?. Haben die Namen oder Adressen?