Eine Microsite, natürlich »responsive« und in neuem Design

Einer meiner ältesten Kunden möchte mit einem speziellen Teilangebot, in diesem Fall dem Arbeitsbereich »Rohrreinigung« stärker präsent sein und zwar nicht nur dort wo er ansässig ist, sondern auch dort, wo er arbeitet, in einigen umliegenden Landkreisen und der Stadt Freiburg. Diese Microsite dient dazu das Teilangebot kompakt und fokussiert darzustellen, natürlich in smartphone-tauglichem »Responsive Design«. Das Screendesign stammt von meiner Kollegin Miriam Awe, die Texte von mir und auch das Photo des LKWs vor dem Freiburger Hauptbahnhof habe ich schnappschussmäßig eines Morgens auf dem Weg zur Arbeit aufgenommen.

Noch ein Musiker … noch ein echter Awe …

Egal wie man es dreht und wendet: Wer hat, dem wird gegeben. In diesem Fall meiner Kollegin Miriam Awe, die sich langsam aber sicher einen Schwerpunkt »Musiker«aufbaut, ein Kontrabassist: Michael Pöhlmann. Und wie es im Jahre 2014 auch sein sollte ist diese Website in einem »Responsive Design« aufgebaut und passt sich dementsprechend dem Ausgabemedium an. Wie immer einfach einmal ausprobieren und den Browser in seiner Größe anpassen. Die Besonderheit an dieser Website sind die großflächig eingesetzten Bilder, die ich verschiedenen Auflösungen und Dateigrößen auf dem Server abgelegt, entsprechend der Browsergröße aufgerufen werden. Kleine Browser bekommen kleine Bilder, große Browser bekommen große Bilder. Wenn Ihnen beim Laden der Seite für einen kurzen Moment ein unscharfes Bild erscheint, so sehen sie die kleinste Aulösung, die, nachdem es geladen ist, durch das passend große ersetzt wird. Auch hier: Ausprobieren und den Browser einmal aktualisieren …

Flexible Bilderflut für Architekturbüro

Im Auftrag der designconcepts GmbH habe ich zusammen mit meinem Kollegen Andreas Wulf die Website der Spiecker und Sautter Dipl.-Ing. Freie Architekten Partnerschaftsgesellschaft umgesetzt. Das Backend wurde auf Wunsch der Agentur mit Contao realisiert, die Umsetzung des Screendesigns im Frontend ist zu 100% eine Individual-Entwicklung durch mich. Die Herausforderung war der Spagat zwischen großen Bildern, dem Wunsch nach einer Fingerbedienbarkeit auf Tabletts und Smartphones und einer »smoothen« Anmutung. Selbstverständlich gab es bei diesen Anforderungen einer Vielzahl von strukturellen Detailproblemen technisch zu lösen, die – wie immer – für den Benutzer unsichtbar bleiben sollen. So ist das eben in diesem Job …

Skikurse und Skiverleih – informieren

Wer einmal im Winter auf dem Feldberg war, erlebt dort einen Marktplatz der besonderen Art. Auf wenigen Hundert Metern findet er eine Vielzahl von Anbieter von Leihausrüstungen und Skikursen und gleichzeitig eine Vielzahl von Nachfragern. Ideale Marktbedingungen, wie sie liberale Theoretiker so lieben. Aber natürlich beginnt der Kampf um die Kunden heute schon viel früher als erst auf dem physischen Markplatz: Nämlich im Internet. Auch hier konkurieren die gleichen Anbieter und der Abstand zwischen ihnen ist nur noch ein Mausklick. Eine zeitgemäße, aktuell und ansprechende Website ist eine Notwendigkeit geworden. Für diesen Kunden habe ich ein externes Screendesign als Individual-Theme für eine WordPress-Installation umgesetzt.

Double Feature für Kalifornien: Edith Schneider Jewelry & Shop

Die Herausforderung für die Kollegin war zwei deutlich und auf den ersten Blick voneinander unterscheidbare Websites für die Eigenmarke und den stationären Multi-Marken-Shop zu gestalten, die gleichzeitig möglichst viele technische Bestandteile gemeinsam nutzen sollten. Umgesetzt wurde das Projekt als WordPress-Multiuser-Installation mit zwei unabhängigen Unterblogs und jeweils einem Individual-Theme. Das Einsparpotential entstand vor allem durch die doppelte Verwendung des Grundaufbaues und eines Großteils der eingesetzten Javascripte.

Musiker II: Ingmar Kerschberger, Sax und Klarinette

Ein freiberuflicher Musiker ohne Website? Sicherlich kein unmögliches Unterfangen im Zeitalter der »sozialen Medien«, aber auch diese Klaviatur gilt es zu spielen und die eigene Website ist dabei der angeschlagene Grundton. Für den gestalterischen Aspekt hat wieder einmal die Kollegin Miriam Awe gesorgt, die technische Umsetzung, tablett- und smartphonetauglich als »Responsive Design« habe dann ich übernommen.

