Flexbox Design

Optimale Umsetzung von responsive Webdesign

Das Flexbox-Modell gibt es schon lange, nur verwendete es niemand, da es von den Browsern nicht durchgängig umgesetzt wurde. Die widmeten sich im Zusammenhang mit responsive Design hauptsächlich  mit dem Floating-Modell. Was damit nicht ging, machte man nicht. Ein großer Fehler, denn das Flexbox-Modell kann weitaus mehr als das Floating-Modell.

Flexbox basiert rein auf CSS und hält die Seitenstruktur schlank. Flexbox ist ein wichtiger Baustein zu einem ausgezeichneten Verhältnis von Content : Quelltext. 

Da die Browser Flexbox unterschiedlich behandeln, ist ein bisschen Mehraufwand erforderlich, der sich aber innerhalb des Stylesheets und damit außerhalb des Quelltexts abspielt.

Flexbox - der äußere Rahmen

Im umfassenden Container werden folgende Attribute deklariert.

    1: display: -webkit-box; 
    2: display: -moz-box;   
    3: display: -ms-flexbox; 
    4: display: -webkit-flex; 
    5: display: flex;
    6: -webkit-flex-direction: row;
    7: flex-direction: row;
    8: flex-wrap: wrap;
    9; align-content:flex-start

Die Zeilen 1 bis 5 sind identisch, aber für die unterschiedlichen Browser erforderlich.

In Zeile 6 bzw. 7 wird die Anordnung der DIVs innerhalb des Containers festgelegt.
row = DIVs nebeneinander
col = DIVs untereinander

Zeile 8 legt fest, ob die DIVs erforderlichen Falls in die nächste Zeile/Spalte umbrechen.

nowrap = kein Umbruch (Grundeinstellung)
wrap  = Umbruch nach unten
wrap-reverse = Umbruch nach oben

Flexbox erlaubt es durch row oder cols die Inhaltsblöcke nebeneinander oder untereinander anzuordnen. 

Ideal für responsives Layout, denn zusammen mit Media-Query haben Sie nun die Möglichkeit mit extrem wenig CSS das Layout für PC und Smartphone anzupassen.

 

 

Flexbox: die Flexelemente

Die DIVs innerhalb des Flex-Containers können ebenfalls formatiert werden. Auch hier muss man den unterschiedlichen Browsern gerecht werden:

1:   box-flex: 1;
2:   -webkit-box-flex: 1;      
3:   -moz-box-flex: 1;   
4:   -webkit-flex: 1;
5:   -ms-flex: 1; 
6:   flex: 1;        
7:  -webkit-order: 2;

8:  order: 2;

In Zeile 1 bis 6 ist festgelegt, dass dieses DIV in der Breite flexibel ist. Es darf schmäler oder breiter sein. Mit min-width und max-width kann der Bewegungsspielraum eingegrenzt werden. Oder noch besser mit Media-Query.

Die Deklaration kann auch so aussehen:

flex: 2 1 50%;

Der erste Wert steht für die Breite, dieses DIV ist doppelt so breit wie die anderen. Die 1 steht für "darf kleiner werden" und die 50% legen fest, von welcher Basisbreite ausgegangen wird. Das ist praktisch die Unterkante.

Im Beispiel ist die Basis 50%, das DIV darf aber zusätzlich die doppelte Größe der anderen haben. 

Die Zeilen 8 und 8 sind sehr interessant, denn sie legen die Reihenfolge der DIVs innerhalb des Containers fest. Damit können Sie im Quelltext Container, die Sie aus suchmaschinenrelevanten Gründen am liebsten ganz oben stehen hätten auch ganz oben reinschreiben und mit order ganz unten (oder wo gewünscht) anzeigen.

 

Mit Flexbox bei Google auf die vorderen Plätze

Wenn Sie die absolute Geschäftsidee haben und die ganze Welt möchte sie kaufen, dann brauchen Sie sich über SEO nicht viele Gedanken machen, denn allein das gewaltige Suchaufkommen wird Ihre Seite nach oben katapultieren, dass Ihnen Hören und Sehen vergeht.

Aber solche Ideen sind eher selten. Meistens lautet die Aufgabe, dass die Website einer mehr oder weniger guten Firma außergewöhnlich gut gefunden werden soll. Dabei stehen Sie einem ordentlichen Feld an Mitbewerbern gegenüber.

Wie setzen Sie sich durch?

Als erstes geht es im Rahmen der SEO um die On-Page-Optimierung, also alle Schritte, die innerhalb der Seite, praktisch im Quelltext möglich sind. Ermitteln Sie möglichst wenig relevante Suchbegriffe. Schränken Sie das Feld so weit wie möglich ein. Ganz grob: zwei Suchbegriffe haben halb so viel Chancen wie einer. Verwenden Sie die Suchbegriffe so prominent wie möglich und so oft wie erträglich.

Content : Quelltext

Damit die Suchbegriffe möglichst viel Gewicht haben, spielt das Verhältnis Content : Quelltext eine große Rolle. Je größer der Anteil des Inhalts am gesamten Quelltext einer Seite ist, umso besser die Chancen.

Testen Sie das Verhältnis mit diesem Tool

Wie bekommt man den Müll aus dem Quelltext raus?

Wenn Sie eins der großen CMS-Systeme verwenden, haben Sie kaum Chancen, denn die sind für alle Eventualitäten vorbereitet und Sie müssen froh sein, wenn Sie bescheidene 20% schaffen. 

Ein gutes Verhältnis Content : Quelltext schaffen Sie nur, wenn Sie die Seite selbst aufbauen und wirklich nur das drin ist, was rein muss. Jedes JS und jede Style-Anweisung muss raus.

Jeder unnütze Verweis und jede unnötige Formatierung schadet Ihrem Erfolg.

Schaffen Sie weiteren Inhalt durch ALT-Tags bei Bildern und Title-Tags bei Links.

Fügen Sie die wichtigsten Informationen am Seitenanfang ein. Was weiter oben steht, findet auch Google wichtiger. Sie können die Anzeige ja mit Flexbox in anderer Reihenfolge festlegen.

Schauen Sie sich Ihren Quelltext an, dann wissen Sie, was Google finden wird, denn Google kennt nur Quelltext.

Dinosaurier müssen aussterben

Immer wieder findet man IFrames. Damit band man in prähistorischen Internetzeiten fremde Inhalte ein. Sofort raus damit, denn das bringt Ihrer Seite überhaupt nichts.

Tabellen waren auch mal net, taugen aber zur Seitenstrukturierung nicht mehr.

Linklisten auf andere Seiten: Bitte nur, wenn Sie davon was haben, sonst so schnell wie möglich raus aus der Seite.