Ein individuelles dreispaltiges responsive Design – ESO Seo goes responsive

neues responsive Design für psychic-so.de
neues responsive Design für psychic-so.de

Marcus Pentzek, der Psycho-Seo fragte mich an, ob ich seine Psychic-seo.de nicht responsive machen möchte und das Layout an das Google Analytics Design annähern könnt.

Dieser Tage ging das neue Layout online und es sind sicher noch Feinheiten zu ändern, denn viele Bereiche auf dieser Seite bieten die Möglichkeit WordPress Widgets zu nutzen und ich kann vorher nicht wissen, welche Marcus haben mag. So kommt es, dass er jetzt grade noch zwei Suchfelder direkt obereinander in der mobilen Ansicht hat. Diese beiden Suchfelder sind in der Desktop Ansicht wunderbar aufgeteilt, mobile ist einfach eine zuviel. Auch änderte er seine SocialButtons, daher muss auch da nachgebessert werden, weil SocialButtons entwickeln ihr Eigenleben, davon kann jeder WebDesigner sicher viele Geschichten erzählen :-).

Die Headernavigation muss mobile noch an seine neuen Buttons angepasst werden. Der weiße HoverEffekt, den er dort erzeugte ist mobile kaum lesbar. Und da Marcus derzeit in China daheim ist schläft er, wenn ich munter bin und umgekehrt.

Also dauert alles ein bisschen länger, dies macht aber nichts: Gut Ding mag Weile haben und dennoch zeige ich sie her, denn responsive Design hat eben seine Tücken.

mobile First oder Desktop First ein Layout planen

Es wird viel diskutiert, ob man die mobile Ansicht vor der Desktop Ansicht machen sollte oder umgekehrt. Für mich ist dies keine technische Frage, sondern eine der prinzipiellen Planung eines Layouts.

Ich teile im Kopf ein Layout in gestaltbare Sektionen auf – somit verlasse ich gedanklich die Fixierung auf große Designbereiche, sondern versuche soviel wie möglich kleine Sektionen mittels HTML und CSS Klassen zu erstellen, weil dies max. Flexibilität ermöglicht.

Ich fragte zb Marcus was er am Desktop haben mag und was er davon in welcher Reihenfolge bei den mobilen Ansichten sehen mag.
Erst dann beginne ich in meinem Kopf die „Sektionen“ des Layouts zu erstellen.
Herzeigen kann ich dies aber nur in zeitlicher Reihenfolge, im Kopf passiert dies gleichzeitig. D.h. ich denke nicht mobile First oder Desktop first, ich denke an ein Layout für alles.

die Anatomie des dreispaltigen Layouts

die Desktop Ansicht des dreispaltigen Layouts
die Desktop Ansicht des dreispaltigen Layouts

1. sichtbar sind drei Spalten technisch nur zwei
Sichbar ist, dass das derzeitige Layout auf psychic-seo.de ein dreispaltiges ist. Technisch ist es ein klassisches Header, Sidebar Inhalt, Footer Layout, also ein zweispaltiges. Bei dem sich die „Inhalt Spalte“ nochmals aufteilt.

Damit ist sichergestellt, dass der Inhaltsteil im Quelltext sofort nach dem sichtbaren Header erscheint.

2. Der sichtbare Header Bereich weist insgesamt 7 verschiedene Sektionen auf, die somit alle einzeln gestaltbar sind. Diese 7 Sektionen sind: Titel, Mitte Bild, Avatar, der zweispaltige Text, der in „span“ aufgeteilt wurde, die horizontale Button //Text Navigation und die Social Buttons.

3. Die Sidebar ist widgetfähig
Sowohl die Sidebar an sich wie jedes Widget, das Marcus nutzt wird zu einer gestaltbaren Sektion. Somit sehr flexibel in der Darstellung.

4. Der Bereich rechts neben der Sidebar teilt sich in fünf Sektionen auf.
Artikel, Werbung [widgetfähig], vorherige – nächste Seite Navi, Kommentare und dann noch die Sektion, die drei Boxen beinhaltet [widgetfähig].

