Webseite mit HTML und CSS umsetzten

[Evan]

Hallo,

unsere Aufgabe ist es eine einfache kleine Shop Webseite in HTML und CSS umzusetzen. Dafür werden wir benotet. Deshalb ich möchte von euch keinen fertigen Code haben sondern eher Anregungen wie ich dieses hoffentlich einfache Design umsetzten kann. Nach Rücksprache mit unserem Lehrer dürfen wir uns im Netz Hilfe holen, darunter zählt für mich auch ein Forum.

Zum Aufbau:

1. Oben Links kommt ein Fiktives Logo rein
2. Rechts davon der Login für den Warenkorb / Service und Mein Konto
3. Darunter die Navigation (1)
4. Der erste Graue Kasten links, ist für eine Subnavigation
5. Der zweite graue Kasten ist für den Content
6. Rechts Platz für Angebote und Social Media Icons

(1) Wenn auf Nav 1 geklickt wird, soll der blaue Balken mitwandern, sprich das Haus wird Grau hinterlegt (wie jetzt die Nav Punkte) und hat keine durchgezogene Line (wie die jetzigen Nav Punkte), dafür aber Nav1 (wie jetzt das Haus)

Der Content soll immer in drei Teile aufgebaut sein. Ist es hier ratsam mit drei DIVs zuarbeiten und diese nach links zu floaten oder lieber mit flexboxen zu arbeiten?

Wir müssen den IE 8 / 9 nicht berücksichtigen. Schön wäre wenn es im IE alles funktioniert. Das große Hintergrundbild liege ich als Background in den Head. Der Rahmen um die Seite lege ich in den Body, somit kann ich auf das Div wrapper verzichten.

Ich bin für jeden ernst gemeinten Hinweis dankbar. Das Mobile sollte irgendwann ein Thema werden, zum Start erstmal nicht, da ich hier im KA leider nur begrenze Möglichkeiten habe.

Das Thema der Seite lautet "Farben und Stifte für Grundschüler, modern und flippig" Auch das Design ist kein fertig Design. Ich wollte nur schauen in welche Richtung es gehen kann.

[da-vid]

Hallo,

unsere Aufgabe ist es eine einfache kleine Shop Webseite in HTML und CSS umzusetzen. Dafür werden wir benotet. Deshalb ich möchte von euch keinen fertigen Code haben sondern eher Anregungen wie ich dieses hoffentlich einfache Design umsetzten kann.

Ich glaube es gab CSS-Frameworks (wenn das der richtige Begriff dafür ist) wie Bootstrap etc. das ist dann am Ende glaube ich nicht mehr so modular und du musst auch und evtl. vor allem hier wissen was du machst - vielleicht ist es aber eine Option - zumindest mit Blick auf die Zeit

Zum Aufbau:

1. Oben Links kommt ein Fiktives Logo rein
2. Rechts davon der Login für den Warenkorb / Service und Mein Konto
3. Darunter die Navigation (1)
4. Der erste Graue Kasten links, ist für eine Subnavigation
5. Der zweite graue Kasten ist für den Content
6. Rechts Platz für Angebote und Social Media Icons

(1) Wenn auf Nav 1 geklickt wird, soll der blaue Balken mitwandern, sprich das Haus wird Grau hinterlegt (wie jetzt die Nav Punkte) und hat keine durchgezogene Line (wie die jetzigen Nav Punkte), dafür aber Nav1 (wie jetzt das Haus)

Der Content soll immer in drei Teile aufgebaut sein. Ist es hier ratsam mit drei DIVs zuarbeiten und diese nach links zu floaten oder lieber mit flexboxen zu arbeiten?

Ich habe persönlich bisher mit Divs und float gearbeitet (kann aber auch sein dass ich eher ein Anfänger bin und das aus Unwissenheit so gemacht habe)

Wir müssen den IE 8 / 9 nicht berücksichtigen. Schön wäre wenn es im IE alles funktioniert. Das große Hintergrundbild liege ich als Background in den Head. Der Rahmen um die Seite lege ich in den Body, somit kann ich auf das Div wrapper verzichten.

Man kann Hintergrundbilder im head definieren? Gut zu wissen :D (siehe Anfänger ;) )

Ich bin für jeden ernst gemeinten Hinweis dankbar. Das Mobile sollte irgendwann ein Thema werden, zum Start erstmal nicht, da ich hier im KA leider nur begrenze Möglichkeiten habe.

...so eine Shopseite ist ja gefühlt schon was größeres, aber wenn du dir am Anfang ein paar Gedanken machst kannst du da später mit media-queries etc. gut drauf aufbauen. (siehe auch: Repsonsive Webdesign)

Tipp: Schau dir mittels F12 an wie das andere Webseiten machen und lerne aus ihrem Aufbau - natürlich nur wenn du diesen für gut hälst / nachdem du verstanden hast was da steht :)

[MrMurphy1]

Hallo

Wenn auf Nav 1 geklickt wird, soll der blaue Balken mitwandern, sprich das Haus wird Grau hinterlegt (wie jetzt die Nav Punkte) und hat keine durchgezogene Line (wie die jetzigen Nav Punkte), dafür aber Nav1 (wie jetzt das Haus)

Das wird alles per CSS erledigt.

Ist es hier ratsam mit drei DIVs zuarbeiten

Eher mit passenden Containern wie main und aside. Für den linken Container könnte ein div genommen werden.

diese nach links zu floaten oder lieber mit flexboxen zu arbeiten?

Besser geeignet ist Flexbox, da es speziell für solche Layouts entwickelt wurde.

Das große Hintergrundbild liege ich als Background in den Head.

Du meinst wohl eher das header-Element.

Der Rahmen um die Seite lege ich in den Body, somit kann ich auf das Div wrapper verzichten.

Hört sich gut an.

Ich bin für jeden ernst gemeinten Hinweis dankbar. Das Mobile sollte irgendwann ein Thema werden, zum Start erstmal nicht, da ich hier im KA leider nur begrenze Möglichkeiten habe.

Mit einem sinnvollem HTML-Quelltext, speziell der Container, sind das später nur noch ein paar Zeilen CSS.

Gruss

MrMurphy

[Evan]

Hallo,

hab ein wenig gebastelt, wie findest du mein erster Aufbau? Damit habe ich a) das Grundgerüst und b) den Header abgeschlossen.

<!doctype html>
  <html lang="de">
    <head>
        <meta charset="utf-8">
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

	<link rel="icon" href="/design/icons/favicon.ico" type="image/x-icon">
	<link rel="stylesheet" type="text/css" href="/design/css/style.css">
	    
	<!--[if lt IE 9]>
	<script src="/js/html5.js"></script>
	<script src="/js/respond.js"></script>
	<![endif]-->

	<title></title>
    </head>
    
    <body>

    	<header>
    		<h1>Shop Design</h1>
    		<ul>
    		   <li><a href="#">Hilfe & Service</a></li>
    		   <li><a href="#">Mein Konto</a></li>
    		   <li><a href="#">Anmelden</a></li>
    		</ul>
    	</header>

    	<script src="/js/jquery-2.1.0.min.js"></script>
    	
    	<script>
	   $(document).ready(function(){
           });
	</script>
    </body>
</html>

Jetzt geht es an die Navigation, den Content sowie den rechten Bereich. Da habe ich an folgendes gedacht:

<main>
  <nav>
    <ul>
     <li>Home</li>
     <li>Nav 1</li>
     <li>Nav 2</li>
     <li>Nav 3</li>
     <li>Nav 4</li>
     <li>Nav 5</li>
     <li>Nav 6</li>
   </ul>
 </nav>
</main>

<aside>
  <nav>
    <ul>
      <li>Merkzettel</li>
      <li>Warenkorb</li>
    </ul>
 </nav>
</aside>

Jetzt ist die Frage, wo packe ich meinen Inhalt rein? In ein DIV bzw. in zwei DIVs der linke grauen Kasten für die Subnavigation und der rechte Kasten für den Content? eine <section></section> ist hier nicht richtig, oder?

Zum Schluss habe ich unterhalb von der Navigation noch den großen blauen Bereich, wie würdest du diesen anordnen bzw. in welchen Bereich sollte dieser gepackt werden? Das gleiche habe ich auf der rechten Seite im aside - Bereich nochmals.

[Matthias Apsel]

Hallo Evan,

Jetzt geht es an die Navigation, den Content sowie den rechten Bereich. Da habe ich an folgendes gedacht:

<main>
  <nav>
    <ul>

   </ul>
 </nav>
</main>

<aside>
  <nav>
    <ul>
      <li>Merkzettel</li>
      <li>Warenkorb</li>
    </ul>
 </nav>
</aside>

Beachte, dass die Wahl der Elemente nach dem Inhalt richtet, nicht nach Lage oder Darstellung.

main ist das Element für den Hauptinhalt. Die Navigation zählt sicher nicht dazu. Nicht jede Navigation muss auch automatisch in ein nav-Element (developer.mozilla.org). Das aside-Element hingegen enthält Inhalte, die nur indirekt mit dem Hauptinhalt im Zusammenhang stehen. Ob ein Warenkorb und ein Merkzettel nur indirekt mit dem Shop im Zusammenhang stehen? - Kommt auf die Argumentation an.

Bis demnächst
Matthias

[Evan]

Hallo Matthias,

Beachte, dass die Wahl der Elemente nach dem Inhalt richtet, nicht nach Lage oder Darstellung. main ist das Element für den Hauptinhalt. Die Navigation zählt sicher nicht dazu. Nicht jede Navigation muss auch automatisch in ein nav-Element (developer.mozilla.org). Das aside-Element hingegen enthält Inhalte, die nur indirekt mit dem Hauptinhalt im Zusammenhang stehen. Ob ein Warenkorb und ein Merkzettel nur indirekt mit dem Shop im Zusammenhang stehen? - Kommt auf die Argumentation an.

dann doch lieber so?

<div>
  <nav>
    <ul>
      <li>Home</li>
      <li>Nav 1</li>
      <li>Nav 2</li>
      <li>Nav 3</li>
      <li>Nav 4</li>
      <li>Nav 5</li>
      <li>Nav 6</li>
    </ul>
 </nav>
 <main>
 </main>
</div>

<div>
 <nav>
	<ul>
	 <li>Merkzettel</li>
	 <li>Warenkorb</li>
	</ul>
 </nav>
 <aside>
 </aside>
</div>

[Matthias Apsel]

Hallo Evan,

dann doch lieber so?

<div>
  <nav>
    <ul>
      <li>Home</li>
      <li>Nav 6</li>
    </ul>
 </nav>
 <main>
 </main>
</div>

<div>
 <nav>
	<ul>
	 <li>Merkzettel</li>
	 <li>Warenkorb</li>
	</ul>
 </nav>
 <aside>
 </aside>
</div>

Die Hauptinhalte sollten ganz oben im Quelltext stehen. Wenn visuell die Navigation noch davor erscheinen soll, hilft dir flexbox. Die umschließenden div-Elemente sind sicher nicht notwendig.

Eine allgemeingültige Antwort kann es nicht geben.

Bis demnächst
Matthias

[Evan]

Hallo Matthias,

Die Hauptinhalte sollten ganz oben im Quelltext stehen. Wenn visuell die Navigation noch davor erscheinen soll, hilft dir flexbox. Die umschließenden div-Elemente sind sicher nicht notwendig.

wenn ich auf die zwei umschließenden div-Elemente verzichten kann / soll, wie soll ich dann die zwei Bereich nebeneinander platzieren? Der Bereich Merkzettel und alles was darunter kommt, hat mit dem Inhalt auf der linken Seite nichts zu tun.

Und dann bleibt noch die Frage, wie kann ich das Problem? mit der großen Kasten unterhalb der Navigation lösen, der sollte ich ja mit der Navigation ändern?

[Christian Kruse]

Hallo Evan,

wenn ich auf die zwei umschließenden div-Elemente verzichten kann / soll, wie soll ich dann die zwei Bereich nebeneinander platzieren? Der Bereich Merkzettel und alles was darunter kommt, hat mit dem Inhalt auf der linken Seite nichts zu tun.

Mit Flexbox. Du gibst den beiden Boxen, die nebeneinander sein sollen, ein flex:1 50%. Ich hab dir mal ein Codepen als Beispiel fertig gemacht.

LG,
CK

[Evan]

Hallo,

Mit Flexbox. Du gibst den beiden Boxen, die nebeneinander sein sollen, ein flex:1 50%. Ich hab dir mal ein Codepen als Beispiel fertig gemacht.

danke für dein Code-Beispiel. Ich habe mich entschlossen nicht auf flex zu setzten, da dieses noch nicht 100% von allen Browsern umgesetzt wird. Und wie hier https://forum.selfhtml.org/self/2015/nov/18/webseite-mit-html-und-css-umsetzten/1654967#m1654967 geschrieben sollte eine Webseite robust sein.

[MrMurphy1]

Hallo,

aus deiner Beschreibung und dem Bild gehen leider nicht alle notwendigen Informationen hervor.

1. Wozu ist der blaue Bereich unter der Navigation gedacht? Soll der noch Inhalt bekommen? Falls ja: welchen?

2. Soll das graue Feld "Ihr Warenkorb ist leer." genau so hoch sein wie der Balken? Falls im Warenkorb Einträge enthalten sind wird das nicht mehr funktionieren.

3. Du bezeichnest das breite graue Feld mit Content. Später schreibst du "Der Content soll immer in drei Teile aufgebaut sein." Sollen sich innerhalb des Contents also noch mal 3 Spalten befinden?

4. Sollen Nav 1, Nav 2 u.s.w. andere Seiten aufrufen oder nur den Content (Inhalt des großen grauen Kastens in der Mitte) austauschen?

Zu deinem Entwurf von 19:51 Uhr:

Die Liste im header ist unnötig und sollte weggelassen werden. Listen für Navigationen waren mal ein inoffizielles Hilfskonstrukt, die fälschlicherweise zur Pflicht erhoben wurden. Die Listen solltest du nur verwenden wenn auch dein Lehrer diesem Irrtum unterliegt.

Hingegen darf sich das nav-Element nicht im main-Element befinden. Deshalb musst du zur Erstellung des Layouts ein div-Element statt des main-Elements verwenden. Das main-Element kann sinnvollerweise für den Content verwendet werden.

Das nav-Element im aside-Element (also die ganz rechte Spalte) ist nicht sinnvoll. Der Grund in diesem Fall ist, dass das nav-Element nur für die Hauptnavigation verwendet werden soll. Die Hauptnavigation sehe ich in diesem Fall nur in "Home Nav 1 ...". Im linken grauen Kasten könnte das nav-Element auch passen.

Um das nav-Element (und auch andere) richtig verwenden zu können muss der Inhalt der gesamten Seite bekannt sein. Der fehlt aber.

eine <section></section> ist hier nicht richtig, oder?

Das sehe ich auch so. Mit dem section-Element könnten die Inhalte der ganz rechten Spalte (Markzettel + Warenkorb, Angebote, Social Media) unterteilt werden.

