WebDesign like a Highheel 

Ich mag Highheels. Schuhe mit einem Absatz höher 8cm trage ich gern. Diese Schuhe präsentieren angemessen meine Beine, sie strecken meinen Körper und automatisch “schreite” ich. Eine ganz eigenartige Stimmung wird in mir breit.

Allerdings bin ich heikel, er muss 100% passen, keine Kompromisse, denn ich mag mit diesen Schuhen gehen können und nicht nur dekorativ herumstehen oder sitzen. Außerdem bin ich altmodisch: ein Highheel mit einem Plateau ist kein echter Highheel, es ist ein hoher Schuh, aber er streckt selten den Schaft und man plumpst durch die Gegend und schreitet damit garantiert nicht.

Nun was haben Highheels und WebDesign gemeinsam:

Highheels verführen

Highheels geben ein Versprechen ab für den, der sie mag. Sie verführen in eine andere Welt. Sie verführen viele Männer zum Träumen – zu eindeutigen Träumen.

gute Highheels sind alltagstauglich

Mit perfekt passenden und perfekt abgestimmten Highheels kann frau stundenlang einkaufen gehen. Sie sind nicht nur schön, sondern eben auch im Alltag einsatzbereit.

Highheels machen schöne Beine

So die Trägerin schöne Beine hat Highheels alleine sind noch kein Garant dafür.

Relaunch GKA.at

10 Jahre feiert die Domain GKA.at heuer und die Firma GKA Textildruck & Stick von Kave Atefie feiert ihr 20jähriges Bestehen. Dies wurde zum Anlass genommen die Website einem Relaunch zu unterziehen. In den 10 Jahren ihres Bestehens ist die alte Webseite gewachsen und gewachsen und die Navigation hielt damit nicht Schritt.

Tief verschachtelt fand man erst die einzelnen Produktansichten und ohne die prominente Suche oben hätte man andere Kategorien kaum gefunden.

So war es nicht verwunderlich, dass wenige Seiten der Webseite wirklich sehr gut rankten.

Website Relaunch Vorgaben für die GKA.at

• das Look & Feel soweit es geht 1:1 zu übernehmen, aber moderner, stylisher zu präsentieren. Buttons an diesen Stil anzupassen.
• Die Navigation zu entschlacken und leichter zugänglich zu machen.
• Die interne Verlinkung zu gewährleisten.
• Die unverbindl. Anfragen zu erleichtern.
• Die Seite für den Googlebot freundlich zu gestalten.
• Soweit es möglich ist, die alten URLs per Redirect 301 auf die neuen umleiten.

Vor dem Relaunch hatte die GKA.at vordergründig eine sehr einfache Navigation links. Dass sich dahinter an die 280 oder sogar mehr Einzelproduktansichten verbargen war nicht ersichtlich und sehr schwer findbar.

Wollte man Produkte bestellen oder einfach unverbindl. Anfragen stand kein Formular zur Verfügung und wenn dann auf einer anderen Seite, zu der man wieder klicken musste.

Die Technik hat sich diesbezüglich eben einfach verändert -wurde einfacher und all dies sollte die neue GKA.at jetzt bieten.

Website Relaunch die Technik

Angetrieben wird die neue GKA.at mit WordPress.

Die TeaserTexte bei den einzelnen Kategorien sind Textwidgets, die mit dem Plugin “Widget Logic” von Alan Trewartha immer an ihrem richtigen Platz gebracht werden. Beispiel die Specials der GKA.at

Das Anfrage und E-Mail Formular ist mit cformsII von Oliver Seidel realisiert. Damit Kave bei den Anfrage E-mails ganz eindeutig weiß was der Kunde bestellt hat, wurde ein weiteres Plugin zu cformsII programmiert, dass ihm den Inhalt des Artikels in der E-mail mitgibt.
Als Beispiel das Träger Top.

Die Navigation bietet sowohl Kategorien wie den statischen Seiten genug Platz. Die Informationsartikel unter Druck und Stick sind “statische” Seiten von WordPress.

