Bitte um Kritik & Verbesserungen

[LiveAndSmile]

Schaut euch bitte meinen Grundaufbau meiner neuen Website an: http://codepen.io/anon/pen/BQgrry

Dazu gleich noch eine Frage zum <header>. In diesem habe ich eine <h1> diese wird später mit meinem Logo versehen. Die Navigation sollte später daneben stehen. Wie auf diesem Bild zu sehen ist:

Wie kann ich diesen Aufbau erreichen?

[MrMurphy1]

Hallo

Wie kann ich diesen Aufbau erreichen?

Zum Beispiel zu diesem HTML

   <header class="pageheader">
      <a href="">
         <img src="http://lorempixel.com/250/90/food/5" alt="Logo">
      </a>
      <nav id="navigation" class="main-menu">
         <a href="">Testseite</a>
         <a href="">Testseite 2</a>
      </nav>
   </header>

dieses CSS

   @media all {
      body {
         padding: 0;
         margin: 0;
      }
      img {
         min-width: 0;
         display: block;
         max-width: 100%;
         border: 0;
      }
      header {
         background-color: blue;
         padding: 0.3rem;
      }
      nav a {
         color: black;
         text-decoration: none;
         outline: none;
         display: block;
         padding: 0.3rem;
      }
   }
   @media only screen and (min-width: 500px) {
      header {
         display: flex;
         align-items: center;
      }
      header>a {
         margin-right: auto;
      }
      header nav {
         display: flex;
         align-items: center;
      }
   }

Der Rest ist ohne Inhalt nur schwer zu beurteilen. Aus dem Bauch raus würde ich das aside-Element außerhalb des main-Elements setzen und auf überflüssige div verzichten.

Gruss

MrMurphy

[LiveAndSmile]

Guten Morgen,

Zum Beispiel zu diesem HTML

danke für dein Beispiel. Genau so habe ich es mir vorgestellt. Allerdings was passiert wenn flex nicht erkannt wird? Ich habe eher ältere User. Wäre es da nicht besser so wie ich es im Layout auch schon gemacht habe auf float:left zu setzen?

Der Rest ist ohne Inhalt nur schwer zu beurteilen. Aus dem Bauch raus würde ich das aside-Element außerhalb des main-Elements setzen und auf überflüssige div verzichten.

Die benötige ich, da der Header und Footer über die ganze Breite gehen soll deren Inhalt aber nicht. Das gleiche wird im main Bereich sein. Manche Bereiche gehe über die ganze Seite, mache haben eine maximale Breite.

[MrMurphy1]

Hallo

Allerdings was passiert wenn flex nicht erkannt wird?

Solche Fragen irritieren mich immer wieder. Warum probierst du es nicht einfach mal selbst aus wenn es dir wichtig ist? Aber bitte in einem Original-System, nicht in einem Emulator von neueren Browser-Versionen. Die funktionieren nämlich nicht wie die Originale.

Zudem geht die schlichte Rechnung "Auf Flexbox verzichten = die Seite funktioniert in älteren Browsern" nicht auf.

Ich habe eher ältere User.

Mal Abgesehen davon, dass ich dir das nicht glaube, verfügen grade ältere User über mehr Geld um sich aktuelle Hard- und Software zu leisten, was sie auch tun. Solche Angaben haben sich in der Praxis schon lange als das herausgestellt, was sie sind: Märchen.

Wäre es da nicht besser so wie ich es im Layout auch schon gemacht habe auf float:left zu setzen?

Nein. Wenn du ältere Broweser ohne sachlichen Grund unterstützen willst, haben die noch ganz andere Probleme. Die wirst du aber nicht erkennen, wenn du nicht selbst über solche alte Hard- und Software verfügst.

Du kannst deine Webseite natürlich so erstellen wie du möchtest. Mit deinem Vorgehen machst du dir aber viel Arbeit, von der deine Besucher nichts haben. Das ist also dann dein Privatvergnügen.

Es gibt keinen Grund heute auf Flexbox zu verzichten. Selbst Präfixe sind nicht mehr erforderlich.