Zum Schluss habe ich unterhalb von der Navigation noch den großen blauen Bereich, wie würdest du diesen anordnen bzw. in welchen Bereich sollte dieser gepackt werden? Das gleiche habe ich auf der rechten Seite im aside - Bereich nochmals.

Das verstehe ich nicht, wie oben bereits in meiner Nachfrage deutlich geworden ist.

Zu deinem Beitrag von 20:25 Uhr:

wenn ich auf die zwei umschließenden div-Elemente verzichten kann / soll,

Für die Anordnung mit Flexbox benötigst du die beiden Container. Wie bereits beschrieben würde ich für den linken auch ein div-Element wählen. Für den rechten eher ein aside, ein div passt aber auch.

Und dann bleibt noch die Frage, wie kann ich das Problem? mit der großen Kasten unterhalb der Navigation lösen, der sollte ich ja mit der Navigation ändern?

Welcher große Kasten? Der blaue Bereich (dessen Sinn sich mir noch nicht erschließt) oder der mittlere große graue Kasten, dein Content?

Ich sehe die HTML-Grundstruktur zur Zeit folgendermaßen:

• header
• div
• aside

Im div dann:

• nav
• aside (oder div)
• main

im ersten aside (der ganz rechten Spalte):

• mehrere section (oder div), je nach Bedarf

Gruss

MrMurphy

[Evan]

Hallo,

1. Wozu ist der blaue Bereich unter der Navigation gedacht? Soll der noch Inhalt bekommen? Falls ja: welchen?

Was in den Kasten später reinkommt, ist doch total irrelevant. Derzeit ist geplant, dass dort ein Suchfeld platziert wird, was aber noch nicht 100% sicher ist.

2. Soll das graue Feld "Ihr Warenkorb ist leer." genau so hoch sein wie der Balken? Falls im Warenkorb Einträge enthalten sind wird das nicht mehr funktionieren.

Wie du siehst stehen dort nur Wörter. Später wenn der Warenkorb gefüllt ist werden diese durch zwei Grafiken ausgetauscht, die Höhe bleibt wie auch bei dem blauen Kasten immer gleich.

3. Du bezeichnest das breite graue Feld mit Content. Später schreibst du "Der Content soll immer in drei Teile aufgebaut sein." Sollen sich innerhalb des Contents also noch mal 3 Spalten befinden?

Ja, ich bin zuerst davon ausgegangen dass der Content bis ganz nach rechts geht, also inkl. der Sidebar. Dieses ist jetzt nicht mehr der Fall. Der Conten-Bereich ist derzeit nur der erste und zweite graue Kasten vielleicht sogar nur der zweite Kasten.

4. Sollen Nav 1, Nav 2 u.s.w. andere Seiten aufrufen oder nur den Content (Inhalt des großen grauen Kastens in der Mitte) austauschen?

Kann ich jetzt noch nicht sagen, ist auch irrelevant, ob ich später ganze Seiten austausche oder nur einzelne Elemente wird wohl von Produkt zu Produkt bzw. Seite zu Seite unterschiedlich sein. Hat mit meinem Problem nichts zu tun.

Die Liste im header ist unnötig und sollte weggelassen werden. Listen für Navigationen waren mal ein inoffizielles Hilfskonstrukt, die fälschlicherweise zur Pflicht erhoben wurden. Die Listen solltest du nur verwenden wenn auch dein Lehrer diesem Irrtum unterliegt.

In allen Tutorials, Videos und auch Lehrbüchern steht, dass man eine Navigation mit ul li machen soll, von diesem gehe ich auch nicht ab. Schau dir Seiten im Netz an, alle sind so aufgebaut. Warum sollte ich hier eine extra Suppe kochen? Dazumal sind ul li leicht zu stylen.

Hingegen darf sich das nav-Element nicht im main-Element befinden. Deshalb musst du zur Erstellung des Layouts ein div-Element statt des main-Elements verwenden. Das main-Element kann sinnvollerweise für den Content verwendet werden.

So ein Quatsch, wer hat dir dieses denn erzählt? Lass ich den Code prüfen, wird er mir als 100% valide angezeigt.

Das nav-Element im aside-Element (also die ganz rechte Spalte) ist nicht sinnvoll. Der Grund in diesem Fall ist, dass das nav-Element nur für die Hauptnavigation verwendet werden soll. Die Hauptnavigation sehe ich in diesem Fall nur in "Home Nav 1 ...". Im linken grauen Kasten könnte das nav-Element auch passen.

Auch das ist wieder totaler Quatsch. Auf einer Seite dürfen mehrere Nav Elemente vorkommen. Auch hier habe ich meinen Code geprüft und dieser ist, wie oben bereits geschrieben, 100% valide.

Um das nav-Element (und auch andere) richtig verwenden zu können muss der Inhalt der gesamten Seite bekannt sein. Der fehlt aber.

Den kenne ich auch noch nicht und hat auch mit meiner Frage nichts zu tun. Bei einem Shop weiß man NIE was kommt oder was irgendwann mal wieder verschwindet.

[Der Martin]

Hi,

1. Wozu ist der blaue Bereich unter der Navigation gedacht? Soll der noch Inhalt bekommen? Falls ja: welchen?

Was in den Kasten später reinkommt, ist doch total irrelevant.

es ist nicht irrelevant. Denn vom vorgesehenen Inhalt hängt schließlich ab, mit welchem HTML-Element man den Container bezeichnen möchte.

Die Liste im header ist unnötig und sollte weggelassen werden. Listen für Navigationen waren mal ein inoffizielles Hilfskonstrukt, die fälschlicherweise zur Pflicht erhoben wurden. Die Listen solltest du nur verwenden wenn auch dein Lehrer diesem Irrtum unterliegt.

In allen Tutorials, Videos und auch Lehrbüchern steht, dass man eine Navigation mit ul li machen soll, von diesem gehe ich auch nicht ab.

Ja, das gilt auch immer noch als "best practice", die Navigation wird als "Liste von Links" aufgefasst, so dass ein ul- oder ol-Element sinnvoll ist. Das ganze eventuell zusammen mit einer kleinen Überschrift oder zusätzlichem kurzem Text in ein nav-Element verpackt und gut is'.

Schau dir Seiten im Netz an, alle sind so aufgebaut.

Schon, aber das wäre ja nun kein Argument ...

Hingegen darf sich das nav-Element nicht im main-Element befinden. Deshalb musst du zur Erstellung des Layouts ein div-Element statt des main-Elements verwenden. Das main-Element kann sinnvollerweise für den Content verwendet werden.

So ein Quatsch, wer hat dir dieses denn erzählt?

Meinst du nicht, dass du dich hier ein wenig im Ton vergriffen hast? Unabhängig davon, ob MrMurphy hier richtig liegt oder nicht.

Lass ich den Code prüfen, wird er mir als 100% valide angezeigt.

Okay. Das heißt aber noch nicht unbedingt, dass die Struktur auch sinnvoll ist.

Bei einem Shop weiß man NIE was kommt oder was irgendwann mal wieder verschwindet.

Für einen Shop gilt wie für jeden anderen Webauftritt auch: Eigentlich sollte von Anfang an bekannt sein, was wo stehen soll, weil sich danach das Markup richtet. Natürlich gibt es immer mal wieder ein Redesign, dann sollte man aber auch das Markup erneut auf Sinnhaftigkeit prüfen und ggf. anpassen.

So long,
 Martin

[Evan]

Hallo,

es ist nicht irrelevant. Denn vom vorgesehenen Inhalt hängt schließlich ab, mit welchem HTML-Element man den Container bezeichnen möchte.

ist es wohl für meine Frage, ob ich hier ein DIV, ein NAV oder ein section nehme ist doch total irrelevant. Später kann das Element noch immer geändert werden. Ich könnte auch ALLES wie früher mit DIVS machen, für die User und auch den Suchmaschinen ist es egal, da die Seite später mit Adwords nach oben gebracht wird.

Meinst du nicht, dass du dich hier ein wenig im Ton vergriffen hast? Unabhängig davon, ob MrMurphy hier richtig liegt oder nicht.

Nein, dieses würde ich auch in der Öffentlichkeit sagen bzw. sage es immer wieder wenn jemand etwas falsches erzählt.

Für einen Shop gilt wie für jeden anderen Webauftritt auch: Eigentlich sollte von Anfang an bekannt sein, was wo stehen soll, weil sich danach das Markup richtet. Natürlich gibt es immer mal wieder ein Redesign, dann sollte man aber auch das Markup erneut auf Sinnhaftigkeit prüfen und ggf. anpassen.

Vielleicht siehst du dieses so, wir im Unterricht sehen dieses etwas anderes. Darüber möchte ich mich auch gar nicht unterhalten, denn dieses hat nichts mit meinem Problem zu tun.

[marctrix]

Hej Evan,

es ist nicht irrelevant. Denn vom vorgesehenen Inhalt hängt schließlich ab, mit welchem HTML-Element man den Container bezeichnen möchte.

ist es wohl für meine Frage, ob ich hier ein DIV, ein NAV oder ein section nehme ist doch total irrelevant. Später kann das Element noch immer geändert werden.

Das ist richtig.

Ich könnte auch ALLES wie früher mit DIVS machen, für die User und auch den Suchmaschinen ist es egal, da die Seite später mit Adwords nach oben gebracht wird.

Das ist unklug. Und teuer!

Für einen Shop gilt wie für jeden anderen Webauftritt auch: Eigentlich sollte von Anfang an bekannt sein, was wo stehen soll, weil sich danach das Markup richtet.

Vielleicht siehst du dieses so, wir im Unterricht sehen dieses etwas anderes.

Konzepte machen immer am Anfang Sinn! Um eine Seite sinnvoll aufzubauen und erfolgreich zu machen, muss man Ziele festlegen. Denn von den Zielen hängt ab, wie man die Nutzer dazu bringen möchte, dass diese Ziele erreicht werden (conversion rate).

Im geschäftlichen Umfeld (und dazu gehört ein Shop doch wohl ?!?) geht es erst um Konversion, dann um Konversion und drittens um Konversion - auch wenn mir persönlich das ziemlich gegen den Strich geht.

Die verwendete Technik ist nur der Mittel zum Zweck.

Marc

[Matthias Apsel]

Hallo Evan,

den Suchmaschinen ist es egal, da die Seite später mit Adwords nach oben gebracht wird.

wir im Unterricht sehen dieses etwas anderes.

Wie passt das zusammen?

Bis demnächst
Matthias

[Evan]

Hallo,

Wie passt das zusammen?

was gibt es da nicht zu verstehen? Wenn wir eine Seite in der Schule fertig stellen, denn ist klar dass in der nächsten Aufgabe kommt, wie vermarktet man diese Seite. Wie bekommt man eine Seite bei Google schnell nach oben? Durch Werbung. Lernt man in der ersten Stunde.

[Julius]

Hallo Evan,

Wie bekommt man eine Seite bei Google schnell nach oben? Durch Werbung.

Kurzfristig vielleicht, aber langfristig geht das nur durch Leute, die deine Inhalte und / oder Service gut finden und weiterempfehlen.
– Würdest du den Handwerker beauftragen, der überall viele bunte Anzeigen schaltet, oder den, der einen guten Eindruck macht und dir von Freunden / Bekannten empfohlen wurde? Wie oft klickst du irgendwelche Werbung an und kaufst direkt etwas, bzw. empfiehlst die Seite weiter?

Gruß
Julius

[marctrix]

Hej MrMurphy1,

Die Liste im header ist unnötig und sollte weggelassen werden.

Listen sollten schon als Listen ausgezeichnet werden, auch Listen von Links ;-)

Hingegen darf sich das nav-Element nicht im main-Element befinden.

Wieso?

Das nav-Element im aside-Element (also die ganz rechte Spalte) ist nicht sinnvoll. Der Grund in diesem Fall ist, dass das nav-Element nur für die Hauptnavigation verwendet werden soll.

Das ist richtig. Es gibt Ausnahmen, die sollte man aber begründen können!

eine <section></section> ist hier nicht richtig, oder?

Das sehe ich auch so. Mit dem section-Element könnten die Inhalte der ganz rechten Spalte (Markzettel + Warenkorb, Angebote, Social Media) unterteilt werden.

Kommt drauf an. Eine section ist ein Sinnzusammenhang und wirkt sich auf das HTML5-outlining aus. Man sollte alle Elemente, die das HTML5-outlining beeinflussen also sinnvoll verschachteln.

Marc

[Matthias Scharwies]

Servus! @@marctrix

Kommt drauf an. Eine section ist ein Sinnzusammenhang und wirkt sich auf das HTML5-outlining aus. Man sollte alle Elemente, die das HTML5-outlining beeinflussen also sinnvoll verschachteln.

Hättest du evtl. das Wissen und die Zeit 2-3 Absätze zu diesem Stub: HTML/outline im Wiki beizutragen?

Vielen Dank im voraus!

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Hättest du evtl. das Wissen und die Zeit 2-3 Absätze zu diesem Stub: HTML/outline im Wiki beizutragen?

Muss man zu HTML5-Outline mehr wissen als dass es das praktisch nicht gibt?

LLAP 🖖

[marctrix]

Hej Gunnar,

Hättest du evtl. das Wissen und die Zeit 2-3 Absätze zu diesem Stub: HTML/outline im Wiki beizutragen?

Muss man zu HTML5-Outline mehr wissen als dass es das praktisch nicht gibt?

???

Marc

[MrMurphy1]

Hallo,

outline ist halt von Theoretikern für Theoretiker erfunden worden. In der Praxis wird es nicht verwendet, da es keine Vorteile bietet und von niemandem benötigt wird.

Gruss

MrMurphy

[marctrix]

Hej MrMurphy1,

outline ist halt von Theoretikern für Theoretiker erfunden worden. In der Praxis wird es nicht verwendet, da es keine Vorteile bietet und von niemandem benötigt wird.

Aktuelle Screenreader nutzen das (Jaws z. B. bereits seit Version 12 (2010) und ich nutze das auch. Also "keiner" stimmt nicht so ganz ;-)

Wobei ich weiterhin h1 bis h6 verwende, als gäbe es html5-outlining nicht (was ja tatsächlich überwiegend der Fall ist).

Was man jedenfalls nicht tun sollte: sections, articles, nav und aside sinnlos zu verschachteln, so dass zukünftige Browser, die html5-outline verstehen, das so falsch interpretieren, wie es genutzt wurde. ;-)

Marc

[marctrix]

Hej Matthias,

Kommt drauf an. Eine section ist ein Sinnzusammenhang und wirkt sich auf das HTML5-outlining aus. Man sollte alle Elemente, die das HTML5-outlining beeinflussen also sinnvoll verschachteln.

Hättest du evtl. das Wissen und die Zeit 2-3 Absätze zu diesem Stub: HTML/outline im Wiki beizutragen?

Klar, mache ich gern

Marc

[Gunnar Bittersmann]

@@Evan

    		   <li><a href="#">Hilfe & Service</a></li>

