Vor etwa einer Woche habe ich den überaus notwendigen Redesign vollzogen. KWOXER.de erstrahlt seitdem noch mehr als zuvor schon in hellem Gelb. Ich möchte diesen Artikel dazu nutzen und aufzeigen was sich im Groben verändert hat und vor allem warum ich Dieses und Jenes getan habe. Eventuell könnt ihr damit eure Webseite auch weiter anpassen.

Wichtigste Neuerung ist wohl der gesamte Header-Bereich, aber vor allem das Logo. Das Logo sollte dezenter werden und vor allem mit Alphakanel, so dass es fließend in die Hintergrundfarbe übergeht. Auch soll ja irgendwie die ganze Intensität von der Glühbirne ausgehen. Ich denke das Logo trifft dies nun sehr viel besser als in der alten Variante.

Die alte Navigation war zugegebener Maßen ein Graus. Die Top-Navigation befand sich ganz oben und die weiteren auf der rechten Seite. Nicht sehr nutzerfreundlich.

Nun befindet sich die gesamte Navigation oben. Dadurch erhöht sich die Wiederfindbarkeit auf der Seite selber. Jetzt weiß man quasi immer (gelb hinterlegt), welche Unterseite aktiv ist. Außerdem wurden die Farben angepasst. Komplett weiß ist die Haupt-Navigation, wobei in die Sub-Nagiationen in dem Grau der Seite gehalten ist. Damit sticht die Haupt-Navigation hervor und die Sub-Navigation bleibt derzent, aber gut erkennbar im Hintergrund. Unterstriche symbolisieren bei der Sub-Navigation zusätzlich die Klickbarkeit.

Die Haupt-Überschrift (H1) ist nun auf der ganzen Webseite mittig ausgelegt. Somit fällt diese besonders auf und der Blog liest sich wie ein Zeitungsartikel. Die weiteren Überschriften (H2,H3) sind nach wie vor linksbündig ausgerichtet. Sie sollen den Lesefluss so wenig wie möglich stören.

Wie hier zu erkennen ist, sind Überschriten nun durch ihren Stil auffälliger. Sie passen nun perfekt zum Logo und erhöhen den Wiedererkennungswert der Webseite. Das Font der Überschriften ist font-family: "Aldrich",sans-serif,"google";

Der Text wurde ebenfalls angepasst. Dessen Font ist nun font-family: "Gudea",sans-serif,"google"; und eine sehr angenehm zu lesende Schriftart. Vor allem brauchte ich ein Font, dass keine Serifen nutzt und nicht allzu auffällig ist, im Bezug auf den Stil. Auch war wichtig, dass der Abstand der einzelnen Buchstaben möglichst eng ist. Die gesamte Navigation hat auch diesen Gudea-Font. Alle Fonts passen meiner Meinung nach sehr gut zusammen.

Im vorherigen Design war der gesamte Inhalt sehr eingeengt. Vor allem durch die Sidebar an der rechten Seite. Aber das war gestern!

Nun ist alles auf den Inhalt ausgerichtet. Ihr habt die doppelte Content-Breite nun, verglichen mit dem Zustand vorher. Dadurch wird Scrollen nun seltener notwendig sein. Die Sidebar ist ganz nach unten verschwunden und stört nicht weiter den Lesefluss.

Vorher gab es einen wilden Mix bei den Bildern. Nun habe ich alle Bilder zentriert, damit sie sich stärker vom Text absetzen. Ich hoffe kein Bild vergessen zu haben dabei, wenn doch könnt ihr euch die Seite ja einfach einmal melden.

Ich hatte schon vorher die Verlinkungen auf ein leichtes Glühen eingestellt. Dennoch damit die Beschreibung hier vollständig ist, hier auch mit aufgeführt.

Mich hat schon länger die Struktur gestört, von welcher ich damals sehr angetan war. Aber z.B. bei einem Programm zwei Unterseiten zu haben ist einfach totaler Schwachsinn :D. Daher haben ich diese und einige andere Sieten zusammengefasst bzw. Altlasten nun gelöscht.

