das digiwerX-Weblog

Da werkel ich so an vielen schönen Projekten und stoße dabei hin und wieder auf meinen inspirationshungrigen Streifzügen durchs Netz auf Dinge oder Verfahrensweisen oder auch optische Umsetzungen, die mir nachhaltig im Gedächtnis bleiben. Kürzlich war dies eine Website (danke Gerrit), die nicht nur etwas eigenwillig gestaltet ist, sondern auch pfiffig mit Bildschirmauflösungen umgeht. Das fällt gar nicht auf, wenn man die Seite zuerst mal auf einem Monitor bei 1024x768 anschaut. Es wird erst deutlich, wenn die Auflösung höher ist, wie zum Beispiel bei heute gängigen 22-Zoll-Flachbildschirmen: 1680x1050 (ja, man kann natürlich im Firefox auch kleiner zoomen, aber das macht normalerweise niemand). Richtig klasse. Schön gestaltet, ohne den Text auseinander zu reißen. Ein bisschen Wehmut beschleicht mich da schon. Es galt mal als Paradestück, ein fluides Layout zu entwerfen, welches sich in der Breite und Form allgemein der vorhandenen Auflösung anpasst. Möglichst ohne das Layout zu zerpflücken. Wie, du kannst nur ein fixes Layout? Wie rückständig ...
Aber mal ehrlich: die Diskussion um die Rücksichtnahme auf eine 800x600-Auflösung bei der Seitenanpassung und die fluide Gestaltung für höhere Auflösungen hat inzwischen einen ellenlangen Bart. In Anbetracht der heute verwendeten Bildschirmgrößen stellt sich eher die Frage nach einer sinnvollen Anpassung des Viewports und damit einhergehend einer Begrenzung von Textbereichen. Wer will schon eine 60 cm lange Textzeile lesen? Nicht zuletzt begrenzen viele freiwillig den Viewport - sie machen einfach den Browser nicht ganz so breit, weil es einfach nicht nötig ist. Man kann den Winamp an die Seite legen oder ICQ oder was auch immer. Ist ja genug Platz da. Um auf die obengenannte Website zurückzukommen: der Inhalt ist auf eine 1024er Breite angelegt, alles weitere ist optisches Beiwerk. Es ist völlig wurscht, wie groß der Bildschirm ist bzw. welche Auflösung er hat. Ist es nur die Mindestauflösung gibt es den Inhalt eben ohne zusätzlichen Schnickschnack - der ist (optisch passend) einfach „abgeschnitten“. Simpel, aber gut.
Blöderweise löste diese Seite eine gewisse Unzufriedenheit mit meiner eigenen aus. Wer weiß, vielleicht ist es auch nur wieder der Hang zum Frühjahrsputz, der mich (und beruhigenderweise auch viele andere) jedes Jahr von neuem befällt. Da muss frischer Wind rein. Und ... nun ja, das fluide Layout soll nicht mehr ganz so fluide sein. Zumindest der Text muss in leserliche Bahnen gelenkt werden. Obwohl das ja auch wieder seinen Reiz hat. Inzwischen haben sich auf meinem Schreibtisch schon wieder etliche Zettel angesammelt. So kleine Notizzettel. Auf jedem ist eine kleine Skizze. Einige zum allgemeinen Seitenaufbau, einige mit einzelnen Elementen. Daraus erwächst dann eine komplette Idee, wie es aussehen und funktionieren soll. Keine halben Sachen. Ich bin gespannt .

Während der Arbeit an der neuen Seite für mein Portfolio (eine Broschüre) überlegte ich, wie ich einige Bilder dazu einerseits auf der Seite selbst und auch nochmal als vergrößerte Ansicht bereitstellen könnte. Das alles ohne den Besucher durch Seitenwechsel oder Zurück-Klick-Aktionen zu nerven und im Hinblick auf die Nutzerfreundlichkeit  auch ohne technischen Zusatz-Schnickschnack. Ich habe mir mal die inzwischen zahlreich vorhanden Overlay-Bildertools angesehen. Overlay heißt, beim Klick auf das Bild wird das vergrößerte Bild über die eigentliche Seite gelegt. Das bringt Ruhe in die Seite, da die Basis-Seite immer da bleibt.
Dass gewisse optische Spielereien meist erst durch Javascript so aussehen, ist dabei in Ordnung. Wichtig war mir nur, dass alles auch bei deaktiviertem Javascript funktioniert. Vielleicht dann etwas weniger schick, aber mit der selben Funktionalität. Eine weitere Bedingung war, dass es ein schlankes und schnelles Script ist. Da gibt es doch große Unterschiede. Gelandet bin ich dann bei Lightbox 2. Das ist ein kleines, leicht zu handhabendes Script, welches sich der Scriptaculous-Effektbibliothek bedient. Es wird alles nötige bereits mitgeliefert. Ein paar Kilobyte Upload und fertig. Man braucht nur die Scripte im Dokumentenkopf einbinden. Dann werden die jeweiligen Bilder einmal als Vorschauversion und nochmal in der Vergrößerung angelegt. Im HTML-Dokument selbst wird über eine simple „rel=“-Anweisung im Bildlink die Beziehung zu Lightbox hergestellt. Es lassen sich auch Bildgruppen erstellen (habe ich bei der Broschüre auch getan), wo dann bei den vergrößerten Bildern direkt weitergeklickt werden kann, ohne erst das Overlay-Fenster zu schließen.
Das Aussehen des Fensters selbst, aller Elemente darin und die Deckkraft des Hintergrunds lassen sich über eine separate CSS-Datei, die ebenfalls mitgeliefert wird, steuern. Es ist einem selbst überlassen, ob man die Datei mit einbindet, oder die CSS-Anweisungen (es sind nur 21 Zeilen) in die eigene CSS-Datei übernimmt. Ich habe es vorgezogen, das separat zu lassen zwecks Übersichtlichkeit. Farben, Hintergrund und so weiter habe ich auf meine Site abgestimmt. Leider sind die Bildbeschriftungen für die Vor- und Zurück-Schaltflächen in Englisch, daher habe ich mir eigene Schaltflächen mit deutscher Beschriftung gebastelt. Summa summarum waren aber die Schaltflächen der einzige Arbeitsaufwand beim Einbau der Overlay-Funktion. Für diejenigen, denen die deutschen Schaltflächen auch besser gefallen, stelle ich sie zum Download zur Verfügung. Über einen Backlink bei Benutzung freue ich mich natürlich immer .