Das & ist in HTML ein Sonderzeichen und sollte escapet werden:

    		   <li><a href="#">Hilfe &amp; Service</a></li>

LLAP 🖖

[Evan]

Hallo,

Das & ist in HTML ein Sonderzeichen und sollte escapet werden:

    		   <li><a href="#">Hilfe &amp; Service</a></li>

danke habe ich verbessert. Hätte es denn zu Problemen geführt oder sollten die moderner Browser alle in der Lage sein, das & richtig anzuzeigen?

[Gunnar Bittersmann]

@@Evan

Hätte es denn zu Problemen geführt

Wegen des Leerzeichens danach vermutlich nicht. Was nicht heißt, dass es richtig wäre, & nicht zu escapen.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Wegen des Leerzeichens danach vermutlich nicht. Was nicht heißt, dass es richtig wäre, & nicht zu escapen.

& braucht nicht escaped zu werden, wenn ihm ein Leerzeichen folgt. Siehe m1631411 ff.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

& braucht nicht escaped zu werden, wenn ihm ein Leerzeichen folgt. Siehe m1631411 ff.

„Eben wusst’ ich’s noch.“ —yours truly

LLAP 🖖

[marctrix]

Hej MrMurphy1,

Eher mit passenden Containern wie main und aside. Für den linken Container könnte ein div genommen werden.

diese nach links zu floaten oder lieber mit flexboxen zu arbeiten?

Besser geeignet ist Flexbox, da es speziell für solche Layouts entwickelt wurde.

Aber die Browser-Unterstützung ist noch immer mäßig. Mit Vendor-Präfixen und neuer und alter Schreibweise bekommt man zwar eine meiner Meinung nach ausreichende Abdeckung, aber das für mehrere breakpoints durchzuziehen ist meiner persönlichen Meinung nach nicht unbedingt für Anfänger geeignet, zumal hier das Zeitbudget eng zu sein scheint. Kommt noch IE9 und älter zu den zu unterstützenden Browsern hinzu, braucht man auch noch zusätzlich ein Fallback ohne flexbox.

Falls die Unterstützung älterer Browser bei diesem Projekt zu vernachlässigen ist - es geht ja offenbar nur um die Theorie - dann könnte man sich einigen, dass man ausschließlich die standardkonforme Schreibweise benutzt und alte Browser außen vorlässt. Unter diesen "Laborbedingungen" ist flexbox auch für Anfänger ok und dann auch wieder eine gute Wahl. Denn dann hat man Vorteile, wenn die Seite später mal responsiv werden soll.

Ich bin für jeden ernst gemeinten Hinweis dankbar. Das Mobile sollte irgendwann ein Thema werden, zum Start erstmal nicht, da ich hier im KA leider nur begrenze Möglichkeiten habe.

Mit einem sinnvollem HTML-Quelltext, speziell der Container, sind das später nur noch ein paar Zeilen CSS.

echt?

Vielleicht das Umstellen der Container, aber das ist ja nicht einmal die Spitze des Eisberges...

Beim Menü kommst du kaum um eine JavaScript-Lösung herum (wobei es schöne fertige Sachen gibt, wie flexnav).

Nur ein paar Zeilen CSS ist wohl die Untertreibung des Tages ;-)

Marc

[Evan]

Hallo,

Falls die Unterstützung älterer Browser bei diesem Projekt zu vernachlässigen ist - es geht ja offenbar nur um die Theorie - dann könnte man sich einigen, dass man ausschließlich die standardkonforme Schreibweise benutzt und alte Browser außen vorlässt. Unter diesen "Laborbedingungen" ist flexbox auch für Anfänger ok und dann auch wieder eine gute Wahl. Denn dann hat man Vorteile, wenn die Seite später mal responsiv werden soll.

von Flex bin ich komplett weg, hab heute Nacht noch lange mit unserem Lehrer telefoniert und wir sind der Meinung dass eine Webseite robust sein soll, darunter fällt derzeit Felx leider nicht, also weg damit. Ich setzte wie man es früher auch schon gemacht hat auf float.

Beim Menü kommst du kaum um eine JavaScript-Lösung herum (wobei es schöne fertige Sachen gibt, wie flexnav).

Selbstverständlich kann man ein Menü ohne JavaScript umsetzten. Dazu mal ist es ein riskantes Spiel auf eine JabaScript Navigation zu setzten, was ist wenn der User dieses ausgeschalten hat?

[JürgenB]

Hallo,

… Ich setzte wie man es früher auch schon gemacht hat auf float.

du solltest dir auch mal display:inline-block ansehen.

Gruß Jürgen

[Evan]

Hallo,

du solltest dir auch mal display:inline-block ansehen.

danke für den Hinweis. Schau ich mir gleich mal etwas näher an.

[marctrix]

Hej JürgenB,

Hallo,

… Ich setzte wie man es früher auch schon gemacht hat auf float.

du solltest dir auch mal display:inline-block ansehen.

Mir fallen da noch viel mehr ein:

inline, table, table-cell, table-caption, table-header-group, table-footer-group, table-row-group, none (ganz wichtig - vor allem wenn man das bei z. B. hover/focus-Zuständen in block oder etwas anderes ändert)... - um nur bei den display-Werten zu bleiben.

Marc

[Camping_RIDER]

Aloha ;)

Mir fallen da noch viel mehr ein:

inline, table, table-cell, table-caption, table-header-group, table-footer-group, table-row-group,

Leider, leider, leider alle im Wiki brutal unterrepräsentiert. Das steht schon lange auf meiner persönlichen ToDo-Liste, aber ich komm einfach nicht dazu...

Ich zitiere jetzt mal tatsächlich Selfhtml 8.1.2:

Speziell für die Erzeugung von Tabellen mit Nicht-Tabellen-Elementen stehen weitere Angaben zu display zur Verfügung. Die entsprechenden Angaben lassen sich allerdings auch auf entsprechende HTML-Tabellenelemente anwenden. Gedacht sind sie aber eher für die tabellarische Darstellung von XML-Daten. Denn XML kennt kein Handling, um Daten als tabellarisch auszuzeichnen. Das muss die Style-Sprache übernehmen, mit deren Hilfe die XML-Daten angezeigt werden. In CSS hat man die display-Eigenschaft zu diesem Zweck auserkoren. Folgende Angaben sind in diesem Zusammenhang möglich:

table = Das Element enthält tabellarisch angeordnete Kindelemente und erzeugt eine neue Zeile. Wirkt wie das table-Element in HTML.
inline-table = Das Element enthält tabellarisch angeordnete Kindelemente und wird im laufenden Textfluss angezeigt. Wirkt wie das table-Element in HTML, aber inline.
table-row = Das Element enthält nebeneinander angeordnete Kindelemente. Wirkt wie das tr-Element in HTML.
table-cell = Das Element steht für eine Tabellenzelle. Wirkt wie die Elemente th und td in HTML.
table-row-group = Das Element enthält eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Wirkt wie das tbody-Element in HTML.
table-header-group = Das Element enthält eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Gedacht für die Kopfzeile einer Tabelle. Wirkt wie das thead-Element in HTML.
table-footer-group = Das Element enthält eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Gedacht für die Fußzeile einer Tabelle. Wirkt wie das tfoot-Element in HTML.
table-column = Das Element beschreibt die Eigenschaften der Zellen in einer Spalte. Wirkt wie das col-Element in HTML.
table-column-group = Das Element enthält eine Gruppe von Elementen, die die Eigenschaft von Zellen in einer Spalte beschreiben. Wirkt wie das colgroup-Element in HTML.
table-caption. Das Element steht für eine Tabellenüberschrift. Wirkt wie das caption-Element in HTML (auch für th-Elemente).

Ich hinterlasse glaub mal schnell ein offizielles ToDo auf der Seite, das ist echt unbefriedigend ;)

Grüße,

RIDER

[marctrix]

Hej Camping_RIDER,

inline, table, table-cell, table-caption, table-header-group, table-footer-group, table-row-group,

Leider, leider, leider alle im Wiki brutal unterrepräsentiert. Das steht schon lange auf meiner persönlichen ToDo-Liste, aber ich komm einfach nicht dazu...

In Ordnung, werde es machen. Aaaaaber - gebt mir ein paar Tage Zeit. Ich bin ja nicht böse, wenn es ein anderer zwischendurch macht. Wenn es ein bisschen dauert, heißt das aber nicht, dass ich mich drücken will. ;-)

Marc

[marctrix]

Hej Evan,

Falls die Unterstützung älterer Browser bei diesem Projekt zu vernachlässigen ist - es geht ja offenbar nur um die Theorie - dann könnte man sich einigen, dass man ausschließlich die standardkonforme Schreibweise benutzt und alte Browser außen vorlässt. Unter diesen "Laborbedingungen" ist flexbox auch für Anfänger ok und dann auch wieder eine gute Wahl. Denn dann hat man Vorteile, wenn die Seite später mal responsiv werden soll.

von Flex bin ich komplett weg, hab heute Nacht noch lange mit unserem Lehrer telefoniert und wir sind der Meinung dass eine Webseite robust sein soll, darunter fällt derzeit Felx leider nicht, also weg damit. Ich setzte wie man es früher auch schon gemacht hat auf float.

flexbox ist genauso robust wie jede andere Technik (in den Browsern, die flexbox implementiert haben).

Für das Layout kommt noch mehr in Frage als nur float: vor allem diverse display-Eigenschaften und Positionierungs-Angaben...

Beim Menü kommst du kaum um eine JavaScript-Lösung herum (wobei es schöne fertige Sachen gibt, wie flexnav).

Selbstverständlich kann man ein Menü ohne JavaScript umsetzten. Dazu mal ist es ein riskantes Spiel auf eine JabaScript Navigation zu setzten, was ist wenn der User dieses ausgeschalten hat?

Geh auf die Seite mit der flexnav und probier es aus ;-)

Marc

[MrMurphy1]

Hallo

Aber die Browser-Unterstützung ist noch immer mäßig.

Wow, über 95% Browserunterstützung mit steigender Tendenz sind deiner Ansicht nach mäßig. Sehe ich anders.

http://caniuse.com/#search=flexbox

Gruss

MrMurphy

[marctrix]

Hej MrMurphy1,

Hallo

Aber die Browser-Unterstützung ist noch immer mäßig.

Wow, über 95% Browserunterstützung mit steigender Tendenz sind deiner Ansicht nach mäßig. Sehe ich anders.

http://caniuse.com/#search=flexbox

Da du auf caniuse.com verlinkt, hast du dir sicher auch die bekannten Probleme angeschaut.

Auf die 95% kommt man einerseits nur wenn man alle Schreibweisen und vendor-Präfixe mitzählt.

Dann ist das ein Wert, der sich auf den internationalen, bzw amerikanischen Browsermarkt bezieht (weiß ich nicht genau, jedenfalls ist es nur ein Richtwert). Auf der eigenen Webseite (aber auch generell für Deutschland ) sieht das schon wieder anders aus.

Und drittens und letztens: ja, 5% der Nutzer zu verlieren finde ich doof.

Wenn man so anfängt zu denken (JavaScript hat ja fast jeder, die meisten können sehen, Homepage und Sitemap versteht doch heutzutage jeder usw), verschenkt man viel zu viel Traffic.

Wir wären sicher froh, wenn wir 5% Wirtschaftswachstum hätten. Bei der Optimierung einer ordentlich laufenden Seite wird auch noch an Schrauben gedreht, die für sich genommen nur Bruchteile eines Prozentes machen. Wenn man an vielen Schrauben dreht, sind es dann aber auch wieder ein paar Prozent.

Ich zwinge niemanden das zu tun (ist bei vielen Seiten auch nicht nötig und kosten und nutzen stehen in einem schlechten Verhältnis, wenn es um dieses finetuning eines mittelmäßigen Blogs geht).aber 5% sind für mich tatsächlich ein großer Brocken!

Marc

[Gunnar Bittersmann]

@@marctrix

Auf die 95% kommt man einerseits nur wenn man alle Schreibweisen und vendor-Präfixe mitzählt.

Wenn man mag, kann man die Aufgabe, diese aus dem Standard-Code zu erstellen, an einen CSS-Postprozessor wegdelegieren.

Dann ist das ein Wert, der sich auf den internationalen, bzw amerikanischen Browsermarkt bezieht (weiß ich nicht genau, jedenfalls ist es nur ein Richtwert). Auf der eigenen Webseite (aber auch generell für Deutschland ) sieht das schon wieder anders aus.

Ich hab dann mal bei Can I Use „Germany“ eingestellt. Aus 95.4% werden 96.76%.

Und drittens und letztens: ja, 5% der Nutzer zu verlieren finde ich doof.

Niemand hat die Absicht, einen Nutzer zu verlieren.

Man muss halt abwägen, ob sich für 5% (eher 3%) der Aufwand lohnt, die Website gleich aussehen zu lassen (NO!) oder ob man mit progressive enhancement bestens bedient ist.

Wie Jeremy Keith sagt: in der Zeit, die man für die 5% (eher 3%) verschwendet, könnte man auch für die 95% (eher 97%) etwas noch besseres entwickeln.

LLAP 🖖

[marctrix]

Hej Gunnar,

Auf die 95% kommt man einerseits nur wenn man alle Schreibweisen und vendor-Präfixe mitzählt.

Wenn man mag, kann man die Aufgabe, diese aus dem Standard-Code zu erstellen, an einen CSS-Postprozessor wegdelegieren.

Didaktisch sinnvoll?

Dann ist das ein Wert, der sich auf den internationalen, bzw amerikanischen Browsermarkt bezieht (weiß ich nicht genau, jedenfalls ist es nur ein Richtwert). Auf der eigenen Webseite (aber auch generell für Deutschland ) sieht das schon wieder anders aus.

Ich hab dann mal bei Can I Use „Germany“ eingestellt. Aus 95.4% werden 96.76%.

Auch das ist nur ein Richtwert. Die noch nicht existierende Seite hat noch keine Statistiken, die man zugrunde legen könnte. Du bist dir doch selber sehr wohl bewusst, wie stark das von der Zielgruppe abhängt.

Im Behördenumfeld, in dem ich tätig bin, stehen schon mal per se ganz andere Werte. Bei einem Shop kommt es vor allem auf die verkauften Waren an, welche Nutzer (mit welchen Browsern) zu Besuch kommen werden.

Mir scheint überdies, du vergisst eines: ich will dir deine flexbox nicht schlecht reden. Ich halte sie für dieses Projekt für geeignet, wenn man sich auf aktuelle Browser beschränkt und für ungeeignet, wenn man alte Browser bis hinunter zu IE9 unterstützen will.

Dass floats auch ihre Tücken haben, ist mit bewusst. Es klang mir aber so aus den posts des TO so raus, als gäbe es da Vorwissen, auf das man aufbauen kann.

Ich versuche in meine Überlegungen die Besonderheiten des hier vorgestellten Projektes zu berücksichtigen und komme da zu einer etwas anderen Bewertung als du.

Und drittens und letztens: ja, 5% der Nutzer zu verlieren finde ich doof.