Das Klappmenü auf der linken Seite kann auch nur mit der Tastatur benutzt werden, somit besteht kein Hindernis unterwegs mit dem Netbook mal schnell ein paar T-Shirts zu bestellen .

Die Kataloge der einzelnen Firmen werden in eigenen Templates per iframe geladen. Die ist derzeit anders nicht möglich – wenn es wirklich gut browserübergreifend geschehen sollte. Außerdem soll ein Wechsel der Kataloge leicht möglich sein. Beispiel: Katalog.

Zur Navigation stehen auf diesen Katalog Seiten sowohl die horizontale Navigation und die Suche rechts oben zur Vefügung, die nur die Textilkategorien anzeigt. Dies wurde so gewünscht und macht ja auch Sinn.

Website Relaunch das Aussehen

Hier ein paar Screenshots der “alten” GKA und daneben die Bilder der neuen.

Startseite alt

nach dem Relaunch

Einzelartikel alt

nach dem Relaunch

neues Sortiment alt

nach dem Relaunch

Man sieht bei den Bildern ganz gut, dass das neue Anfrageformular lang ist, doch die Abfragen dort sind gewünscht und ergeben in sich Sinn. Unterhalb des Anfrageformulars werden weitere tolle Produkte aufgelistet.

Dass die htaccess angepasst wurde erwähn ich nur der Vollständigkeit halber. Wie immer, wenn eine Website neu aufgestellt online geht, kann es sein, dass sich trotz aller Überlegungen doch noch eine Idee einschleicht. Jetzt ist dies leicht möglich, weil eine Datenbank die Inhalte verwaltet, vorher war jede kleine Änderung ein Kraftakt.

Inhalte werden vom Domainbesitzer erstellt- weils in WordPress einfach so simple geht.

So bleibt mir nur Kave viel Erfolg mit seiner neuen alten GKA.at zu wünschen und allen anderen den Mut zu einem Relaunch: es zahlt sich aus.

Relaunch- der Neustart einer Webseite

Relaunch einer Homepage ist ein sehr heikles Thema. So mancher Webseiten Besitzer schleppt dies ewig mit sich herum, mag was Neues, weiß vielleicht noch nicht wie und dann schlussendlich traut man sich nicht, weil man kann bei so einem Relaunch ja auch sehr viel kaputt machen. Ich geb hier einen Praxis Leitfaden für einen Website Relaunch, da ich in so einen Relaunch einer alten und sehr guten Webseite miteingebunden bin.

Relaunch ist nicht Redesign

Mag man alles beim Alten lassen bloß das Design ändern so ist dies ein Redesign. Diese Wortklauberei kann dann wichtig sein, wenn man sich ein Angebot bei einem WebDesigner holt.

Jedoch ist es egal, ob man ein Redesign oder einen wirklichen Neustart /Relaunch plant, man braucht Geduld und einen wirklich durchdachten Plan. Womit man bei diesem Plan anfängt ist irrelevant, am Schluss kommt alles automatisch in die richtige Reihenfolge, wenn die richtigen Leute mitarbeiten.

der Plan

Beginn der Vorbereitungen eines Relaunch

• Was soll an Farben sich ändern, was unbedingt erhalten bleiben.
• Braucht das Logo einen neuen modernen Touch?
• Soll die Seite endlich ein eignes Logo erhalten?

Die Navigation

Alte Seiten haben viel Geschichte hinter sich. Manche sind in gut 8-11 Jahren gewachsen und manche haben sich dabei verwachsen. Da kam eine Kategorie dazu, dort eine Unterkategorie. Drüben löschte man eine Unterkategorie nicht, weils technisch viel zu aufwändig gewesen wäre. Und – oh ganz versteckt- sind da auch noch Inhalte, die ihren Zeitwert leicht überschritten haben.

• Ist die Navigation einfach und leicht zu durchschauen?
• Mag man die Navigation von links auf rechts wechseln?

Man macht sich am besten einen schlichten Plan der Ordnerstruktur, der einzelnen Kategorien und überlegt sich, ob dies so bleiben sollte oder nicht. Was ändert sich, was kann man vereinfachen.