Die Macher von Bootstrap, dem wohl bekanntesten Framework, haben zum Beispiel grade mitgeteilt, dass die neue Version Bootstrap 4 ganz auf Flexbox aufbaut und alte Techniken nicht mal als Fallback zum Einsatz kommen. Und denen kann man wohl kaum unterstellen, dass sie Flexbox aus Lust und Laune verwenden.

Meine Lösung für deinen header ist ohne Flexbox nur mit viel Trickserei annähernd möglich. Zumal ich noch gar nicht alle Möglichkeiten ausgespielt habe.

Ein Fallback mit Float ist technisch ohne weiteres möglich, da Flexbox-Angaben Float-Angaben vorgehen. Allerdings muss Float dann auch korrekt angewendet werden. Daran scheitern die meisten Webseitenersteller, da sie Float anwenden, ohne es wirklich verstanden zu haben. Solche Seiten werden dann meist schlechter angezeigt als Seiten mit einem einfachen Fallback ohne Float.

Die benötige ich, da der Header und Footer über die ganze Breite gehen soll deren Inhalt aber nicht. Das gleiche wird im main Bereich sein. Manche Bereiche gehe über die ganze Seite, mache haben eine maximale Breite.

Dafür brauchst du die unnötigen Container nicht.

Gruss

MrMurphy

[LiveAndSmile]

Hallo,

jetzt ein neuer Versuch mit Flex: http://codepen.io/anon/pen/mONJem besser?

[LiveAndSmile]

Hallo,

hab den ganzen Abend bisschen gebastelt, dass du siehst wie ich mir die Seite vorstelle: http://codepen.io/anon/pen/mONJem die ist noch nicht perfekt gefällt mir aber schon sehr gut.

Dass du siehst warum ich eigentlich die DIVs benötige, hier eine Beispielseite: http://www.mattgelb.de/

