Ubernaut + Redesign — Was gibt es Neues?

5 Monate ist es her, da habe ich hier den letzten Beitrag geschrieben.
5 Monate, wo vieles abseits vom Blog passiert ist. Dazu zählt die vertiefte Mitarbeit an WordPress 3.4 oder aber auch Privates, wie die Klausurphasen meines Studiums zum Medieninformatiker.

Während dieser Zeit habe ich doch recht viele Anfragen bekommen, wann und ob es hier überhaupt noch weitergeht.
Die Antwort: Ja, und genau jetzt!

Wie wird man Ubernaut?

Normale Provider für Webhosting geben seinen Kunden nicht immer einen vollwertigen SSH Zugang, so auch mein alter Provider.
Dies ist auch nicht so dramatisch, solange man nur ein paar PHP Dateien ausführen lassen möchte.
Möchte man aber mehr, braucht man eben mehr.

Nach diesem mehr habe ich gesucht und bin bei Uberspace fündig geworden.

Machen wir’s doch erstmal kurz: SSH. Perl. PHP. Python. Ruby. node.js. Erlang. Lua. Compiler. FastCGI. MySQL. CouchDB. MongoDB. Cronjobs. HTTPS. IMAP. SMTP. Webmail. qmail. vmailmgr. maildrop. Spam­Assassin. ezmlm-idx. DSPAM. ~/service. runwhen. Eigene Logs. Backups. Dazu noch massig Plattenplatz. Und das ist nur der Anfang.

https://uberspace.de/

Und das ist nicht nur das Einzige was Uberspace bietet. Hinzu kommt noch eine freie Preiswahl (Minimum 1€) sowie ein unkomplizierter Support durch erfahrene Linux-Admins.

Interesse geweckt? Dann teste doch auch mal einen Monat lang das Ubernaut-Sein.

Das Redesign

Nachdem für das Backend gesorgt war, sollten die zukünftigen Beiträge eine gute Grundlage haben. Ein Redesign stand an.
Die Eckdaten für das Redesign waren:

  • Interessante Typografie
  • Platz für Content, Konzentration auf den Content
  • Visuelle Unterstützung durch Grafiken
  • Fluides Raster
  • Unveränderte Performance
  • Farbliche Gestaltung am alten Design angelehnt (blau/weiß/grau)

Typografie

Abseits der gängigen Schriften wollte ich diesmal etwas Ausgefallenes. Dies ist dank Web Fonts heutzutage kein Problem mehr. Meine Wahl fiel dabei auf die Google Web Fonts. Schrift auswählen, CSS einbinden, fertig.

Die Auswahl ist groß groß und ich entschied mich für die Schriftart Bitter. Warum? Sie gefällt mir!

Webfont Bitter

Aktuell sind auch sogenannte Icon Fonts im Kommen, siehe Icon Fonts are Awesome. An einigen Stellen hab ich deswegen Headlines mit kleinen Icons unterstützt.

wpGrafie Iconfont erstellt mit der IcoMoon App.

Raster

Da einer der Vorgaben das fluide Raster war, habe ich mich an Bootstrap, from Twitter bedient.
Bootstrap beinhaltet ein 12-Spalten Raster, welches auf Prozentwerte setzt.
Dadurch passt sich der Inhalt dieser Seite optimal an die Bildschirmgröße an und ein mobiles Theme ist nicht von Nöten. Probiert es mal aus.

Grobe Aufteilung einer Artikelansicht. Sidebar auf Autoreninfo beschränkt.

Social Sharing

Sharing Plugins der drei meist genutzten Netzwerken. Visuell aufbereitet.

Um das Teilen bzw. Empfehlen zu erleichtern, haben die Social Plugins für Twitter, Google+ und Facebook nun auch Platz am Ende eines jeden Beitrags gefunden. (Ja, die Diskussionen darum sind mir bekannt, mal sehen wie sie genutzt werden. ;)

Performance

Die Performance einer Webseite spielt für mich eine große, sehr große, Rolle. Niemand mag langsame Webseiten. Deswegen sollte trotz Redesign auch nichts an der alten Performance verloren gehen. Und ich mag behaupten, dass dies gelungen ist, trotz externer Skripte (Web Fonts, Social Plugins).

Dank guter Komprimierungen, optimale Cacheeinstellungen, sowie dem Plugin Cachfiy ist die Seite weiterhin einer der schnellen Seiten im WordPress Bereich.

Ausgabe der Serverüberwachung durch wemonit.de

Was gibt es sonst noch Neues?

Ich habe diesmal bewusst auf eine Paginierung verzichtet. Aus der Vergangenheit konnte ich feststellen, dass die Paginierung relativ selten bis gar nicht genutzt wurde. Als Ersatz gibt es dafür das neue Archiv.