Keiner klickt sich heute noch durch zig Verzeichnisebenen durch, um an Inhalt zu kommen. Drei Klicks maximal, da muss der Inhalt aber schon wirklich wichtig sein.

die Suche

Alle wollen sie finden auf einer Webseite und nicht suchen. Gibt es überhaupt bereits eine Volltextsuche, wenn nein wieso nicht. Soll eine implementiert werden und wenn was soll diese Suchfunktion für Features bieten.

Wie sollen die Suchergebnisse dargestellt werden. Was mag man dabei unbedingt vermeiden.

die Gesamtstruktur der Seite

Ist die Seite als 3Spalter gewachsen, so ist meine Erfahrung sollt man es dabei belassen. Zumindest auf der Startseite, Stammkunden muss man nicht auch noch mit völligst neuem vor den Kopf stossen.

War die Seite bis dato aber am ganz linken Bildschirmrand kann man sie ruhig zukünftig zentrieren. Vor allem, wenn die Hauptnavigation links war.

• Was kann und was sollte aber in diesen 3 Spalten seinen Platz wechseln?
• Was mag man von der Gesamtsicht der Seite unbedingt erhalten?

die alten URLs

Content Management System -kurz CMS

Selten sind alte Seiten bereits in einem CMS, meist sind es liebevollst gestaltete Einzelseiten. Unabhängig vom technischen Aufwand diese in ein CMS zu bringen, sollte man unbedingt an die vorhandenen Plätze in der Suchmaschine denken und die alten URLs per Redirect permanent (301) in der htaccess auf die neuen umleiten. Programmierer wissen wie das geht. Selbst sollte man nur dran denken und darauf beharren – sollte ein WebDesigner sagen das geht nicht, dann zum nächsten Webdesigner gehen oder einen Könner dazu holen.

CMS welches

Sammeln sie alles was dieses CMS können sollte und dann gehen sie auf die Suche. Selten ist das Erstbeste das einem einfällt auch das beste und noch seltener stimmt dann das Preis-Leistungsverhältnis in dem Sinne, das manche CMSe was haben was man gar nie braucht.

die Texte und Bilder

Ändert sich die Struktur einer Seite komplett, neue Urls künden der Suchmaschine an, da tat sich was. So ist es ratsam mit der etwaigen Änderung vorhandener Texte sehr langsam und sehr sparsam umzugehen. Man schickt sonst ein fast neues Webprojekt in die Suchmaschine und diese denkt konservativ.

Logisch sollte man die title Tags im html Header berücksichtigen beim Relaunch und auch an die meta description denken, doch ganze Texte neu schreiben. Neue Inhalte auf alten Seiten sehr zeitnah zum Relaunch kann nach hinten losgehen.

Bilder kann man austauschen, doch dann gleich an die richtigen Bildnamen denken, die können ruhig wichtige und aussagekärftige Namen erhalten und die sollen auch im alt Tag drin sein.

Dies liest sich so einfach…

Wieso dann Geduld und Ausdauer? Alte Webseiten haben meist mehr als 5-8 tausend Artikel, oftmals an die 60-100 Kategorien inclusive aller Unterkategorien. Diese neu zu ordnen und zu schlichten dauert einfach. Hat man eine Struktur sollt man die ruhig mal liegen lassen und sich einige Tage später nochmals anschauen, obs auch dann noch stimmig ist.

Alte Webseiten sind wie guter Wein gereift. Da einzugreifen ist nicht eine Aktion von knapp 14 Tagen, sondern oftmals von Monaten im Hintergrund. Die ausführenden Techniker haben manchmal die geringere Arbeit, wenn auch noch genug.

Ich find es immer wieder spannend bei so einem Relaunch mitzuarbeiten. Es ist ein Prozess ähnlich wie beim Umbauen eines vorhandenen Hauses. Und wenn sie dann nach Monaten online geht, wird gefeiert wie bei der Hauseinweihung.

Twitter Backgrounds zu machen hatte ich Lust und so verschenke ich 8 Twitter Backgrounds einfach.

Sie sind 2048×690 groß. Selbstverständlich ist auf den Originalen keine Webadresse von mir drauf. Nur hier auf den kleinen Demobildchen mag ich zeigen wie man auf seine Website aufmerksam machen kann. Selbst bei 1024×768 sieht man die Webadresse immer noch.