So stelle ich mir den Aufbau vor, oben die Navigation (nicht über die ganze Seite, allerdings der Hintergrund der Navigation darf über die ganze Seite. Dann sollte ein Bild kommen, welches über die ganze Seite geht.

Danach den Content Bereich, wie er bei mir jetzt auch ist, wieder nicht über die ganze Seite. Danach wieder ein Bild, welches über die ganze Seite geht, mit einem Text.

Danach nochmals ein Text Bereich, der wie der Einleitungstext nicht über die ganze Seite geht und zum Schluss der Footer der wieder über die ganze Seite gehen soll allerdings der Inhalt nicht.

Wie kann ich dieses ohne Divs realisieren? Du meintest ja es geht ohne.

[MrMurphy1]

Hallo

Es ist recht anstrengend dir helfen zu wollen, da du nur nach und nach mit immer weiteren Einzelheiten zu deiner Seite rausrückst.

Der Inhalt deiner Beispielseite passt auch nicht zu der verlinkten Vorbildseite und deiner Beschreibung. Zum Beispiel fehlen die beiden seitenbreiten Bilder.

Zudem kennen wir immer noch nicht den Inhalt der Seite. Ohne den Inhalt kann weder das korrekte HTML noch das Aussehen / Layout erstellt werden.

So kann ich nur raten und allgemeine Tipps geben, die im Endeffekt mangels der erforderlichen Infos falsch sein können.

Erschwerend kommt hinzu dass du meine Infos nicht richtig liest.

Wie kann ich dieses ohne Divs realisieren? Du meintest ja es geht ohne.

Nö. Ich schrieb

auf überflüssige div verzichten

und

Dafür brauchst du die unnötigen Container nicht

Das folgt der HTML-Regel, dass Inhalt und Aussehen so weit wie möglich getrennt werden sollen. Container, die nur wegen des Layouts eingefügt werden, sollen so weit wie möglich vermieden werden.

Das heißt praktisch: Zunächst wird der HTML-Quelltext im body-Bereich mit den dafür notwendigen Containern und Elementen erstellt.

Erst danach wird die Seite gestaltet. Dabei kann es natürlich erforderlich sein zusätzliche Container (dabei muss es sich aber nicht unbedingt um div handeln) einzufügen. Dies sollte aber nur geschehen wenn es erforderlich ist, nicht weil eine Lösung damit zunächst einfacher erscheint. Um das zu entscheiden muss der Webseitenersteller natürlich über ein Grundwissen von HTML und CSS verfügen.

Die Gleichung "Ich weiß nichts, will aber trotzdem eine gute Webseite erstellen" geht nicht auf.

Ähnliches gilt für Bilder. Bei jedem Bild sollte kritisch hinterfragt werden, ob es überhaupt erforderlich ist. Anfänger wollen mit Bildern häufig ihre Seite verschönern und merken dabei nicht, das ihre Besucher die überhaupt nicht wollen. Zum einen werden die Ladezeiten und der Traffic vergrößert, grade wenn Bilder "über die gesamte Seitenbreite" gehen sollen. Zum anderen erschweren Schmuckbilder das Auffinden der relevanten Informationen.

Zudem wird häufig nicht bedacht, wie die Bilder auf kleinen Bildschirmen aussehen. Grade große Bilder lassen sich dann häufig überhaupt nicht mehr erkennen.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy1

Erst danach wird die Seite gestaltet. Dabei kann es natürlich erforderlich sein zusätzliche Container (dabei muss es sich aber nicht unbedingt um div handeln) einzufügen.

Wenn man vernünftiges™ Markup erstellt hat, sollte das nicht erforderlich sein. Insbesondere, wenn es sich nicht um div handelt. main, header, footer, section etc. sollten schon vorhanden sein, nicht nachträglich eingefügt werden. Nicht nur im Hinblick auf Styling, sondern auch im Hinblick auf inclusive design (Barrierefreiheit).

LLAP 🖖

[LiveAndSmile]

Hallo,

Es ist recht anstrengend dir helfen zu wollen, da du nur nach und nach mit immer weiteren Einzelheiten zu deiner Seite rausrückst.

Das mache ich 100% nicht mit absicht, das liegt mehr daran, dass ich einfach noch nicht weiß wo wie was plaziert wird. Ich schau mir andere Seite an und denke, mensch so könntest du es auch plazieren.

Der Inhalt deiner Beispielseite passt auch nicht zu der verlinkten Vorbildseite und deiner Beschreibung. Zum Beispiel fehlen die beiden seitenbreiten Bilder.

Das liegt daran, dass ich ebe noch nicht weiß wie ich dieses einbauen soll. Z.B. soll ein großes Bild welches über die ganze Seite geht plaziert werden, kann ich aber derzeit schlecht machen, da ich ja auf das DIV verzeichen soll, welches um die ganze Seite geht. Also habe ich dem body die größe gegeben, was meiner Meinung nach falsch ist. Gunnar meinte allerdings man kann auf das DIV komplett verzichten. Keine Ahnung wie ich es dann rein bekommen soll. Das gleiche gilt überhalb vom Blog, auch hier soll ein Bild rein, welches über die ganze Seite geht. Darüber ein Text, der wieder eine bestimmte Breite haben soll.

Zudem kennen wir immer noch nicht den Inhalt der Seite. Ohne den Inhalt kann weder das korrekte HTML noch das Aussehen / Layout erstellt werden.

Wie oben bereits geschrieben weiß ich diesen selber noch nicht zu 100% und zweitens werde ich diesen hier ganz bestimmt nicht veröffentlichen, da dieser von Google sonst als duplicate content gewertet wird, was tödlich für eine SEO Optimierung ist.

Ähnliches gilt für Bilder. Bei jedem Bild sollte kritisch hinterfragt werden, ob es überhaupt erforderlich ist. Anfänger wollen mit Bildern häufig ihre Seite verschönern und merken dabei nicht, das ihre Besucher die überhaupt nicht wollen. Zum einen werden die Ladezeiten und der Traffic vergrößert, grade wenn Bilder "über die gesamte Seitenbreite" gehen sollen. Zum anderen erschweren Schmuckbilder das Auffinden der relevanten Informationen.

Schau dir News Seiten an, warum arbeiten die immer mit größeren Bildern? Als Beispiel Bild.de die Bilder werden von Tag zu Tag größer (so meine Empfindung). Menschen kann man mit Emotionen locken und nicht mit viel Text, deshalb sin Bilder so wichtig. In meinem Beispiel, ein Blog ohne Titelbild kann man vergessen, wird nie einer grauf klicken. Diese habe ich bereits via Split Testing getestet.

[LiveAndSmile]

Hallo,

Ähnliches gilt für Bilder. Bei jedem Bild sollte kritisch hinterfragt werden, ob es überhaupt erforderlich ist. Anfänger wollen mit Bildern häufig ihre Seite verschönern und merken dabei nicht, das ihre Besucher die überhaupt nicht wollen. Zum einen werden die Ladezeiten und der Traffic vergrößert, grade wenn Bilder "über die gesamte Seitenbreite" gehen sollen. Zum anderen erschweren Schmuckbilder das Auffinden der relevanten Informationen.

ein sehr interessanter Beitrag zum Thema Bilder von Dr.Web:
https://www.drweb.de/magazin/darum-sind-bilder-wichtig-76910/

[Gunnar Bittersmann]

@@LiveAndSmile

jetzt ein neuer Versuch mit Flex: http://codepen.io/anon/pen/mONJem besser?

<div class="wrapper">

Das div ist überflüssig; es sind bereits genügend Containerelemente da.

<header class="site-header">

Wozu die Klasse? Aus der Stellung im DOM geht bereits hervor, dass das der Site-Header ist.

<a href=""><img src="http://lorempixel.com/250/90/food/5" alt="Logo"></a>

Hier könnte der Alternativtext auch angeben, wohin der Link führt.

<main class="site-main">

Wozu die Klasse? Da es nur ein main-Element gibt (laut W3C-Spec nur geben kann), ist klar, dass dies der Hauptinhalt ist.

<article class="preface">

Ohne Inhalt lässt sich nicht sagen, ob das article-Element hier richtig ist.

<figure class="blog-picture">

Nicht jedes Bild gehört in ein figure-Element. Und wozu die Klasse?

<aside class="site-aside">

Ohne Inhalt lässt sich nicht sagen, ob das aside-Element hier richtig ist. Wozu die Klasse?

---

Bei schmalem Viewport verschwindet die Navigation nach rechts aus dem Viewport raus. Du solltest dafür sorgen, dass sie im Viewport (unter dem Logo?) bleibt.

LLAP 🖖

[LiveAndSmile]

Hallo,

<div class="wrapper"> Das div ist überflüssig; es sind bereits genügend Containerelemente da.

Habe ich ersteinmal entfernt.

<header class="site-header"> Wozu die Klasse? Aus der Stellung im DOM geht bereits hervor, dass das der Site-Header ist.

Auch dieses Klasse habe ich entfernt. Ich dachte umso mehr Klassen umso "robuster" ist das Design.

<a href=""><img src="http://lorempixel.com/250/90/food/5" alt="Logo"></a> Hier könnte der Alternativtext auch angeben, wohin der Link führt.

Habe ich gemacht. Jetzt steht "Zurück zur Startseite"

<main class="site-main"> Wozu die Klasse? Da es nur ein main-Element gibt (laut W3C-Spec nur geben kann), ist klar, dass dies der Hauptinhalt ist.

Auch dieses Klasse habe ich wieder entfernt.

<article class="preface"> Ohne Inhalt lässt sich nicht sagen, ob das article-Element hier richtig ist.

Naja so recht kann ich es selber noch nicht sagen. Ich denke es wird eine Art "Einleitungstext" sein, wo ich mich kurz vorstelle. Dieser Platz könnte aber auch für Sonderaktionen genutzt werden.

<figure class="blog-picture"> Nicht jedes Bild gehört in ein figure-Element. Und wozu die Klasse?

Soll ich nur ein <img> nehmen?

<aside class="site-aside"> Ohne Inhalt lässt sich nicht sagen, ob das aside-Element hier richtig ist. Wozu die Klasse?

Naja aside darf es ja mehrere auf einer Seite geben? Dieser Platz möchte ich später für ein Bild oder für Boxen nehmen z.B. für Kontakt oder Besondere Hinweise.

Bei schmalem Viewport verschwindet die Navigation nach rechts aus dem Viewport raus. Du solltest dafür sorgen, dass sie im Viewport (unter dem Logo?) bleibt.

An der Navigation habe ich noch gar nichts gemacht. Ich möchte später dass die Navigation hinter einem Icon verschwindet wenn sie nicht mehr genügen Platz hat. Wird heute Abend oder morgen erledigt.

Die Änderungen habe ich auch auf http://codepen.io/anon/pen/mONJem aktualisiert.

[Gunnar Bittersmann]

@@LiveAndSmile

<a href=""><img src="http://lorempixel.com/250/90/food/5" alt="Logo"></a> Hier könnte der Alternativtext auch angeben, wohin der Link führt.

Habe ich gemacht. Jetzt steht "Zurück zur Startseite"

Ich sagte „auch“, ich meinte auch „auch“. Jetzt geht die Information verloren, dass es sich um das Logo handelt.

Wie wär’s mit „Logo – Link zurück zur Startseite“?

Ohne Inhalt lässt sich nicht sagen, ob das article-Element hier richtig ist.

Naja so recht kann ich es selber noch nicht sagen. Ich denke es wird eine Art "Einleitungstext" sein, wo ich mich kurz vorstelle.

Scheint mir kein article zu sein.

Nicht jedes Bild gehört in ein figure-Element.

Soll ich nur ein <img> nehmen?

Kommt drauf an.

Ohne Inhalt lässt sich nicht sagen, ob das aside-Element hier richtig ist. Wozu die Klasse?

Naja aside darf es ja mehrere auf einer Seite geben? Dieser Platz möchte ich später für ein Bild oder für Boxen nehmen z.B. für Kontakt oder Besondere Hinweise.

Kontakt gehört ehen in einen footer. aside und footer haben nichts damit zu tun, ob deren Inhalt daneben bzw. darunter plaziert ist.

Ich möchte später dass die Navigation hinter einem Icon verschwindet wenn sie nicht mehr genügen Platz hat. Wird heute Abend oder morgen erledigt.

Besser gar nicht. Hamburger-Icon war 2014. Inzwischen hat sich herumgesprochen, dass das Verstecken des Menüs keine so gute Idee ist. Es ist ausreichend Platz da, es anzuzeigen.

LLAP 🖖

[LiveAndSmile]

Hallo,

Besser gar nicht. Hamburger-Icon war 2014. Inzwischen hat sich herumgesprochen, dass das Verstecken des Menüs keine so gute Idee ist. Es ist ausreichend Platz da, es anzuzeigen.

wo passt diese Navigation denn unter das Logo? Nee das ist keine gute Idee. Oder meinst du jeden Punkt in eine Zeile und einfach alle untereinander anzeigen? Auch dieses finde ich keine gute Idee, denn da geht viel zu viel Platz verloren.

[Gunnar Bittersmann]

@@LiveAndSmile

Besser gar nicht. Hamburger-Icon war 2014. Inzwischen hat sich herumgesprochen, dass das Verstecken des Menüs keine so gute Idee ist. Es ist ausreichend Platz da, es anzuzeigen.

wo passt diese Navigation denn unter das Logo?

Bestens. Du hast 6 Items im Menü; die sollten in 2 Zeilen passen.

Nee das ist keine gute Idee.

Die Navigation zu verstecken ist keine gute Idee – noch dazu hinter einem Icon. Wenn, dann sollte der Button (zusätzlich) mit „Menü“ beschriftet sein.

denn da geht viel zu viel Platz verloren.

Auf Webseiten hast du allen Platz der Welt. Nutzer kennen das Konzept scrollen.

Das Konzept, das Navigationsmenü suchen zu müssen, weniger. Außerdem bedeutet das einen zusätzlichen Click.

---

Im Übrigen denke ich, dass du nur 5 Menüpunkte hast – kaum ein Nutzer interessiert sich für das Impressum. Es sollte demzufolge nicht in der Hauptnavigation stehen, sondern im Seitenfooter.

Oder gar nur 4: „Startseite“ und „Aktuelles“? Sollte das Aktuelle nicht auf der Startseite zu finden sein?

LLAP 🖖

[LiveAndSmile]

Hallo,

Bestens. Du hast 6 Items im Menü; die sollten in 2 Zeilen passen.

Ok, da hast du mich überzeugt. Ist es denn üblich auf einem kleinen Gerät eine Navigation in zwei Zeilen anzuzeigen? Und hast mir vielleicht eine Beispielsseite, die das so umsetzt? Möchte einfach mal sehen wie es auf dem Handy aussschaut und wie es zu bedienen ist.

Auf Webseiten hast du allen Platz der Welt. Nutzer kennen das Konzept scrollen.

Ist es für einen User nicht nervig ständig scrollen zu müssen?

Im Übrigen denke ich, dass du nur 5 Menüpunkte hast – kaum ein Nutzer interessiert sich für das Impressum. Es sollte demzufolge nicht in der Hauptnavigation stehen, sondern im Seitenfooter.

Impressum habe ich gegen Kontatk ausgetauscht. Dieser ist wichtiger und sollte ganz oben stehen?

Oder gar nur 4: „Startseite“ und „Aktuelles“? Sollte das Aktuelle nicht auf der Startseite zu finden sein?

Aktuelles könnte man auch in Blog umbenennen, denn dafür ist dieser Bereich da. Aktulles und Blog ist das gleiche. Auf der Startseite werden immer die 6 neuesten Ausgelesen im Bereich Blog werden dann alle angezeigt.

[Matthias Apsel]

Hallo LiveAndSmile,

Impressum habe ich gegen Kontatk ausgetauscht. Dieser ist wichtiger und sollte ganz oben stehen?

Imho haben Impressum und Kontakt dieselbe Wichtigkeit.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Imho haben Impressum und Kontakt dieselbe Wichtigkeit.

Sehe ich nicht so. „Kontakt“ ist für Nutzer, die eine E-Mail schicken wollen, eine Telefonnummer suchen, die Postadresse, eine Anfahrtskizze, vielleicht auch Geschäftszeiten/Öffnungszeiten …

„Impressum“ ist für Rechtsanwälte. Muss da sein, interessiert aber keinen weiter.

Was nochmal hat das Landgericht Hamburg entschieden? Gleich nochmal nachlesen. —kein Nutzer, jemals ;-)