Download (.zip)

Mein Fazit: passt, wackelt und hat Luft, wie man so schön sagt. Leicht zu handhaben und ohne große Einarbeitung einsatzfähig. Daumen hoch.

Kinners, wie die Zeit vergeht ... Nun habe ich doch mal den Seitenumbau fertig gemacht, über den ich hier schonmal sinniert habe. Seit gestern Abend online, durchgetestet und vor mir selbst abgesegnet.
Der Service-Bereich ist überarbeitet und damit kompakter und übersichtlicher geworden. Neu ist die Rubrik Grafikdesign. Die hätte ich schon längst mal mit aufnehmen sollen, wie sich anhand verschiedener Rückfragen herausstellte. Da ist sie nun und enthält die Grafikleistungen, die nicht unmittelbar etwas mit Corporate Design zu tun haben. Manchmal ist ein Flyer eben einfach nur ein Flyer .
Die meisten Texte habe ich auch nochmal überarbeitet oder ganz neu geschrieben. Einige Stellen konnte ich nicht mehr leiden, weil sie inzwischen irgendwie – hm ... sperrig wirkten. Passt nicht zu mir, weg damit.
Insgesamt also ein kompletter Frühjahrsputz.
Eine Sache schwirrt mir noch im Kopf rum: ich überlege, ob es sinnvoll/praktisch wäre, wenn beim Kontaktformular ein zusätzliches Auswahlfeld für den Betreff zur Verfügung stünde. Dort könnten einige Optionen vorkonfiguriert sein, so dass man dort einfach den Grund der Kontaktaufnahme auswählen kann. Würde das die Kommunikation vereinfachen, da man nicht erst im Text erklären muss, worum es geht oder wäre es nur ein zusätzliches Auswahlfeld, das niemanden wirklich interessiert? Ich persönlich finde es praktisch und nutze es auch, sofern vorhanden. Wie sehen Sie das?

Generell ist es ja immer eine Herausforderung, wachsende Funktionsvielfalt mit einfacher Bedienbarkeit zu vereinen. Was ist einfache Bedienbarkeit eigentlich? Ist das für jeden Menschen was anderes?

Bei Bildschirmanwendungen und im Internet dürfte klar sein, dass es nicht zu viele Schritte, nicht zu viele Klicks bis zum Ziel sein sollten. Aber die Idee, die Klicks selbst zu vermeiden, finde ich spannend. Muss man erstmal drauf kommen. Ausprobieren können Sie das auf (eng.) dontclick.it. Hier werden Mausgesten verwendet, um die Seite zu bedienen. Gefällt mir. Irgendwie vermisse ich das Klicken kein bisschen. Die Maus liegt vergleichsweise leicht in der Hand – sie wird ja nur noch hin und her geschoben.

Schade ist, dass es vorerst in Flash realisiert wurde. Für eine Verbreitung wäre eine universelle Lösung notwendig. Eine, die beispielsweise motorische Einschränkungen des Benutzers berücksichtigt. Aber es ist ja erstmal ein Experiment. Der Computer war früher auch ein raumfüllendes Monster und jeder brach in schallendes Gelächter aus bei der Vorstellung, so ein Gerät in den heimischen vier Wänden zu haben.
Und beim Blick auf mein 24x30 cm großes Mauspad spinne ich den Faden gedanklich mal weiter: wie wäre es, wenn dieses Mauspad eine sensitive Oberfläche hätte und ich (unter anderem) die oben genannte Website ganz einfach mit meinen Fingern bedienen könnte? Das wär was ...

gefunden bei Daniel.