Queerbeet: Tipps, Ideen & mehr

Behind the scenes: WILDPEPPERMINT-DESIGN’s neue Website

Ja, es ist endlich vollbracht! Vor ein paar Tagen ging meine neue >> Website online. Endlich.

Ich bin zufrieden mit meinem Werk und freue mich sehr, dass die Feedbacks durchgängig positiv ausfielen. Nun werde ich in den nächsten Tagen noch etwas an den Details feilen und dann soll es erst mal gut sein. Zumindest, bis mir wieder etwas einfällt … 😉

Und jetzt plaudere ich ein wenig aus dem Nähkästchen … ein bisschen „Behind the scenes“ wie man neu-deutsch sagt …

website, webdesign, wildpeppermint-design.de, weblayout, responsive, mobilfriendly, moderne website,

Es  war eine schwere Geburt. Nachdem ich zwei Konzepte über den Haufen geworfen hatte und mir klar wurde, dass nicht immer alles, was Trend ist, was als aktuelles Optimum gilt, was technisch sein muss oder zumindest sein sollte, ging es mit dem neuen Layout recht flott voran. – Allerdings hatte ich mir noch den einen oder anderen Stolperstein eingebaut. 😉

>> Eine klare Struktur muss sein. <<

Das einzige was schon länger klar war: Die Struktur/der Aufbau der Site – der erste Schritt. Änderungen gab es bei der Tonalität, ich duze jetzt konsequent in allen Online-Medien. Die Texte habe ich komplett überarbeitet. Und das Layout wurde völlig anders, als ursprünglich geplant.

Der nächste Schritt: Das (grobe) Layout. Ich habe zuerst meine Idee als Mobil-Version in Illustrator (nein, nicht in Photoshop, wie es viele machen, vor allem, weil ich kaum Bilder, sondern fast ausschließlich Illustrationen verwendet habe) angelegt. Dann habe ich weitere gängige Größen getestet und schließlich die Grafiken bzw. Illustrationen „gebaut“.

>> Layout: Mobil First. <<

Jetzt ging’s ans „Eingemachte“, sprich an die Umsetzung – in Adobe MUSE. Zuerst habe ich das Raster und die sog. „Musterseite“, mit den fixen Elementen für alle Seiten, angelegt. Also Headerbreich mit Navigation und Footer.  Der nächste Punkt auf der To Do Liste: Die Anlage der Seitenformate (von Smartphone bis Desktop/Notebook). Die riesigen TV-Formate habe ich außen vorgelassen.  Da diese bei meiner Zielgruppe keine Rolle spielen.

Illustration, Frau, Brille, warum im Business duzen, wildpeppermint-design.deSoweit so gut. Nun waren die Inhalte (Texte, Bilder, Grafiken) an der Reihe. – Toll, dass MUSE zur Formatierung nützliche Helferlein zur Verfügung stellt. Allerdings, musste ich dennoch einiges händisch nachjustieren. – Sobald ich einen Part (z.B. „Corporate Design“) fertig hatte, habe ich über das Firefox-Tool „Bildschirmgrößen testen“, immer wieder geschaut, ob auch wirklich alles passt und optisch o.k. ist.

>> Wichtig: Alle gängigen Bildschirmgrößen testen. <<

Weiter ging’s mit dem Einfügen der internen und externen Links, incl. Linktexten, Bilder verlinken, Kurzinfos und Bild-Attribute einfügen.

Das Favicon in der richtigen Größe abspeichern und das Touch-Icon für Apple. Ach ja, eine optimale Meta-Description, Title und, und, und … musste auch noch her. Zwischendurch kam es mir so vor, als würde ich nie fertig. Immer fiel mir noch etwas ein …

Ich gebe es zu, alles was außerhalb der Konzeption und der Gestaltung stattfindet, ist nicht gerade eine Leidenschaft von mir 😉 Die ungeliebte Pflicht eben … Hilft aber nichts. Da musste ich durch. Das hieß auch: Recherchieren, ob meine Infos noch aktuell sind, wo es Optimierungsbedarf gibt. Eine Never-Ending-Story …

>> Die Pflicht: Suchmaschinenoptimierung (SEO) & Datenschutz <<

Tja und als ich dachte, ich habe endlich alles berücksichtigt, was (wirklich) wichtig ist, fiel mir ein: Ich  habe ja gar keine „H“-Überschriften vergeben –  für die Headline (H1 –  immer nur eine pro Seite) und Zwischenüberschriften (H2-H3/H4). O.k., also noch mal ran und die Headlines aus den Textblöcken rausholen und sauber mit H1 bis H3/H4 versehen.

>> Der Teufel steckt im Detail. Immer und überall … <<

Puh, und dann auch noch das leidige Thema Datenschutz. Aber das war zum Glück schnell abgehakt. Ich nutze dafür die aktuellen Standard-Texte, die man individuell über eRecht24 zusammenstellen kann. Natürlich ist das keine 100%ige Sicherheit (vor Abmahnungen), aber ich bin bisher gut damit gefahren. Wer ganz sicher gehen will, beauftragt für Datenschutz & Co. einen Fachanwalt.

Falls ihr euch fragt, wie viel Zeit ich für meine Website gebraucht habe: Ehrlich? Keine Ahnung. Zumindest mehr als geplant. Geschätzt: Vom Konzept, über Text, Illustrationen, SEO bis zum Upload mit allen kleinen Nachbesserungen, Checks & Co. – sicher drei 8-10-Stunden-Tage – oder mehr.

Zeit hätte ich mir u.a. sparen können, hätte ich solche Dinge wie Keywords, Description und Co., sprich das SEO, von Anfang an (besser) berücksichtigt. Bei meinen eigenen Projekten verliere ich mich gerne mal in der Gestaltung. Ist wohl so eine Art Berufskrankheit 😉 Macht nichts, war „nur“ meine Zeit. Bei Kundenprojekten lasse ich mich nicht ablenken, da halte ich mich an meinen „Fahrplan“!

>> SEO: Am besten vom Profi. <<

Übrigens: SEO/Suchmaschinenoptimierung mache ich nur für mich selbst (gebe höchstens mal Tipps). Es ist einfach ein zu komplexes Thema und nicht wirklich meine „Baustelle“. Wenn ihr beim SEO für eure Website professionelle Hilfe braucht, kann ich euch gerne meine Kooperations-Partnerin empfehlen.

Zum Schluss noch ein paar Link-Tipps:

PS: Das Layout von meinem Blog wird demnächst auch in Angriff genommen.