freeQnet-Logo
freeQnet

Teaser freeQnet 5.0 Re-Design

erste Demo der neuen Navigation, das auf Mausklick auf die Buttons entsprechende Untermenüs öffnet.

Wie ich ja vor einer Weile schon mal ankündigte, arbeite ich gerade wie es meine Zeit zulässt an einem völlig neuen Design für mein Blog. Es soll alles schöner und natürlich auch nützlicher werden. Dazu habe ich mich endlich auch mal mit jQuery auseinander gesetzt und bin Feuer und Flamme für die genialen Design-Möglichkeiten, die sich mit nur wenigen Zeilen Code eröffnen! Nach dem Klick gibt’s ein paar weitere Infos zu dem, was ich vorhabe und noch einen weiteren Screenshot der frühen WIP-Version.

Was ihr auf den Screenshots seht, ist natürlich noch lange nicht final und es werden sicher noch so einige Umstellungen stattfinden, die das fertige Design in Sachen Farbe und Aufbau von dieser Version abweichen lassen werden. So grob die Richtung dürfte aber schon erkennbar sein.

Geplant ist wie schon gesagt größerer Einsatz der JavaScript-Library jQuery, die dazu dienen wird, Menüs zu animieren, Dinge auf und zuklappen zu lassen und so weiter. Dabei versuche ich aber so gut es geht, auch Leute mit ausgeschaltetem JavaScript zu berücksichtigen. So wird beispielsweise ein Mausklick auf die Navigationsbuttons, die ihr oben im ersten Bild seht, mit JavaScript ein Menü ausklappen lassen, ohne JavaScript allerdings auf eine spezielle Seite linken, auf der man die selben Inhalte wie in dem Menü zu sehen bekommt. Die schön animierten Hover-Effekte der Buttons werden ohne JavaScript ganz einfach zwischen zwei Stilen umschalten, wie man es von normalem CSS gewohnt ist.

Außerdem versuche ich gleich ein wenig die Nutzer von Tablets zu berücksichtigen, da ich mittlerweile denke, dass sie die Zukunft des Casual-Computing sein werden. Dementsprechend werden keine wichtigen Schaltflächen oder ähnliches nur durch Hover erscheinen, sondern generell durch Mausklicks ausgelöst, denn auf einem Touchscreen hat man nun mal keine Maus. Außerdem versuche ich, Buttons groß genug für einen Touchscreen zu gestalten, aber eben auch nicht zu groß, um an einem normalen PC übertrieben zu wirken.

Weit weniger Rücksicht werde ich auf die Nutzer des Internet Explorer legen. Zwar soll die Seite am Ende möglichst ab dem IE 7 ordentlich aussehen und benutzbar sein, da Microsoft sich aber selbst mit dem IE9 noch weigert, längst von allen anderen unterstützte, geniale CSS-Design-Möglichkeiten zu integrieren, müssen IE-User eben auf das Eye Candy verzichten. Da das Layout viel mit Eigenschaften wie border-radius, box- und text-shadow und vielleicht auch Transformationen und Gradients setzen wird, müssen IE-User halt mit einem eckigeren, weniger edlen Design leben. Im Idealfall merken sie allerdings nicht mal, was sie verpassen.

Insgesamt soll das Design auf den ersten Blick noch ein wenig minimalistischer werden. Die eigentliche Funktionalität steckt aber im Detail, das man sich dann auf Wunsch einblenden lassen kann. Eine Sidebar wird es vermutlich nicht mehr geben, dafür aber einen ausführlichen Footer und detailliertere Archivseiten für die einzelnen Kategorien. Außerdem wird das Menü aus dem Seitenkopf mitscrollen und sämtliche Aufklapp-Menüs immer klickbereit halten.

Wie gesagt sind die Farben vermutlich noch nicht final. Ich habe außerdem vor, wieder einen leicht texturierten Hintergrund einzufügen, um das Bild etwas interessanter zu machen. Dazu arbeite ich noch an einem echten Logo für das Blog, etwas, das hoffentlich endlich mal mehrere Designs überstehen wird. Es gibt also noch sehr viel zu tun. Von daher solltet ihr nicht in wenigen Tagen mit dem neuen Design rechnen. Ich werde euch aber auf dem Laufenden halten.