Falls du selber bei deiner Jimdo-Seite ein Paar Anpassungen am Style vornehmen willst, dann schau dir doch erst einmal an wie ich das gemacht habe. Das Layout ist das Zurich-Layout aus der Jimdo-Pro Reihe. Die einzelnen Änderungen sind jeweils durch Kommentare beschrieben. Folgende Änderungen solltest du aber mit anderen Layout sehr vorsichtig vornehmen. Bei anderen Layouts können die Answeisungen sehr verschieden aussehen! Aber nun zum Code:

/* SHINE: all links shine */
a:link, a:visited{color: #000; text-shadow: 0 0 7px #FFEC02, 0 0 7px #FFEC02, 0 0 7px #FFEC02}
/* SHINE: Disable on the whole nav */
.navigation-colors a:link{text-shadow: none}
.subnavigation-colors a:link{text-shadow: none}
/* SHINE: Give header text a unique shine */
h1,h1 a,h2,h2 a,h3{text-shadow: -1px 0 #FFEC02, 0 1px #FFEC02, 1px 0 #FFEC02, 0 -1px #FFEC02, 1px 1px 3px #444 !important}
/* SHINE: disable shine on Jimdo box*/
label.wt-jimdo-sign-up-terms a{text-shadow: none}
/* -------------- */
/* NAV: font-size */
.cc-nav-level-0 a:link{font-size: 14px}
.cc-nav-level-1 a:link{font-size: 12px}
.cc-nav-level-2 a:link{font-size: 10px}
/* NAV: button colors */
.cc-nav-level-0 a:hover{background-color: #B9AFFF !important}
.cc-nav-level-1 a:hover{background-color: #B9AFFF !important}
.cc-nav-level-2 a:hover{background-color: #B9AFFF !important}
/* NAV: smaller */
.tpl-navigation {padding: 0px}
.subnavigation-colors li{margin: 0px 3px}
.subnavigation-colors ul{padding: 5px 40px}
/* NAV: underline */
/*.j-nav-level-0 li{border-bottom: 1px solid #000}*/
/*.j-nav-level-0 li{border-top: 1px solid #000}*/
/* NAV: background colors*/
.navigation-colors{background-color: #fff !important}
.subnavigation-colors{background-color: #efefef !important}
/* -------------- */
/* CONTENT: font sizes */
h1{font-size: 3.4rem}
h2{font-size: 2.4rem}
h3{font-size: 1.9rem}
/* CONTENT: area */
.content {padding: 5px 40px 20px}
/* CONTENT: color */
.content-options{background-color: #efefef}
/* -------------- */
/* HEADER: area */
.eh-logo {padding: 0px 0 0}
.eh-headline {padding: 0px; display: none}
.tpl-spacing {min-height:100px; background-color: #111}
/* -------------- */
/* FOOTER: area */
.sidebar-options {padding: 10px 40px}
/* FOOTER: text color*/
#contentfooter a:link{text-shadow: none; color: #FFEC02}
/* -------------- */
/* Set the mainpage header advanced text */
h2#cc-m-header-9929994995{text-align: center !important; padding-bottom: 15px}
/* Change blue buttons to yellow buttons */
.skiptoform a:link, .skiptoform a:visited, .j-blogarticle .blogreadmore:link, .j-blogarticle .blogreadmore:visited, .j-blogarticle .comment, .cc-checkout-btn[type="submit"], .cc-checkout-overview .cc-checkout-btn[type="submit"], .com-meta input[type="submit"], .commententry input[type="submit"], .j-downloadDocument .cc-m-download-link, .j-formnew input[type="submit"], .j-googlemaps .cc-map-route-submit button, .j-newsletterbox input[type="submit"], .cc-pagemode-overlay input.submitUser[type="submit"], .j-product .cc-shop-addtocard, .j-rss br + a[target="_blank"], #cc-sidecart .cc-sidecart-checkout, .datetime{background-color: rgba(255,255,0,0.5); text-shadow: none; color: black; padding: 2px 10px}
.datetime{background-color: rgba(255,255,255,0) !important}

Viele Neuerungen haben nun auch KWOXER.de erreicht. Alles in allem ist nun das reine Betrachten sehr viel angenehmer und der Inhalt ist fokussiert. Einige Änderungen werden auch noch kommen, allerdings werden diese nach und nach Einzug finden und sind nicht kritisch für den Gesamteindruck. Ich wünsche euch weiterhin viel Spaß auf meiner Seite und hoffe durch diese Veränderungen euch einen noch angenehmeren Aufenthalt bieten zu können.