Niemand hat die Absicht, einen Nutzer zu verlieren.

Man muss halt abwägen, ob sich für 5% (eher 3%) der Aufwand lohnt, die Website gleich aussehen zu lassen (NO!) oder ob man mit progressive enhancement bestens bedient ist.

progressive enhancement_ ist aber eine freundliche Umschreibung für "im IE9 steht dann halt alles untereinander ;-)

Wie Jeremy Keith sagt: in der Zeit, die man für die 5% (eher 3%) verschwendet, könnte man auch für die 95% (eher 97%) etwas noch besseres entwickeln.

Hier geht es doch nur um das Kennenlernen von Möglichkeiten, es ist doch ein Lehrprojekt. Da kann man es sich leisten zu sagen, wir machen das für aktuelle Browser und nehmen flexbox - bin ich sofort mit einverstanden.

Für eine echte Webseite muss man dann abwägen, was weniger Zeit kostet. Ich komme immer noch mit meinen Methoden ohne nennenswerten Mehraufwand ans Ziel. Denn sind wir mal ehrlich: wenn man die verschiedenen Techniken drauf hat, mit denen man ein Layout erstellen kann, geht die Zeit nicht in die Seitenaufteilung, sondern in die Gestaltung von Links auf hellem Hintergrund, auf dunklem Hintergrund mit extra Icons für PDF, Word, Bilder, dutzende von Überschriften, diverse Darstellung unterschiedlichster Listen und Tabellen und all die anderen "Kleinigkeiten"...

Marc

[Gunnar Bittersmann]

@@marctrix

Besser geeignet ist Flexbox, da es speziell für solche Layouts entwickelt wurde.

Aber die Browser-Unterstützung ist noch immer mäßig.

Was MrMurphy1 sagte.

Mit Vendor-Präfixen und neuer und alter Schreibweise bekommt man zwar eine meiner Meinung nach ausreichende Abdeckung, aber das für mehrere breakpoints durchzuziehen

Bei Flexbox kommt man weitgehend ˙ ohne Breakpoints aus.

ist meiner persönlichen Meinung nach nicht unbedingt für Anfänger geeignet,

Wie schon letztens den Flocke fragte: Du willst Neulingen statt Flexbox lieber Floats beibringen, die mit clear, overflow:hidden etc noch schwieriger zu beherrschen sind?

Kommt noch IE9 und älter zu den zu unterstützenden Browsern hinzu, braucht man auch noch zusätzlich ein Fallback ohne flexbox.

Nein. Der Fallback ist bereits da: die Boxen werden dann eben untereinander angeordnet.

LLAP 🖖

[marctrix]

Hej Gunnar,

@@marctrix

Besser geeignet ist Flexbox, da es speziell für solche Layouts entwickelt wurde.

Aber die Browser-Unterstützung ist noch immer mäßig.

Was MrMurphy1 sagte.

Mit Vendor-Präfixen und neuer und alter Schreibweise bekommt man zwar eine meiner Meinung nach ausreichende Abdeckung, aber das für mehrere breakpoints durchzuziehen

Bei Flexbox kommt man weitgehend ˙ ohne Breakpoints aus.

ist meiner persönlichen Meinung nach nicht unbedingt für Anfänger geeignet,

Wie schon letztens den Flocke fragte: Du willst Neulingen statt Flexbox lieber Floats beibringen, die mit clear, overflow:hidden etc noch schwieriger zu beherrschen sind?

Nö, daher habe ich auf weitere Möglichkeiten des layoutens hingewiesen...

BFC hast du übrigens vergessen, ein Punkt an dem viele scheitern, obwohl er recht leicht zu meistern ist.

Das was Dein Beispiel zeigt, in dem keine Breakpoints nötig sind, geht übrigens mit inline-block und prozentualer Breitenangabe auch ohne flexbox.

Ein gewisser Gunnar Bittersmann hat mal einen schönen Artikel zur Verwendung von inline-block statt float geschrieben. Ich habe das tatsächlich mal für eine große Webseite mit komplexem Layout ausprobiert (Jahr der Wälder, heute nach einem Relaunch waldkulturerbe.de). Hat prima geklappt, obwohl ich erst sehr skeptisch war und hat damals Probleme gelöst, die sonst sehr viel schwieriger in den Griff zu bekommen gewesen wären. Will heißen: neben flexbox führen noch ganz viele Wege nach Rom.

Kommt noch IE9 und älter zu den zu unterstützenden Browsern hinzu, braucht man auch noch zusätzlich ein Fallback ohne flexbox.

Nein. Der Fallback ist bereits da: die Boxen werden dann eben untereinander angeordnet.

Tolle Nutzererfahrung...

Tut mir leid, aber da kommen wir nicht zusammen ;-)

Dabei finde ich es durchaus in Ordnung, wenn es jemand, der weiß was er tut und dafür seine Gründe hat, anders macht als ich.

Ich habe für meine Sichtweise aber auch Gründe und bin was die verwendeten Techniken angeht etwas konservativer.

Marc

[Gunnar Bittersmann]

@@marctrix

BFC hast du übrigens vergessen, … leicht zu meistern ist.

Ich erinnere mich, dass BFC immer Meister war.

Äh, was meinst du mit BFC?

Das was Dein Beispiel zeigt, in dem keine Breakpoints nötig sind, geht übrigens mit inline-block und prozentualer Breitenangabe auch ohne flexbox.

Mit Flexbox geht aber viel mehr.

Und was mit display: inline-block nicht geht: Den oft störenden Abstand zwischen Boxen wegzubekommen – jedenfalls nicht ohne Verunstaltungen des Quellcodes.

Ein gewisser Gunnar Bittersmann hat mal …

Kenn ich nicht. Ist mir auch egal – für mich zählt eh nur meine Meinung!^[1]

Will heißen: neben flexbox führen noch ganz viele Wege nach Rom.

Ins antike Rom, ja.^[2]

Tolle Nutzererfahrung...

Nutzer von Schwarz/weiß-Fernsehern können keine Farben sehen. Tolle Nutzererfahrung.

Man kann manche Sachen halt (mit vertretbarem Aufwand) nur so gut machen, wie es die vom Nutzer eingesetzte Technik hergibt.

LLAP 🖖

---

1. Frag Sara, die wird das bestätigen. ↩︎

2. Schmeißt Twitter alte Fotos irgendwann weg? ↩︎

[marctrix]

Hej Gunnar,

BFC hast du übrigens vergessen, ein Punkt an dem viele scheitern, obwohl er recht leicht zu meistern ist.

Ich weiß, dass BFC immer Meister war.

Äh, was meinst du mit BFC?

Delete line 10

Das was Dein Beispiel zeigt, in dem keine Breakpoints nötig sind, geht übrigens mit inline-block und prozentualer Breitenangabe auch ohne flexbox.

Mit Flexbox geht aber viel mehr.

Bestreitet doch keiner - mein nicht mal mehr online sichtbares Beispiel stammt aus 2010. Mir ging es doch nur darum, dass es flexbox gibt und inline-block und float und position und display und vermutlich noch mehr, was ich regelmäßig zur Anordnung von Elementen einsetze.

Die Entscheidung gegen flexbox halte ich für gerade noch vertretbar. Besser wäre nach einiger Überlegung, die Unterstützung für alte Browser einfach zu lassen.

Habe ich aber immerhin von Anfang an vorgeschlagen und zur Auswahl gestellt...

Und was mit display: inline-block nicht geht: Den oft störenden Abstand zwischen Boxen wegzubekommen – jedenfalls nicht ohne Verunstaltungen des Quellcodes.

Ein gewisser Gunnar Bittersmann hat mal …

Kenn ich nicht. Ist mir auch egal – für mich zählt eh nur meine Meinung!^[1]

Will heißen: neben flexbox führen noch ganz viele Wege nach Rom.

Ins antike Rom, ja.^[2]

Tolle Nutzererfahrung...

Nutzer von Schwarz/weiß-Fernsehen können keine Farben sehen. Tolle Nutzererfahrung.

Der Unterschied: dem alten Fernseher kannst du keine Farben beibringen. Für den IE9 kann man sehr wohl Layouten - ohne zusätzlichen Aufwand, wenn man eine Technik verwendet, die vom IE9 und von neuen Browsern beherrscht wird.

Wenn denn überhaupt der IE9 unterstützt werden soll.

Meiner Meinung nach müssen wir beide uns den Kopf darüber aber nicht zerbrechen, weil es sich um ein imaginäres Projekt handelt. Es gibt kein Pflichtenheft, keine benannte Zielgruppe, nicht einmal ein tragfähiges Konzept oder Geschäftsmodell.

Ob man sich nun für eine bestimmte Technik entschließt hängt ja in erster Linie damit zusammen, wie umfangreich man welche Nutzer unterstützen will. Das muss immer in einem sinnvollen Kosten-Nutzen-Verhältnis stehen und kann für eine imaginäre Webseite mit einem shop, für den es egal ist, welche Waren da mal drin sein sollen nicht seriös beantwortet werden.

Man kann manche Sachen halt (mit vertretbarem Aufwand) nur so gut machen, wie es die vom Nutzer eingesetzte Technik hergibt.

Oder so. Eigentlich dasselbe nur anders (viel kürzer und damit besser) formuliert.

Marc

---

1. Frag Sara, die wird das bestätigen. ↩︎

2. Schmeißt Twitter alte Fotos irgendwann weg? ↩︎

[Evan]

Hallo,

Nein. Der Fallback ist bereits da: die Boxen werden dann eben untereinander angeordnet.

dann habe ich also im schlimmsten Fall wo alle Boxen untereinander sind? Super sag ich dazu :) Die zukünftige User werden es einem danken.

[Tabellenkalk]

Hallo,

dann habe ich also im schlimmsten Fall wo alle Boxen untereinander sind? Super sag ich dazu :) Die zukünftige User werden es einem danken.

Je zukünftiger die User, desto weniger fallen back!

Gruß
Kalk

[Gunnar Bittersmann]

@@Evan

Ganz oben „Mein Konto ⌄“ und „[anmelden]“ (wozu die Klammern?) sollten nicht nebeneinanderstehen; sie schließen sich aus.

Wenn man nicht angemeldet ist, hat man kein Konto und der Menüpunkt ist sinnlos, sollte also nicht erscheinen.

Wenn man schon angemeldet ist, ist der Menüpunkt „anmelden“ sinnlos. Dort könnte dann aber „abmelden“ oder besser „ausloggen“ stehen.

Was heißt „anmelden“? Registrieren? Einloggen? Beides?

Je nach Implementierung könnten auch Merkzettel und Warenkorb für nicht angemeldete Benutzer sinnlos sein.

LLAP 🖖

PS:

wie ich dieses hoffentlich einfache Design umsetzten kann.

Du meinst Layout, nicht Design.

[Evan]

Hallo,

Ganz oben „Mein Konto ⌄“ und „[anmelden]“ (wozu die Klammern?) sollten nicht nebeneinanderstehen; sie schließen sich aus.

von den [] bin ich weg, wollte dass es bisschen besser auffällt. Aber im Design sieht es scheiße aus. Warum sollte "Mein Konto" und "anmelden" nicht nebeneinander stehen? Beide Bereiche gehören doch zusammen?

Wenn man nicht angemeldet ist, hat man kein Konto und der Menüpunkt ist sinnlos, sollte also nicht erscheinen.

Zeigt man so dem User nicht, stopp, melde dich ein, da könnte noch etwas mehr geben?

Was heißt „anmelden“? Registrieren? Einloggen? Beides?

"anmelden" wenn ich bereits ein Konto habe, registrieren wen ich noch kein Konto habe? Zumindest habe ich es so verstanden.

Je nach Implementierung könnten auch Merkzettel und Warenkorb für nicht angemeldete Benutzer sinnlos sein.

Habe ich auch schon überlegt, allerdings ist die Aufgabenstellung, dass auch Gäste "einkaufen" können. Alternativ könnte ich den Bereich erst einblenden lassen, wenn etwas im WK oder MZ steht?

[Gunnar Bittersmann]

@@Evan

„Mein Konto ⌄“ und „[anmelden]“ (wozu die Klammern?) … schließen sich aus.

Warum sollte "Mein Konto" und "anmelden" nicht nebeneinander stehen? Beide Bereiche gehören doch zusammen?

„Gehören zusammen“ und „schließen sich aus“ schließen sich aus.

Zeigt man so dem User nicht, stopp, melde dich ein, da könnte noch etwas mehr geben?

Dann müsste „Mein Konto ⌄“ deutlich als gegenwärtig nicht verfügbar gekennzeichnet werden („ausgegraut“) und auch nicht verlinkt sein.

Was heißt „anmelden“? Registrieren? Einloggen? Beides?

"anmelden" wenn ich bereits ein Konto habe, registrieren wen ich noch kein Konto habe? Zumindest habe ich es so verstanden.

Wenn man bereits ein Konto hat, ist „einloggen“ der passende Begriff. Was nicht heißt, dass „anmelden“ da oben falsch wäre – wenn es denn du einem Formular führt, mit dem man sich einloggen oder registrieren kann.

Je nach Implementierung könnten auch Merkzettel und Warenkorb für nicht angemeldete Benutzer sinnlos sein.

Habe ich auch schon überlegt, allerdings ist die Aufgabenstellung, dass auch Gäste "einkaufen" können.

OK. Man kann Merkzettel und Warenkorb auch über Cookie, localStorage oder sessionStorage realisieren.

Alternativ könnte ich den Bereich erst einblenden lassen, wenn etwas im WK oder MZ steht?

Könntest du. Oder „ausgrauen“, wenn nichts drin ist.

LLAP 🖖

[Evan]

Hallo,

ich habe mit Photoshop noch ein Seiten-Element gestaltet. Jetzt stellt sich mir die Frage wie kann ich diese Box ohne viel Code umsetzten.

Meine Idee ist:

1. Ein DIV für den kompletten Kasten
2. Ein weiteres DIV für den Titel mit einem Background
3. Pro Bereich (Tel, Zeiten, Mail, Adresse) Ein weiteres Div welches mit zwei DIVs unterteilt ist, eines für den linken und eines für den rechten Bereich.
4. Ein DIV für den Border (Trenner)
5. Nun wieder ein DIV welches zwei DIVS beinhaltet (wie oben beschrieben)

Bin ich damit auf dem richtigen Weg?

Vielleicht sollten beide Öffnungszeiten exakt untereinander stehen?
Bin mir da noch nicht 100% sicher was schöner ausschaut.

[Matthias Apsel]

Hallo Evan,

1. Ein DIV für den kompletten Kasten

div ist immer so ohne Aussage.

2. Ein weiteres DIV für den Titel mit einem Background

Nö - der Titel ist eine Überschrift. Die Farbe ist ein Hintergrund.

3. Pro Bereich (Tel, Zeiten, Mail, Adresse) Ein weiteres Div welches mit zwei DIVs unterteilt ist, eines für den linken und eines für den rechten Bereich.

Nö, das ganze ist eine Liste, die Grafiken sind Hintergründe