Bleiglas, Rainer Fiolka-Pitschat und Paul Vincent Pitschat

Wenn der Kunde zwei von der Struktur her nicht vollständig unterschiedliche Themen bearbeitet, die sich aber hinsichtlich der Zielgruppe doch deutlich unterscheiden, so bietet es sich an, hier nicht noch einmal das Rad neu zu erfinden. Sparsamer Mitteleinsatz ist ja nun – völlig unabhängig vom Budget – immer eine feine Sache. In diesem Fall hat die Kollegin die Website in ein wärmeres Lickt getunkt und ich konnte die Technik weitgehend recyceln. Die technischen Abweichungen sind minimal und stören beim laufenden Unterhalt nicht.

Mein Erstling in der dritten Version: Der UHB e.V.

Im Jahr 1998 war es meine erste Website überhaupt, die ich damals für den UHB erstellt habe. Im Jahr 2012 war es die erste eigenständig produzierte Website im »Responsive Design«, so angelegt, dass es auf Bildschirmen beliebiger Auflösung ohne weitere Fingerbewegungen bedienbar ist. Umgestzt ist das Ganze als WordPress-Theme mit weiteren Besonderheiten. Mitglieder des Vereines können über das Backend selbst Angebote einstellen. Da die Mehrzahl der Benutzer nicht sehr vertraut mit der Bearbeitung von Bildern ist, werden alle für die Darstellung notwendigen beim Upload der Bilder vom Server automatisch produziert.

Gleiche Technik, veränderte Oberfläche

Aufbauend auf dem Backend des Stimmen-Festivals und mit der Vorgabe die selben Bilder wie die Website des Stimmen-Festivals und gleichen Texte der Printwerbung zu nutzen, wurde von der Printgraphik der Burghof GmbH ein deutlich zurückhaltenderes Screendesign entwickelt. Die optische Verbindung zum monatlichen erscheinenden Printmagazin der Burghof GmbH sollte über die jeweils angepasste Schmuckfarbe geschehen, hier eine einigermaßen geschickter Aufbau der steuernden CSS-Datei zu wählen, war eine der Herausforderungen.

Das Stimmen-Festival: sichtbar und hörbar

Im Auftrag der Younbrain GmbH habe ich das von Quindt hergeleitete Screendesign in HTML umgesetzt. Meine Tätigkeit beschränkte sich dabei auf die möglichst genaue und unverfälschte Übernahme der gewünschten Darstellung. Zusätzlich habe ich eine Vielzahl von jQuery nutzenden Javascripten zur Umsetzung »beweglicher Inhalte« programmiert. Mit diesen werden beispielsweise die gleitenden Bilder oder News gesteuert. Die Scripte reagieren flexibel auf die Zahl und Art der eingesetzten Bilder oder Teilinformationen.

Ein einfach zu bedienender Störer für die PEDALO GmbH

Ursprünglich war dieser Störer als Vollgraphik mit Text angelegt, jede Veränderung hat einen enormen Volauf benötigt, Farbanpassungen waren nur durch die komplette Neuerstellung der Graphiken möglich. Das Ziel war nun möglichst viel der gestalterischen Mittel in eine einfach zu anzupassende Lösung zu »retten«. Ich habe hier verschiedene halbtransparente PNG-Graphiken mit CSS3-Farbverläufen und -Schatten kombiniert, das Ganze ist durch wenige Angaben im Quelltext der Seite farblich komplett veränderlich. Eine komplette Neufassung der Farben dauert nun etwa 5 bis 10 Minuten. Der Störer ist variabel in ein bis drei Spalten ausführbar.

Ein erster Versuch in »Responsive Design«

Im Auftrag des Projektleister Achim Schlemmer habe ich das von Simone Jacobsen aus Hamburg erstellte Screendesign in ein Wordpres-Theme ümgesetzt. Anforderung war dabei die Anpassung des Standard-Themes Twenty-Eleven und eine Umsetzung als »Responsive-Design«. Das Einpflegen der Inhalte und weitere Anpassungen der Widgets würde vom Auftraggeber übernommen.

PSDtoHTML, WordPress Theme und eine individuelle Bildergalerie

Im Auftrag von Achim Schlemmer habe ich für seinen Kunden Schiffmann Außenwerbung GmbH die Umsetzung des Screendesign als HTML und den Einbau als individuelles WordPress-Theme übernommen. Das Screendesign stammt von Simone Jacobsen aus Hamburg. Ein kleiner technischer Leckerbissen ist dabei die Umwandlung der Standard-Galerie von WordPress in eine individuelle Galerie unter Zuhilfenahme von Javascript. Die Galerie sollte dabei sowohl innerhalb der Seite als auch als überlagernde Ebene realisiert werden. Die überlagernde Ebene wird mit der Fancybox erzeugt, der jeweils aktuelle Zustand der Galerie wird dabei in die Fancybox hineinkopiert. Und das Schönste für alle Beteiligten war, dass es nicht nur so aussah und funktionierte wie geplant, sondern auch ziemlich genau so teuer wurde wie angeboten.

