Tobias Scheible
Web-Entwickler, Ingenieur & Dozent

Datum: Mittwoch, 26. September 2012

Autor: Tobias Scheible

Kommentar(e): 5 Kommentare

Kategorie: Aktuelles

Tags: Geschwindigkeit, Benutzerfreundlichkeit, Sicherheit, Piwik, Design, Gestaltung, Usability, Wordpress, Datenschutz, Responsive Webdesign, Template

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…

  • Artikel teilen:

Über Tobias Scheible

Tobias Scheible

Tobias Scheible arbeitet als wissenschaftlicher Mitarbeiter an der Hochschule Albstadt-Sigmaringen. Dort ist er als Autor und e-Tutor im Masterstudiengang Digitale Forensik tätig und leite im Bachelorstudiengang IT Security Praktika rund um das Thema Informationssicherheit. Darüber hinaus ist er Mitinitiator des Kompetenzzentrums Cyber Security Lab, welches Forschungsprojekte auf dem Gebiet der IT-Sicherheit koordiniert. Zusätzlich hält er Vorträge und Workshops zu aktuellen Themen der IT-Sicherheit.

Alle Blog-Artikel Website Facebook Twitter Xing

Kommentare

Egarmisch

Danke für Infos

matina

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

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

Hallo Dominik,

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

Grüße
Tobias

Frank

Wow, ist schön geworden.

Schreibe einen Kommentar!

Hilfe zum Kommentieren

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 oder eine Gefährdung anderer Besucher darstellen, 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 sie haben die Möglichkeit, ein Avatar-Bild zu verwenden. Dazu müssen Sie mit Ihrer E-Mail Adresse bei Gravatar angemeldet sein. 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>

nach oben