5. Ein DIV für den Border (Trenner)

Nö. border-top von "Rücksendungen an", was ebenfalls eine Überschrift ist.

6. Nun wieder ein DIV welches zwei DIVS beinhaltet (wie oben beschrieben)

Nö. Siehe 3.

Bis demnächst
Matthias

[Camping_RIDER]

Aloha ;)

5. Ein DIV für den Border (Trenner)

Nö. border-top von "Rücksendungen an", was ebenfalls eine Überschrift ist.

Jein. Kann man machen. Aber für solche Trenner gibts eigentlich sogar ein eigenes Element. Kann man für sowas ja ruhig mal abstauben. "Rücksendungen an" kann natürlich trotzdem Überschrift sein.

Grüße,

RIDER

[Gunnar Bittersmann]

@@Camping_RIDER

Jein. Kann man machen. Aber für solche Trenner gibts eigentlich sogar ein eigenes Element.

Das muss in den Wirren des Threads verloren gegangen sein.

LLAP 🖖

[Camping_RIDER]

Aloha ;)

Jein. Kann man machen. Aber für solche Trenner gibts eigentlich sogar ein eigenes Element.

Das muss in den Wirren des Threads verloren gegangen sein.

Nein, ich war lediglich zu faul den Thread zuerst (vor dem Antworten) zu Ende zu lesen (was ich eben erst getan habe) und wollte mir doch nicht die Gelegenheit nehmen lassen, dem @Matthias Apsel reinzugrätschen ;)

Aber glaub mir, ich hab mich schon selbst geohrfeigt als ich den Beitrag von @Auge gelesen habe, der auch schon das hr vorschlug...

Grüße,

RIDER

[Auge]

Hallo

… wollte mir doch nicht die Gelegenheit nehmen lassen, dem @Matthias Apsel reinzugrätschen ;)

Aber glaub mir, ich hab mich schon selbst geohrfeigt …

Ahem, <räusper /> … Keine Gewalt! Diesmal ganz mit ohne Demonstration und so.

Tschö, Auge

[Auge]

Hallo

Meine Idee ist:

1. Ein DIV für den kompletten Kasten

Ja. Eventuell bietet sich aber auch section an.

2. Ein weiteres DIV für den Titel mit einem Background

Wie wäre es stattdessen mit einer Überschrift?

3. Pro Bereich (Tel, Zeiten, Mail, Adresse) Ein weiteres Div welches mit zwei DIVs unterteilt ist, eines für den linken und eines für den rechten Bereich.

Nein. Benutze jeweils ein div, falls sich im einzelnen nicht z.B. ein Absatz (p) anbieten sollte. Den Abstand auf der linken Seite zur Darstellung der Bilder, die du mit CSS als Hintergrundbilder einbauen kannst, kannst du mit padding regeln.

5. Ein DIV für den Border (Trenner)

Du könntest dazu einen der vorhandenen Blöcke mit border-bottom bzw. border-top versehen, besser ist aber wohl ein hr.

6. Nun wieder ein DIV welches zwei DIVS beinhaltet (wie oben beschrieben)

Ein Textabsatz (p) mit den schon oben genannten Regeln zur Freihaltung der linken Seite reicht. Dazu „Rücksendung an“ als Überschrift.

Tschö, Auge

[MrMurphy1]

Hallo

kann ich diese Box ohne viel Code umsetzten

Jein. Definiere dazu erst mal was du unter "ohne viel" verstehst.

Bin ich damit auf dem richtigen Weg?

Nur wenn du unter Divitis leidest.

Vielleicht sollten beide Öffnungszeiten exakt untereinander stehen?

Es ist ein typischer Anfängerfehler möglichst viel Inhalt geometrisch gleichförmig anzuordnen. Mit Layout oder gar Design haben solche langweiligen Verteilungen des Inhalts nichts zu tun.

Gruss

MrMurphy

[MrMurphy1]

Hallo

ich habe mal einen HTML-Beispieltext erstellt.

Gewerbliche Seiten sollten sich soweit möglich an die Norm "DIN 5008" halten. Normale Endkunden bemerken das nicht und stören sich auch nicht daran. Geschäftskunden, Banken und anderen Institutionen gegenüber wirkt die Seite aber seriöser.

Dazu gehört zum Beispiel:

Auf deutschen Seiten wird die Telefonnummer und Faxnummer mit der deutschen Vorwahl angezeigt. Die meisten Leute können die zudem besser lesen.

Nur bei Schriftverkehr mit dem Ausland oder bei nicht-deutschsprachigen Seiten sollte die Ländervorwahl angegeben werden.

Bei den Öffnungszeiten gehört vor und hinter die Bindestriche kein Leerzeichen.

Außerdem habe ich die Angaben benutzerfreundlich erstellt.

Dazu gehört zum Beispiel:

Keine Abkürzungen verwenden.

Entweder alle oder keine Blöcke mit Überschriften versehen.

Nach DIN 5008 sollen die Telefonnummern zwar außer nach der Vorwahl keine Leerstellen enthalten. Es werden aber trotzdem häufig zusätzliche Leerzeichen eingefügt, damit sie lesbarer werden. Und zwar nicht unbedingt nach der alten DIN-Norm, sondern so, dass die Nummer gut erkennbar und / oder merkbar ist.

Telefonnummern werden anklickbar zur direkten Anwahl für Smartphones und Tablets mit direkter Anwahl erstellt. Dafür gibt es verschiedene Lösungen, da bei Desktops beim Anklicken eine Fehlermeldung erscheint. Ich bevorzuge die Telefonnummer optisch als ganz normalen Text darzustellen. Besucher, die die Funktionen kennen, werden die Funktion trotzdem aufrufen, wenn sie direkt anrufen möchten.

Gleiches gilt für die E-Mail Adresse. Im Gegensatz zur Telefonnummer kann die zwar eher farblich hervorgehoben werden um die anklickbarkeit anzuzeigen. Ich bevorzuge aber eher ein zusätzliches benutzerfreundliches Formular.

Fax-Nummern werden im allgemeinen nur abgelesen oder kopiert, deshalb sind sie bei mir nur Text.

Für deinen Wunsch die Öffnungszeiten tabellenartig darzustellen habe ich die notwendigen span-Elemente eingefügt.

Bei den beiden Adressen habe ich jeweils den Namen stehen. So können sie jeweils in einem Rutsch markiert und zum Beispiel in eine Textverarbeitung übernommen werden. Es ist immer nervig, wenn Daten über die Zwischenablage übernommen werden sollen und dazu mehrmals hin- und hergeklickt werden muss.

   <section>
      <h2>Kontakt</h2>
      <ul>
         <li>
            <h3>Telefon</h3>
            <a href="tel:[phone]">089 0000 0000</a>
         </li>
         <li>
            <h3>Fax</h3>
            <p>089 0000 0001</p>
         </li>
         <li>
            <h3>Öffnungszeiten</h3>
            <p><span>Montag–Freitag:</span> <span>7:00–21:00 Uhr</span></p>
            <p><span>Samstag:</span> <span>9:00–15:00 Uhr</span></p>
         </li>
         <li>
            <h3>E-Mail Adresse</h3>
            <a href="mailto:[e-mail]">[e-mail]</a>
         </li>
         <li>
            <h3>Geschäftsadresse</h3>
            <p>Fiktives Unternehmen</p>
            <p>Musterstraße 93</p>
            <p>80331 München</p>
         </li>
         <li>
            <h3>Rücksendungen an</h3>
            <p>Fiktives Unternehmen</p>
            <p>Musterstraße 193</p>
            <p>80331 München</p>
         </li>
      </ul>
   </section>

Die Gestaltung dann per CSS.

Da es sich um ein Beispiel handelt können Einzelheiten natürlich auch anders gelöst werden.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy1

Auf deutschen Seiten wird die Telefonnummer und Faxnummer mit der deutschen Vorwahl angezeigt. Die meisten Leute können die zudem besser lesen.

Nur bei Schriftverkehr mit dem Ausland oder bei nicht-deutschsprachigen Seiten sollte die Ländervorwahl angegeben werden.

Nun ist das Web aber weltweit. Eine deutschsprachige Seite heißt nicht, dass sie nur in Deutschland gelesen wird. Schon für Seitenbesucher aus Österreich oder der Schweiz könnte die Ländervorwahl interessant sein.

In 'tel:[phone]' muss übrigens die 0 nach der Ländervorwahl weg, und Bindestriche als Trennzeichen sind auch durchaus erlaubt: 'tel:[phone]'

Bei den Öffnungszeiten gehört vor und hinter die Bindestriche kein Leerzeichen.

Keine Bindestriche, sondern Bis-Striche: Halbgeviertstriche U+2013. Hast du ja auch verwendet. Nur dass man das im Quellcode (wenn der in dicktengleicher Schrift dargestellt wird) nicht sieht. Dies wäre so ein Fall, wo man vielleicht doch lieber benannte Zeichenreferenzen einsetzt: '07:00–21:00 Uhr'

Verlangt nicht DIN 5008 eine führende 0 bei der Stunde?

Keine Abkürzungen verwenden.

Abkürzungen sind durchaus geeignet, schneller erfasst zu werden, weil das Auge nicht so viel lesen muss. Kommt halt drauf an, wieviel kognitiver Aufwand dahinter steckt, die Abkürzung zu entschlüsseln. Bei allgemein bekannten Abkürzungen wie „Tel.“, „-str.“, „usw.“ usw. dürfte dieser (nahezu) null sein, so dass diese Abkürzungen sogar schneller lesbar sind als die ausgeschriebenen Wörter (s.a. Fußnote 1).

TL;DR: Bei Kontaktdaten kann man „Tel.“, „-str.“ usw. durchaus abkürzen.

Telefonnummern werden anklickbar zur direkten Anwahl für Smartphones und Tablets mit direkter Anwahl erstellt. Dafür gibt es verschiedene Lösungen, da bei Desktops beim Anklicken eine Fehlermeldung erscheint. Ich bevorzuge die Telefonnummer optisch als ganz normalen Text darzustellen. Besucher, die die Funktionen kennen, werden die Funktion trotzdem aufrufen, wenn sie direkt anrufen möchten.

Davon würde ich nicht ausgehen.

Eine feature detection, die erkennt, ob das System des Nutzers Telefonnummern wählen kann, fällt mir aber auch nicht ein.

Möglich wäre sowas wie '089 0000 0000 (<a href="tel:[phone]">wählen</a>)'. Statt „wählen“ wäre auch ein Telefonsymbol denkbar, aber nicht in diesem Fall, da ja schon eins verwendet wird.

Gleiches gilt für die E-Mail Adresse. Im Gegensatz zur Telefonnummer kann die zwar eher farblich hervorgehoben werden um die anklickbarkeit anzuzeigen. Ich bevorzuge aber eher ein zusätzliches benutzerfreundliches Formular.

Ich nicht. (Aber zusätzliches Kontaktformular ist OK.)

Fax-Nummern werden im allgemeinen nur abgelesen oder kopiert, deshalb sind sie bei mir nur Text.

BTW, RFC 2806 sah ein fax URL scheme vor. Der Nachfolger RFC 3966 nicht mehr; dafür kann tel auch für Fax verwendet werden.

[Beispielquelltext]

„Telefon“, „Fax“, „Öffnungszeiten“, „E-Mail Adresse“, „Geschäftsadresse“ würde ich nicht den Status einer Überschrift zukommen lassen. Bei „Rücksendungen an“ wäre ich kompromissbereit.

Das sieht mir dann doch nach einer Beschreibungsliste dl aus. Und das es sich um Kontaktinformationen handelt, ist auch das address-Element angebracht:

<section>
  <h2>Kontakt</h2>
  <address>
    <dl>
      <dt>Tel.</dt>
      <dd><a href="tel:[phone]">089 0000 0000</a></dd>

      <dt>Fax</dt>
      <dd>089 0000 0001</dd>

      <dt>Öffnungszeiten</dt>
      <dd><span>Mo&ndash;Fr:</span> <span>7:00&ndash;21:00 Uhr</span></dd>			
      <dd><span>Sa:</span> <span>9:00&ndash;15:00 Uhr</span></dd>

      <dt>E-Mail Adresse</dt>
      <dd><a href="mailto:[e-mail]">[e-mail]</a></dd>

      <dt>Geschäftsadresse</dt>
      <dd>Fiktives Unternehmen<br/>
        Musterstraße 93<br/>
        80331 München
      </dd>

      <dt>Rücksendungen an</dt>
      <dd>Fiktives Unternehmen<br/>
        Musterstraße 93<br/>
        80331 München
      </dd>
    </dl>
  </address>
</section>

Dumm nur, dass es in HTML immer noch kein dt und dd gruppierendes Element di gibt …

Solche Kontaktangaben sind prädestiniert für semantische Auszeichnung mit Schema.org in RDFa oder microdata:

<section>
  <h2>Kontakt</h2>
  <address>
    <dl vocab="http://schema.org/" typeof="LocalBusiness">
      <dt>Tel.</dt>
      <dd property="telephone"><a href="tel:[phone]">089 0000 0000</a></dd>

      <dt>Fax</dt>
      <dd property="faxNumber">089 0000 0001</dd>

      <dt>Öffnungszeiten</dt>
      <dd>
        <meta property="openingHours" content="Mo-Fr 07:00-21:00"/>
        <span>Mo&ndash;Fr:</span> <span>07:00&ndash;21:00 Uhr</span>
      </dd>			
      <dd>
        <meta property="openingHours" content="Sa 09:00-15:00"/>
        <span>Sa:</span> <span>09:00&ndash;15:00 Uhr</span>
      </dd>

      <dt>E-Mail Adresse</dt>
      <dd property="email"><a href="mailto:[e-mail]">[e-mail]</a></dd>

      <dt>Geschäftsadresse</dt>
      <dd>
        <span property="name">Fiktives Unternehmen</span><br/>
        <span property="address" typeof="PostalAddress">
          <span property="streetAddress">Musterstraße 93</span><br/>
          <span property="postalCode">80331</span> <span property="addressLocality">München</span>
        </span>
      </dd>

      <dt>Rücksendungen an</dt>
      <dd>Fiktives Unternehmen<br/>
        Musterstraße 93<br/>
        80331 München
      </dd>
    </dl>
  </address>
</section>

LLAP 🖖

[Tabellenkalk]

Hallo,

Bei den Öffnungszeiten gehört vor und hinter die Bindestriche kein Leerzeichen.

Das halte ich für eine falsche Interpretation. Bei einem Bindestrich gehören tatsächlich keine Leerzeichen davor und dahinter. Bei Öffnungszeiten wird jedoch kein Bindestrich verwendet, sondern ein sogenanntes "Wortersatzzeichen", es wird nämlich das Wort "bis" ersetzt. Und vor und hinter einzelnen Wörtern stehen immer Leerzeichen.

Gruß
Kalk

[Gunnar Bittersmann]

@@Tabellenkalk

Bei den Öffnungszeiten gehört vor und hinter die Bindestriche kein Leerzeichen.