Und nun gibt’s zum Abschluss noch den versprochenen zweiten Teaser – diesmal für die Artikelansicht. Für Kritik und Ideen zu den geplanten Änderungen und den Screenshots bin ich natürlich immer offen und freue mich auf eure Meinungen!

Kommentare

1

Sieht schön aus. Auch wenn ich persönlich kein Freund von javascript-Spielereien bin, besonders wenn es nur darum geht, ein Menü zu animieren.

geschrieben von David
antworten  •  Link
2

Menüanimationen finde ich auch eher überflüssig, aber solange sie schnell genug sind, sind sie durchaus akzeptables Eye-Candy. Was Tablets betrifft: Ich weiß nicht, wie’s mit Android ist (würde es aber gern erfahren), aber wenn ich auf dem iPad auf einen Link tippe, bei dem normalerweise mit Mauscursor ein CSS-Hover-Menü ausklappt – etwa bei mir im blauen Balken oben –, dann klappt Safari intelligenterweise das Menü auf, ohne dem Link zu folgen.

Der 2. Teaser ist in Originalgröße? Da finde ich die Fließtextschrift zwar schick, aber sie kommt mir etwas schmal vor. Ist vielleicht aber auch nur Gewöhnungssache…

geschrieben von cimddwc
antworten  •  Link
3

Wie immer: très chique… Wirkt dieses mal weniger verspielt, sondern sehr “clean”. Gefällt.

geschrieben von Martin
antworten  •  Link
4

Ja, hat auf jeden Fall was. 🙂

geschrieben von Sorkin
antworten  •  Link
5

@David: Danke! Naja, ich mag ja so subtile kleine Effekte. Sieht alles irgendwie fließender aus, mehr nach Interaktion und nicht so statisch. Das soll aber auch nicht nur rein dem Design dienen sondern eben auch etwas Mehrwert bieten, eben z.B. durch schnell erreichbare Aufklapp-Menüs, die aber wenn man sie nicht braucht auch nicht die Sicht versperren und so.

@cimddwc: Ja, die Animationen werde ich definitiv kurz halten, damit man nicht ewig warten muss. Auch mit HTML5/CSS2/JS soll ja nicht die grausame Zeit der trägen und unverhältnismäßg übertriebenen Animationen aus der Flash-Ära zurück kehren 😉

Derzeit fehlt’s mir noch an einem eigenen Tablet, allerdings habe ich zum Einen mein Handy und zum Anderen ein paar Kollegen mit Tablets, die ich zum Test sicher mal hernehmen kann. Ich hoffe da ja nur, dass sich durch so ein Verhalten (dass eben auf Klick der Hover-Effekt und nicht der Klick selbst ausgelöst wird) nicht die Funktionalität einschränkt. Mal sehen!

Ja, der zweite Teaser ist in Originalgröße. An der Formatierung der Schrift werde ich sicher noch ein wenig rumprobieren. Den Font selbst (Yanone Kaffeesatz) finde ich an sich schon wirklich schön, dummerweise sieht die im Chrome ein wenig verzerrt und gedrungen aus. Wirklich schade, wo sogar der IE das richtig macht. Mal sehen, was sich da machen lässt!

@Martin: Danke! Verspielt wird es an sich schon werden – zumindest in der Hinsicht, dass ich viele kleine Details einbauen werde. Aber insgesamt soll die Seite aufgeräumt und übersichtlich werden, also schon ein weniger “cleaner”.

geschrieben von beetFreeQ
antworten  •  Link
6

Beim zweiten Tippen wird dann auch die normale Klick-Funktion ausgelöst, d.h. der Link aufgerufen – also nicht wirklich ein Problem.

geschrieben von cimddwc
antworten  •  Link
7

@cimddwc: Achso, ja, klingt auch logisch und durchdacht. Müsste mal bei Android drauf achten, wie es da gelöst ist – vor allem in den verschiedenen Browsern, die es da mittlerweile gibt!

geschrieben von beetFreeQ
antworten  •  Link
I’m travelling the wonderful loneliness of the headphone silence

Ane Brun

Blogverzeichnis - Blog Verzeichnis bloggerei.de blogoscoop Bloggeramt.de