LLAP 🖖

Nachtrag: Es kann durchaus vorkommen, dass „Kontakt“ und „Impressum“ auf einer Seite zu finden sind, die dann beide Funktionen übernimmt.

Muss aber nicht. Sollte vielleicht auch nicht, um Nutzer, die „Kontakt“ suchen, nicht mit Müll zu überfrachten.

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Imho haben Impressum und Kontakt dieselbe Wichtigkeit.

Sehe ich nicht so. „Kontakt“ ist für Nutzer, die eine E-Mail schicken wollen, eine Telefonnummer suchen, die Postadresse, eine Anfahrtskizze, vielleicht auch Geschäftszeiten/Öffnungszeiten …

Dennoch haben weder „Kontakt“ noch „Impressum“ direkt was mit dem Inhalt der Seite zu tun, Links zu diesen Seiten brauchen deshalb auch nicht in die Hauptnavigation, sollten mMn. eher in den (Seiten-)Footer. Wenn man an bestimmten Stellen explizit eine Kontaktmöglichkeit anbieten möchte, kann das auch direkt im Artikel oder auch in Main machen. Das wäre dann so ähnlich wie die Kommentare in einem Blog.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Dennoch haben weder „Kontakt“ noch „Impressum“ direkt was mit dem Inhalt der Seite zu tun, Links zu diesen Seiten brauchen deshalb auch nicht in die Hauptnavigation

