CSS/fertige Layouts

[Matthias Scharwies]

Servus!

Mit den fertigen Layouts muss etwas passieren. Die online vorhandenen Versionen sind veraltet:

• Durch die Umstellung auf https werden nicht alle Hintergrundbilder geladen.
• obsolete vendor-prefixe
• nur floats, kein Flexbox, kein grid
• Wir versenden täglich 2-3 zip-Ordner, wobei die Reihenfolge dort nicht mit den Online-Versionen übereinstimmt.

1. contenteditable?

Sollten wir unsere Beispiele per contenteditable frei veränderbar machen?

Wenn ja, dürfte das nicht im body-Tag passieren, da sonst die Unterseiten nicht anklickbar sind. Oder sollte man die Navigation mit contenteditable="false" wieder ausnehmen?

2. Navigationen

Was machen wir bei Navigationen, bei denen es mehrere Links, aber nur eine Unterseite für den Inhalt gibt?

• nur die 3 vorhandenen Seiten in der Navigation aufführen, -> Navigation sieht evtl. "zu klein" aus
• alle Menüpunkte auf die erste Unterseite verlinken und kurzfristige Verwirrung stiften
• nur die erste und letzte Unterseite (Inhalt, Kontakt) verlinken und den Rest mit leerem href-Attribut
• für jeden Navigationspunkt eine Seite erstellen, Nein, zu aufwendig!

Beim Template Nr. 04 gibt es zwei Navigationen, so lassen oder nur die Tab-Navigation verwenden, die es nirgendwo anders gibt?

Das Login könnte man als Formular in den rechten Block oder als Link auf einer weiteren Seite realisieren. Meinungen?

Vielen Dank für Eure Anregungen, optimal wäre es, wenn ihr weitere Design-Beispiele entwerfen könntet.

Herzliche Grüße

Matthias Scharwies

[MrMurphy1]

Hallo

Zunächst sollte geklärt werden worum es überhaupt geht.

Die bisherigen Beispiele sind nicht nur veraltet, sie waren bereits bei der Erstellung veraltet. Da interessierte nur die Schicki-Micki-Optik. Die damals schon eindeutige Entwicklung zu Smartphone, Tablet und Co. sowie Touchscreens ist so gut wie nicht berücksichtigt. Benutzerfreundlichkeit ist nicht einmal ansatzweise vorhanden.

Meiner Ansicht nach wurde auch nicht an die möglichen Anwender gedacht. Wenn zum Beispiel in mehreren Containern der gleiche sinnfreie Inhalt steht sehen die zunächst schick aus. Wenn die dann aber von den Nutzern mit realem, unterschiedlich langen Text gefüllt werden geht grade bei float häufig gar nichts mehr.

Damit mögliche Anwender die Layouts besser beurteilen und nutzen können sollten viel strengere Vorgaben gemacht werden.

So sollte der HTML-Quelltext mit realistischen Texten mit aktuellem HTML vorgegeben werden. Das Layout wird nur durch CSS gestaltet.

Dabei sollten typische Situationen auf den unterschiedlichen Seiten vorgegeben werden und viele Elemente berücksichtigt werden.

Alle Links sollten funktionieren. Also auch in der Hauptnavigation Links zu den Beispielseiten. Ich finde es immer albern wenn Anfänger, die für ihre Seiten überhaupt noch keinen Inhalt haben, Navigationen mit 100 Menüpunkten Link1, Link2, Link3 ... erstellen. In der Praxis haben Menüs meist weniger als 10 Links.

Genau so sollten die Bilder vorgegeben werden und nur wenige zusätzliche, genau definierte, zugelassen werden.

Eine Mindest-Barrierefreiheit (mir gefällt der Begriff Zugänglichkeit besser) sollte vorgegeben werden, zum Beispiel durchgehende Tastaturbedienung, Skiplinks, eine Mindestschriftgröße.

Ich persönlich würde auch die Ordnerstruktur vorgeben.

Ein responsive Design setze ich heutzutage als Standard voraus. Genau wie die Berücksichtigung von Touchscreens mit nicht möglichen hover-Effekten.

Wenn die Beispiele heruntergeladen werden können sehe ich keine Notwendigkeit für Online-Änderungsmöglichkeiten.

Gruss

