Nach rund vier Monaten hat neontrauma.de heute Nacht endlich ein neues Layout bekommen – das vorherige wollte mir so gar nicht mehr gefallen, und das hat auch meine Motivation zum Artikelschreiben beeinträchtigt. ;-)

Das Dropdown-Menü tut’s im Internet Explorer 6 trotz Suckerfishs Sohn nicht, und ich muss morgen noch etwas an der Performance arbeiten. Ansonsten sollte soweit aber erstmal alles laufen… uff.

Das Lexikon habe ich rausgenommen; das lohnte die Arbeit nicht wirklich. Auch das Ask me habe ich – allerdings schon vor einiger Zeit – wieder entfernt. Wirklich rentiert hat es sich nicht, und mit der Kommentarfunktion, dem Wunschbuch und der Shoutbox gibt es schließlich genug andere Möglichkeiten, wie ihr Fragen stellen könnt.

Wie ihr seht, hat neontrauma.de einen Tapetenwechsel verpasst bekommen. :)

Dabei habe ich viele der Elemente des bisherigen Layouts übernommen, sodass ein gewisser Wiedererkennungswert gegeben sein dürfte. Geändert hat sich vor allem die Aufteilung der Seite: statt einer festen verfügt sie nun über eine flexible Breite, außerdem sind die beiden Sidebars nun links und rechts des Contents angesiedelt und nicht mehr beide auf der rechten Seite. Auch die Headergrafik wurde ausgetauscht.

Den GFX-Downloadbereich werde ich noch umgestalten.

Online-Portfolios als Webseiten, auf denen jemand seine Fotografien und/oder sonstigen Werke wie Zeichnungen, Layouts, Fotos von Printprodukten etc. ausstellt, hat vermutlich jeder schon einmal gesehen. Und ebenso vermutlich hat jeder auch schon einmal über ein besonders ästhetisch gestaltetes Portfolio gestaunt oder irritiert vor einem unübersichtlich zu durchsuchenden Portfolio gesessen. Auf was kommt es also bei der Portfolio-Erstellung an? Was macht ein gutes Portfolio aus? Welche Möglichkeiten gibt es überhaupt, um ein Portfolio anzulegen?

In diesem Artikel werde ich auf die verschiedenen Gestaltungs- und Umsetzungsmöglichkeiten für ein solches Portfolio eingehen. Im Anschluss daran seid ihr herzlich eingeladen, euren Senf dazu abzugeben. :o)

das Layout

Zunächst betrachten wir das Layout der Webseite, die das Portfolio beheimatet. Das Bild soll hier ja eindeutig im Vordergrund stehen, präsentiert werden. Da liegt es auf der Hand, dass die Gestaltung der Webseite nicht vom Foto ablenken sollte – schlichte, dezente Layouts sind hier also zu empfehlen. Aufwendig gestaltete Headergrafiken können zwar auch viel über das designerische Können verraten und die Seite individueller wirken lassen, aber sie sollten den Betrachter keinesfalls vom eigentlichen Inhalt ablenken. Dunklere Grautöne eignen sich gut als Farben für das Layout, wie man beispielsweise in der fotocommunity sehen kann.

Gerade bei großen Fotos ist es wichtig, auf die Darstellung bei niedrigeren Auflösungen zu achten. Nicht jeder besitzt einen so großen Monitor wie viele Designer und Fotografen, und auch bei einer Auflösung von 1024×768 sollte das Layout noch stimmig sein. Auch die Dateigröße und somit die Ladezeit sollte man immer im Auge behalten.

Last but not least: dass Werbeeinblendungen ein höchst unprofessionell wirkendes No-Go sind, brauche ich hier wohl nicht eigens zu erwähnen. ;-)

Anzeige der Bilder

Wie sollen die Bilder nun präsentiert werden? Soll auf der Startseite das jeweils neuste Foto großformatig angezeigt werden oder möchte ich den Besuchern mit lauter kleinen Thumbnails (das sind verkleinerte Versionen der Bilder) gleich eine Übersicht über all meine Werke bieten? Sollen die Bilder nach verschiedenen Kategorien sortiert werden, oder nur chronologisch?