Bei der Hauptnavigation geht es um den Inhalt der Website (mit zwei e).

Gehört „Kontakt“ zum Inhalt der Website? Vielleicht ja – insbesondere wenn Nutzer das in der Hauptnavigation vorzufinden gewohnt sind.

LLAP 🖖

[Gunnar Bittersmann]

@@LiveAndSmile

Bestens. Du hast 6 Items im Menü; die sollten in 2 Zeilen passen.

Ok, da hast du mich überzeugt. Ist es denn üblich auf einem kleinen Gerät eine Navigation in zwei Zeilen anzuzeigen? Und hast mir vielleicht eine Beispielsseite, die das so umsetzt? Möchte einfach mal sehen wie es auf dem Handy aussschaut und wie es zu bedienen ist.

Jeremy Keith (adactio) und Heydon Pickering (heydonworks) machen es so.

Bei Clearleft werden die Menüpunkte selbst mehrzeilig und passen nebeneinander. Bei Sara Soueidan sind die Menüpunkte immer untereinander.

Man kann aber feststellen, dass viele darüber schreiben, wie blöd Hamburger-Icons sind, sie aber trotzdem verwenden. ¯\(ツ)/¯

Smashing Magazine und The Paciello Group verwenden die Beschriftung „Menu“. Adrian Roselli bietet darüber hinaus auf schmalen Viewports eine interessante Menü-Variante.