5. Der sichtbare Footer bringt nochmals den Seitentitel und das „Coypright“.

so ändert sich die mobile Ansicht dieses Layouts

die Änderungen am responsive Layout in der mobilen Ansicht
die Änderungen am responsive Layout in der mobilen Ansicht

1. Änderungen im sichtbaren Header
Das Bild in der Mitte verschwindet, der zweizeilige Text wird einzeilig, die horizontale Navi zum MenuButton und auch die SocialLinks werden sehr oft „verrückt“.

2. Die Sektion „Werbung“ rutscht direkt unter dem Artikel und dann erst kommt die vorherige – nächste Seite Navi und alle anderen Sektionen.

Dazu musste ich den WordPress Loop aufteilen, weil sonst die Kommentarfunktion nicht richtig funktioniert und ich auch sonst zuwenig Möglichkeiten hätte das HTML und die CSS Klassen für das korrekt „untereinander Rutschen“ unterzubringen.

3. Die Sidebar kommt direkt vor dem sichtbaren Footer, somit als vorletzte in der Reihe.

Das GridSystem dahinter und ein Danke

Mein Dank geht an 34 Responsive Grid System by Kemal Yılmaz. Ich hab viele GridSysteme bereits getestet, ich komme mit diesem einfach am besten zurecht. Die Benennung der CSS Klassen ist für mich nachvollziehbar und verbraucht relativ wenig Zeichen im HTML.
Es ist stabil, liefert mir die Möglichkeite rechte Spalten nach linken Spalten im Quelltext anzuzeigen und das bieten nicht alle an. Liefert auch wichtiges für die mediaQueries und IEs kleiner IE9.

Außerdem kann ich es mir zusammenstellen wie ich es grade brauche. Hier entschied ich mich für ein 9-spaltiges Grid mit 1.5% margin links und rechts. Die maximale LayoutBreite sind 1200 px und die media queries setze ich nach „hier bricht das Design“. 🙂

Besonderheiten in diesem WP Theme sind außerdem noch

Artikel und Seiten Navigation
Artikel und Seiten Navigation

1. Seiten – Artikel Navigation

Vorheriger nächster Beitrag ist bei WP bekannt, hier gibts dasselbe auch für statische Seiten und zwar für alle Seiten nicht nur für Unterseiten zur Hauptseite.

Quicktags in WordPress
Quicktags in WordPress

2. Es gibt einige Quicktags für Marcus, damit er zb seine Startseite in Sektionen /Spalten aufteilen kann wie er möchte.

3. Außerdem weiß ich, dass Marcus gerne auch in den Templates selbst was ändern macht und dies meist mittels WP Design Editor habe ich ihm die Anzeige der Theme Templates soweit es mir möglich ist geschlichtet. Wie ich dies tat beschrieb ich hier auf der Texto.de.

Design Spielereien

Marcus wollte soviel Annäherung an Google wie möglich und so spielte ich mich mit Rahmen und HoverEffekten.

Rahmenfarben beim mobilen Menu Button
Rahmenfarben beim mobilen Menu Button
Hover Effekt bei Senden und Suchen Button
Hover Effekt bei Senden und Suchen Button

Es machte mir Freud für Marcus zu arbeiten und dieses Layout zu erstellen. Selten kann ich all die vielen Möglichkeiten der Verschieberei bei einem mobilen Layout gestalten. Noch trauen sich zu wenige 🙂

mts

Ebenfalls informativ und lesenswert

2 Kommentare zu “Ein individuelles dreispaltiges responsive Design – ESO Seo goes responsive

  1. Karl

    Hui, das hört sich alles recht kompliziert an. Ich weis schon, warum ich lieber Geld in ein gutes Design investiere und das alles Profis machen lasse. 🙂

  2. Hans

    Ich bin auf der Suche nach „fix und fertig“ zu übernehmendem und leicht anpassbarem Matrix/Gerüst… aber in der Tat: wahrscheinlich ist es besser investiert, wenn man sich jemanden sucht und etwas bezahlt, statt weiter Stunden und Tage herumzupfriemeln, denn das Anpassen ist ja sicher auch sehr schwierig.
    Gruß
    H.