Was man mit diesen Twitter Backgrounds machen darf:

1. verwenden und sich daran erfreuen.
2. Farbe ändern.

Was nicht erlaubt ist mit meinen Twitter Backgrounds:

1. sie weiterzuverkaufen.
2. anderer Stelle zum Download anbieten.

so sehen sie aus und unterhalb ist der Downloadlink:

Twitter Backgrounds

Viel Freud damit und follow me on twitter

Design Baby

d. Screenshot ist sehr groß!

Ein Design für das große Thema “Baby” sollte es sein, meinte Eren. Dreispaltig, lieblich und dennoch schlicht. Und wie immer, wenn Eren bei mir anfragt mag er das fertige Design am besten gestern haben. . Also machte ich mich bei Fotalia auf die Suche nach einem süßen Baby, nachdem das Design in meinem Kopf Gestalt angenommen hatte.

Der Rest war normale geschäftliche Tätigkeit. Eren hat das Design abgenommen, es gefiel und ich packte es gut in eine .zip Datei und es begann seine Reise auf eine neue Domain.

Design Baby Details

Ich habe keine Ahnung wie oft ich dies schon so machte. Doch diesmal war es anders. Irgendwas war und ist, was mir dieses Design nicht aus den Kopf gehen läßt. Das süße Babygesicht? Der Footer Bereich mit dem Fallschirm? Die Farben? Oder vielleicht ganz was anders.

Es ist mir nicht egal, dass dieses Werk von mir weg ist. Keine Ahnung was ich damit tät, doch es ist nicht mehr nur *meines*. So frag ich mich, ob es anderen auch so geht. So hie und da geht einem die eigene Arbeit nicht aus dem Kopf und man ist irgendwie mit ihr verbunden.

Kennst Du auch diese – Trauer des WebDesigners – wie ich dies nenne? Eindeutig nicht nur das befriedigende Gefühl, wenn etwas fertig ist, sondern das darüber hinausgehende *mehr* – was auch immer dies sein mag.

Ma.tt 

Matt Mullenweg, der Chef von WordPress hat ein neues Design auf seinem Blog. Er hat immer sehr außergewöhnliche Designs und wechselt die sehr oft. Dies versteh ich gut, wechselt ja auch hier das Design sehr oft.

Ich surfte gestern nichtsahnend auf sein Blog und der Flock Browser , den ich verwende crashte. Er ging einfach zu. Ich war leicht irritiert und mit einem anderen Browser fand ich des Rätsels Lösung, der Flock mag halt zuviele html nicht. 1 Fehler bei den Kommentaren multiplizierte sich sehr oft und alles war weg. Soviel zum 1. Eindruck des neuen Designs.

Suche unlesbar

Nutzt man die Suche, sieht man das lange Überschriften nicht lesbar sind, weil sie in dem neuen Design keinen Platz haben. Darauf sollte man als WebDesigner bei einem Relaunch achten, denke ich mir.

Der Footer Bereich und die Seitenleiste gefällt mir außerordentlich gut. Die Header Grafik ist eine technisch wunderbar gemachte Grafik, doch sie schreckt mich ab.

Auf mich persönlich wirkt sie destruktiv. Das Musikinstrument erinnert mich an einen Tintenfisch und die esse ich zwar gerne, aber ich schau sie mir so groß nicht gerne an.

“Zerstörte Welt” fällt mir zu dem Header ein. Doch bin ich mir sicher, sehr vielen gefällt es. Einerseits , weil es ihnen gefällt, andrerseits, weil es eben das Blog von Matt ist Außerdem wäre die Welt sehr langweilig,wenn jedem dasselbe gefallen tät. Interessant ist der Header allemal und technisch 1a realisiert. Hut ab vor dem grafischem Können.

Fazit für mich:

Sidebar kracht 

Ein schönes WebDesign, das zerstört wird, weil der Designer kein WebDesigner ist, sonst tät er html können. Zumindest in den Grundlagen.
Dadurch wurde der 1. Eindruck bereits negativ besetzt. Crasht ein Browser ist dies nun Mal kein guter 1. Eindruck.

