Tobias Scheible Cyber Security & IT-Forensik Dozent
Neues Blog-Design

Neues Blog-Design

Manche von euch wird es schon aufgefallen sein, dass mein Blog ein neues Layout bekommen hat. Im Vergleich zum ersten Design habe ich dieses Mal die Ärmel hochgekrempelt und ein komplett neues Wordpress Template von der Pike auf selbst entwickelt.

Bei meinem vorherigen Layout setzte ich auf das Standard-Template Twenty Ten von WordPress und änderte dieses entsprechend ab, um eine eigene Optik zu bekommen. Den Blog erweiterte ich mit einigen Plugins und wertete ihn mit Widgets auf. Mittlerweile hat es mich allerdings gestört, dass das Layout nicht Responsive Webdesign fähig war. Außerdem war es nicht mehr leichtgewichtig und damit in meinen Augen auch nicht mehr schnell genug. So hatte ich am Ende durch diverse Plugins drei unterschiedliche Versionen von jQuery-Bibliotheken eingebunden. Also musste ein neues Template her, das schnell ist, auf allen Geräten gut aussieht und leicht zu bedienen ist. Deshalb entschied ich mich für eine komplette Neuentwicklung. Als Grundlage für die Entwicklung habe ich die Anleitung von „webdesignblog“ bzw. die neuere und ausführliche Anleitung auf „lernen hoch 2“ verwendet.

Design

Von der Optik her habe ich mich an meinem alten Design orientiert, es wurde nur alles etwas geräumiger und moderner. Zusätzlich gibt es jetzt ein Menü oben im Header, das früher in der Seitenspalte etwas untergegangen ist. Aus der rechten Seitenleiste ist das Archiv rausgeflogen (Wer sucht Blog-Einträge schon nach dem Datum?) und ein kleiner „über mich“ Text hat Einzug gehalten. Bei meinem alten Layout setzte ich bereits auf die Android-Schrift Droid und jetzt verwende ich die neue Schriftart Roboto, die seit der Version 4 in Android verwendet wird.

Benutzerfreundlichkeit – Usability

Die Benutzerfreundlichkeit oder moderner gesagt die Usability ist ein Thema, für das ich mich schon früh begeisterte. Daher habe ich auch diesmal darauf geachtet,  meinen Blog so einfach wie möglich zu gestalten, auch oder vor allem für nicht Techniker. Außerdem ist es mir wichtig, die Beiträge optisch so gut wie möglich in den Vordergrund zu stellen. Auch mit Hilfe der klaren Schrift und des starken Kontrastes verfolge ich das Ziel, ein möglichst klares Schriftbild zu erzeugen.

Geschwindigkeit

Bei der Geschwindigkeit hat sich im Vergleich zum alten Layout am meisten getan. Ich setzte eigentlich nur noch Plugins ein, die auf PHP-Seite neue Funktionen bereitstellen. Für die CSS-Dateien habe ich mir ein kleines PHP-Skript gebastelt, das meine CSS-Skripte zusammenfasst und dann komprimiert ausgibt, so dass nur eine Datei geladen werden muss, aber trotzdem alles sauber strukturiert werden kann. Auf der JavaScript-Seite binde ich ebenfalls nur ein eine einzige Datei ein, die die jQuery-Bibliothek enthält und meine restlichen Skripte. Alle weiteren Skripte werden dann asynchron bei Bedarf geladen, je nach dem, mit welchem Endgerät die Seite aufgerufen wird.

Responsive Webdesign

Bei der Anpassung an die unterschiedlichen Geräte wie Tablets, Smartphones, Netbooks und Desktops bin ich auf das Problem der unterschiedlichen Auflösungen gestoßen. So hat ein aktuelles Smartphone wie das Galaxy S3 von Samsung eine höhere Auflösung als ein durchschnittliches Netbook. Aus diesem Grund konnte ich die Geräte nicht über die Auflösung unterscheiden. Daher setze ich jetzt auf die Lösung von WURFL. Dieser Dienst gleicht den User Agent mit einer Datenbank ab und gibt mir so die Art des verwendeten Gerätes zurück. Die Seite für den Desktop kann beliebig skaliert werden und für Smartphone und Tabelts gibt es jeweils eine Version für den Portrait- und  Landscapemodus.

Datenschutz & Sicherheit

Da ich keinerlei externe Komponenten wie Web-Fonts, Social-Media Buttons oder Statistiken einbinde, würde ich meinen Blog als datenschutzrechtlich unbedenklich einstufen. Als Statistik setzte ich auf die Open Source Statistik Piwik. Alle Daten bleiben bei mir. Mit der Umstellung des Layouts habe ich auch meinen Blog auf die sichere Übertragung  per TLS (früher SSL) umgestellt. Normalerweise wird immer der Nachteil mit der Geschwindigkeit gegen https ins Feld geführt, was ja gegen meine anderen Maßnahmen sprechen würde. Ich konnte allerdings keine Unterschiede messen, was wahrscheinlich an der Shared-Hosting Umgebung liegt. Zudem haben die mittlerweile sehr schnellen Server und Clients dafür gesorgt, dass die Unterschiede noch geringer ausfallen.