Das halte ich für eine falsche Interpretation. Bei einem Bindestrich gehören tatsächlich keine Leerzeichen davor und dahinter. Bei Öffnungszeiten wird jedoch kein Bindestrich verwendet, sondern ein …

… Bis-Strich.

Und vor und hinter einzelnen Wörtern stehen immer Leerzeichen.

Und vor und hinter dem Bis-Strich nicht (Duden).

Oder doch (DIN 5008).

LLAP 🖖

[Tabellenkalk]

Hallo,

… Bis-Strich.

Mal wieder ein Fall, wo ich der Wikipedia nicht traue.

Und vor und hinter einzelnen Wörtern stehen immer Leerzeichen.

Und vor und hinter dem Bis-Strich nicht (Duden).

Da sagt auch die Wikipedia, dass sich der Duden in diesem Fall nicht äußert, siehe dortige Fußnote 10

Oder doch (DIN 5008).

siehste.

Gruß
Kalk

[Evan]

Hallo,

vielen Dank für dein Beispiel. Ich hätte nicht gedacht dass man das ganze auch mit ul li lösen könnte. Wie im ersten Posting geschrieben, hätte ich viel mehr DIVS genommen. Hab dem ganzen mal ein wenig CSS verpasst:

http://codepen.io/anon/pen/QjPbrd.

Bin ich damit auf dem richtigen Weg?

Was ist aber noch nicht ganz verstehe, wie bekomme ich nun meine Icons vor die jeweilige Bezeichnung und warum hast du überall h3 Überschriften hinzugefügt? Muss das wirklich sein? So blöd sind doch die User nicht? Wenn sie Montag–Freitag lesen, dann können da doch nur die Öffnungszeiten gemeint sein?

[Evan]

Hallo,

hab mein CSS nochmals bisschen überarbeitet:

http://codepen.io/anon/pen/QjPbrd

Wie du sehen kannst nehmen die h2 Überschriften einfach viel zu viel Platz ein. Daher würde ich auf diese wie in meinem Bild gezeigt gerne verzichten und dafür Icons nehmen.

[Auge]

Hallo

hab mein CSS nochmals bisschen überarbeitet:

http://codepen.io/anon/pen/QjPbrd

Wie du sehen kannst nehmen die h2 Überschriften einfach viel zu viel Platz ein.

Dir ist doch hoffentlich klar, dass du auch die Schriftgrößen von Überschriften per CSS verändern kannst? Die Überschrift hat McMurphy gewählt, weil Programme somit wissen, dass ein neuer Abschnitt des Dokuments eingeleitet wird. Das hat erstmal nichts mit der Darstellung zu tun. Du kannst also die Überschrift, ohne Gewissensbisse haben zu müssen, mit der Schriftgröße deines Fließtextes ausgeben.

Daher würde ich auf diese wie in meinem Bild gezeigt gerne verzichten und dafür Icons nehmen.

Icons/Piktogramme sind als Sinnbilder sehr gut, sie sprechen aber nicht ^[1]. Der Text „Öffnungszeiten“ kann der Benutzer lesen bzw. sich vorlesen lassen. Ein Icon mit einer offenen Tür ^[2] ergänzt den Text, aber alleinstehend sagt es nicht „Öffnungszeiten“.

Tschö, Auge

---

1. Weitläufig, möglichst international verbreitete Icons/Piktogramme nehme ich da mal aus. ↩︎

2. Die offene Tür ist ein willkürlich gewähltes Beispiel. ↩︎

[MrMurphy1]

Hallo

Was ist aber noch nicht ganz verstehe, wie bekomme ich nun meine Icons vor die jeweilige Bezeichnung

Ich verwende Icon-Fonts, die ich mittels CSS "::before" einfüge. Im Gegensatz zu (Hintergrund-)Grafiken fransen die bei Vergrößerung nicht aus und können auch besser per CSS gestaltet werden.

warum hast du überall h3 Überschriften hinzugefügt?

Um die einzelnen Angaben sinnvoll zu trennen. Bei zusammengehörigen Informationen wie den Kontaktangaben ist es in jedem Fall guter Stil und benutzerfreundlich eine durchgehende Struktur zu wahren. Das habe ich damit erreicht.

Wenn du zum Beispiel schreibst

Tel.: 089...

dann sollte später statt

Musterstr. ..

auch

Straße: Musterstr. ..

stehen.

Muss das wirklich sein?

Nein. Es macht eine durchschnittliche Seite aber besser und benutzerfreundlicher. Außerdem habe ich doch direkt geschrieben, dass es sich um ein Beispiel handelt, wie ich solchen Quelltext erstellen würde.

So blöd sind doch die User nicht?

Benutzerfreundlichkeit hat nichts mit der Intelligenz der Besucher zu tun.

Wenn sie Montag–Freitag lesen, dann können da doch nur die Öffnungszeiten gemeint sein?

Nein. Es können auch Lageröffnungszeiten oder Zeiten der telefonischen Erreichbarkeit sein, die durchaus von den Ladenöffnungszeiten abweichen können. Solche eindeutigen Angaben sind ein Teil der Benutzerfreundlichkeit einer Seite.

Viele Webseitenersteller gehen leider einfach von ihrem Wissen- und Erfahrungsstand aus und können sich nicht vorstellen, dass viele Besucher einen ganz anderen haben. Dadurch resultieren dann die vielen besucherunfreundlichen Webseiten.

Das ist auch an einigen Antworten zu meinem Beispielquelltext erkennbar, bei denen die Antworter von ihrem Wissens- und Erfahrungsstand ausgehen.

Gruss

MrMurphy

[Evan]

Hallo,

Ich verwende Icon-Fonts, die ich mittels CSS "::before" einfüge. Im Gegensatz zu (Hintergrund-)Grafiken fransen die bei Vergrößerung nicht aus und können auch besser per CSS gestaltet werden.

ich habe bereits https://fortawesome.github.io/Font-Awesome/icons/ in das Projekt eingebunden, wenn du die meinst, dann könnte ich für Adresse z.B. fa fa-home nehmen, richtig?

[MrMurphy1]

Hallo

Ja, ich verwende auch FontAwesome.

für Adresse

Wie meinst du das? Iconfonts (oder auch andere Grafiken) sollten zusätzlich zum Text verwendet werden. Allein für sich sagen sie nichts aus und viele Besucher verstehen darunter etwas anderes als du.

Wie du sehen kannst nehmen die h2 Überschriften einfach viel zu viel Platz ein

Autsch. Ich erhalte zwar beim Aufruf der Seite eine Fehlermeldung, aber bereits bei deinem ersten Beispiel ist die Schrift eigentlich zu klein.

Einer der größten Kritikpunkte von Webseiten ist die zu geringe Schriftgröße. Ein Fehler, der eigentlich ganz einfach vermieden werden kann - und sollte.

Gruss

MrMurphy

[Evan]

Hallo,

Autsch. Ich erhalte zwar beim Aufruf der Seite eine Fehlermeldung, aber bereits bei deinem ersten Beispiel ist die Schrift eigentlich zu klein.

darum geht es hier jetzt wirklich nicht, da der Shop später ganz andere Schriftgrößen hat. Mir geht es hier erstmal nur um den Aufbau.

Habe mein Beispiel nochmals erweitert: http://codepen.io/anon/pen/QjPbrd

Das Telefon wird jetzt zwar angezeigt, allerdings darüber und nicht so wie ich gedacht habe vor dem ganzen Block. Muss ich hier doch mit einem div arbeiten?

UPDATE 12:02 Uhr:
So könnte es klappen, was meinst du dazu? http://codepen.io/anon/pen/QjPbrd

[Tabellenkalk]

Hallo,

UPDATE 12:02 Uhr:
So könnte es klappen, was meinst du dazu? http://codepen.io/anon/pen/QjPbrd

Bitte achte bei deinen Links darauf, dass am Ende kein http:// hingehört.

Was ist für dich ein Montagfreitag (oder in deiner Schreibweise Montag-Freitag)? Siehe dazu auch diesen Teilthread.

Gruß
Kalk

[Evan]

Hallo,

Bitte achte bei deinen Links darauf, dass am Ende kein http:// hingehört.

sorry habe ich erst jetzt gesehen. Wenn ich auf Link hinzufüge klicke, wird der Cursor vor das http:// gesetzt und ich drücke STRG+V ich achte in Zukunft darauf.

Was ist für dich ein Montagfreitag (oder in deiner Schreibweise Montag-Freitag)? Siehe dazu auch diesen Teilthread.

Danke, habe ich geändert: http://codepen.io/anon/pen/QjPbrd

[Tabellenkalk]

Hallo,

Danke, habe ich geändert:

geändert, aber nicht verstanden, oder? Das gleiche gilt für die Uhrzeiten.

Gruß
Kalk

[Evan]

Hallo,

geändert, aber nicht verstanden, oder? Das gleiche gilt für die Uhrzeiten.

beides geändert: http://codepen.io/anon/pen/QjPbrd und auch verstanden.
Der - ersetzt das Wort "bis" Denn es heißt ja auch, wir haben von 07:00 bis 24:00 Uhr geöffnet.

[Gunnar Bittersmann]

@@Evan

geändert, aber nicht verstanden, oder? Das gleiche gilt für die Uhrzeiten.

beides geändert: http://codepen.io/anon/pen/QjPbrd und auch verstanden.

Du hat auch verstanden, dass der Bis-Strich üblicherweise ohne Leerzeichen drumrum gesetzt wird?

Der - ersetzt das Wort "bis"

Nein, der –.

Denn es heißt ja auch, wir haben von 07:00 bis 24:00 Uhr geöffnet.

Daraus kann man nicht ableiten, dass beim Bis-Strich auch Leerzeichen stehen müssten.

LLAP 🖖

[Evan]

Hallo,

Daraus kann man nicht ableiten, dass beim Bis-Strich auch Leerzeichen stehen müssten.

wir müssen hier jetzt über irgendwelche "-" diskutieren? Ich persönlich finde ein Leerzeichen vor und nach dem - übersichtlicher.

Es gibt hier in Deutschland für alles irgendwelche Gesetzte und Vorgaben, müssen wir uns immer daran halten? Nein, müssen wir nicht und sollten wir auch nicht. Kein Wunder hängt Deutschland in vielen Sachen hinterher, weil immer als erst mit Gesetzte und Vorgaben geregelt werden muss. Schau mal nach Amerika, da heißt es "einfach machen" und es wird einfach gemacht. Was dabei entstehen kann sehen wir ja.

[Gunnar Bittersmann]

@@Evan

Schau mal nach Amerika, da heißt es "einfach machen" und es wird einfach gemacht. Was dabei entstehen kann sehen wir ja.

In Afghanistan, Irak, Syrien, …

LLAP 🖖

[Evan]

Hallo,

In Afghanistan, Irak, Syrien, …

ich gehe davon aus, du weißt genau was ich meine?

[Tabellenkalk]

Hallo,

Daraus kann man nicht ableiten, dass beim Bis-Strich auch Leerzeichen stehen müssten.

Doch? Imho kann man genau das daraus ableiten.

Gruß
Kalk

[Gunnar Bittersmann]

@@Tabellenkalk

Daraus kann man nicht ableiten, dass beim Bis-Strich auch Leerzeichen stehen müssten.

Doch? Imho kann man genau das daraus ableiten.

Kann man das?

Ein rechter Winkel hat 90 Grad.
Ein rechter Winkel hat 90°. (kein Leerzeichen zwischen Zahl und °-Zeichen)

Wasser gefriert bei 0 Grad Celsius.
Wasser gefriert bei 0 °C. (kein Leerzeichen zwischen ° und C)

Von strengem Frost spricht man bei Temperaturen unter minus 10 °C.
Von strengem Frost spricht man bei Temperaturen unter −10 °C. (kein Leerzeichen zwischen Minuszeichen und Zahl)

LLAP 🖖

[Tabellenkalk]

Hallo,

Kann man das?

Ich meine ja. Du hast da einige Ausnahmen einer Regel gefunden, und ich bin sicher, man findet weitere. Ich habe grad mal im Duden gestöbert, aber nichts zum Bis-Strich gefunden. Aber in den Vorbemerkungen zum Abschnitt "Getrennt- und Zusammenschreibung" steht im §2 "... wird davon ausgegangen, dass die getrennte Schreibung der Wörter der Normalfall ist" (Hervorhebung von mir).

Ich würde immer nur "bis" durch einen Strich ersetzen, niemals " bis ".

Gruß
Kalk

[Der Martin]

Mahlzeit,

Du hast da einige Ausnahmen einer Regel gefunden

ich würde hier nicht von einer Regel sprechen wollen, schon gar nicht von einer Regel. Es scheint vielmehr ein Merkmal zu sein, das unterschiedliche Regelwerke unterschiedlich behandeln. Gunnar hatte da ja schon was gefunden.

Ich habe grad mal im Duden gestöbert, aber nichts zum Bis-Strich gefunden. Aber in den Vorbemerkungen zum Abschnitt "Getrennt- und Zusammenschreibung" steht im §2 "... wird davon ausgegangen, dass die getrennte Schreibung der Wörter der Normalfall ist" (Hervorhebung von mir).

Schade, dass du's nicht direkt verlinkt hast, aber aus deinem Zitat folgere ich, dass es da eher um die Schreibweise zusammengesetzter Begriffe geht, die früher zusammengeschrieben wurden (z.B. angsterregend, energiesparend), nach der Rechtschreibdeform aber bevorzugt getrennt (Angst erregend, Energie sparend). Du bist also vermutlich auf einer ganz anderen Party gelandet.

Ich würde immer nur "bis" durch einen Strich ersetzen, niemals " bis ".

Ich würd's auch mit Leerzeichen schreiben. Abgesehen davon, dass ich als Symbol für "bis" im Sinne eines Bereichs keinen Strich, sondern zwei Punkte setze (07:00 .. 12:00 Uhr). Das ist eine Konvention, die ich vor allem bei Technikern und Ingenieuren schon häufig gesehen habe.

So long,
 Martin

[Tabellenkalk]

Hallo,

Schade, dass du's nicht direkt verlinkt hast, aber aus deinem Zitat folgere ich, dass es da eher um die Schreibweise zusammengesetzter Begriffe geht, die früher zusammengeschrieben wurden (z.B. angsterregend, energiesparend), nach der Rechtschreibdeform aber bevorzugt getrennt (Angst erregend, Energie sparend). Du bist also vermutlich auf einer ganz anderen Party gelandet.

Online hab ich es garnicht gefunden (bisher). Der Satz stammt aus der 22. Auflage des gedruckten Duden von (vermutlich) 2000. Auf welcher Party ich genau da gelandet bin? Weiß der Geier. Halt eine allgemeine Vorbemerkung zur Thematik.

Gruß
Kalk

[Gunnar Bittersmann]

@@MrMurphy1

Ich verwende Icon-Fonts, die ich mittels CSS "::before" einfüge.

Warum das keine so gute Idee ist, hatte ich schon erwähnt. Gern noch mal: Inline SVG vs Icon Fonts (Chris Coyier)