MrMurphy

[Matthias Scharwies]

Servus!

Hallo

Zunächst sollte geklärt werden worum es überhaupt geht.

Herzlich willkommen in der Diskussion!

Die bisherigen Beispiele sind nicht nur veraltet, sie waren bereits bei der Erstellung veraltet.

Das war Matthias Apsel und anderen schon 2013 klar. Allerdings gab es keine besseren Alternativen.

Die derzeit präsenten Vorlagen wurden von mir 2013 in gültiges HTML übertragen - andere, besser ausgebildete Webdesigner gab es nicht.

Seit 2015 werbe ich für eine Überarbeitung.

Hier einige, auch im Forum geteilte, Links:

• Benutzer:MScharwies/Konzept_für_neue_Templates
• Test-Wiki: CSS/fertige_Layouts
• SelfForum: Neue Designs von designenlassen - notwendige Nacharbeiten 29.04.2013

So sollte der HTML-Quelltext mit realistischen Texten mit aktuellem HTML vorgegeben werden. Das Layout wird nur durch CSS gestaltet.

Das sollte der neue CSS-Garten (Achtung: verlinkte Seite ist nicht aktuell, neue Version wird am Sonntag hochgeladen) wirkungsvoll demonstrieren.

Dabei sollten typische Situationen auf den unterschiedlichen Seiten vorgegeben werden und viele Elemente berücksichtigt werden.

Habe ich hoffentlich so gemacht: Index, Inhaltsseite mit Bildern, Tabelle mit Kalender, und Impressum.

Alle Links sollten funktionieren. Also auch in der Hauptnavigation Links zu den Beispielseiten. Ich finde es immer albern wenn Anfänger, die für ihre Seiten überhaupt noch keinen Inhalt haben, Navigationen mit 100 Menüpunkten Link1, Link2, Link3 ... erstellen. In der Praxis haben Menüs meist weniger als 10 Links.

Ja, danke für dein Feedback!

Genau so sollten die Bilder vorgegeben werden und nur wenige zusätzliche, genau definierte, zugelassen werden.

Ja das war meine Idee, die gleichen Bilder für mehrere Designs zu verwenden. Mittlerweile habe ich bis Design 03 die Icons durch svg-Grafiken ersetzt.

Eine Mindest-Barrierefreiheit (mir gefällt der Begriff Zugänglichkeit besser) sollte vorgegeben werden, zum Beispiel durchgehende Tastaturbedienung, Skiplinks, eine Mindestschriftgröße.

Ich persönlich würde auch die Ordnerstruktur vorgeben.

Ist beides so vorgesehen.

Ein responsive Design setze ich heutzutage als Standard voraus. Genau wie die Berücksichtigung von Touchscreens mit nicht möglichen hover-Effekten.

Wenn die Beispiele heruntergeladen werden können sehe ich keine Notwendigkeit für Online-Änderungsmöglichkeiten.

Ok, danke. War fasziniert von den Möglichkeiten, mit contenteditable schnell Änderungen einzufügen- neue Navigationspunkte, etc lassen sich aber nur schwierig einfügen.

Vielen Dank für dein Feedback. Ich bräuchte noch Ideen / Designs für den CSS-Garten und werde am Sonntag, wenn ich den jetzigen Stand hochlade, noch einmal um Hilfe bitten. Ich würde mich freuen, wenn sich dann Helfer fänden.

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

fast fertig ist zu viel, aber ich möchte zum peer review an die Öffentlichkeit. Was könnte man verbessern, ändern, hinzufügen:

• http://jsr-hersbruck.de/design01/
• http://jsr-hersbruck.de/design02/
• http://jsr-hersbruck.de/design03/
• http://jsr-hersbruck.de/design04/
• http://jsr-hersbruck.de/css-garten/
  • Breiten (max-width:60em oder 75em) Abstände, Linien und Farben?
  • passt der Text für das Impressum oder soll ich das kürzen?
  • hat jemand Ideen für Präsentation von Bildern?
  • Der CSS-Garten hat 7x Flexbox und 2x Grid, Design 01+02 sind Flexbox, 03+04 sind Grid.

Der dazugehörende Text findet sich im Test-Wiki:

CSS/Fertige Layouts

