0
Design• Nerdmania

Alles neu macht der Mai… Frau Hölle goes “Mobile First”

26/05/2013
Blog Redesign Mai

Quelle: Miss Étoile

4 Monate ist mein Blog nun schon alt und seitdem er das Licht der Welt im Januar erblickte trug er eigentlich nur einen improvisierten Schnellstart-Header. Das sollte sich nun endlich ändern, ist so ein Blog-Header doch schließlich der visuelle Eintritt in die Welt eines Bloggers! Die letzten Wochen wurde ich von meinem Körper zweimal ausgeknockt, sodass mir genug Zeit blieb mich mit einem neuen Look & Feel auseinander zu setzen. An der generellen Farbgebung wollte ich dabei festhalten, da ich das Mint-lastige Design noch immer gerne sehe. Beim Stöbern auf Pinterest fand ich dann die hübsche Pompon-Dekoration von Miss Étoile, mit der ich das Moodboard für die neue Farbkombination erstellte. Mint und Rosé im Ombre-Farbtönen (Achtung, neuer Trend! Ombre = Verlauf [frz.]) hatten mein Herz im Sturm erobert! Pastell ist eben doch nicht nur irgendeine Farbe sondern eine Lebenseinstellung – und im Web auf jeden Fall augenfreundlicher als Neon.

Wer ist eigentlich Frau Hölle?

Doch nicht nur das Design hat sich verändert, auch die inhaltliche Ausrichtung. Hier hatte ich ja bereits über die wiederentdeckte Lust an DIY und Crafting berichtet, worauf in Zukunft auch ein starker Fokus in diesem Blog liegen wird. An Mode habe ich zwar großen Spaß aber nicht genug Innovation bzw. Hintergrundwissen, um mich darauf zu spezialisieren. Und mit Tech- bzw. Geekthemen befasse ich mich den ganzen (Arbeits-)Tag, da richte ich in der Zeit dazwischen meinen Blick gerne auf andere Dinge. Dieser Blog ist nun also Heimat von mindestens 1000 tollen Sachen, die das Leben schön(er) machen: Design, DIY, Kochen, Reisen, Kultur und Lifestyle.

Bessere Bedienbarkeit für Leser von unterwegs

Nicht zuletzt habe ich im Zuge des Mini-Relaunches auch ein paar Baustellen aufgeräumt, die mich als User Experience Designer schon von Anfang an am Yoko WordPress Theme gestört haben:

  • Der Header kann nun geklickt werden und führt von jeder Seite wieder zurück auf die Startseite.
    Ein absolutes Must-Have für jede Website! Genauso wie die Logos auf Unternehmenswebsites den Nutzer immer wieder “zurück auf Start” schicken sollte das auch der Header eines Blogs. Denn er ist nicht nur schmuckes Beiwerk bzw. Eintrittstür sondern auch eine gelernte “Restart”-Möglichkeit für verwirrte Besucher.
  • Der Header ist responsiv (d.h. er skaliert mit) und wird für Smartphones speziell ausgeliefert.
    So ein breiter Header mit Grafiken, Fotos und evtl. Texten ist auf einem iPhone in einer entsprechend responsiven Umgebung (Größenverhältnisse für Mobilgeräte optimiert) natürlich ein wenig verloren. Mein Desktop-Header sah auf meinem iPhone 5 dementsprechend bescheiden aus, sodass ich in den CSS Media Queries für kleine Breiten (@media screen and (max-width : 620px)) ein anderes Bild hinterlegte. Darin verzichte ich bewusst auf allzu kleine Details (Sub-Headline “1000 tolle Sachen”) und vergrößere das Wesentliche (Banner inkl. Avatar).
  • Die URL-Leiste wird im Safari Browser auf dem iPhone beim (Re-)Load der Seite ausgeblendet.
    Mit einer zusätzlichen Angabe im <body> Tag der header.php (onload=”setTimeout(function() { window.scrollTo(0, 1) }, 100);”) wird die Seite automatisch bei jedem Laden um 120px nach oben geschoben, sodass die URL-Leiste versteckt ist und man dadurch automatisch auf dem kleineren Bildschirm mehr Text lesen kann. Mobile First (or at least Second)!

Und nun seid ihr gefragt – wie gefällt euch mein neues Design?

10

10 Kommentare

Hinterlasse eine Antwort