Auch bei Michael wird zum schönen Design von Matt diskutiert.

online Shop der Kaufkiller 

Kaufabbrecher verursachen Millionenschaden im Online Handel. Die Suchergebnisse zu diesem Thema überschlagen sich. [ Results 1 - 10 of about 381,000 for kaufabbrecher.]

Alleine das Wort “Kaufabbrecher” verheißt nichts Gutes. Wer etwas abbricht, macht es kaputt. Ganz ein schlechtes Gewissen bekomm ich gleich, denn auch ich gehören zu den bösen, bösen Kauffabbrechern.

Voller Kaufeslust suche ich im Internet nach einem Produkt. Werde fündig. Schlussendlich muss ich jedoch zugeben, dass ich zu 99% in keinem Online Shop noch Geld gelassen habe, ergo bin ich eine Kauffabbrecherin.

Vom Kaufabbrecher zum Käufer

Hat man Kaufabbrecher sucht man natürlich nach Lösungen, die Kaufabbrecher zu Käufer machen.

Somit hat man als Lösungsansatz den vermeintlichen Kunden.

Wieso verhindert mein online Shop das Kaufen

Tät man sich fragen: wieso verhindert mein Shop, dass kauflustige Kunden ihr Geld bei mir lassen, hätte man als Lösungsansatz die Shop Software und die Verkaufsstrategie.

Eine völlig andere Sicht der Tatsache, dass viele nicht kaufen, obwohl die Ware bereits im Warenkorb liegt.

Ich kann nur sagen was mir die Kaufeslust nimmt:

• Mitglied werden.
• Zahlung nur per Paypal.
• Vorauskasse anstatt bei Nachnahme.
• Irr hohe Transportkosten.
• Mein Geburtsdatum als Pflichtfeld ausfüllen müssen.
• Meine Telefonnummer angeben müssen – dann auch noch eine Festnetznummer!
• 3x habe ich einfach den Warenkorb nicht gefunden.
• Nach dem Ausfüllen aller Formularfelder teilte man mir mit, dass man nicht nach Österreich liefere und wenn nur zu irr hohem Preis.
• Keine direkte Information wie ich die Ware zurücksenden kann bei nichtgefallen.

Welcher *Boden* Händler mag meine Telefonnummer, mein Geburtsdatum, meine Mitgliedschaft nur weil ich mal Schuhe kaufen mag?

Wozu sollte ich euch liebe online Shop Besitzer meine Daten einfach so schenken?
Was hat mein Alter mit dem Kauf von Schuhen zu tun?

Web 2.0 Technologie hilft

Wirklich? Verhindert Ajax, dass ich Mitglied werden muss, nur weil ich was kaufen will?
Verhindert Ajax die Pflichtabfrage nach meinem Geburtsdatum und meiner Telefonnummer?

Wunderbare Welt der Web 2.0 Technologie meint mein Schalk.

Aus wettbewerbsrechtlichen Gründen darf ich ja keine Beispiele hier direkt bieten, also muss man mir schon glauben.

Nachlese:

Am 20.12.08 brachte den Artikel über die Studie des Software- und Beratungshauses Epoq GmbH Interaktiv.

Alle anderen berufen sich auf diese Studie, wie Internetworld auch dort ist einigen Kommentaren nachzulesen, dass man sich darüber keineswegs wundert, weil online Shop Besitzer weder Kundenbindung als wertvoll erachten noch Support. Jans widmet sich auch dem Thema..

Danke für das Icon geht an Bartelme.

Linz.at Biene in Silber 

Österreich hat sehr strenge Regeln für öffentliche Webauftritte und offenbar macht sich dies mehr als bezahlt. In Linz beginnts – kann ich heute mit stolz geschwellter Brust verkünden. Ist doch Linz nicht nur die Kulturhauptstadt Europas 2009, sondern die Website der Stadt gewann die silberne Biene, die an barrierefreie Webauftritte vergeben wird. Sie trat in der Kategorie “Komplexe Informations- und Kommunikationsangebote” an.