Slider auf der Startseite von Ox Maskenbild

Um die Besucher möglichst zielgerichet auf die aktuellsten Informationen hinweisen zu können, werden auf der Startseite der Website nun die entsprechenden Seiten mit kombinierten Bild-und Textbannern hervorgehoben.

Pedalo 2012 und kaum etwas zu tun

Zum Katalogwechsel 2011 auf 2012 gab es für mich relativ wenig zu tun, kein zu schlechtes Zeichen wie ich finde. Abseits der von der Youngbrain GmbH zu erbringenden Leistungen im Backend bestand die Herausforderung für mich vor allem darin, ein Element unterzubringen, dass ursprünglich gar nicht vorgesehen war, den von mir so genannten »Hauptstörer«. Auf Bildschirmen mit einer Auflösung von mehr als 1.100 Pixeln kein Problem, allerdings schon für die etwa 20% der Surfer mit Auflösungen von unter 1024 Pixeln. Da habe ich das Problem zum Anlass genommen eine entsprechende Weiche in die Seiten einzubauen, die Darstellung der Schatten, Ränder und des hauptstörers wird nun in zwei Stufen verändert.

Implantat-Akupunktur Dr. Ilka Steinkrüger

Die Kundin wollte dieses neue Thema auf einer eigenen Website darstellen, Elemente der alten Website sollten dabei übernommen werden. Dem Wunsch hier über die Jahre hinweg einen wachsenden Bestand an Informationen rund um das Thema aufzubauen und diesen auch selbst online stellen zu können, habe ich mit der Verwendung von WordPress Rechnung getragen.

comato oHG – Agentur für moderne Kommunikation

Seit einigen Jahren veröffentlicht die PR-Agentur einen Teil der Pressemitteilungen, die sie für ihre Kunden erstellt auch auf der eigenen Website. Der Aufwand pro Pressemitteilung lag so bei etwa einer dreiviertel Stunde. Um das Einstellen der PRessemitteilungen ein wenig rationeller zu gestalten, habe ich die Website komplett auf WordPress umgestellt, der Aufwand hat sich nun etwa halbiert. Außerdem ermöglicht der automatisierte Einsatz der Artikelstruktur von WordPresse den Aufbau schöner Links, ähnlich wie ich das auch auf dieser Seite hier praktiziere.

PSDtoHTML für den Lehrerfreund

Im Auftrag von Achim Schlemmer habe ich das von ihm zusammen mit einer Graphikerin entwickelte Screendesign in HTML umgesetzt, Ausgangspunkt waren zwei Graphiken, das Ergebnis waren zwei HTML-Seiten mit vollständigen Inhalten, die dann von ihm in Templates für Serendipity umgesetzt wurden.

Musselinglas, Rainer Fiolka-Pitschat und Paul Vincent Pitschat

In Zusammenarbeit mit meiner Bürokollegin Miriam Awe habe ich dieses Screendesign für Ihren Kunden in HTML umgesetzt. Im Hinblick auf das Thema des Kunden war es von großer Bedeutung, der visuellen Darstellung einen großen Platz zu einzuräumen. Die Präsentation der Bilder erfolgt über kleine Galerien zum »Durchklicken«, das Javascript, das die Galerie aus einer einfachen Folge von Bildern im HTML-Code erzeugt habe ich ebenfalls erstellt.

OX Maskenbild, Heidelberg

Christian Ochs verfolgt mit seinem Unternehmen einen in der Branche ungewöhnlichen Weg, bietet er seinen Kunden ein umfassendes »Masken«-Angebot im Rahmen der Inszenierung in Oper und Theater an. Im Immobilenbereich würde man es »schlüsselfertig« nennen, beim Tourismus »All-Inclusive«, den Begriff den er prägen möchte heißt »Produktionsmanagement«. Seine Arbeiten sind beispielsweise im Rahmen der Salzburger Festspielen, der Ruhrtriennale oder im Festspielhaus Baden-Baden zu sehen gewesen. Viele Produktionen sind auch international unterwegs, dementsprechend war die englische Variante Pflicht.

Alle Leistungen auf einen Blick:

Bestellsystem Bildbearbeitung Contao CSS3 DOM-Manipulationen Druckvorstufe Facebook Firmenpräsentation Foto / Bildredaktion Google-Adwords Javascript jQuery Katalog Konzepte Marketing Newsletter Online-Shop Plakat Postkarte PSDtoHTML Responsive Design Screendesign SEO - Suchmaschinenoptimierung Texte Tourismus Wordpress