Ich schau mal, dass ich bis Ende der Woche Nr 5 fertig krieg. Wenn es soweit passt, könnte Janosch die (und Jeenas Nr15 mit floats) auf src.selfhtml.org hochladen.

Herzliche Grüße

Matthias Scharwies

[Martl]

Hallo Matthias Scharwies,

zunächst einmal meinen Respekt für die von Dir geleistete Arbeit. Allerdings weisen einge der Seiten - ich beziehe mich hier nur auf die im Post gelisteten Seiten - Unzulänglichkeiten auf, z. b.:

design01

• <h1> wird gefolgt von <h3>,

design01, design03 , design04

• Verwendung von Tab-Indizes > 0 ist im Bezug auf die Barrierefreiheit zumindest umstritten,

css-garten/index.html

• Die Angabe von <html lang="welche-auch-immer"> fehlt.

Ich denke, als Vorlagen sollten die Beispiele doch möglichst fehlerfrei sein.

Grüße, Martl

[Matthias Scharwies]

Servus!

Hallo Matthias Scharwies,

zunächst einmal meinen Respekt für die von Dir geleistete Arbeit. Allerdings weisen einge der Seiten - ich beziehe mich hier nur auf die im Post gelisteten Seiten - Unzulänglichkeiten auf, z. b.:

design01

• <h1> wird gefolgt von <h3>,

Stimmt, durchgerutscht! Ist korrigiert!

design01, design03 , design04

• Verwendung von Tab-Indizes > 0 ist im Bezug auf die Barrierefreiheit zumindest umstritten,

@@Gunnar Bittersmann Wie sollten wir da vorgehen, dass man zuerst in der Navi und nicht im Backlink des Logos vorgeht?

Evtl ein negativer tabindex für's Logo:

<a id="logo" tabindex="-1" title="zurück zur Startseite!" href="index.html">

css-garten/index.html

• Die Angabe von <html lang="welche-auch-immer"> fehlt.

Ha! Das ganze <html>-Tag fehlt - ist in den Unterseiten aber da! Geändert!

Ich denke, als Vorlagen sollten die Beispiele doch möglichst fehlerfrei sein.

Ja, genau! Deshalb sollen das jetzt auch so viele wie möglich durchschauen. Vielen Dank für Deine Rückmeldungen!

Grüße, Martl

Herzliche Grüße

Matthias Scharwies

[Jonathan Harker]

Hallo Matthias,

Sieht sehr gut aus!

• http://jsr-hersbruck.de/design04/

Könnte man da bei der grünen Navigation einen weichen Übergang zum weißen Hintergrund machen?

• http://jsr-hersbruck.de/css-garten/

Bei dem Layout mit Fischerman's Friend ist das Wellenbild unten abgeschnitten und der Schwanz größer als nav a (Chrom auf Android).

Bei dem horror-Layout bilden die Bilder auf der Bilderseite Treppenstufen.

CU

Jonathan

[Bernd]

Hallo,

Könnte man da bei der grünen Navigation einen weichen Übergang zum weißen Hintergrund machen?

klar, du müsstest nur dieses in die Zeile 255 einfügen / überschreiben

#navigation a[aria-current=page] {
    font-weight: bold;
    background: linear-gradient(rgba(195,214,106,0.95), #fff);
    border-bottom: none;
}

[Matthias Scharwies]

Servus!

Könnte man da bei der grünen Navigation einen weichen Übergang zum weißen Hintergrund machen?

klar, du müsstest nur dieses in die Zeile 255 einfügen / überschreiben

Vielen Dank, habe gleich noch a[aria-current=page] vor das a:hover, a:focus gesetzt!

#navigation a[aria-current=page] {
	font-weight:bold;
    background: linear-gradient(rgba(195,214,106,0.95), #fff);
	border-bottom: none;
}

#navigation a:hover,
#navigation a:focus, 
#navigation a:active  {
	color: white;
	box-shadow: 0 2px 1px rgba(151,179,20,0.1) inset,
	           3px 0px 1px rgba(50, 50, 50, 0.5);	
    background: linear-gradient(#97b314, #fff);
	border-bottom: none;			   
}		

Herzliche Grüße

Matthias Scharwies

[Bernd]

Hallo,

ich persönlich würde in #navigation a den Punkt border: 1px solid #666; komplett entfernen.