Die insgesamt  größte Änderung ist die Umstellung der Domain. Ab sofort verwende ich nicht mehr die .eu Endung sondern die .it Domainendung. Diese gehört zwar zu Italien. Bis jetzt bin ich noch nicht dorthin ausgewandert, sondern nutze die IT nur in weiterem Sinne 😉 scheible.it hört sich doch für einen Blog über das Internet einfach gleich ein bisschen interessanter an, oder? Allerdings muss ich jetzt aufpassen, da eine .it Endung nicht von jedem gleich wie eine .de Domain als Web-Adresse erkannt wird. Deshalb  muss ich jetzt immer http:// oder www. einfügen, so dass für jeden klar ist, um was es sich handelt.

Ich wünsche euch viel Spaß mit meinem neuen Design und freue mich auf eurer Feedback und euren Input, falls etwas noch nicht ganz nach Wunsch funktioniert oder euch noch eine weitere Verbesserung einfällt…

Über Tobias Scheible

Tobias Scheible

Hallo, mein Name ist Tobias Scheible. Ich bin begeisterter Informatiker und Sicherheitsforscher mit den Schwerpunkten Cyber Security und IT-Forensik. Mein Wissen teile ich gerne anhand von Fachartikeln hier in meinem Blog und in meinem Fachbuch. Als Referent halte ich Vorträge und Workshops für Verbände und Unternehmen u. a. auch offene Veranstaltungen für den VDI und die IHK.

Kommentare

Egarmisch am 3. Oktober 2012 um 19:59 Uhr

Danke für Infos

matina am 7. Oktober 2012 um 19:08 Uhr

Für mich ist das Thema Responsive Design am Schwierigsten. Dies ist so vor allem deswegen, weil das Thema sehr komplex ist.
Von der Lösung WURFL habe ich bisher nichts gehört, aber sie kommt mir am Plausibelsten vor.
Man muss in diesem Fall mit der einen oder anderen Gruppe sicherlich einen Kompromiss eingehen. Die Information über die Nutzer wird bei der Entscheidung, welcher Gruppe man Präferenz gibt, sehr viel weiter helfen können.

Dominik am 23. Oktober 2012 um 11:49 Uhr

Hallo, ich finde dein Design sehr gelungen. Ein kleiner Bug ist mir aber aufgefallen: wenn ich auf einen Artikel klicke, muss ich immer manuell zum Seitenbeginn scrollen, da der Focus immer irgendwo im Text ist (Browser: chrome).

Grüße, Dominik

Tobias Scheible am 24. Oktober 2012 um 22:10 Uhr

Hallo Dominik,

Dankeschön für den Hinweis. Ich hab die Links korrigiert.

Grüße
Tobias

Frank am 12. März 2013 um 10:39 Uhr

Wow, ist schön geworden.

Schreibe einen Kommentar!

Hilfe zum Kommentieren und Hiweise

Um kommentieren zu können, geben sie bitte mindestens ihren Namen und ihre E-Mail-Adresse an. Bitte nutzen Sie die Kommentarfunktion nicht dazu, andere zu beleidigen oder Spam zu verbreiten. Trolle und Spammer sind hier unerwünscht! Unangemessene Kommentare, die zum Beispiel gegen geltendes Recht verstoßen, eine Gefährdung anderer Besucher darstellen oder keinen sinvollen Inhalt beinhalten, werden gelöscht oder angepasst.

Name: Ihr Name, der oberhalb des Kommentars steht, gerne auch Ihren echten Namen, das erleichtert die Kommunikation für alle. Sollte ein Spam-Keyword als Name verwendet werden, kann dieses entfernt oder korrigiert werden.

E-Mail: Ihre E-Mail Adresse dient zur Identifizierung weiterer Kommentare und damit ich direkt Kontakt aufnehmen kann. Die E-Mail Adresse wird natürlich nicht veröffentlicht und nicht weitergegeben.

Website: Hier können Sie ihren eigenen Blog bzw. ihre eigene Website eintragen, dadurch wird Ihr Name und Ihr Avatar-Bild verlinkt. Werden rein kommerzielle Angebote offensichtlich beworben, setze ich den Link auf nofollow und unangemessene werden einfach entfernt.

Erlaubte HTML-Tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <hr> <big> <small> <sub> <sup> <u>

Ihre E-Mailadresse wird nicht veröffentlicht. Mit dem Absenden anerkennen Sie die Datenschutzhinweis des Blogs.