Außerdem wurde die Darstellung von Codeschnipsel überarbeitet. Weiterhin kommen hier die Github:gist API in Einsatz, und neu, durch Pygments aufbereitet. Beispiel gefällig?

Facebook Fanpage

Last, but not least…

wpGrafie goes Facebook

So, und nun genug geschwärmt vom neuen Design. Ich hoffe es weiß zu gefallen, wenn’s was zu meckern gibt (oder auch nicht), dann schreibt doch einen netten Kommentar.

Bis zum nächsten Beitrag,
Gruß
Dominik

20 thoughts on “Ubernaut + Redesign — Was gibt es Neues?”

  1. Platz für Content, Konzentration auf den Content

    Unveränderte Performance

    Um das Teilen bzw. Empfehlen zu erleichtern, haben die Social Plugins für Twitter, Google+ und Facebook nun auch Platz am Ende eines jeden Beitrags gefunden.

    Gut getrollt!

    1. Hi tux,
      blockquote ging schon, hatte nur keine Styledeklarationen für die Kommentare, jetzt schon.

      Was du mit deinem „gut getrollt“ meinst ist mir allerdings nicht ganz klar.
      Eventuell solltest du wissen, dass die Social Plugins nicht 0815 hier eingebunden worden sind. Dafür bin ich schon zu lange in dem Geschäft.

      Diese werden nämlich erst 5 Sekunden nach dem eigentlichen Seitenaufbau geladen. — Heißt, will man nur kurz schauen und bleibt unter den 5 Sekunden werden keine unnötigen Plugins geladen.
      Ist man länger auf der Seite, werden, während man z.B. den Artikel ließt, die Plugins im Hintergrund geladen.

      Gruß
      Dominik

    2. Na ja, “Platz für und Konzentration auf Content” und dann solche riesigen Teilen-Dinger unten…

      Aber: Sehr gute Lösung! :-)

  2. Ich sehe die Webseite gerade unter Ubuntu auf dem Netbook und kann da nicht viel zu sagen da der Ausschnitt zu klein ist. Im Grunde sehe ich nur eine Textspalte, was nicht negativ gemeint ist.
    Die Codesnippets sind allerdigs schlecht zu lesen. Bei mir wird farbiger Text auf einen, sagen wir mal, Poporosa Hintergrund angezeigt. Einen weißen Hintergrund fände ich da doch deutlich lesbarer, vor allem mit der farbigen Schrift.

    1. Hallo Ralf,
      nur eine Textspalte? Da der Content eigentlich nur in zwei Spalten aufgeteilt ist — Text und Autoreninfo — ist das doch in Ordnung? Eventuell kannst du mir ja mal einen Screenshot zukommen lassen.

      Bzg. der Codesnippets: „Poporosa“ ist das eigentlich nicht, mehr ein Grau-Gelb.
      Infos über die Farbe: http://www.colorhexa.com/eee8d5
      Eine „Poporosa“ erkenne ich eigentlich nur dort unter dem Punkt „Farbenblindheit“.

    2. Jetzt unter Windows sind alle Spalten da. Lag also wohl am Browser oder OS, muss ich noch mal nachschauen.

      Auch das “Poporosa” wird unter Windows anders gerendert. Allerdings ist der Kontrast zwischen Schrift und Hintergrund immer noch sehr marginal, was die Lesbarkeit doch arg stört.
      Im verlinkten Artikel hast du oben eine Grafik mit einem Codesnippet. Dort finde ich die Farben deutlich kontrastreicher und besser lesbar.
      Vielleicht sollte ich aber auch erwähnen das ich mit dem Netbook hauptsächlich unterwegs online bin und die Lichtverhältnisse nicht konstant sind. Vielleicht kannst du ja noch eine Wahlmöglichkeit für eine alternative Farbe einbauen, dann könnte man sich die Farbdarstellung an die jeweilige Umgebung anpassen.

  3. Hallo Dominik,

    der Artikel zum Redesign ist zwar schon ein paar Tage alt, trotzdem hätte ich da noch eine Frage:

    Eventuell solltest du wissen, dass die Social Plugins nicht 0815 hier eingebunden worden sind. Dafür bin ich schon zu lange in dem Geschäft.

    Diese werden nämlich erst 5 Sekunden nach dem eigentlichen Seitenaufbau geladen. — Heißt, will man nur kurz schauen und bleibt unter den 5 Sekunden werden keine unnötigen Plugins geladen.
    Ist man länger auf der Seite, werden, während man z.B. den Artikel ließt, die Plugins im Hintergrund geladen.

    Das ist genau das, wonach ich schon seit einer Weile suche!
    Kannst Du dazu noch etwas mehr sagen?

    Viele Grüße
    Bernhard

Leave a Reply