Beim Hover würde ich den box-shadow komplett entfernen

[Matthias Scharwies]

Servus!

Hallo,

ich persönlich würde in #navigation a den Punkt border: 1px solid #666; komplett entfernen. Beim Hover würde ich den box-shadow komplett entfernen

Du hast Recht, ich wollte eine Art räumliche Tiefe erreichen. Der Kontrast dunkelgrün zu hellgrau reicht da aber völlig.

Dadurch werden auch die border-bottom: 1px solid transparent; und border-bottom: none; überflüssig und der ganze CSS-Code übersichtlicher!

Vielen Dank!

Herzliche Grüße

Matthias Scharwies

[Bernd]

Hallo,

eine kleine Spielerei vielleicht noch

wenn du diese Zeile noch in dein CSS einfügt

h1 a:hover span {
    color: #fff;
}

dann würde dieses beim Hover so ausschauen

und nicht wie es derzeit aussschaut

[Matthias Scharwies]

Servus!

Hallo,

eine kleine Spielerei vielleicht noch …

✔ done!

Das border-style: wavy; sieht bei mir nicht so gut aus wie auf deinem Screenhshot; evtl kann das weg.

Vielen, vielen Dank für Deine Rückmeldungen!

Ich habe manche dieser Dateien (z.B. den CSS-Garten) seit 2 Jahren auf der Festplatte und trotzdem erst in den letzten Wochen versucht, möglichst verschiedene und dabei doch einfache und klar ersichtliche CSS-Beispiele zu erstellen. Dabei habe ich irgendwann nicht mehr gewusst, wo vorne und wo hinten ist.

Grad heute morgen habe ich entdeckt, dass im CSS-Garten in 5 CSS-Dateien noch die alten -webkit-vendor-prefixe für Flexbox drin waren - wieder ca. 25 Zeilen CSS-Code pro Beispiel weniger!

Du hast mit deinen vielen Anregungen das Template wirklich sehr verbessert!

Herzliche Grüße

Matthias Scharwies

[Bernd]

Hallo,

mir ist im Quelltext noch ein Fehler aufgefallen

<meta name="viewport" content="width=device-width, initial-scale=1.0;">

Ganz am Ende ist ein ; zu viel.

[Matthias Scharwies]

Servus!

Vielen Dank, war auch in Bsp. 03 so - ist korrigiert!

Herzliche Grüße

Matthias Scharwies

[Bernd]

Hallo,

mir ist noch etwas aufgefallen

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/font-awesome.css">

müssten diese beiden Dateien nicht getauscht werden? Denn ich möchte mit meiner eigenen CSS Datei alles andere überschreiben können, dieses wurde in diesem Fall nicht gehen?

[Matthias Scharwies]

Servus!

Hallo,

mir ist noch etwas aufgefallen

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/font-awesome.css">

müssten diese beiden Dateien nicht getauscht werden? Denn ich möchte mit meiner eigenen CSS Datei alles andere überschreiben können, dieses wurde in diesem Fall nicht gehen?

Ja, genau genommen schon. Obwohl man die font-awesome-spezifischen Klassen wohl eher nicht für eigenes verwenden wird.

Tausch ich aber, damit die Diskussion gar nicht erst aufkommt.

Herzliche Grüße

Matthias Scharwies

[Matthias Apsel]

Hallo Bernd,

mir ist im Quelltext noch ein Fehler aufgefallen

<meta name="viewport" content="width=device-width, initial-scale=1.0;">

Ganz am Ende ist ein ; zu viel.

Das Semikolon ist optional, mMn.

Bis demnächst
Matthias

[Matthias Scharwies]

Servus!

In Design-08

gibt es im footer unten rechts einen iframe:

<iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Design08-maps.html" height="100" width="200"></iframe>

Ursprünglich soll er eine Karte wie bei google maps anzeigen. Die dazugehörenden Daten „wiegen “ alleine 930kb.

Was soll ich machen?

• Durch ein Bild einer Karte ersetzen (meine Präferenz)
• Google Maps oder OpenStreetMap live einbinden? (Eher nicht, oder?)

Herzliche Grüße

Matthias Scharwies

[Bernd]

Hallo,