Ich mag den Webauftritt der Stadt Linz. Diese Website ist schön und barrierefrei.

Hauptbahnhof-Wien.at Biene in Silber

Über den neuen Hauptbahnhof in Wien sind sich die Wiener nicht ganz so einig, doch die Website kann sich ebenfalls sehr gut sehen lassen und bekam ebenfalls die silberne Biene für Barrierefreiheit. Logischerweise auch in der Kategorie “Komplexe Informations- und Kommunikationsangebote”.

Zwei sehr gelungene Beispiele, dass Zugänglichkeit für Alle nicht langweilig und fad sein muss, sondern erfrischend und schön aussehen kann.

Die weiteren Sieger kann man auf der offiziellen Seite der Biene nachlesen. Es waren über 1000 Websites am Start!

t3n Magazin neues Design

Soeben erfuhr ich via Twitter, dass das t3n Magazin seine Startseite erneuert hat. Im Google Cache fand ich noch die *alte* zum Vergleich, die ist am Ende des Artikels zu finden.

Die neue wirkt auf mich edler, aufgeräumter und bietet eindeutig mehr Überblick.

Der sparsame Umgang mit Farbe läßt diese besser wirken. Die zarten Schriftfarben finde ich zwar ein wenig benutzerunfreundlich, weil Menschen mit Sehschwächen diese nicht gut lesen werden können, weil der Kontrast zu gering ist – dennoch ein gelungenes Design.

Das Jahr 2009

fehlt noch ein bisschen bei t3n – doch nehme ich an, dass dies bald nachgeholt wird.

Im Footer prankt noch: © yeebase media solutions GbR 2005 – 2008

Jahreszahlen automatisieren hoffe ich kann man in einem Open Source Magazin.

t3n Magazin das alte Design zum Vergleich

t3n Magazin altes Design

Photoshop Patterns, Gradients, Stile 

Um die Ideen im Kopf umsetzen zu können bedarf es vieler Hilfsmittel für den WebDesigner. Hier eine Ressourcensammlung für WebDesigner und deren Photoshop

Patterncolor

präsentiert eine schier unerschöpfliche Menge an Patterns/Hintergründe und man sieht auch gleich wie der Hintergrund dann aussieht.

Simple Alice

hat zwar eine schwer zu bedienende Website, aber die Photoshop Ressourcen sind wunderbar.

Clickpopmedia

bietet Batik Hintergründe an.

Ladyoak – hat sich Photoshop verschrieben

Über 6.000 Layer Styles/ebenen Stile findet man bei Layer Styles Ladyoak.
Knapp 9.000 Formen /Custom Shapes findet man dort auch: Custom Shapes Ladyoak.

3.500 Verläufe/Gradients stehen zum Download und zur Verwendung zur Verfügung.

Brushesdownload

bietet nicht nur Photoshop Pinsel, sondern jede Menge an Verläufe und einige Photoshop Tutorials.

Freephotoshop

präsentiert seine Verläufe in *Lust auf Kreativität* machender Art.

Die Background /Patterns Sektion ist klein aber sehr fein.

Gurly von Deviantart

bietet ein Paket mit 60 Verläufen/Gradients an.

Cloaks von Deviantart

bringt Vintage Hintergründe. Es wird Zeit für neue Designs – hier ist die Möglichkeit dazu.

Crazykira von Deviantart

hat ein kleines aber feines Hintergrundpaket geschnürt. Bitte die Lizenz beachten.

Marvin Ristau

hat eine fein sortierte Hintergrund Download Ecke auf seiner neuen Domain.

Melsbrushes

ist auf WordPress.com daheim und bietet jede Menge an Photoshop Hintergründe/Patterns. Zu beachten ist dabei jedoch die Lizenz. Wer diese Patterns kommerziell verwenden mag, braucht eine Genehmigung.

Squidfingers

zeigt schöne Arbeiten und lockt ebenfalls mit Patterns/Hintergründe zur freien Verwendung.

Hintergründe selber machen

Video wie man sich “halfton patterns” selber macht.

Konventionelles Tutorial, um sich ein Muster selber gestalten zu können.