05.04.2013: Usability Idealist 3.0

Die neue Version dieser Website ist schon länger in Planung, aber erst vor etwa einem Monat konnte ich mich richtig ans Werk machen.

Geplante Funktionen und Änderungen u.a.:

  • Aufgefrischtes und einheitlicheres Design - damit alles wie aus einem Guß wirkt
  • Nutzung eines an Blueprint CSS angelehnten Frameworks, HTML5, CSS 3
  • Responsiveness, Unterstützung für Touchscreens und Verbesserung der tastaturbasierten Navigation
  • Slideshow / AJAX-basiertes Paging innerhalb der einzelnen Portfolio-Einträge
  • Backend / Unterbau: Habari 0.9.1 / 1.0a, Frontend: eigenständiges, minimalistisches Noname-Framework
  • Weblog: Designumsetzung auf Basis von Blueprinter, einem Blueprint CSS-Fork mit auf aktuellem Stand gebrachten Features (siehe u.a. BlueCalc2)
  • ein paar Habari-Plugins, z.B. Static Image Gallery sowie Custom BBCode(s), um die interne Verwaltung zu verbessern

Angestrebter Relaunch-Zeitrahmen: April - Mai 2013

23.03.2013: Landdruckerei.de

Seit September 2012 bin ich für Landdruckerei.de tätig, primär als Frontend-Entwickler (HTML, CSS, JavaScript, Smarty Template Engine). Bis dato wurden u.a. folgende Leistungen bzw. Änderungen ausgeführt:

  • Umstellung der datei-internen Struktur auf state-of-the-art-Techniken (z.B. Einbindung mehrfach benutzter Seitenteile, verbesserte Variablenübergabe u.ä,)
  • Umstellung auf HTML5, CSS 2/3, Javascript- und Website-Optimierungen (u.a. mittels HeadJS und jQuery)
  • Einführung eines CSS-Frameworks (vom Prinzip her ein für heutige Verhältnisse erweitertes Blueprint CSS-Grid)
  • Redesign von Teilen der Website zugunsten der Benutzerfreundlichkeit (etwa die Kategorien- und Produktauflistung)
  • Integration eines Weblogs auf Basis von WordPress

URL: http://www.landdruckerei.de/

24.10.2011: KERNenergie

Von Anfang Januar bis Oktober 2011 war ich bei KERNenergie - "Nüsse nach Deinem Geschmack"! - als hauptverantwortlicher Webentwickler mit von der Partie. Desweiteren fungierte ich nach Ausscheiden des urspr. Programmierers auch als Systemadministrator.

Neben dem Austausch des CMS (statt fast-statischen Smarty Templates jetzt teil-statisches WordPress) lag der Fokus stark auf Usability und Performance-Optimierung. Letzterem ist die aktuelle Startseite zu verdanken, die im Vergleich zur ursprünglichen Website nicht nur wesentlich schneller lädt, sondern auch erheblich einfacher zu pflegen ist. Desweiteren wurde die Struktur verändert, um den Fokus besser aufs Wesentliche zu setzen (weg von der vorherigen "Bauchladen"-"Ramsch-Ausverkauf"-Optik).

In Arbeit befanden sich u.a. folgende Bereiche:

  1. WordPress als CMS
  2. Weitentwicklung des Blogs: Teils optisch, vor allen Dingen aber inhaltlich, d.h. statt Presse-Mitteilungs-Ecke hin zum echten Weblog mit Einblicken in den KERNenergie-Alltag
  3. Händlerliste: OpenStreetMap-basierte Karte (nicht nur Deutschland)
  4. Verbesserung der Gesamtnavigation
  5. Footer-Elemente

22.05.2009: Linkdump: target="blank" is evil

Nur zur Notiz, damit ich es nicht jedes Mal neu raussuchen muss:

  1. Warum target=”_blank” nervt und verboten gehört
  2. The folly of target="_blank"
  3. Links in new windows (target="blank") considered harmful

21.04.2009: Netbook-Optimierungen (fwolf.info)

Da ich die letzte Woche durchgehend mit meinem Netbook unterwegs war, ist mir aufgefallen, dass auf meiner Infosite (fwolf.info) die Navigation aufgrund der Länge (und dem "position: fixed") quasi nicht benutzbar war.

Habe ich jetzt geändert. Ab einer Höhe weniger als 700 Pixeln wird die Navigation (mittels jQuery) automatisch zusammengeklappt. Die jeweilige Subnavigation öffnet sich dann beim Mouseover- bzw. Hover-Event.

28.12.2008: Überarbeitung dieses Weblogs

Ich grüble grade, wie ich dieses Weblog sinnvoller benutzbar mache. Folgende Dinge stören mich ganz speziell:

  • Keine Quickbutton-Bar im Habari-Admin-Bereich
  • Die Links sind fast nicht vom restlichen Text unterscheidbar - Lösung: andere Farbe / Hervorhebung
  • keine durchgehende Logik für Links (mal unterstrichen, mal fett, mal andersfarbig) - stammt noch vom ursprünglichen Theme (Blossom-port für Habari)
  • Irgendwo hätte ich gern die neuesten 5 Links aus meinem Scuttle-Bookmark-Server ausgegeben - bei der jetzigen Struktur der Blog-Startseite würde es aber etwas überfüllt aussehen
  • Die Archiv-Funktion dieses Themes ist broken bzw. zeigt nicht alle Einträge des jeweiligen Monats an
  • Listen werden visuell schlecht erkennbar dargestellt (keine Aufzählungszeichen, grau statt schwarz / andere Farbe, etc.)
  • Quotes könnten auch besser visuell dargestellt werden (z.B. "speech bubble" mit Anführungsstricherl-Grafik) und anderer (Text)Farbe

13.12.2008: Accessibility gone wrong

Die Bahn hat ihre Website erneuert - und gleichzeitig natürlich auch ihre Bahnauskunft.

Leider hat die ein paar gewaltige Riesnhornochsereien in Sachen "Barrierefreiheit". So spuckt das System völlig falsche Daten aus, sobald man JS deaktiviert. Nur wer sämtliche nicht-relevanten Felder entleert, bekommt ein korrektes Ergebnis.

Da hat jemand wohl den Begriff "unobtrusive Javascript" völlig falsch verstanden, deshalb wiederhole ichs hier kurz noch mal: Unobtrusive Javascript bedeutet, dass man die Anwendung erstmal problemlos OHNE JS benutzen kann, danach werden verschiedene schnicke Zusatzfunktionen mittels JS ergänzt.

Und im Textbrowser sieht die Sache noch viel schlimmer aus - eine "skip-navigation" ist zwar eingebaut, funktioniert aber nicht, da die Sprungmarken falsch gesetzt sind. Getestet mit w3m und links2.

Letzter Punkt: Die "Details einblenden"-Buttons funktionieren teilweise nicht bzw. nur erst dann, wenn man sich sowieso bereits in der Detailansicht befindet und weitere Verbindungen mittels des "Später"- oder "Früher"-Links heraufbeschwört. WTF?!?

Natürlich alles schön im debilen Web ZwoTot-Style mit viel Blingbling, aber wenig SinnSinn gehalten. Argh! X-(

Ich glaub, ich bau mir jetzt meine eigene Bahnauskunft .. genug des Trauerspiels - ist ja total lächerlich geworden ...

17.09.2008: jQuery-based charts

Bookmark: Creating accessible charts using canvas and jQuery - nette Methode das.

12.09.2008: jQuery collumn select

Note to self:

$('.row-col1').hover( function() { $('.row-col1').attr('style', 'background-color: #fe0;'); }, function() { $('.row-col1').attr('style', ''); }