ich würde eine Karte als Bild einbinden. Wenn du eine Live Karte einbindest benötigst du einen API Key der später missbraucht werden kann.

Wenn du schon am ändern bist, bitte auch hier den ; Fehler beheben

<meta name="viewport" content="width=device-width, initial-scale=1.0;" />

[Matthias Scharwies]

Servus!

Hallo,

ich würde eine Karte als Bild einbinden. Wenn du eine Live Karte einbindest benötigst du einen API Key der später missbraucht werden kann.

Ja, finde ich auch. Vor allem sind die neuen Beispiele dank der SVG-Icons als ZIP nur ca. 30 - 500kb groß (Design04 hat allein ca. 450kb für FontAwesome-Dateien dabei). Da wäre das Beispiel08 mit 1MB allein für die Karte der Ausreißer.

Wenn du schon am ändern bist, bitte auch hier den ; Fehler beheben

Das sind die Live-Beispiele im Wiki. Die sollen so schnell wie möglich depubliziert (Neudeutsch für eingestampft) werden. Hauptproblem war, dass man dort die Bilder, CSS-Dateien und Unterseiten mit langen Wiki-Spezifischen URLs einbinden musste:

<nav id="navigation">
  <ul>
    <li><a href="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Design08-index.html">Home</a></li>
    <li><a href="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Design08-1.html"> Equipments</a></li>
...

Dies erschwerte die im Wiki eigentlich mögliche versionsfreie Pflege der Dateien.

Künftig ist geplant, diese Beispiele (und die ZIP-Dateien) separat unter src.selfhtml.org zu hosten und dann aus dem Wiki heraus zu verlinken. Hoffentlich können wir das zeitnah umsetzen. Dann können die alten Dateien mit ihren Fehlern weg.

Herzliche Grüße

Matthias Scharwies

[JürgenB]

Hallo Matthias,

warum legst du nicht die Karte in den iFrame? URL z.B.
https://www.google.de/maps/@52.5190557,13.3730469,15z
https://www.openstreetmap.org/#map=15/52.5169/13.3694

Gruß
Jürgen

[Matthias Scharwies]

Servus!

Hallo Matthias,

warum legst du nicht die Karte in den iFrame? URL z.B.

Stimmt, muss ja keine bestimmte Adresse sein! Oder die Postadresse unseres Vereins? Duckundwech!

Danke!

Gruß
Jürgen

Herzliche Grüße

Matthias Scharwies

[JürgenB]

Hallo Matthias,

vielleicht wäre das auch was, da wird nur ein img benötigt:

http://staticmap.openstreetmap.de

Bei Google bin ich nicht sicher, ob das Einbinden über einen iframe zugelassen wird. Deren Static Map API benötigt einen Key.

Gruß
Jürgen

[Bernd]

Hallo,

im Design zwei würde ich den Abstand nach außen raus nehmen

body {
    margin: 0;
    /* padding: 0 1em; */
    font: normal 1em Arial, sans-serif;
    color: #09c;
}

sieht etwas freundlicher aus. Was meinst du?

Und die Navigation müsste im Handy-Zustand auch noch etwas überarbeitet werden?

[Matthias Scharwies]

Servus!

im Design zwei würde ich den Abstand nach außen raus nehmen

Ich habe ihn ab 30em Breite abgeschaltet

Und die Navigation müsste im Handy-Zustand auch noch etwas überarbeitet werden?

Wie kann ich das Hintergrundbild entfernen?

header.banner {
  background: 
             url("../img/Design02.svg") no-repeat right,
             #666 
			 repeating-linear-gradient(-45deg, black, #151515 8em); 
  background-size: contain, auto; 			 
  padding: 0 0 0.5em;
}

@media screen and (max-width: 30em) { /* Normalerweise werden solche responsiven Layout-Einstellungen gesondert am Schluss notiert. Hier sollen die mulitple backgrounds aber gleich anfangs gezeigt werden. Auf zu kleinen Bildschirmen wird das Bild jedoch ausgeblendet.  */
  header.banner {
    background: #666 repeating-linear-gradient(-45deg, black, #151515 8em); 
  }
}

Zur Not dreh ich das um:

• grauer Hintergrund als Normalfall
• media queries mit Hintergundbild ab 30em

Herzliche Grüße

Matthias Scharwies