Im Gegensatz zu (Hintergrund-)Grafiken fransen die bei Vergrößerung nicht aus

SVG auch nicht.

und können auch besser per CSS gestaltet werden.

SVG noch besser.

LLAP 🖖

[Evan]

Hallo,

SVG noch besser.

dann müsste ich aber SVG Grafiken erstellen. Da ich kein Grafiker bin greife ich lieber auf fertige Icons zurück. Wenn später vielleicht SVG Grafiken vorliegen, sind diese leicht auszutauschen.

[Gunnar Bittersmann]

@@Evan

dann müsste ich aber SVG Grafiken erstellen.

Oder auf eine fertige Icon-Sammlung im SVG-Format zurückgreifen.

LLAP 🖖

[Gunnar Bittersmann]

@@Evan

dann müsste ich aber SVG Grafiken erstellen. Da ich kein Grafiker bin greife ich lieber auf fertige Icons zurück.

“If your framework told you to jump off a bridge, would you?” Seriously, Don’t Use Icon Fonts

LLAP 🖖

[MudGuard]

Hi,

Ein DIV [...] Ein weiteres DIV [...] Pro Bereich Ein weiteres Div welches mit zwei DIVs unterteilt ist, [...] Ein DIV [...] Nun wieder ein DIV welches zwei DIVS beinhaltet

Bin ich damit auf dem richtigen Weg?

nur, wenn Du ins Divirium Tremens fallen willst ...

Wie's besser geht, wurde ja schon gesagt ...

cu,
Andreas a/k/a MudGuard

[Evan]

Hallo,

nur, wenn Du ins Divirium Tremens fallen willst ...

Wie's besser geht, wurde ja schon gesagt ...

von den ganzen divs bin ich schon längst weg, wie du hier sehen kannst: http://codepen.io/anon/pen/QjPbrd

[Evan]

Hallo,

ich bin eigentlich am Ziel wenn nicht der unschöne Border-Radius oben links und rechts wäre:

http://codepen.io/anon/pen/QjPbrd

Wie könnte ich dieses Problem noch lösen?

[Tabellenkalk]

Hallo,

ich bin eigentlich am Ziel wenn nicht der unschöne Border-Radius oben links und rechts wäre:

Mir scheint, da wird (zumindest bei mir im FF) die border-width mit eingerechnet. Entweder den Radius außen auf 6px erhöhen oder innen auf 4px verringern.

Gruß
Kalk

[Evan]

Hallo,

Mir scheint, da wird (zumindest bei mir im FF) die border-width mit eingerechnet. Entweder den Radius außen auf 6px erhöhen oder innen auf 4px verringern.

danke für den Hinweis, habe ich geändert. Ich denke so kann ich es lassen:

http://codepen.io/anon/pen/QjPbrd

[Evan]

Hallo,

ist es möglich einem "border" eine Länge mitzugeben?

http://codepen.io/anon/pen/QjPbrd

Derzeit ist es ja so, dass mein Border über die ganze Breite geht. Ich würde links und rechts gerne ein bisschen Abstand haben.

[Auge]

Hallo

ist es möglich einem "border" eine Länge mitzugeben?

Der Rand ist der eines Elements. Du kannst die Länge des Randes nur über die Dimension des Elements beeinflussen.

http://codepen.io/anon/pen/QjPbrd

Derzeit ist es ja so, dass mein Border über die ganze Breite geht. Ich würde links und rechts gerne ein bisschen Abstand haben.

Es geht um die Linie oberhalb der Überschrift „Rücksendung“? Dann benutze hr statt des Borders. Deren Länge kannst du selbst festlegen und damit natürlich auch die sichtbare Länge des Borders von hr beeinflussen.

siehe auch SelfHTML: hr

Tschö, Auge

[Evan]

Hallo,

Es geht um die Linie oberhalb der Überschrift „Rücksendung“? Dann benutze hr statt des Borders. Deren Länge kannst du selbst festlegen und damit natürlich auch die sichtbare Länge des Borders von hr beeinflussen.

siehe auch SelfHTML: hr

genau, es geht um die Linie oberhalb von "Rücksendungen an" Danke, ich werde es mit einer <hr> Linie versuchen.

[Evan]

Hallo,

danke mit einer hr Linie klappt es: http://codepen.io/anon/pen/QjPbrd

Irgendwie kommen mir die 1px sehr "dick" vor, kann aber auch sein, es liegt an meinem Bildschirm. Weniger wie 1px geht ja nicht, richtig?

[MrMurphy1]

Hallo,

ich frage mich wann du merkst das korrekt angewandter, semantisch sinnvoller, Quelltext in der Regel nur Vorteile hat.

Das hr-Element gehört dort nicht hin. Zumal Kindelemente eines ul-Elements nur li-Elemente sein dürfen.

Und wie kommst du auf den Trichter, dass hr-Element sei in deinem Fall nur 1px hoch? border oben und unten sind bereits 2px.

Das CSS zum hr-Element ist auch grenzwertig - freundlich ausgedrückt.

Ein border-top des letzten li-Elements anstatt des hr-Elements wäre sinnvoller.

Gruss

MrMurphy

[Evan]

Hallo,

ich frage mich wann du merkst das korrekt angewandter, semantisch sinnvoller, Quelltext in der Regel nur Vorteile hat.

semantisch hin, semantisch her wer hat davon etwas? Für mich muss eine Seite funktionieren, mir ist es ehrlich gesagt ganz egal was Google und Co davon halten. Auch habe ich heute erfahren, dass jede Webseite auch noch komplett mit divs möglich sind, man muss kein section und co einsetzten um eine funktionierende Webseite zu haben.

Ein border-top des letzten li-Elements anstatt des hr-Elements wäre sinnvoller.

Kannst du auch lesen oder nur meckern? Wenn lesen, dann hätte dir auffallen müssen dass ich genau dieses hatte, bevor Auge mir vorgeschlagen hat, ein he zu nehmen, da ich dieses auf eine Länge begrenzen kann.

[Gunnar Bittersmann]

@@Evan

ich frage mich wann du merkst das korrekt angewandter, semantisch sinnvoller, Quelltext in der Regel nur Vorteile hat.

semantisch hin, semantisch her wer hat davon etwas?

Nutzer. Besonders diejenigen, die die Seite nicht visuell wahrnehmen.

Für mich muss eine Seite funktionieren,

Sinnvolles Markup ist die Grundlage einer funktionierenden Seite.

mir ist es ehrlich gesagt ganz egal was Google und Co davon halten.

Das ist mal eine gesunde Einstellung zu SEO. Und wenn eine Seite für Nutzer gut ist, wird sie auch gut für Suchmaschinen sein.

Auch habe ich heute erfahren, dass jede Webseite auch noch komplett mit divs möglich sind, man muss kein section und co einsetzten um eine funktionierende Webseite zu haben.

Die Seite mag dann so aussehen wie eine funktionierende, aber sie funktioniert nicht so.

Ein border-top des letzten li-Elements anstatt des hr-Elements wäre sinnvoller.

Kannst du auch lesen oder nur meckern? Wenn lesen, dann hätte dir auffallen müssen dass ich genau dieses hatte, bevor Auge mir vorgeschlagen hat, ein he zu nehmen, da ich dieses auf eine Länge begrenzen kann.

[Fortsetzung folgt gleich hier]

LLAP 🖖

[Evan]

Hallo,

Nutzer. Besonders diejenigen, die die Seite nicht visuell wahrnehmen.

über irgendwelche Screenreader müssen wir uns hier wirklich nicht unterhalten, denn dieses war a) nicht die Frage und b) glaub mir solche Menschen würden auf dieser Beispielseite nicht einkaufen, denn hier geht es um Farben und ich wüsste nicht, dass Blinde Farben kaufen. Aber wie gesagt auf diese Zielgruppe nehme ich derzeit keine Rücksicht, genauso wenig auf Menschen die meinen den ganzen Tag mit einem Handy unterwegs sein müssen (meine Meinung).

Sinnvolles Markup ist die Grundlage einer funktionierenden Seite.

Sinnvoll für eine Suchmaschine oder für den "normalen" User, dem es in der Regel total egal ist ob eine Seite semantisch richtig aufgebaut ist oder nicht?. Für mich als Inhaber ist es auch egal, Hauptsache der Umsatz stimmt ende vom Monat?

Das ist mal eine gesunde Einstellung zu SEO. Und wenn eine Seite für Nutzer gut ist, wird sie auch gut für Suchmaschinen sein.

Siehst du und einer Suchmaschine ist es egal ob eine Seite mit divs oder Tabellen aufgebaut ist. Schau dir die Ergebnisse bei Google und Co an.

Die Seite mag dann so aussehen wie eine funktionierende, aber sie funktioniert nicht so.

Sag wer?

[Gunnar Bittersmann]

@@Evan

über irgendwelche Screenreader müssen wir uns hier wirklich nicht unterhalten, denn dieses war a) nicht die Frage und b) glaub mir solche Menschen würden auf dieser Beispielseite nicht einkaufen, denn hier geht es um Farben und ich wüsste nicht, dass Blinde Farben kaufen.

Was Blinde im Web tun und lassen, das überlass mal denen. Es ist nicht deine Aufgabe, irgendjemanden an der Nutzung des Webs zu hindern.

Aber wie gesagt auf diese Zielgruppe nehme ich derzeit keine Rücksicht

Derzeit? Es ist weitaus einfacher, Barrierefreiheit nicht am Anfang auszuschließen als sie später hinzuzufügen.

genauso wenig auf Menschen die meinen den ganzen Tag mit einem Handy unterwegs sein müssen (meine Meinung).

Manche müssen das, weil sie gar kein anderes Gerät als ein Handy haben, um im Web unterwegs zu sein. Tendenz steigend.

Willst du heute Webseiten für morgen bauen oder für gestern?

Die Seite mag dann so aussehen wie eine funktionierende, aber sie funktioniert nicht so.

Sag wer?

Ich. Das sollte genügen dir zu denken geben.

LLAP 🖖

[Evan]

Hallo,

Was Blinde im Web tun und lassen, das überlass mal denen. Es ist nicht deine Aufgabe, irgendjemanden an der Nutzung des Webs zu hindern.

klar, aber ich entwickel doch eine Webseite für eine Zielgruppe und optimiere diese auch dahin? Kinder z.B. haben auf meiner Seite nichts zu suchen, denn diese dürfen vom Gesetzt nichts online kaufen, also kann ich dieses total vernachlässigen. Behinderte (Sehbehinderte) sehen kaum etwas bzw. sehen gar nichts, also könnte ich für diese Menschen auch eine S/W Seite machen, will ich aber nicht. Ich habe eine ganz spezielle Zielgruppe im Auge.

Derzeit? Es ist weitaus einfacher, Barrierefreiheit nicht am Anfang auszuschließen als sie später hinzuzufügen.

Klar wäre dieses schön, aber ist es nicht sinnvoll eine Seite erstmal online zu bringen, zu schauen ob das Produkt überhaupt angenommen wird und dann die Seite dementsprechend zu optimieren, wenn man verlässliche Daten hat?

Manche müssen das, weil sie gar kein anderes Gerät als ein Handy haben, um im Web unterwegs zu sein. Tendenz steigend.

Bestellen diese denn auch Online? Mir persönlich wäre dieses zu anstregend. Wer hat heutzutage kein Rechner? Ich kenne niemanden.

Willst du heute Webseiten für morgen bauen oder für gestern?

Weder noch, diese soll jetzt funktionieren um damit Geld zu machen.

Ich. Das sollte genügen dir zu denken geben.

Nur weil du das sagst? Sorry da sind mir schon ganz andere gekommen, unter anderem unser Lehrer. Als ich ihn gefragt habe, kannst du es belegen, bekam ich keine Antwort, deshalb auch an dich die Frage, kannst du deine Aussage belegen, oder kannst du in die Zukunft schauen?

[Gunnar Bittersmann]

@@Evan

Derzeit? Es ist weitaus einfacher, Barrierefreiheit nicht am Anfang auszuschließen als sie später hinzuzufügen.

Klar wäre dieses schön, aber ist es nicht sinnvoll eine Seite erstmal online zu bringen, zu schauen ob das Produkt überhaupt angenommen wird und dann die Seite dementsprechend zu optimieren, wenn man verlässliche Daten hat?

Ja, aber. Man kann eine Seite auch gleich richtig bauen, wenn es keinen Mehraufwand bedeutet – außer im Vorfeld mal nachzudenken.

Manche müssen das, weil sie gar kein anderes Gerät als ein Handy haben, um im Web unterwegs zu sein. Tendenz steigend.

Bestellen diese denn auch Online?

Definitiv. Und zwar bei den Webshops, die das ermöglichen. Wenn’s die eigene Website nicht hergibt, dann bestellen sie einen Click weiter bei der Konkurrenz.

Wer hat heutzutage kein Rechner? Ich kenne niemanden.

Wer nicht genug Geld für ein Smartphone und einen PC/Laptop hat, wird sich für ein Gerät entscheiden müssen. Vermutlich für ersteres.

Und bei denen, die sich beides leisten können: Wer hat heutzutage immer den PC/Laptop dabei?

LLAP 🖖

[Der Martin]

Hallo,

Wer nicht genug Geld für ein Smartphone und einen PC/Laptop hat, wird sich für ein Gerät entscheiden müssen. Vermutlich für ersteres.

warum eigentlich? Ich könnte mir zwar beides leisten, halte aber ein Smartphone plus den dazu notwendigen Tarif immer noch für rausgeschmissenes Geld. Wer will denn immer und überall unterwegs online sein? Anscheinend eine Menge Leute. Ich will es jedenfalls nicht, auch wenn ich nicht bestreite, dass es hier und da Situationen gibt, in denen das praktisch wäre.
Wenn eine solche Situation vorhersehbar ist, habe ich eventuell mein Notebook dabei. Vielleicht aber auch nicht. Dann muss das Internet eben warten, bis ich wieder zuhause bin.

Und bei denen, die sich beides leisten können: Wer hat heutzutage immer den PC/Laptop dabei?

Wozu? :-)

So long,
 Martin

[Auge]

Hallo

Wer nicht genug Geld für ein Smartphone und einen PC/Laptop hat, wird sich für ein Gerät entscheiden müssen. Vermutlich für ersteres.

warum eigentlich? Ich könnte mir zwar beides leisten, halte aber ein Smartphone plus den dazu notwendigen Tarif immer noch für rausgeschmissenes Geld.

Wer nichts entwickelt und/oder keine aufwendige Datenverarbeitung betreibt, sondern ein Gerät nur zum surfen, lesen, Filme gucken oder Musik hören braucht, braucht heutzutage keinen PC oder kein Notebook. Das Smartphone oder bestenfalls noch Tablet reichen dafür völlig aus.

Es stellt sich für viele Nutzer also viel eher die Frage, wozu noch ein Laptop oder gar ein PC?

Tschö, Auge

[Gunnar Bittersmann]

@@Der Martin

Wer will denn immer und überall unterwegs online sein?

