CSS/fertige Layouts/Design01

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Dies ist eine farblich ansprechende Seite im Flexbox-Layout für eine kleine Firma, Kanzlei oder Privatperson.

Beispiel: Design 01
Screenshot Screenshot Screenshot


Was eine Layout-Vorlage leisten soll[Bearbeiten]

Mindestschriftgröße[Bearbeiten]

In vielen, vor allem älteren Vorlagen findet man oft sehr kleine, feste Schriftgrößen. In unseren Vorlagen wird die Schriftgröße als eine relative Größe festgelegt, sodass der Browser die ihm passende Schriftgröße findet und der Nutzer problemlos zoomen und skalieren kann.

Beispiel: Angabe einer Mindestschriftgröße
body {
    font: normal 1em Arial, sans-serif;  /* keine Mindestschriftgröße! Dies wird dem Browser, bzw. dem Nutzer überlassen. */
}

Verweise kennzeichnen[Bearbeiten]

In älteren Vorlagen werden Verweise oft durch text-decoration: none; und eine gefällige, oft aber sogar graue Farbe gestylt, mit dem Ergebnis, dass sie sich nicht mehr deutlich vom umgebenden Fließtext abheben.

Empfehlung: Zeichnen Sie Verweise stets mit mehreren Merkmalen aus. Gerade die Unterstreichung ist eine Konvention, die Verweise gut erkennen lässt.

Kennzeichnen Sie auch ausgewählte Verweise.

Beispiel: Kennzeichnen von Verweisen
a {
  color: currentColor;
  font-weight: bold;   
}

a:hover,
a:focus {
  color: #888;
  background: gold;
}

Zugänglichkeit[Bearbeiten]

Die aktuelle Seite erhält in der Navigation ein a-Element ohne href-Attribut.

<a aria-current="page">Startseite</a>

Ohne weiteres Zutun sieht so die Navigation immer gleich aus. Über das aria-current-Attribut erfahren Screenreader, dass dieses die aktuelle Seite ist; mithilfe von CSS kann dies auch optisch kenntlich gemacht werden.

Bei größeren Navigationen ist es nützlich, von der Maus überfahrene oder per Tastatur angesprungene Menüpunkte zu kennzeichnen. So wird mit der Pseudoklasse :hover das jeweils angesprochene Navigationselement selektiert. Damit dieser Vorteil auch für Nutzer gilt, die die Navigation mit der Tastatur durchtabben, wird dies um :focus erweitert.

Beispiel: Gestaltung der Navigationselemente (CSS ab Zeile 179)
nav a 	{
  background: darkred;  
  color: white;
  text-decoration: none;
}

nav a[aria-current="page"] {
  color: orange;
  font-weight: bold;
}

nav a:hover, 
nav a:focus {
  background: gold;
  color: currentColor;
}

Responsivität[Bearbeiten]

Nach dem Grundsatz Mobile First! werden auf schmalen Bildschirmen alle Inhalte untereinander angeordnet, damit nur nach unten gescrollt oder gewischt werden muss.

Auf Anzeigegeräten mit einer breiteren Viewports werden die Elemente dann, wenn der Platz ausreicht, mittels media queries mit dem Flexbox Layout nebeneinander positioniert.

Besonderheiten beim Design[Bearbeiten]

Akzentfarbe als Variable[Bearbeiten]

Die Hintergrundfarben und Schatten sind direkt in der CSS-Datei definiert und können leicht geändert werden. Die Textfarbe der Überschriften und des Hintergrunds der Navigationsleiste ist in der CSS-Variablen currentColor festgelegt. So können Sie das Layout mit nur einer Änderung farblich verändern.

Wenn in hoffentlich nicht allzu ferner Zukunft der IE9-11 ausgestorben sind, können Sie mit custom properties beliebig viele Akzentfarben festlegen.

SVG-Grafiken[Bearbeiten]

Die grafischen Elemente wie Cliparts und Icons werden über die CSS-Datei als Hintergrundbilder geladen. Sie bestehen aus SVG-Grafiken. Sie können wie HTML-Dateien in einem Code-Editor bearbeitet werden.

Innerhalb eines defs-Element, das einen Definitionsabschnitt deklariert, finden Sie die bekannte style-Festlegungen. Auch hier können die Farben (genau so wie andere Werte) problemlos geändert werden. Wenn Sie die Grafiken im HTML-Dokument inline notieren, ist selbst dies nicht nötig.

Siehe auch[Bearbeiten]

Hinweis

Urheberrecht: Die Templates unterliegen abweichend von den Lizenzbedingungen ausdrücklich nicht der Lizenz CC-BY-SA 3.0 (de), sondern sie sind im Sinne der Lizenz CC0 1.0 (de) als public domain veröffentlicht. Sie dürfen diese Templates kopieren, verändern, veröffentlichen, sogar zu kommerziellen Zwecken, ohne um weitere Erlaubnis bitten zu müssen. SELFHTML verzichtet weltweit auf alle urheberrechtlichen und verwandten Schutzrechte, soweit dies gesetzlich möglich ist.