Wie ich es endlich mal geschafft habe, eine eigene Website zu erstellen
Beitrag vom
Eigentlich ist es fast schon peinlich: Da ist man seit vielen Jahren im Webbusiness unterwegs, baut ein Projekt nach dem Anderen und hat keine eigene aussagekräftige Seite. Das sollte sich jetzt doch mal endlich ändern. Hat es Gott sei Dank nun auch!
Nun… eigentlich ist es ziemlich einfach gesagt. Trotzdem hole ich etwas länger aus.
Wie für jede kleine oder große online-Pritsche gehört es zum guten Ton, sich und sein Können zu präsentieren.Was mich dabei am meisten nervt, ist die Selbstdarstellung. Einerseits muss man sich ja selbst hoch loben. Oft liest man Dinge wie
Wir sind professionell, was wir machen ist hochmodern… eine Kunst! Nein! Eine Wissenschaft für sich! Wir sind Experte auf unserem Gebiet – Ihr Sparringspartner. Wir liefern Kompetenz, Innovation und Wachstum seit N Jahren.
Das ist für mich einerseits eine Selbstverständlichkeit und andererseits irgendwie ein BWLer Bullshit-Bingo.
Ja, auch ich möchte meine Fähigkeiten transportieren und darstellen, aber nein, ich möchte mir dabei auch selbst treu bleiben. Die Frage war also: Was schreibe ich über mich… und vor allen Dingen wie schreibe ich es nach meiner ganz persönlichen Art? Mir war es beim Inhalt wichtig, alles notwendige zu transportieren, sprich
wer bin ich, was mache ich, was kann ich, was sind meine Referenzen, Call to Action a la „Los schreib mir“.
und dabei mir möglichst meiner Art, meinem Wesen treu zu bleiben und locker und menschlich zu schreiben. Dieser Spagat soll mich viele Nerven kosten. Dachte ich. Im Endeffekt war dann doch alles recht schnell zusammengeschrieben.
So weit, so gut. Ich brauche also eine Seite, um mich schnell und überzeugend vorzustellen und meine Arbeit zu präsentieren. Da ich mich in meinen Ausführungen recht kurz fassen wollte, passte ein One-Pager ganz gut. Die sind sowieso in.
Darüber hinaus soll es noch einen Blog geben. Ich muss ja irgendwo meine Fundstücke, Gedanken und neue Errungenschaften aufschreiben, wie ich es mit weg-essen.de schon für meine Kochgelage mache.
Da ich an der Hauptseite voraussichtlich wenig ändern werde, möchte ich mir den Overload eines CMS sparen. Kann ja HTML, warum also nicht hier und da mal den Code direkt ändern. Für den Blog brauche ich natürlich ein CMS, um komfortabel schreiben zu können.
Das Design stelle ich mir offen, flach und kontrastreich, aber nicht zu bunt vor. Es soll möglichst linear strukturiert sein, sprich wenige ausgefallene Formen verwenden, möglichst reduziert und grafisch simpel aufgebaut sein. Stimmung soll durch den Einsatz von Farbe und Fotografien erzeugt werden.
Also erst einmal inspirieren. Um nicht das Rad das tausendste Mal neu zu erfinden und trotzdem ein wenig Neues dabei zu lernen, suche ich nach Templates und Designs, die meinen Vorstellungen relativ nahe kommen. Und werde fündig.
Das Theme „Spectral“ von HTML5up kommt meinen Vorstellungen schon verdammt nahe. Es ist schlicht, bietet dem Inhalt genügend Platz zum Atmen, ist grafisch minimalistisch. Es nutzt meine aktuelle lieblings-Font Open Sans. Icons von Font-Awesome sind schon drin. Darüber hinaus nutzt es ein für mich neues responsive Framework „skel“. Der Lerneffekt wäre also auch gegeben. Und: ist alles open source 🙂
Insgesamt also schon eine dufte Sache. Ich finde es aber in der Gesamtwirkung etwas zu dunkel. Die Farbauswahl und die Stilelemente haben zudem nicht ganz meinem Geschmack entsprochen.
Trotzdem: Gekauft!
Das Theme ist schnell herunter geladen und im Editor geöffnet.
Am meisten haben mich am Anfang die Farben gestört. Also raus damit. Leider sind Layout und Farbe ziemlich dicht miteinander verstrickt. Statt einer Kontrollklasse für z.B. Grün und einer für das Layout „Bild-Text im Wechsel“ war alles an eine Klasse à la „style1, style2, style3“ gebunden.
Also ist aufräumen angesagt. Erst einmal brauche ich eine Klasse für helle und dunkle Abschnitte. Unabhängig von der Farbe will ich dann das Layout verwenden. Demnach extrahiere ich mir das CSS für die wichtigsten Layouts: Text mittig, Text-Bild im Wechsel, Texblöcke neben- und untereinander.
Puh… sieht doch schon viel netter aus. Da jetzt großen Farbflächen weg sind, kann ich das Orange der Buttons auch mehr einsetzen und definiere es mir als Farbe für Highlighting und Textlinks.
Da der Wechsel zwischen Hell und Dunkel irgendwie noch nicht spannend genug ist, baue ich mir zwischen die einzelnen Abschnitte noch Container, in denen ich stimmungsvolle Hintergrundbilder platzieren und den darauf folgenden Abschnitt anteasern kann.
Jetzt, wo das Design grob steht, werden die Seiten gefüllt.
Ganz oben soll eine Kurzzusammenfassung meines Profils sein. Es hat ja schließlich nicht jeder Zeit, sich den ganzen SchmuSchmu durchzulesen.
Die verhältnismäßig große Textwüste steht da oben aber ziemlich einsam rum. Also wird noch mal gelayoutet und links daneben eine Buzzword-Wolke mit meinen Skills platziert. Und weil wir noch Platz haben gibts Kontaktmöglichkeiten sowie Links zu meinen Profilen.
Meine Referenzen sollen zeigen, dass meine Arbeiten auch mobiltauglich sind. Also Screenshots auf allen verfügbaren Geräten machen und in ein Webdesign-typisches Mac, iPad, iPhone-Mockup platzieren.
Sieht doch alles so weit schon ganz gut aus! Leider gilt das noch nicht für die mobile Ansicht. Also nehme ich Handy und Tablet in die Hand, drehe und wende was das Zeugs her gibt, klicke mich durch und schreibe MediaQueries bis alles passt.
Trotzdem ist mir das alles noch ein bisschen statisch. Es ist an der Zeit, in die Effekt-Kiste zu greifen. Ein Blick in den JS Ordner verrät mir, dass jQuery und eine Scroll-Library schon vorhanden sind und nur darauf warten, genutzt zu werden. Dem will ich also jetzt nachkommen.
Da zu viel BlingBling auch wieder billig wirkt und Handyakkus zum Kotzen bringt, habe ich mich entschlossen, Blöcke beim betreten des Bildschirms einmalig via CSS3-Transition dezent einzublenden. jQuery hält die meiste Zeit den Schnabel und kümmert sich nur darum, die Elemente mit einer Klasse zu versehen, wenn sie an der Reihe sind.
Das solls dann gewesen sein. Die Website ist fertig.
Da ich wirklich nur ein wenig Bloggen möchte, weder eine Community brauche und sonst noch irgendwelche Killer-Features benötige, habe ich mich für den Straight-Forward Prozess entschieden und WordPress eingesetzt. Sicherlich wäre mein Vorhaben in Drupal mindestens genauso schnell umgesetzt, doch für die kleine Aufgabe wäre es ein absoluter Overkill.
Zu den Aufgaben von WordPress sollen gehören: Texte und Bilder einsetzen, Videos einbetten und Codeschnipsel präsentieren. Also auf gehts. WordPress wird installiert und mit zwei Beispielartikeln befüllt, mit denen ich arbeiten kann.
Grundsätzlich sollen Hauptseite und Blog aus einem Guss sein. Die wesentlichen Unterscheidungsmerkmale liegen darin, dass ein Blog mehr Navigationsmöglichkeiten benötigt und sich deshalb die Verwendung einer Sidebar anbietet. Da ich hier weniger wortgenau arbeiten und platzieren kann (Texte frei Schnauze, Benutzereingaben etc. ), muss das Layout auch etwas schlichter sein. Ich setze hier also auf das vertraute Bootstrap Theme und baue die Optik nach.
Es gibt nichts, wofür es Bootstrap nicht gibt. Also lade ich mir ein gut bewertetes Bootstrap-Theme für WordPress herunter und installiere es. Ich stelle fest, dass die Version von Bootstrap hier nicht mehr aktuell ist. Und außerdem fällt mir auf, dass das CSS File ungezippt ganze 230kb groß ist. What. The. Actual. Fuck?!
Okay,.. fassen wir uns wieder und denken noch mal neu nach. Eigentlich möchte ich ja nur das Grid. Die ganzen Widgets, Navs, Buttons & Co. sind zwar nett, passen hier aber überhaupt nicht rein. Typografisch möchte ich auch keine Jumbo-Schriften & Co. nutzen. Also kompiliere ich mir ein reines Grid-Bootstrap und ersetze damit das alte CSS. Und siehe da: 30kb! Na also!
Weiter gehts im Manual des Templates. „Ahja… Startseite festlegen, drei Widgets drauf ziehen. Dann ist das Theme fertig.“ Möchte ich aber nicht. Das passt nicht zu meinem Vorhaben. Hmmm… vielleicht doch wieder Drupal? Nein! Ich bleibe tapfer und schreibe mir die Templates und Funktionen nach meinem Geschmack um. Gosh!
Also was ich auf jeden Fall haben will, sind die großen Titelbilder mit ’ner Headline und einem Subtext drauf. Da ich sowieso schon tief im Code rumfriemel, finde ich mich auch relativ schnell zurecht und platziere das Artikelbild in den Headerbereich als Hintergrund. Dynamisches CSS FTW 🙂
Über ein Plugin erweitere ich meinen Editor noch um eine Subheadline, die auch gleich da oben mit platziert wird. Auf der Startseite gönne ich dem Haupttext den ganzen Platz, der zur Verfügung steht. Die Sidebar schmiegt sich neben die „letzte Beiträge“-Liste. Auf Unterseiten und Artikel teile ich den Raum im 3 zu 1 Faktor für Content und Sidebar auf.
Alles Weitere an Gestaltung wie Farbe, Typo, usw. übernehme ich aus der Hauptseite. Für Codeschnipsel nehme ich highlight.js sowie etwas eigenes CSS. Neue Navigationselemente wie Pager gestalte ich analog zu den Elementen der Hauptseite.
Damit die Seite schön rennt, werden Files und Seiten komprimiert und gecached.
Tags: Entwicklung, Gestaltung, Umsetzung, Website