Ich will.

dass es hier und da Situationen gibt, in denen das praktisch wäre.

Ich find’s z.B. praktisch, Stadtplan/Navi in der Tasche zu haben.

Dann muss das Internet eben warten, bis ich wieder zuhause bin.

Ich will nicht nach Hause, um ins Internet zu kommen. Mal schreibe ich direkt von und über Konferenzen, Kulturveranstaltungen, … Mal sitze ich im Café oder irgendwo draußen im Park.

Manchmal habe ich das Laptop dabei, was über Kabel oder WLAN mit dem Smartphone verbunden ist, welches als Hotspot dient und über Mobilfunk die Verbindung zum Internet herstellt. Ich hab also bei desktop-großem Viewport eine 3G- oder EDGE-Verbindung. Ein anderes Mal nutze ich das Smartphone, was in einem WLAN mit DSL-Anbindung hängt.

Das nur für diejenigen, die denken, es gäbe irgendeinen Zusammenhang zwischen Viewportgröße und Bandbreite. (Die Korrelation mag minimal größer als 0 sein, aber weit entfernt von 1. Sehr weit.)

Und bei denen, die sich beides leisten können: Wer hat heutzutage immer den PC/Laptop dabei?

Wozu? :-)

Eben. Man sollte so ziemlich alles, was man am PC/Laptop erledigen kann, auch mit dem Smartphone erledigen können. Kann man das nicht, haben Produktmanager, Designer und/oder Entwickler versagt.

LLAP 🖖

[marctrix]

Hej Evan,

Nutzer. Besonders diejenigen, die die Seite nicht visuell wahrnehmen.

über irgendwelche Screenreader müssen wir uns hier wirklich nicht unterhalten,

Tun wir aber ;-)

denn dieses war a) nicht die Frage und b) glaub mir solche Menschen würden auf dieser Beispielseite nicht einkaufen, denn hier geht es um Farben und ich wüsste nicht, dass Blinde Farben kaufen.

Dass du es nicht weißt, hält die Blinden aber nicht davon ab!

Aber wie gesagt auf diese Zielgruppe nehme ich derzeit keine Rücksicht,

Rücksichtslosigkeit ist der schnellste Weg in die Bedeutungslosigkeit.

genauso wenig auf Menschen die meinen den ganzen Tag mit einem Handy unterwegs sein müssen (meine Meinung).

Immerhin 56% der Deutschen möchtest du keine Farben verkaufen (plus Screenreader-Nutzern). Um dann bei google auch noch schlecht gefunden zu werden und weitere Besucher zu verlieren? Interessante Herangehensweise. Gut, dass du kein echtes Geschäft führst. Die Angestellten wären wohl bald arbeitslos...

Sinnvolles Markup ist die Grundlage einer funktionierenden Seite.

Sinnvoll für eine Suchmaschine oder für den "normalen" User, dem es in der Regel total egal ist ob eine Seite semantisch richtig aufgebaut ist oder nicht?

Es ist ihm nicht egal. Er weiß es nur nicht, weil alles funktioniert, wie es soll...

Zumal du ja auch auf die Bedürfnisse des Nutzers nicht eingehst, wenn du es dir einfach machst mit der Begründung: so doof werden die schon nicht sein...

Für mich als Inhaber ist es auch egal, Hauptsache der Umsatz stimmt ende vom Monat?

Wird er aber nicht!

Das ist mal eine gesunde Einstellung zu SEO. Und wenn eine Seite für Nutzer gut ist, wird sie auch gut für Suchmaschinen sein.

Siehst du und einer Suchmaschine ist es egal ob eine Seite mit divs oder Tabellen aufgebaut ist. Schau dir die Ergebnisse bei Google und Co an.

Seiten mit Tabellen sind groß, langsam und nicht für responsives Design geeignet - und damit schlecht für Handys nutzbar.

google wertet das alles negativ! Es ist also der Suchmaschine nicht egal!

Die Seite mag dann so aussehen wie eine funktionierende, aber sie funktioniert nicht so.

Sag wer?

Fachleute...

Marc

[Gunnar Bittersmann]

@@Evan

Ein border-top des letzten li-Elements anstatt des hr-Elements wäre sinnvoller.

Kannst du auch lesen oder nur meckern? Wenn lesen, dann hätte dir auffallen müssen dass ich genau dieses hatte, bevor Auge mir vorgeschlagen hat, ein he zu nehmen, da ich dieses auf eine Länge begrenzen kann.

Sagte Auge denn was davon, dass du das hr-Element zwischen die li-Elemente tun solltest? ;-)

Innerhalb eines li-Elements würde es von HTML aus erlaubt sein; macht aber dann keinen Sinn.

Für mich macht die ganze Liste keinen Sinn, aber das sagte ich ja bereits.

Du kannst die Liste vor dem hr beenden, danach kommt „Rücksendungen an“ als Überschrift h3.

LLAP 🖖

[Evan]

Hallo,

Sagte Auge denn was davon, dass du das hr-Element zwischen die li-Elemente tun solltest? ;-)

Nein :) Ich bezog mich auf die Aussage ich hätte lieber dem letzten li ein Border geben sollen. Dieses hatte ich versucht hat zwar geklappt, ich war dann aber nicht in der Lage zu sagen, ich möchte Links und Rechts ein wenig Abstand zum Rand haben.

Innerhalb eines li-Elements würde es von HTML aus erlaubt sein; macht aber dann keinen Sinn.

Wenn es also erlaubt ist, dann frage ich mich, warum nochmals umbauen? Macht für mich wenig sinn. Wenn etwas erlaubt ist, dann lass ich es so, ist ja nur doppelte Arbeit für mich.

Für mich macht die ganze Liste keinen Sinn, aber das sagte ich ja bereits.

Dann hätte ich alles nochmals umbauen müssen und ul li lassen sich einfach schön stylen.

Du kannst die Liste vor dem hr beenden, danach kommt „Rücksendungen an“ als Überschrift h3.

Dann beende ich erst eine Liste mach das hr rein und fange dann nach der Überschrift wieder eine Liste an. Viel zu umständlich, da du ja selber gerade gesagt hast, von HTML Sicht ist es erlaubt.

[Gunnar Bittersmann]

@@Evan

Irgendwie kommen mir die 1px sehr "dick" vor, kann aber auch sein, es liegt an meinem Bildschirm. Weniger wie 1px geht ja nicht, richtig?

Wie kommst du darauf, dass du bei border: 1px solid #FFF eine 1 Pixel dicke Linie erhalten würdest?

1px oben, 1px rechts, 1 px unten, 1px links.

LLAP 🖖

[Evan]

Hallo,

Wie kommst du darauf, dass du bei border: 1px solid #FFF eine 1 Pixel dicke Linie erhalten würdest? 1px oben, 1px rechts, 1 px unten, 1px links.

ist mir jetzt auch egal, ich habe eine schöne gestylte Grafik genommen, die ist hauch dünn und hat sogar noch einen schönen Verlauf nach links und rechts.

[Gunnar Bittersmann]

@@Evan

ist mir jetzt auch egal, ich habe eine schöne gestylte Grafik genommen, die ist hauch dünn und hat sogar noch einen schönen Verlauf nach links und rechts.

Was man mit einer Zeile CSS hinbekommt (linear-gradient). Aber du willst ja unbedingt auf dem Stand von gestern verharren.

LLAP 🖖

[Matthias Apsel]

Hallo Auge,

ist es möglich einem "border" eine Länge mitzugeben?

Der Rand ist der eines Elements. Du kannst die Länge des Randes nur über die Dimension des Elements beeinflussen.

Es gibt box-shadow-Spielereien, falls man das möchte.

Bis demnächst
Matthias

[Evan]

Hallo,

danke für die Hilfe und der ganzen Diskussion. Für mich hat sich diese allerdings erledigt. Ihr dürft natürlich gerne weiterdiskutieren ;-) aber bitte erwartet nicht, dass ich auf alles Antworte. A) verstehe ich vieles nicht bzw. ihr habt andere Vorstellungen, ihr kennt natürlich auch nicht den kompletten Hintergrund und B) haben wir leider oder zum Glück ein paar Vorgeben an diese wir uns halten müssen.

[MrMurphy1]

Hallo

Das Problem ist dass du hier ganz schön rumspinnst.

Erst willst du uns die Seite als Schulaufgabe verkaufen. Aus deinen ersten Antworten mit den seltsamen Anforderungen des vermeintlichen Lehrers ging dann für mich schon hervor, dass du uns schlicht anlügst. Was sich jetzt offensichtlich bestätigt hast.

Als Verlust sehe zumindest ich deine Abwesenheit nicht an.

Gruss

MrMurphy

[Evan]

Hallo,

Erst willst du uns die Seite als Schulaufgabe verkaufen. Aus deinen ersten Antworten mit den seltsamen Anforderungen des vermeintlichen Lehrers ging dann für mich schon hervor, dass du uns schlicht anlügst. Was sich jetzt offensichtlich bestätigt hast.

wenn du meinst, es ist deine Meinung. Seltsamen Anforderungen vielleicht für dich, da du 0 Ahnung hast aber eine Klappe wie ein großer.

Als Verlust sehe zumindest ich deine Abwesenheit nicht an.

Deine Falschaussagen werde ich sehr vermissen. Du hast von scheinbar keine Ahnung willst aber überall mitreden. Lerne bitte HTML und CSS dann kannst du gerne weiter mit mir reden.

Dir würde ich Live gerne mal so richtig die Meinung geigen, du wärst so klein, du müsstest vom Teppich mit einem Fallschirm springen.

[Gunnar Bittersmann]

@@Evan

Lerne bitte HTML und CSS dann kannst du gerne weiter mit mir reden.

Als der, der hier seine Unkenntnisse von HTML und CSS zur Schau gestellt hat, hast du eine ganz schön große Klappe.

Das war noch privat, jetzt dienstlich:

Dir würde ich Live gerne mal so richtig die Meinung geigen, du wärst so klein, du müsstest vom Teppich mit einem Fallschirm springen.

Solche persönlichen Angriffe unterlässt du hier bitte.

LLAP 🖖

[Christian Kruse]

Hallo Gunnar,

Solche persönlichen Angriffe unterlässt du hier bitte.

Da hast du an der falschen Stelle und zu spät moderiert.

LG,
CK

[Evan]

Hallo,

Als der, der hier seine Unkenntnisse von HTML und CSS zur Schau gestellt hat, hast du eine ganz schön große Klappe.

warum? Er hat zweimal eine falsche Antwort gegeben, da ist es berechtig zu sagen er soll bitte bevor er irgendwelche Ratschläge gibt HTML und CSS zu lernen. Das machst du doch jeden Tag bei anderen hier im Forum.

Das war noch privat, jetzt dienstlich:

Ist mir doch egal! Ich sag was mir gefällt, wir haben in Deutschland zum Glück das recht auf freie Meinungsäußerung.

Solche persönlichen Angriffe unterlässt du hier bitte.

persönlichen Angriff wäre, wenn ich gesagt hätte du Arschloch, aber ich habe nur gesagt dir würde ich sehr gerne mal Live (persönlich) die Meinung sagen. Das ist etwas ganz normales im real Leben.

[Gunnar Bittersmann]

@@Evan

warum? Er hat zweimal eine falsche Antwort gegeben, da ist es berechtig zu sagen er soll bitte bevor er irgendwelche Ratschläge gibt HTML und CSS zu lernen. Das machst du doch jeden Tag bei anderen hier im Forum.

Ich glaube nicht, dass ich jemandem, der hier im Forum über längere Zeit schon gezeigt hat, dass er Ahnung von HTML und CSS hat, sage, dass er erstmal HTML und CSS zu lernen soll.

persönlichen Angriff wäre, wenn ich gesagt hätte du Arschloch, aber ich habe nur gesagt dir würde ich sehr gerne mal Live (persönlich) die Meinung sagen.

Das klang so, als würdest du das nicht mit Worten tun wollen, sondern mit Fäusten, Säbel oder Pistole.

LLAP 🖖

[Matthias Apsel]

Hallo MrMurphy1,

Das Problem ist dass du hier ganz schön rumspinnst.

Aus deinen ersten Antworten mit den seltsamen Anforderungen des vermeintlichen Lehrers ging dann für mich schon hervor, dass du uns schlicht anlügst.

Ja.

Bis demnächst
Matthias

[Evan]

Hallo,

Ja.

lüg doch nicht: https://forum.selfhtml.org/self/2015/nov/18/webseite-mit-html-und-css-umsetzten/1655177#m1655177

Du hast von der Schule / Ausbildung / Studium 0 Ahnung aber eine große Klappe.

[Matthias Apsel]

Hallo Evan,

Ja.

lüg doch nicht: https://forum.selfhtml.org/self/2015/nov/18/webseite-mit-html-und-css-umsetzten/1655177#m1655177

Warum bezichtigst du mich der Lüge?

Du hast von der Schule / Ausbildung / Studium 0 Ahnung aber eine große Klappe.

Aha.

Bis demnächst
Matthias

[JürgenB]

Hallo Matthias,

kann es sein, dass Sara eine neue Sockelpuppe hat?

Gruß Jürgen

[Camping_RIDER]

Aloha ;)

kann es sein, dass Sara eine neue Sockelpuppe hat?

Zumindest zeigt diese/dieser/dieses die exakt selben sprachlichen Auffälligkeiten, die mir schon bei ihrer letzten Sockenpuppe aufgefallen sind. Unverständlich ist mir nach wie vor der immense Aufwand, der in diese fingierten Fragen gesteckt wird.

Grüße,

RIDER

[JürgenB]

Hallo,

… Sockenpuppe …

die Stammposter sollten einfach auf solche (Nach-)Fragen nicht mehr eingehen.

Gruß Jürgen

[Gunnar Bittersmann]

@@Camping_RIDER

Unverständlich ist mir nach wie vor der immense Aufwand, der in diese fingierten Fragen gesteckt wird.

Am Ende bist du es gar, der hier nicht nur immer diese Diskussionen anzettelt, sondern auch noch die Metadiskussionen über diese Diskussionen‽ 😱😎

LLAP 🖖

[Camping_RIDER]

Aloha ;)

Unverständlich ist mir nach wie vor der immense Aufwand, der in diese fingierten Fragen gesteckt wird.

Am Ende bist du es gar, der hier nicht nur immer diese Diskussionen anzettelt, sondern auch noch die Metadiskussionen über diese Diskussionen‽ 😱😎

Mist, erwischt... dabei wollte ich mich gerade noch drüber freuen, dass vielleicht jemand bereit ist, mit mir in die Metadiskussion bezüglich der Metadiskussion über die Diskussion einzusteigen ;)

Grüße,

RIDER

[Tabellenkalk]

Hallo,

Mist, erwischt... dabei wollte ich mich gerade noch drüber freuen, dass vielleicht jemand bereit ist, mit mir in die Metadiskussion bezüglich der Metadiskussion über die Diskussion einzusteigen ;)

OMMMMMMMM!

Gruß
Kalk