---

Aktuelles könnte man auch in Blog umbenennen, denn dafür ist dieser Bereich da. Aktulles und Blog ist das gleiche. Auf der Startseite werden immer die 6 neuesten Ausgelesen im Bereich Blog werden dann alle angezeigt.

In getrennten Menüpunkten im Hauptmenü eine Auswahl bzw. alles anzuzeigen hört sich für mich nicht nach einem schlüssigen Konzept an. Man könnte das unter einem Menüpunkt zusammenfassen, dort die Auswahl (die neusten Artikel) anzeigen und dort die Übersicht aller Artikel bzw. einen Link dorthin anbieten.

LLAP 🖖

[LiveAndSmile]

Hallo,

Smashing Magazine und The Paciello Group verwenden die Beschriftung „Menu“. Adrian Roselli bietet darüber hinaus auf schmalen Viewports eine interessante Menü-Variante.

die Navigation von https://www.paciellogroup.com/ gefällt mir sehr gut auch wie sich das Icon wechselt. Allerdings weiß ich nicht wie dieses umgesetzt ist. Auch die aufgeklappte Navigation sieht richtig gut aus.

Kennst du zufällig ein deutsches Tutorial wo erklärt wie, wie ich so eine Navigation umsetzten kann?

[Gunnar Bittersmann]

