25.10.2009: Neues Logo

Oder besser: Angepasstes Logo. Die Buchstaben und der Trenner bleiben. Auch die Schaltfläche. Allerdings wird es stark simplifizert - desweiteren wenn möglich 2-farbig bzw. monochrom werden, damit ich es in den verschiedensten Farbtönen abbilden kann.

Hintergedanke:

Desweiteren werde ich die Buchstaben anpassen - das "U" soll einen eher bauchigen Charakter bekommen, leicht einem kleinen "a" ähneln. Das "I" hingegen soll tatsächlich wie das große "I" in Arial o.ä. serifenlosen Schriftarten wirken - mit einer ganz leichten Abrundung an den Kanten, die das "menschliche" hervorheben soll.

Derzeit mangelt es mir aber leider noch am Werkzeug - ideal wäre ein Grafiktablett, auf dem ich die Buchstaben und den Trenner zeichnen kann. Wäre auch nur kurz dafür zu nutzen - also im besten Fall mal bei Bekannten oder Kollegen in der näheren Umgebung. Ansonsten entwerfe ich ja kaum Logos.

Bis dahin gibt es eine Alpha-Version mit vorhandenen Schrifttypi, die ich kurz angepasst habe. Das folgende Bild zeigt hierbei das Prinzip - zwei Buchstaben, Trenner plus leicht abgerundeter Button. Bild Nr. 2 zeigt die Nachfolgeversion, die schon eher meinem gezeichneten Originalentwurf entspricht.

logo-alpha01-pre.png

logo-alpha01.png

10.07.2009: UI 1.5: Beta online

Dringend gesucht: Ein gescheites Portfolio.
Weshalb ich jetzt auf die Schnelle die Beta-Version von UI 1.5 live geschaltet habe.

In den nächsten Wochen wird das Ganze dann finalisiert.

Yet to do:

  • Gescheiter Bugfix für die fehlerhafte Darstellung der Subnavigation im Firefox (derzeit nur Quick'n'Dirty-JS-Hack)
  • Journal: entweder blueprintCSS rausschmeißen oder Bugfix finden für das merkwürdige Verhalten des Footers (siehe ebenda)
  • Journal: Visuelle Anpassung an die restliche Website abschließen (u.a. noch nicht gestylt: Kommentare, Einzeleintrag, Links suboptimal)
  • Kontaktformular: Umstellung auf SFM 2.0
  • Portfolio: Fehlende Bilder einbinden
  • Portfolio: TimThumb mit IM Wrapper ersetzen

12.05.2009: Very very praktisch

Gerrit hat vor kurzem einen Vortrag zum Thema "Aus der Praxis eines Webdesigners" an der FH Mainz gehalten. Wirklich höllisch praktisch. Kann ich jedem, der einen tieferen Einblick in Sachen Selbständigkeit haben möchte, nur allerwärmstens empfehlen ;-)

30.01.2009: Umgestaltungsideen

Mal folgend meine Umgestaltungsideen, frisch aus meinem sog. struct file:

usability idealist 1.5 - struct:

- portfolio (startseite)
	- wird via habari verwaltet
	- tag: portfolio
	- sorting options
		- active, work in progress, offline => using tags
		- sort by date or alphabet (ascending, descending)
	- integration von ScrollTo / LocalScroll
	- bilddateien
		- fullsize: images/portfolio/[slug]/[##].jpg
		- midsize: images/portfolio/[slug]/[##].mid.jpg
		- thumb: images/portfolio/[slug]/[##].small.jpg
		
- leistungen
	- intern mittels IDs versehen, um navigation einblenden zu können
	- unterteilung (ggf. weniger):
		- design
		- programmierung
		- beratung - inhalt ließe sich womöglich in den anderen drei punkten unterbringen
		- webhosting
		
- journal -> habari
	- startseite
		- excerpt des aktuellsten eintrags
		- letzte 5 einträge
		- suche
		- scuttle-pullouts
		- empfehlungen / auszug aus blogroll
	- einzelansicht
		- zentriert, z.b. 80% der seite oder 950 px breite
		- links 2/3 bis 3/4 für inhalt, rechts seitenleiste
		- inhalt:
			- headline
			- post
			- tags
		- seitenleiste
			- evtl. sitewide navigation
			- suche
			- monatsarchiv (mit accordeon-pulldowns, wie auf bisheriger startseite)
			- tag cloud
			- blogroll
	- tag-ansicht
		- wie einzelansicht, evtl. ohne oder reduzierte seitenleiste
	- archivansicht
		- wie tag-ansicht
		
- kontakt
	- mit spam-protection
	- ohne tollen button-effekt beim submit-button
	- annäherung an kontaktformular von fwolf.info
	- ansonsten wie gehabt

--- global site changes:
- rss-/atom-feed in header
- jquery 1.3.1 zum ausprobieren, was noch alles läuft
- unobtrusive javascript, d.h. navigation wird rein technisch an den anfang der seite gelegt, und wenn JS aktiviert ist, ans ende der seite (position: fixed) gesetzt
- seitenaufbau:
	- header
		- enthält logo (annäherung an den header vom blog, damit später nur noch das blog-logo eingeblendet wird, man den übergang aber nicht so radikal mitbekommt => momentan sind die größen der logos unterschiedlich!)
		- link zur startseite
	- navigation
		- ohne JS: top-down
		- mit JS: bottom-up, footer folgt
		- visuell
			- tabauswahl mit leichtem button-effekt oder sonstiger hervorhebung (schatten, umrandung, whatever)
			- unterstrichene links, hover = text-decoration / border: none
			- ausgewähltes tab hat dieselbe farbe wie die subnavigations-leiste
			- ausgewählter menüpunkt ist fett formatiert
	- content / main
		- 80% / 950px breite
	- footer
		- gesamte seitenbreite, links anliegend, höhe z.b. 60px;
		- enthält copyright-daten + "powered by"-informationen - andere farbe als rest, z.b. fast schwarzer / grauschwarzer grünton, evtl. kleiner verlaufseffekt
		- ohne JS: ganz am seitenende
		- mit JS: position: fixed; bottom: 0; left: 0; => navigation wird darüber gesetzt, z.b. bottom: 60px, left: 0;

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 ...