Im Falle von Thumbnails kann man zwischen verschiedenen Formaten wählen. Proportionale Verkleinerungen belassen das Bild bei seinem ursprünglichen Seitenverhältnis und verzerren oder beschneiden es dadurch nicht, aber wenn man verschiedenformatige Bilder hat, gerät eine solche Thumbnailgalerie leicht unsymmetrisch und chaotisch. Ästhetischer wirkt es, wenn die Thumbnails alle die gleiche Größe aufweisen, beispielsweise quadratisch. Hierbei bevorzuge ich es, wenn ein Ausschnitt aus dem Originalbild generiert wird – dass bei der Thumbnailansicht ein Stück vom Bildausschnitt fehlt, finde ich erstmal nicht allzu tragisch, es geht ja nur um einen schnellen ersten Eindruck.

Als nächstes muss man sich überlegen, wie man vom Klick auf das Thumbnail zur Anzeige der Originalgröße gelangt. Am einfachsten ist es hierbei, die Originalversion des Bildes in einem neuen Fenster zu verlinken – aber das ist schnöde und ziemlich hässlich. Hier bietet sich vielmehr der Einsatz von etwas JavaScript an – Stichwort Lightbox, Highslide und wie sie alle heißen. Auf diese Weise kann man einen eleganten Effekt realisieren, sodass sich etwa beim Klick auf das Thumbnail der Bildschirm verdunkelt und stattdessen das große Foto eingeblendet wird, ähnlich einer Diashow.

zusätzliche Infos

Zu einem Bild kann man weitaus mehr Informationen bieten als einfach nur die Bilddatei samt Titel und eventuellen Anmerkungen. So lassen sich beispielsweise die EXIF-Daten auslesen, die von der Kamera automatisch mitgespeichert werden und Angaben zum Kameramodell, den verwendeten Einstellungen wie Belichtungsdauer oder Blendenöffnung, dem Aufnahmedatum etc. beinhalten. Schlagworte (Tags) erleichtern das Auffinden von Bildern in umfangreicheren Portfolios.

Was davon nun eher überflüssiger Schnickschnack ist und was ein Portfolio wirklich bereichert, ist meistens eine recht individuell zu treffende Entscheidung.
Ebenso gilt das für die Überlegung, ob man eine Kommentar- und/oder Bewertungsfunktion anbieten möchte.

hinter den Kulissen

Nun stellt sich natürlich die Frage, wie man sein Portfolio auf technischer Seite realisieren will. Das hängt zum Einen vom Umfang der zu präsentierenden Bilder ab, als natürlich auch vom eigenen Kenntnisstand in Sachen Webdesign und den persönlichen Vorlieben. Rein theoretisch spricht natürlich nichts gegen ein statisches Portfolio, in dem jedes Bild manuell ins HTML eingebunden wird. Komfortabler ist da aber natürlich der Einsatz eines Content Managament Systems – gute Erfahrungen habe ich persönlich hierbei mit WordPress gemacht sowie mit Pixelpost, einem eigens für Bilder gedachten Blogsystem. Für WordPress gibt es mittlerweile zahlreiche Themes und Plugins, die sich speziell an Portfolios richten.

Natürlich könnt ihr euer Theme aber auch individuell erstellen lassen, etwa von einer Agentur für webdesign.

… und eure Meinung?

Auf was legt ihr beim Betrachten eines Online-Portfolios wert? Welche Portfolios gefallen euch besonders gut?
Besitzt ihr vielleicht selbst ein Portfolio und wenn ja, wie habt ihr es in technischer Hinsicht realisiert?

Wer auf der Suche nach einem einfachen Bloggingtool ist, das ohne Datenbank läuft und wer keine spezielleren Features wie Mehrbenutzerverwaltung benötigt, für den ist das schlanke FlatPress eine gute Wahl. Trotz der Ähnlichkeit im Namen hat FlatPress jedoch nichts mit WordPress zu tun, von daher funktioniert es etwas anders und man kann auch nicht die für WordPress entwickelten Plugins und Themes  verwenden.

Susa hat sich im Wunschbuch erkundigt, wie man das Layout (Theme) eines FlatPress-Blogs ändern kann – das erkläre ich in diesem Tutorial.
Wie fast immer hat man auch bei FlatPress die Wahl zwischen einem vorgefertigten oder aber einem komplett selber geschriebenen Theme. Mit Letzterem kann man natürlich all seine Sonderwünsche umsetzen, dies erfordert aber eine gewisse Einarbeitungszeit, um zu verstehen, wie Themes in FlatPress funktionieren. Das genau zu erklären, würde den Umfang dieses Tutorials sprengen, weswegen ich ausführlicher auf den Punkt “ein fertiges Layout installieren” eingehen werde.

