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.

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.

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.

… 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?

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.

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.