@@LiveAndSmile

die Navigation von https://www.paciellogroup.com/ gefällt mir sehr gut auch wie sich das Icon wechselt. Allerdings weiß ich nicht wie dieses umgesetzt ist.

Ich hab das mal fix nachgebaut (und zwar ohne den ganzen Müll, den Bootcrap da mit reinschleppt).

Der Clou daran ist eigentlich nur der Button, der die Sichtbarkeit der Hauptnavigation steuert (und der deshalb das ARIA-Attribut aria-controls="main-nav" trägt). Der macht beim Anclicken nichts weiter als sein eigenes aria-expanded-Attribut umzuschalten, welches angibt, ob die Hauptnavigation zugeklappt oder offen ist. (Damit das Ganze auch ohne JavaScript bedienbar ist, ist die Hauptnavigation initial offen und wird erst mit JavaScript zugeklappt.)

Je nach Wert des aria-expanded-Attributs wird per CSS ein anderes Symbol im Button angezeigt. Das tatsächliche Ein- und Ausblenden der Hauptnavigation geschieht auch per CSS (Geschwisternselektor).

Aber das nur bei schmalen Viewports. Bei breiten Viewports ist die Navigation immer zu sehen (die Menüpunkte sind dann nebeneinander angeordnet); dafür ist der Button dann ausgeblendet.

Das ganze ist natürlich barrierefrei, also auch per Tastatur bedienbar. Damit erkennbar ist, welches Element gerade den Fokus hat, ist dieses genauso wie beim Hovern hervorgehoben. (:focus und :hover treten zusammen auf.)

Desweiteren gibt es noch einen Navigation-überspringen-Link zum Hauptinhalt.

Kennst du zufällig ein deutsches Tutorial wo erklärt wie, wie ich so eine Navigation umsetzten kann?

War das Tutorial genug?

LLAP 🖖

[LiveAndSmile]

Hallo,

hier ein Design-Aufbau welcher mir sehr gefällt: https://www.mollie.com/de/features jetzt seht ihr auch, was ich meine.

Wichtig ist mir die Farbliche Trennung von den Bereichen, welche über die ganze Breite geht. Und dass ich ein Bild nehmen den Text bekomme, dafür ist bei mir die Sidebar gedacht.