ein vorgefertigtes Layout installieren

Zunächst einmal sucht ihr euch ein Theme heraus, das euch gefällt. Stöbern könnt ihr da beispielsweise in der FlatPress-Wiki.
Das heruntergeladene Archiv entpackt ihr auf eurer Festplatte und ladet es ins Verzeichnis /fp-interface/themes auf euren Webspace. Wenn ihr dann im Adminbereich eures Blogs oben in der waagerechten Navigationsleiste auf “Themes” klickt, taucht eurer eben hochgeladenes Theme dort mitsamt einer Vorschaugrafik auf. Über einen Klick könnt ihr es ganz einfach aktivieren.

ein Layout verändern

Wenn ihr einen Blick in das Verzeichnis eures Themes werft, seht ihr dort jede Menge Template-Dateien (mit der Endung *.tpl), eine PHP-Datei sowie die Verzeichnis /res und /images. Letzteres beinhaltet die im Theme verwendeten Bilder und kann auch anders heißen, etwa /imgs, oder vielleicht auch ganz fehlen. Der res-Ordner beinhaltet die Stylesheets (*.css), wobei deren Anzahl unterschiedlich ausfallen kann. Die style.css ist in der Regel für das Layout eures Blogs zuständig und die admin.css für das Aussehen des Adminbereichs. Zusätzliche Stylesheets können beispielsweise spezielle Formatierungen für die Ausgabe im Druck liefern, die interessieren hier aber erst einmal nicht.

Wir werfen jetzt einen Blick auf die Template-Dateien. Deren Namen sollten weitestgehend selbsterklärend sein; die header.tpl wird zu Beginn jeder Seite eingebunden, die footer.tpl am Ende, die index.tpl stellt die Blogeinträge dar, statische Seiten werden über die statics.tpl ausgegeben, den Adminbereich steuert die admin.tpl, und so weiter.

In den Templates selber findet ihr normales HTML bzw. XHTML – und dann eine Art Platzhalter für den eigentlichen Inhalt wie etwa den Blogeintrag. In WordPress werden diese Informationen über die Template Tags abgerufen, FlatPress verwendet Smarty. Beides sind letzlich PHP-Schnipsel, die den eigentlichen PHP-Code vereinfachen, um ihn bequemer im Theme verwenden zu können. Eine Erläuterung, wie Smarty und Themes in FlatPress funktionieren, findet ihr hier.

An dieser Stelle soll es aber lediglich darum gehen, wie ihr ein Theme ändern könnt. Und das geht eigentlich genauso wie bei WordPress-Themes oder selbstgeschriebenen Layouts: Divs und sonstiges MarkUp fügt ihr in die Template-Dateien ein, verseht es nach Herzenslust mit Klassen oder IDs, und formatiert diese anschließend über die Stylesheets. :o)

Übrigens benötigt FlatPress ebenso wie auch WordPress ein Zuhause auf eurem eigenen Webspace.

Wie ihr seht, habe ich heute Nachmittag das Layout hinsichtlich der Farbgebung überarbeitet.

Rosa schön und gut, aber irgendwann war es mir dann doch zu bonbonmäßig. Jetzt sorgt also ein Türkisgrün für etwas Abwechslung. :)

Neu hinzugekommen sind außerdem die Anzeige der Kommentare direkt unterhalb der Überschrift sowie die Datumsanzeige rechts.

Wenn man sich die Mühe macht, eine Webseite zu erstellen, dann will man, dass die Besucher herbeiströmen und die Inhalte betrachten. Logisch, oder? Ebenso logisch sollte es aber wohl sein, dass die Besucher den Inhalt, um ihn betrachten zu können, überhaupt erst einmal sehen müssen. :o)

Ich bin ja nun in einigen Foren unterwegs, wo User ihre Homepages oder Blogs vorstellen und um Kritik bitten. Und anscheinend könnte ich zwei Dinge eigentlich jedesmal direkt per Copy & Paste anmerken: zu wenig Kontrast zwischen Schrift und Hintergrund, und eine zu kleine Schrift.

Hellgrau auf Weiß erkennt man eben kaum. Und wenn ich die putzige Ameisenkolonne im Content erst auf den zweiten Blick als Textzeile identifizieren kann, habe ich schon keine Lust mehr, auf der Seite zu lesen. Es ist anstrengend, wenn man einen Text nicht angenehm lesen kann, und daher liest man denn eher ungern auf der betreffenden Seite. So geht es nicht nur mir, sondern einem Großteil der anderen Besucher auch.

