Es kommt Bewegung ins Spiel - zum Frühling hin mal wieder ein Redesign von Usability Idealist. Die ursprüngliche Zielsetzung, ein sowohl mit als auch ohne JS (und CSS) gut benutz- und ansehbares Portfolio zu gestalten, ist als solches partiell gelungen. Allerdings ist die unterliegende Struktur zu unflexibel für meine Ansprüche - und die Ansprüche des Künstlers an sein eigenes Werk ist bekanntlich immer höher als das des Betrachters ...

.. diese neue, wenn auch wie immer nur temporär künftige Website werde ich dieses Mal vom Rohbau bis zum fertigen Haus erstellen - frei nach dem Prinzip: Form follows funktion. Zuallererst die mir vorschwebenden Funktionen, dann das hübsche Drumherum.

In den letzten Monaten habe ich deshalb allerlei Inspirationsmaterial gesichtet, welches ich im Laufe des Entwicklungsprozesses auch an dieser Stelle - soweit möglich - miteinbringen werde. Mehr folgt in Kürze ... ;)

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

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;