Die responsive Naturfotografie-Website

Fotografen stehen oft vor dem Dilemma, dass sie eine ansprechende und zeitgemässe Webseite erstellen möchten um ihre Werke zu präsentieren – aber selber keine Webdesigner sind. – Ein Erfahrungsbericht über den Relaunch meiner Website mit WordPress.

Meine erste Website – mit veralteter Technologie

Als ich fotorganic.ch im September 2012 zum ersten Mal im Web aufschaltete war ich natürlich stolz und erfreut darüber, die aufwändige Arbeit die ich mir gemacht hatte, endlich ins World Wide Web entlassen zu können. Bald aber wurde mir bewusst, -eigentlich schon während des Aufsetzens der Site , dass ich mit der Technologie des „preisgekrönten“ Baukasten-Systems das ich benutzte, in verschiedenen Bereichen der Zeit hinterherhinkte. So waren etwa die Slider, die für meine Bildpräsentationen derart wichtig sind, allesamt von der Applikation „Flash“ abhängig, obwohl diese von Apples mobilen Geräten nicht unterstützt wurde und wird.

So machte ich mich schon kurz nach der Fertigstellung von fotorganic.ch auf die Suche nach Lösungsansätzen, mit denen ich die ausgeschlossenen Benutzer mobiler Apple Geräte in Zukunft auch mit meinen Bildergalerien bedienen konnte.

Die einfachste Möglichkeit wäre gewesen, für die Benutzer mobiler Geräte eine separate mobile Website bereitzustellen. Das hätte den Vorteil mit sich gebracht, dass ich für die mobilen Geräte kleinere Bilder ausgegeben hätte und sich somit auch die Ladezeiten verringert hätten. Aufgrund der grossen Nachteile für die Google Suchmaschinenoptimierung kam diese Lösung für mich aber nicht in Frage: Die Gefahr Duplicate Content zu erzeugen und in den Google Suchergebnissen deshalb herabgestuft zu werden ist zu gross, ausserdem wäre der Aufwand immer ein doppelter gewesen und zudem erschien mir diese Lösung auch etwas unelegant.

Die Lösung: responsive, aber wie?

Die Lösung lag, wie mir bald einmal klar wurde, im sogenannten responsiven Webdesign. Bei responsiven Seiten werden die Inhalte in Abhängigkeit der Grösse des Browserfensters des jeweiligen Ausgabegeräts unterschiedlich ausgegeben, das heisst die Anordnung und Darstellung einzelner Elemente, wie Navigationen, Seitenspalten und Texte, passen sich dem jeweiligen Ausgabegerät an. Das tönt erst einmal kompliziert – und ist es tatsächlich auch. Nun bin ich leider nicht Webdesigner und habe nur marginale Kenntnisse in CCS3 und Media Queries, JavaScript wollte ich als Anwender schon gar nicht erlernen…

Um einen Webdesigner mit der Erstellung der Seite zu beauftragen fehlte das Geld und derart hohe Aufwendungen hätten sich im Übrigen für eine Naturfotografie-Website nicht rechtfertigen lassen. Die Materie ist komplex und der Lernaufwand wäre viel zu hoch gewesen, um das Handwerk des responsiven Webdesigns in vernünftiger Zeit so zu erlernen, um eigenständig zu einem befriedigenden Endergebnis zu gelangen. Was also tun, wenn man sich nicht in der Abhängigkeit eines unfertigen und beschränkten Baukasten-Systems verstricken will das nach zwei Jahren vom Entwickler nicht mehr weitergepflegt wird?

Responsive Fotografie-Website mit WordPress

Zum Glück hat sich bezüglich responsiver Halbfertiglösungen in den letzten Jahren sehr viel getan und so habe ich mich nach langem Hin und Her für eine Umsetzung mit dem CMS WordPress entschieden. Ein Hauptgrund ist der, dass WordPress weltweit sehr verbreitet ist und deshalb auch kontinuierlich weiterentwickelt wird. Es gibt tausende flexibler Templates die auf WordPress basieren und oftmals schon für wenig Geld zu erstehen sind, zahlreiche Plugins, die allerdings sorgfältig ausgewählt werden sollten, vereinfachen und ergänzen dabei die Arbeit mit einem WordPress Theme.

Trotzdem war die Umstellung auf WordPress mit einem riesigen Aufwand verbunden. Vor allem das erneute Skalieren, Komprimieren, Wasserzeichen setzen und Benennen der Bilddateien die ich jetzt in höherer Auflösung integriert habe, war trotz komfortabler Arbeitsweise mit Photoshop CC enorm zeitaufwändig. Die bestehenden Beiträge mussten alle umgestaltet und sinnvoll in ein neues Design integriert werden, ausgehende und interne Links wurden wieder eingepflegt.

Möglichst nichts vergessen! Und wie fast immer: Kompromisse…

Es gibt sehr viele Dinge an die man bei einem Website-Relaunch denken sollte und es wird sich noch zeigen ob ich als Laie nichts Wesentliches ausser Acht gelassen habe. Das Optimieren der Ladezeiten mittels Catching-Plugin und der Lacy Loading Methode stehen unmittelbar bevor und ich hoffe, damit den erwünschten Erfolg zu haben.

Leider sind responsive Websites auch immer kompromissbehaftet und die Darstellung der Inhalte ist stark abhängig von der Grösse des Browserfensters und nicht zuletzt auch vom Browser selber. Es gibt Abstriche die zum Teil unvermeidbar sind, so kommen etwa die älteren Internet Explorer Versionen 6-8 mit den für ein responsives Webdesign benötigten Media Queries nicht zurecht. Ausserdem gilt für mich als Betreiber einer Fotografie-Website, der Grundsatz „mobile first“ der dem responsiven Webdesign zugrunde liegt, nicht wirklich zwingend: Schliesslich möchte ich, dass meine Besucher wenn möglich mit Geräten mit grösseren Bildschirmen auf die Seite zugreifen und auch etwas von den Bildern sehen.

Nichtsdestotrotz: Ich denke die Seite kommt jetzt mit zeitgemässer Technologie daher und ich habe alles in meiner Macht stehende unternommen, damit sie hoffentlich möglichst vielen Besuchern zugänglich ist.

Ich hoffe Ihr macht gute Erfahrungen mit der usability von fotorganic.ch und Ihr habt Spass beim durchstöbern der Inhalte! Wenn euch etwas auffällt das nicht funktioniert, oder falls Ihr Kritik, Anregungen oder Verbesserungsvorschläge habt, freue ich mich sehr über euer Feedback!