Also achtet darauf, dass ihr keine zu kleine Schrift wählt – idealerweise verwendet ihr keine festen Größenangaben wie px, sondern bleibt mit em oder % flexibel. Bei verschiedenen Auflösungen erscheint die Schrift natürlich auch etwas größer oder kleiner.
Auch der Zeilenabstand trägt maßgeblich zur Leserlichkeit bei: ist er zu klein, quetschen sich die einzelnen Zeilen unschön aneinander. Genügend Abstand zwischen Text und Rand ist ebenso wichtig – mehr hierzu könnt ihr im Artikel über Weißraum nachlesen.
Nicht zuletzt solltet ihr auch ausreichend viele Umbrüche und Absätze verwenden, um euren Text zu strukturieren.

Den Kontrast zwischen Schrift und Hintergrund solltet ihr bei verschiedenen Helligkeitseinstellungen testen, die ihr an eurem Monitor vornehmen könnt. Denn Helligkeit und Kontrast hängen von der Kalibrierung ab – da die wenigsten Monitore exakt kalibriert sind und es selbst dann nicht möglich ist, dass zwei Monitore exakt das gleiche Bild liefern, werden eure User die Seite mit den verschiedensten Einstellungen betrachten.

Da ist es! *_*

Nein, es ist nicht fertig. Aber ich bin fertig. *fg*

Irgendwann wollte ich die Version aber einfach nur noch online stellen, weil ich die alte nicht mehr sehen konnte und ich jetzt schon seit Wochen an der hier bastele, das hier ist übrigens das vierte Layout und somit das einzige, was die Testphase überlebt hat. :D

Im Internet Explorer ist es noch nicht getestet, weil der ja nun nicht unter Mac läuft, man mit den Browsershots nicht allzu weit kommt und ich heute Abend nicht mehr den Laptop meines Freundes benutzen kann. Falls es da also Fehler in der Darstellung geben sollte, wäre es fein, wenn ihr mir da Bescheid geben könntet.

Ach ja, der Header ist da rechts noch ein bisschen kahl.

Einige der Unterseiten sind noch nicht gefüllt, das liegt zum Teil daran, dass sie neu hinzugekommen sind (der ganze Service-Bereich nämlich) und der Rest stand in der vorigen Version als Widget in der Sidebar, und die Sidebars wurden leider mit dem Aufspielen des neuen Layouts in die ewigen Jagdgründe geschickt. Blöd. Kommt aber in den nächsten Tagen.
Die Warteliste der Reviews ist daher auch verloren gegangen… hab sie anhand der Kommentare zu rekonstruieren versucht; so wie es aussieht, steht nur eine Seite auf der Warteliste, da ich auf den anderen keinen Link zu neontrauma.de finden konnte. An die Reviews setze ich mich also auch diese Woche, hab schon ein mieses Gewissen, weil das so ewig gedauert hat.

Auf jeden Fall sollte das Ganze jetzt übersichtlicher sein: es gibt nicht mehr x verschiedene Sidebars, die je nach gerade aufgerufener Kategorie oder Seite wechseln und ein paar der Unterseiten habe ich zusammengelegt.

So, was habe ich noch vergessen? %D

Eigentlich hatte ich die neue Version von neontrauma.de bereits für letzte Woche geplant, aber jetzt ziehen sich die Arbeiten doch etwas länger hin. Das Layout steht zu 80%, mit der Umstrukturierung der Inhalte bin ich soweit fertig. Das heißt, Photoshop werde ich nochmal rannehmen und dann ein kleines Schäferstündchen mit der CSS-Muse einlegen. *g*

Die Anmerkung einiger Reviews (die ich dann auch endlich einbinden werde!) und Hinweise aus eurem sonstigen Feedback habe ich berücksichtigt und so wird das neue neontrauma.de vor allem übersichtlicher werden.

Auch die Warteliste der Reviews will ich abarbeiten, versprochen.
Uuuund dann werde ich mir mal die Zeit nehmen, auf eure ganzen Kommentare der letzten Wochen einzugehen. Einige der Tutorials werde ich wohl etwas überarbeiten und den ein oder anderen Hinweis ergänzen.

Neue Tutorials und Artikel wird es natürlich auch geben, mir kribbelt es schon in den Fingern, hier wieder in die Tastatur zu hauen. Das Einzige, was fehlt, ist genug Zeit. :o)