by Eileen Schäfer – memedia.de

Schon mal über eine grüne Website nachgedacht? Nicht im Sinne der Farbe, sondern im Sinne von Umweltschutz! Auch wenn es uns nicht bewusst ist, so hat doch jede einzelne Website Auswirkungen auf unsere Umwelt. Der Stromverbrauch des WorldWideWeb pro Jahr ist immens. Die Umweltorganisation Greenpeace rechnet vor: Wäre die digitale Welt ein Land, dann würde sie beim Stromverbrauch mit einem Anteil von acht bis zehn Prozent an sechster Stelle stehen.

Welche Möglichkeiten gibt es, um eine Website nachhaltiger zu gestalten?

1. Umweltfreundliches Hosting

Es gibt immer mehr Anbieter, die die Umwelt zu einem zentralen Thema machen. Sie beziehen beispielsweise, den Strom aus erneuerbaren Energien und nutzen energieeffiziente Hardware. Sie sind im besten Fall klimapositiv.

Vergleich in Bezug auf Klimaneutralität der WordPress Hosting Anbieter findest Du hier. Ob deine Website “grün” ist, kannst du ganz einfach mit Hilfe dieses Tools von The Green Web Foundation ermitteln. Einen

The Green Web Foundation

2. UX / UI Design

Indem die wichtigsten Informationen schnell und gut auffindbar sind, verhinderst du Umwege des Nutzers auf Deiner Webpage. D.h. du verringerst das Laden unnötiger Seiten. Ein professionelles UI/ UX Design unterstützt deshalb Klimafreundlichkeit. Wer ungewollte Klicks reduziert, sendet nämlich weniger Anfragen an den Server und beansprucht daher weniger Energie. Außerdem:

Ein großer Energiekiller sind unnötige und unnötig große Dateien auf Deiner Webpage.

3. Umsetzung

Pagespeed ist eins der wichtigsten umweltbeeinflussenden Merkmale in der Umsetzung, denn umso schneller die Seite, desto weniger Energie verbraucht sie. Standard WordPress Templates sind i.A. weniger effizient, da sie viele nicht genutzte Elemente mitschleppen (es muss ja jede Art der Anwendung abgedeckt werden), die immer mitgeladen werden. Diese macht die Seite nicht nur langsam, sondern damit auch energieineffizient. Deshalb sind selbst entwickelte, maßgeschneiderte, performante WordPress-Lösungen die bessere Wahl, wenn die Webpage möglichst grün sein soll. Darauf haben wir uns spezialisiert. Ein positiver Zusatzeffekt ist, dass auch Google performante Seiten liebt und besser bewertet.

Bei Page Speed insights kannst du die Performance Deiner Webpage testen. Auf der Seite von Greenpeace findest du eine Liste der meistgenutzten Apps und einen Hinweis über deren Nachhaltigkeit.

Page Speed insights


Wenn du dich noch tiefer mit dem Thema auseinandersetzen möchtest, empfehle ich dir die Website sustainablewebdesign.org. Diese Webpage erläutert die wichtigsten umweltbeeinflussenden Aspekte einer Webpage und zeigt mögliche technische Lösungen auf.

Mit nur wenig Aufwand kann also eine Website grüner werden. Wir hoffen, dass sich der Gedanke und die Umsetzung einer grünen Webpage weiterverbreitet und mehr Menschen auf deren Nachhaltigkeit achten. Wir von memedia unterstützen gern dabei.

In der neu entwickelten App Choosy dreht sich alles um Nachhaltigkeit, Ernährung und gesunde Rezepte, denn viele Menschen würden sich gerne gesünder und nachhaltiger ernähren, wissen aber einfach nicht wie. Im stressigen Alltag gehen die guten Vorhaben dann oft verloren, weil es am Ende des Tages doch schneller und stressfreier ist, einfach eine Pizza zu bestellen. Wenn auch du zu diesen Menschen gehörst, dann wird Choosy genau die richtige Lösung für dich sein.

Du fragst dich, wie dir eine App helfen soll, dich gesund, abwechslungsreich und auch noch völlig ohne Stress zu ernähren?

Ganz einfach, indem Choosy dir die Mühe abnimmt, jeden Tag zu überlegen, was du nun eigentlich kochen sollst. Die smarte App lernt, was du magst und was dein Körper braucht. So werden dir die ganze Woche über verschiedene Rezepte vorgeschlagen, aus denen du wählen kannst, um dir deinen Essensplan für die Woche erstellen zu lassen.

Auch in Sachen Nachhaltigkeit und Gesundheit hilft dir die App zu erkennen, welche Auswirkungen die Wahl deiner Lebensmittel auf den Planeten und auf deine Gesundheit haben. So schafft dir die App ein neues Bewusstsein für deine Ernährung. Denn es ist klar: Durch unser Essverhalten beeinflussen wir nicht nur unsere Gesundheit, sondern auch einen großen Teil unseres Planeten.

So zeigt dir Choosy auch, wie groß dein CO2 Fußabdruck ist, du kannst lernen
CO2-neutraler zu essen und somit deinen CO2 -Fußabdruck massiv senken.

Die Food-Creators bieten natürlich auch eine große Auswahl an vegetarischen und veganen Rezepten an. Diese dürfen auf keinen Fall fehlen, wenn es um gesunde und umweltfreundliche Ernährung geht. Um keine veganen Rezepte zu verpassen, kannst du deinen Lieblingscreator auch direkt folgen.

Wenn dein Essensplan für die Woche feststeht, kannst du dir gleich im Anschluss die Zutaten nach Hause liefern lassen, so hast du mehr Zeit für die Dinge, die dir wichtig sind und dein Stresslevel wird niedrig. Durch Choosys smarte Management Lösung, sagst du auch der Lebensmittelverschwendung den Kampf an, denn die App lernt, was du im Kühlschrank hast und was du kaufen musst.

Bestimme, wie viel Zeit am Tag du zum Kochen einplanen möchtest, damit Choosy dir nur Rezepte vorschlägt, die diese Zeit nicht überschreiten. Außerdem gibt es Funktionen in der App, um dich spielerisch zum Kochen zu motivieren.

Unser Team der Memedia e. K. sprach mit Vanessa Westphal, einer der GründerInnen von Choosy und können diese App für Menschen weiterempfehlen, die sich gesund, nachhaltig und zusätzlich mit tollen Rezeptideen ernähren möchten.


Mehr über die choosy App und das Konzept dahinter erfahren sie hier.

oder

Warum Ihre Geschichte es Wert ist veröffentlicht zu werden!

by Eileen Schäfer – memedia.de

Und Schlag auf Schlag!
Werd ich zum Augenblicke sagen:
Verweile doch! du bist so schön!

(Goethe, Faust I)

Vergessen Sie alles, was sie bisher über das Schreiben in der Schule oder Uni gelernt haben. Alles über Hinleitung, Annahmen, Beweisen, Resümee. Nichts davon ist mehr relevant, wenn Sie Texte für Ihre Webpage schreiben. Webpagetexte verkürzen die Aussage, bringen es sofort auf den Punkt und lassen dabei tiefste Emotionen anklingen. So kurz und schlicht wie möglich und dabei doch so viel Inhalt und so „exciting“ wie möglich. Ähnlich wie in dem Slogan von BMW: „Freude am Fahren“. Der Slogan sagt nichts über die Funktionalität oder die Qualität der Autos, denn es geht nur um Freude, um Emotionen. Zumindest oberflächlich betrachtet, aber:  es schwingt alles andere auch mit, denn natürlich haben wir nur Freude am Fahren, wenn wir ein richtig gutes Auto haben. Die Exzellenz des Autos und der reine Spaß wird hier angesprochenen, in nur drei Wörtern. Nicht schlecht. Ein guter Slogan.

Tiefste Emotionen anklingen lassen

Aber was hat das mit meiner Webpage zu tun, fragen Sie sich wahrscheinlich gerade? Und ich frage mich gerade, ob ich Sie schon verloren habe. Die Aufmerksamkeitsspanne des Lesers und potentiellen Kunden im Internet ist nun mal kurz, sehr kurz . „Im Durchschnitt betrachteten die Probanden eine einzelne Webseite 15 Sekunden lang“, schreibt eine Eyetracking Studie über Online Käufer.

15 Sekunden um einen potentiellen Kunden für sich zu gewinnen. – Eher weniger.

Lieber eiliger Leser: Scrollen Sie zu den untenliegenden Tipps oder gedulden Sie sich noch ein paar Sätze. Ich werde Ihnen auf jeden Fall unerreichte Tipps für die Formulierung Ihrer Webpage geben. Bleiben Sie dran! Hier müsste jetzt auch der CTA kommen. Der Call to Action, meistens anhand eines Kontaktbuttons. Kontaktieren Sie uns statt abzuspringen.

Call To Action ist das zentrale Verkaufselement auf Ihrer Webpage

Unsere Fragestellung lautet also (Doppelpunkte werden gern genutzt, um Füllworte zu vermeiden und schneller auf den Punkt zu kommen): Wie kann ich den eiligen Besucher einer Webpage dazu bringen auf meiner Seite zu bleiben und so weit zu lesen, dass er das macht, was ich mir von ihm erhoffe.

Zwischenüberschriften strukturieren den Text für den schnellen Leser

Bei manchen Webpages ist man schon froh, nicht verwirrt zu werden und sich zu fragen, was hier angeboten wird. Unklare Webpages sind ein echter Kundenkiller, viel mehr als unspektakuläre Webpages. Es gibt viele langweilige Webpages die den Nutzer gut führen und super erfolgreich sind. Aber mal ehrlich? Wollen Sie das? Wollen Sie einfach nur ne Marketing Masche sein? NEIN!!! Sie möchten bestimmt Unique sein, Sie möchten mit tollen Texten, Design, Ideen und einmaligen Produkten, großartige Kunden begeistern und zu einem echten Brand werden.

Unklare Webpages verhindern Käufe.

Wie machen wir das also? Mann bzw. Frau jetzt komm mal auf den Punkt. Jetzt kommts endlich, danke, dass Ihr mir immer noch folgt:

Die Texte, die Sie auf der Webpage schreiben (und auch der zitierte Slogan) beantworten die Fragen What, Why und How. Damit erklären Sie Ihrem potenziellen Kunden alles, was diese benötigen, um sich zu orientieren und Ihren USP (Unique Selling Proposition) zu präsentieren.

Beantworten Sie die Fragen What, Why und How

An diesem Punkt könnte ich jetzt aufhören zu schreiben.  Aber leider würde ich Sie damit wahrscheinlich beleidigt zurücklassen. Sie haben nämlich viel Zeit mit meinen Texten verbracht und keine wirklichen Antworten auf Ihre Fragen bekommen. Verkäufer tricksen gern mit diesem Cliffhänger (in einem spannenden Moment wird abgebrochen und auf später verwiesen) Dieser wird benutzt, damit sie den CTA Button drücken. Weil der Mensch von Natur aus neugierig ist.

Die erste Frage nach dem What? (Was machen Sie? Was bieten Sie an? Was ist ihr Produkt?) zu beantworten, scheint einfach. Z.B. der Autohändler könnte sagen: Ich verkaufe Autos. Das ist der erste Schritt. Damit ist er jedoch noch nicht sehr präzise. Wenn er zum Beispiel nur Elektroautos verkauft, ist das schon genauer.

How? Wie machen wir es anders und machen wir es anders als andere?

Was unterscheidet uns bzw. unser Produkt oder unsere Dienstleistung von anderen? Dies ist die Frage nach dem USP oder dem Prozess, der den Kunden erwartet. Was macht Sie also besonders. Zum Beispiel verkauft dieser Autohändler nur dreirädrige Elektro-Autos, die in Deutschland hergestellt werden. Das ist wirklich ein USP. Und außerdem: Wie gehen Sie vor. Wie sehen die nächsten Schritte aus? Was muss der potenzielle Käufer tun, damit er ihr Produkt erwirbt und was passiert danach.

Why? Das große Warum.

Warum produziere ich genau dieses Produkt, dieses Auto? Warum schreibe ich Texte? Warum mache ich genau das in meinem Leben? Warum erstelle ich Webpages? Wo kommt diese Leidenschaft her. Diese Frage ist eine der schwierigsten Fragen im Leben, auf die viele Menschen gar keine Antwort wissen. Es lohnt sich, sich mit dieser Frage auseinanderzusetzen. Es ist ein Prozess, an dem am Ende als Belohnung die Erkenntnis steht. Die Erkenntnis über sich und Ihre Leidenschaft. Und lässt sie für Ihre möglichen Kunden aus der Menge an Mitbewerbern herausstechen.

Was ist Ihre Leidenschaft?

Wenn ich mich als Beispiel nehmen darf. Warum arbeite ich in einer Web-Agentur? Zum einen, weil ich Kreativität einfach mag und auch kann. Ich habe deshalb das Gefühl nützlich zu sein. Weil ich sehr gern im Team arbeite. Weil ich es krass gut finde, immer wieder auf neue Menschen mit interessanten Geschichten zu treffen. Weil es mich bereichert, aufregt und mir den notwendigen Input gibt, um mich nie zu langeweilen. Ich bin eigentlich ein Revoluzzer. Ein Scanner. Immer auf der Suche nach dem nächsten Kick. Jetzt habe ich mein Warum verraten, ziemlich persönlich, aber bei Dienstleistern ist es oft sehr persönlich.  Wenn Sie die 3 Fragen gut beantworten, bekommen Sie keine Käufer, sondern Fans!  

Die Fragen What, Why und How macht aus Ihren Käufern Fans

Mit der Beantwortung dieser Fragen bekommen Sie eine gute Story. Ein gutes Storytelling ist gewürzt mit folgenden Zutaten:

  1. Einen glorreichen Helden. Eine Art Ritter in Rüstung mit dem sich Ihre Leserschaft identifizieren kann. Das könnten Sie sein!
  2. Die Dramaturgie. In drei Akten – Ausgangssituation, Komplikation und Höhepunkt, Auflösung.
  3. Ein Konflikt.  Widerstände, die den Helden (oder Ihr Unternehmen) daran hindern, das Ziel zu erreichen.
  4. Eine erkennbare Entwicklung. Vorher-Nachher-Effekt
  5. Die Auflösung. Ende gut – alles gut?

Stories werden viel besser erinnert als einzelne Fakten. Mehr dazu finden Sie zum Beispiel in den Analysen der Stanford University: https://www.youtube.com/watch?v=9X0weDMh9C4

Alle Hollywood Filme funktionieren nach diesem Muster. Auch Ihre Geschichte ist es wert veröffentlicht zu werden. Bestimmt.

Ein digitales Produkt kann nur dann überzeugen, wenn „Look and Feel“ klar und eindeutig sind. Damit das funktioniert, müssen UX Design und UI Design Hand in Hand gehen. Obwohl der Unterschied für die meisten Menschen gar nicht sichtbar zu sein scheint, weil sie quasi fließend ineinander übergehen, sind die Aufgaben jedoch klar definiert.

Mit diesem Beitrag möchten wir helfen, zu verstehen, wo der Unterschied zwischen UI und UX Design besteht.

UX / Ui Design Prozessgrafik bei memedia

Woher kommen die Begriffe und wofür stehen sie?

Klären wir zunächst, wofür die Abkürzungen UX UI überhaupt stehen. Diese kommen aus dem englischen und bedeuten:

UI – user interface, also die  Benutzerschnittstelle

UX – user experience, die Nutzererfahrung

Das Hauptziel beider ist es, die Zufriedenheit und das Erlebnis des Benutzers zu optimieren, um die perfekte Website zu kreieren.

Wie unterscheiden sich die Arbeiten von UX und UI Design?

UX Design

  • Kümmert sich um Funktionalität, Prioritäten und die Grundidee
  • die USPs werden herausgearbeitet
  • die Ziele der Website werden ermittelt
  • Text, die Headlines, Bildideen und technische Feinheiten werden festgelegt
  • Augenmerk liegt auf dem Benutzer und der bewährten Erfahrungen
  • Analyse der Absichten von Usern, während der Benutzung eines Produkts

Folgende Fragen stehen im Mittelpunkt:

  • Was sollen User fühlen?
  • Was müssen User verstehen?
  • Welche Maßnahmen sollen User ergreifen?

UI Design

  • Realisiert eine intuitive Bedienbarkeit (Usability)
  • muss auf psychologische Wirkungen beim User eingehen
  • Augenmerk liegt auf der visuellen Gestaltung

Dazu zählt:

  • Layout, Symbole, Schaltflächen, Buttons und CTAs, Farben, Typografie und vieles mehr

Entscheidungen des UX und UI Designers im Vergleich

Der UX Designer muss sich für den Aufbau der Website entscheiden. Je nachdem, welchen Zweck die Website erfüllen soll, stehen dem Designer folgende Möglichkeiten zur Verfügung. Dabei muss er auf die verschiedenen Vor- und Nachteile eingehen und entscheiden, welche Form der Darstellung am besten geeignet ist. Der UI Designer schmückt das ganze aus und muss entscheiden, wie die Vorgaben praktisch umgesetzt werden.

UX Design

  • Scrollytelling
  • Bildsprache
  • Horizontales Scrolling
  • Parallax Scrolling
  • 3D-Effekte
  • Grafiken und Icons
  • Sustainable Webdesign

UI Design

  • Farben und Layout Trends
  • Geometric Grid
  • Abstrakte Kunst
  • Illustrationen
  • Unschärfe/Blur
  • Dark Design

Zusammengefasst kann man sagen, obwohl die beiden, UX und UI Design, abhängig voneinander sind und es schwerfällt, sie getrennt zu betrachten, gibt es einen prägnanten Unterschied, der heraussticht. Der Fokus des UI Designs liegt hierbei auf der visuellen Gestaltung und der interaktiven Darstellung, während das UX Design dem Nutzer das bestmögliche Nutzererlebnis bieten möchte.

Kurz gesagt: UI Design ist der „Look“ und UX Design das „Feel“. Zusammen kreieren sie ein optimales Produkterlebnis mit punktgenauer Funktionalität und passender Optik.

Der Austausch mit Gleichgesinnten war uns bei memedia schon immer wichtig. Deswegen freut es uns sehr,  dass memedia die Chance hatte beim B2B Digital Day 2021 mitwirken zu können.  Dies ist ein Format unserer Partneragentur eMinded , das News und Events rund um das Thema B2B Digital Marketing bereitstellt und damit regelmäßig verschiedenen Branchen zusammenbringt.

Zu diesem Anlass gaben wir einen Überblick über die Top Webdesign Trends des Jahres 2021.

Nachfolgend bieten wir eine Zusammenfassung unseres Vortrages auf unserem Blog. Zusätzlich könnt ihr euch aber auch eine Aufzeichnung des Vortrags als Video betrachten.

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Parallax Scrolling

Ein erster von mehreren Scrolling Effekten, die immer mehr Verwendung in Webseiten finden ist das sogenannte „Parallax Scrolling“. Hierbei wird beim Scrollen durch einen Website eine gewisse Tiefe erzeugt, indem verschiedene Eben der Webseite unterschiedlich animiert sind.

Vorteile:

  • Verleiht der Website optische Tiefe
  • Lenkt die Aufmerksamkeit der Besuchers
  • Steigert die Emotionalität der Seite durch Realitätsnähe

Nachteile:

  • Kann die Seite langsam und „hakelig“ wirken lassen
  • Drosselt die Performance der Seite
  • Ist aufwendig in der Herstellung

Beispiele:

Horizontales Scrolling

Eine Veränderung der regulären Scrollrichtung kann bei vielen modernen Webseiten gefunden werden. Ob dies sinnvoll ist, hängt jedoch hauptsächlich vom Inhalt und Zweck der Webseite ab. Hier muss abgewogen werden, ob es Sinn macht, entgegen der gewohnten Usability ,die Richtung zu ändern und eventuell Besucher zu verwirren.

Vorteile:

  • Unterstützt breite Ansichten und ein horizontale Leserichtung

Nachteile:

  • Geht entgegen der gewohnten Usability
  • Kann verwirrend wirken

Beispiele:

Scrollytelling

Eine neuere Art und Weise einer Seite mehr Leben einzuhauchen ist das sogenannte „Scrollytelling“. Hier werden einzelne Bilder animiert, während der Besucher zu ihnen scrollt. Ein „Aha-Effekt“ ist auch hier vorprogrammiert. Wie der Name schon sagt, findet „Scrollytelling“ besondere Verwendung, wenn es darum geht dem Besucher eine Geschichte näher zu bringen und dieser mehr Leben zu verleihen.

Vorteile:

  • Unterstützt lebhaft das Storytelling einer Seite
  • Hilft Inhalte verständlicher darzustellen
  • Erhöht die Aufmerksamkeit des Besuchers
  • Mit wenigen Bilderebenen gut darstellbar
  • Gilt als „mobile friendly“
  • Ist ein cooler Begriff!

Nachteile:

  • Funktioniert nicht immer mit jedem grafischen Inhalt. Dieser muss am besten extra dafür konzipiert worden sein.

Beispiele:

3D, Grafiken & Icons

3D is back! Während plastisch wirkende Grafiken, Icons und Designelemente in modernen Webseiten lange keinen Anklang mehr fanden, zeigt sich nun wieder ein Gegentrend.  Der größte Unterschied zum Webdesign der 90er und früher 2000er ist hier aber, dass 3D Elemente nun mit mehr Bedacht und mehr Blick auf die Funktionalität eingesetzt werden. Zusätzlich erlaubt die aktuelle Rechenleistung nun die Darstellung von interaktiven 3D Objekten, was besonders bei der Präsentation von Produkten vom Vorteil sein kann.

Vorteile:

  • Gibt der Website eine tolle plastische Tiefe
  • Besonders Produktdarstellungen werden lebendiger und greifbarer

Nachteile:

  • Kann aufwendiges 3D Rendering voraussetzen

Beispiele:

FARBEN & LAYOUT TRENDS

In Sachen Farbgebung und Seitengestaltung bietet sich inzwischen eine Vielzahl an unterschiedlichen Trends. Wichtig ist wie immer, dass die Gestaltung der Webseite nach wie vor zu deren Inhalten passt. Hier ein paar Beispiele die zeigen, welche dieser Trends wir für besonders interessant halten:

Angenehme, organische Farben

Diese werden besonders im Bereich Kosmetik oder Beauty verwendet, und sollen natürlich und sanft wirken.

Schwarz  / Weiß

Der Einsatz einer schwarz/weissen Seite gibt die Möglichkeit, sich stärker auf den Inhalt zu fokussieren und ist derzeit noch etwas besonderes, das durch seine Schlichtheit auffällt. Es passt nicht zu jedem Thema, aber wie auch bei der Fotografie kann es auch hier in Einzelfällen sehr passend wirken.

https://www.uxdatabase.io/

Geometric Grid

Eine Darstellung einer Seite, die fast wie ein technisches Dokument wirkt. Feste und übersichtliche geometrische Strukturen, die oft mit einer alternativen Art der Navigation einhergehen.

https://www.thedarkhorse.de/

Abstrakte Kunst

Eine Fusion von Kunst und Design. Kann besonders auffällig wirken, wenn Besuchende eher reguläre und eher langweilige Icons und Grafiken gewohnt sind.

Illustrationen

Auch hier glänzt man durch den Verzicht auf 0815 Icons und Grafiken und durch die Verwendung von eigens angefertigten hochwertigen Illustrationen.

Unschärfe / Blur

Entweder als Hintergrundelement oder als Mouse Over Effekt finden Unschärfe-Effekte immer häufiger Anwendung und sollen neugierig machen und die Aufmerksamkeit des Besuchenden lenken.

https://www.virgileguinard.fr/series

Dark Design

Spätestens nach dem Dark- bzw. Night-Mode, den viele Webseiten und Apps ihren Usern anbieten, werden solche Dark Designs immer mehr Teil unserer Internetlandschaft.

https://www.apple.com/de/iphone-12-pro/

Sustainable Webdesign

Zusätzlich zu den bisher dargestellten gestalterischen Trends, gibt es auch aktuelle Trends, die sich um technische und inhaltliche Aspekte einer Seite  drehen. Besonders das sogenannte Sustainable Webdesign wird hier groß geschrieben. Also Webseiten, bei dessen Erstellung und Betrieb auf Nachhaltigkeit und Sustainability geachtet wird.

Grüne Website

Hierbei geht es besonders um die Auswirkungen die eine Website auf unsere Umwelt haben kann.

Laut websitecarbon.com verbraucht das Internet 416,2 Terawattstunden (TWh) pro Jahr. Das ist in etwa so viel wie Deutschland alleine verbraucht. Wäre das Internet ein Land, dann hätte es heute schon den sechstgrößten Stromverbrauch der Welt.

Bei 10.000 Besuchern pro Monat kommt man auf 211 kg CO2 pro Jahr – für eine einzige Seite!

Das ist so viel Kohlenstoff, wie 11 Bäume in einem Jahr absorbieren…

 …und entspricht genug Elektrizität, um ein Elektroauto 3138 km zu fahren.

Um eine Webseite „grüner“ zu gestalten, gibt es deswegen mehrere Möglichkeiten:

Hosting

Heute hat man eine große Auswahl an Hostern, die besonders auf ihren Umwelteinfluss achten. Ein Beispiel dafür ist Raidboxes, ein Hoster mit dem wir selber gerne zusammenarbeiten. So pflanzt Raidboxes nicht nur selber Bäume, sondern achtet allgemein auf eine klimapositive Projektarbeit. Zusätzlich wird der Strom hier größtenteils aus erneuerbaren Energien wie Wasserkraft bezogen.

Eine gute Übersicht über Hoster denen Sustainability am Herzen liegt bietet hier auch die Green Web Foundation

DESIGN

Erste und wichtige Schritte um eine Webseite grüner zu machen finden in der Planung und Gestaltung statt. Zum einen kann man hier durch ein kompaktes Seitenkonzept darauf achten dass die wichtigsten Informationen schnell und einfach vermittelt werden. Weniger Seiten bedeutet auch weniger Energieverbrauch. Genauso kann man hier schon bei den geplanten Inhalten aufpassen, dass man nicht verschwenderisch mit Datenmengen umgeht. Letztendlich geht es darum, dafür zu sorgen, dass der Besuchende schnell zu seinem Ziel kommt, ohne unnötige Datenmengen zu generieren.

Entwicklung

Schließlich sollte man bei der Entwicklung darauf achten, dass die finale Performance der Seite so hoch wie möglich ist. Hier hilft besonders das reduzieren von Datengrößen wie Bildern, Videos und Scripts. Eine guten Einblick in die Performance der eigenen Seite bieten online Tools wie z.B.: Google PageSpeed Insights  

Inclusive Design

Letztendlich ist ein weiterer Teil den man zur Nachhaltigkeit einer Webseite zählen kann das inklusive Design. Hierzu gehören Aspekte wie das barrierefreie Arbeiten, Diversität und das „Gendern“. Das trifft nicht nur auf textliche Inhalte, sondern auch auf Bilder und Videos zu.

Wir hoffen wir konnten ihnen hiermit einen interessanten und lehrreichen Überblick über die Webdesign Trends 2021 geben. Vielleicht gibt es einen oder mehrere Trends die auch ihnen besonders am Herzen liegen? Wir sind auf jeden Fall gespannt, was die weitere Zukunft des Webdesigns noch mit sich bringen wird!

Bewango ist ein ganzheitliches Gesundheitskonzept, bei dem die Steigerung der mentalen und physischen Leistung sowie der Lebensqualität im Vordergrund stehen. Hier arbeiteten wir mit der Geschäftsführerin Karen Plättner und dem Gesellschafter Felix Magath (Trainer FC Bayern München, 2004-2007) zusammen.

Um diese Ziele zu erreichen, besteht Bewango aus vier grundlegenden Bausteinen: 

Kognitives Training

Ein gut vernetztes Gehirn führt zu mehr Kraft, Klarheit und Gelassenheit. Hier wird spielerisch ein Verständnis der Zusammenhänge von mentaler und körperlicher Leistungsfähigkeit vermittelt.

Bewegung

Diese regt das Nervenwachstum im Gehirn an und verbessert die Durchblutung und Nährstoffversorgung.

Ernährung

Eine ausreichende Nährstoff- und Flüssigkeitszufuhr ist elementar. Hier wird leicht und spielerisch beigebracht, welche Lebensmittel zu einer optimalen Gehirnversorgung und gesunden Ernährungsweise beitragen.

Schlaf und Erholung

Durch diesen Baustein wird aufgezeigt, wie wir mit unseren Ressourcen ökonomisch umgehen können und wie unser Denken produktiver sowie unser Leben entspannter gestaltet werden kann.

Bewango bietet dafür nicht nur Informationen und Wissen, sondern auch aktive Betreuung durch Coaches und die dazugehörige Bewango App.

Bei der Konzipierung und der Gestaltung dieser App war memedia von Anfang an dabei.

Die Bewango App bietet dem Benutzer mehrere Trainings, Aufgaben und Spiele, mit dem genau diese vier Bausteine angesprochen und trainiert werden. Zusätzlich kann hier auch der Fortschritt des Benutzers gemessen, eingesehen und ausgewertet werden.

Die Betreuung des Benutzers der App erfolgt dabei nicht nur durch tatsächliche Coaches, sondern Trainingsprogramme und Empfehlungen, welche automatisch an die Bedürfnisse des Benutzers angepasst werden.

Letztendlich bietet die App auch den Zugriff auf eine Wissensdatenbank, durch die der Benutzer Zugang zu nützlichen Informationen und Tipps zu den Themen Gesundheit, Kognition, Bewegung, Ernährung und Erholung  erhält.

Zusammen mit unserem Kunden entwickelten wir hierbei ein allumfassendes App-Konzept. Dabei standen nicht nur das Design an sich im Vordergrund, sondern vor Allem auch die gesamte User Experience, das Game Design und das Belohnungs-Konzept (Gamification).

Für die Umsetzung der App arbeiteten wir sowohl am User Interface der gesamten App, als auch an der Backend Website für die Bewango Coaches. Zusätzlich erstellten wir zahlreiche audiovisuelle Elemente für die einzelnen Spiele und Aufgaben und entwickelten unterschiedliches Marketingmaterial.


Die Bewango App war ein komplexes und umfangreiches Projekt, an dem wir viele Monate gearbeitet haben.  Wir sind froh, dass wir zum gesamten Bewango Konzept beitragen durften, da uns die Themen Gesundheit und Lebensqualität sehr am Herzen liegen.

Mehr über Bewango App und das Konzept dahinter erfahren sie hier.

Im Herzen von München bietet die Klösterl Apotheke seit mehr als 35 Jahren ein vielfältiges Apothekensortiment und Heilmittel aus eigener Herstellung an.

Dabei legt sie schon immer besonderen Wert wird auf nachhaltige Naturheilkunde und Individualmedizin und bietet ein großes Angebot an Rezepturen aus Eigenherstellung: Von Nahrungsergänzungsmitteln, über Homöopathie, bis hin zur Aromatherapie.

Zusätzlich findet man bei der Klösterl Apotheke umfangreiche Services, zu denen unter anderem individuelle Beratungen, ein Versand und Bestellservice, eine informative Wissensdatenbank, das „Klösterl Journal“ Apotheken Magazin, und ein Kosmetikstudio gehören.

Um das reichliche Angebot der Klösterl Apotheke passend zu präsentieren, wandte sich die Klösterl Apotheke an uns, eine nachhaltige Webdesignagentur ebenfalls aus München.  Wir erstellten in enger Zusammenarbeit einen neuen und modernen Internet Auftritt: www.Kloesterl-Apotheke.de


Website Highlights:

Die Apotheke

Hier stellt sich die Klösterl Apotheke vor, erzählt von ihrer mehr als 35 jährigen Geschichte, und präsentiert ihre Arbeitsabläufe und Mitarbeiter.

Unter anderem gibt es hier auch die Möglichkeit das aktuelle „Klösterl Journal“ Magazin herunterzuladen, oder ein Archiv der vergangenen Journale zu durchstöbern.

Service

Neben dem Beratungs-Angebot der Apotheke und Antworten auf die häufigsten gestellten Fragen, befindet sich hier auch der praktische Bestell- und Versandservice, über den die Kunden Arzneien und Heilmittel bequem von zuhause Bestellen können.

Rezepturen

In einem der Herzstücke der Website erhalten Besucher reichhaltige Informationen über die vielen Rezepturen in Eigenherstellung, die die Klösterl Apotheke ihnen bietet. Zusätzlich wird hier auch der Herstellungsprozess genauer erläutert.

Gesundheit & Wissen

Hier bietet die Apotheke eine umfangreiche Wissensdatenbank. Neben informativen Gesundheitsthemen findet man hier auch Lexika zum Thema Heilpflanzen, Nährstoffe und Homöopathie.

Kosmetik

Zusätzlich zur Apotheke bietet Klösterl noch ein hauseigenes Kosmetikstudio. Auf der Website erfährt man hier Informationen zu den dortigen Behandlungen, verwendeten Pflegelinien, Preisen und hat direkt die Möglichkeit einen Termin zu vereinbaren.

Blog

Aktuelle Neuigkeiten und zusätzliche Einblicke in den Apotheken Alltag bietet der Klösterl-Blog mit verschiedenen Kategorien und Empfehlungen der Redaktion.


Der größte Teil der Umsetzung fand mit dem CMS WordPress statt. Hier kam uns zum einen unsere langjährige Erfahrung damit zu Gute und zum anderen bot es eine Vielzahl an Möglichkeiten der individuellen Anpassung an die Wünsche des Kunden. 

Als nachhaltige Webdesignagentur in München wird Gesundheit und Lebensqualität auch bei Memedia groß geschrieben, weswegen wir sehr gerne mit der Klösterl Apotheke an ihrer neuen Website zusammengearbeitet haben.

Erfahren sie hier mehr über die Klöster Apotheke, ihr vielfältiges Angebot und viel Wissenswertes zum Thema Gesundheit: www.Kloesterl-Apotheke.de

Kann man als vegan und nachhaltig denkendes Unternehmen Gutes bewirken und trotzdem sein Business nach vorne bringen?

Diese und andere spannende Fragen klären wir in der ersten Pilotfolge von „Ein Funke Zukunft“ zusammen mit Jonathan Funke von tip-me.org. Der Gründer einer Plattform für globales Trinkgeld spricht über seinen Werdegang, wie er schon mit 4 Jahren einen Radiosender gegründet hat und wie seiner Idee verwirklichen konnte, Trinkgeld bis hin zum Kaffeebauern vor Ort zu gewährleisten.

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Für Firmen und Betriebe jeglicher Größe wird es heutzutage immer wichtiger sich von seinen Mitbewerbern abzuheben und herauszustechen.
Dafür bietet Maßgestickt eine sehr spezielle Lösung: Individualisierte Arbeitskleidung und Textilveredlung.

Egal ob Logos, Motive, Namen oder Schriftzüge – Maßgestickt begleitet seine Kunden gerne von der ersten Idee, bis zur finalen Umsetzung einer hochwertigen Stickerei oder eines edlen Textildrucks. Und das mit einer großen Auswahl an unterschiedlichsten Designs, Farben und Preisklassen.
Besonders praktisch ist hier auch ihr Logo-Konfigurator, mit dem der Kunde direkt eine live Vorschau davon bekommt, wie das finale Produkt aussehen kann.

Wir halfen Maßgestickt dabei, ihr hochwertiges Angebot im Web neu zu präsentieren. Dabei standen wir ihnen nicht nur beratend zur Seite, sondern optimierten auch den Aufbau, die Inhalte und die Gestaltung ihrer neuen Website.

Dabei arbeiteten wir hauptsächlich mit Shopware 5, einem der beliebtesten E-Commerce Systeme für Online-Shops.
Eine der größeren Herausforderung war sicher die Menge an Produkten – über 30.000 – für die wir extra eine automatisierte Testumgebung anlegten um derartige Datenmengen zu importieren.
Zusätzlich wurde bei der Entwicklung der Seite – wie bei Maßgestickt selbst – Individualisierung groß geschrieben: Das gesamte Seitentemplate wurde eigens von uns erstellt um den Bedürfnissen des Angebots zu entsprechen. Und hierzu gehörte natürlich besonders der von uns überarbeitete Logo Konfigurator, der dem Kunden zusätzliche Möglichkeiten der Individualisierung bietet.

Auch das Thema „Nachhaltigkeit“ wird bei Maßgestickt großgeschrieben:
Z.B. findet die Produktion selber in Deutschland statt – „per Hand und persönlich“ – und viele der Produkte bestehen aus Bio-Baumwolle. Die neue Website bietet dafür eine extra Kategorie, bei der die Angebote nach Stichpunkten, wie unter anderem das EU Ecolabel, Faire Arbeitsbedingungen und Fairtrade, angezeigt und sortiert werden können. Somit fällt es dem Kunden besonders leicht umweltbewusst einzukaufen.

Wir bedanken uns für die Zusammenarbeit und wünschen Maßgestickt weiterhin viel Erfolg!

Und wer mehr erfahren möchte, besucht am besten gleich www.massgestickt.de

Nachhaltigkeit beginnt schon bei den Ressourcen und deren Einkauf. Dabei wird darauf geschaut, wie die Ressourcen gewonnen werden und wie der Herstellungsprozess die Umwelt belastet. Ein weiteres wichtiges Kriterium sind gerechte Arbeitsbedingungen, Haltbarkeit und letztlich auch Möglichkeiten zur Entsorgung oder Recycling des Endproduktes.

Für uns als Agentur für nachhaltig denkende Unternehmer bedeutet dies, alle 17 Nachhaltigkeitsziele der UN zu kennen und zu unterstützen.

Nachhaltigkeitsziele der UN

Eines dieser Nachhaltigkeitsziele, welches wir verfolgen, ist es erneuerbare und somit auch nachhaltige Energie für alle zugänglich und bezahlbar zu machen. Wir denken es ist wichtig, dass wir uns von den fossilen Brennstoffen trennen und uns auf die erneuerbaren Energien konzentrieren, die uns praktisch unerschöpflich zur Verfügung stehen.

Auch nachhaltiger Konsum und Produktion haben für uns eine große Bedeutung.

Wir denken Baumwolle eignet sich um dieses Thema näher zu erläutern, denn normalerweise würden wir Baumwolle als sehr natürlich und nachhaltig einordnen. Wie kann es aber sein, dass sie teils eine schlechtere Öko-Bilanz aufweist als Polyester Fasern?

Das erklärt sich, wenn wir uns den Anbau von Baumwolle genauer anschauen. Tatsächlich wird für die Produktion für Baumwolle viel Wasser verbraucht, in Gebieten, in denen Wasserknappheit herrscht.

Was ist bei nachhaltigen Produkten wichtig?

Ein anderer wichtiger Punkt ist, dass es bei der Baumwollernte häufig keine gerechten Arbeitsbedingungen gibt. Wir finden menschenwürdige Arbeit sollte längst zur Normalität gehören und ist deshalb eines der Nachhaltigkeitsziele, die wir verfolgen.

Zurück zur Baumwolle: Wir müssen ihr zugutehalten, dass Kleidungsstücke, die aus reiner Baumwolle gefertigt werden, sehr langlebig sind und am Ende auch recycelt werden könnten. So könnten sie anschließend auch zu neuen Kleidungsstücken verarbeitet werden.

Polyester-Textilien können hingegen, nach einiger Zeit einen schlechten Geruch entwickeln , der sich auch durch Waschen nicht mehr beseitigen lässt. Somit werden sie meist schneller wieder entsorgt.

Auch Polyester kann recycelt werden, allerdings werden hierfür viele Chemikalien benötigt die der Umwelt schaden und es kommt zu einem Downcycling. Dies bedeutet, dass die neue Faser nicht mehr die gleiche Qualität hat und somit frische Fasern beigemischt werden müssen.

An diesem Beispiel sieht man gut, dass jede Ressource individuell betrachtet und bewertet werden muss. Wir denken, dass nicht nur schwarz oder weiß existiert, sondern etwas dazwischen und es liegt an uns abzuwägen, welche Vor- und Nachteile es gibt und welche Argumente zum Schluss überwiegen.

Mit einem großen Angebot an Pflegeprodukten vom Scheitel bis zur Sohle ist die Marke Asam eine der größten „Wellness-Oasen“ in Deutschland. In Ihren hauseigenen Laboren forscht das bayerische Unternehmen im Namen der Schönheit nach den besten Rezepturen für hochwertige Kosmetik, die auch in lokalen Produktionsstätten hergestellt und abgefüllt wird.

Aber nicht nur die eigenen Produkte der AsamBeauty-Linie, denn mit der Private Label-Lösung teilt Asam gerne auch Ihr Wissen und Ihre Möglichkeiten mit anderen Unternehmen. Nun hatten wir das Vergnügen diese Philosophie und besondere Dienstleistung auf einer eigenen Website auf den Punkt zu bringen.

Die Asam Betriebs-GmbH kümmert sich mit Hand und Herz um die Produktion der Eigenmarken wie AsamBeauty, Kräuterhof oder almisan, als auch um Private Label-Kunden. Mit Ihren Experten aus Produktentwicklung, Produktmanagement, Kreativ-Agentur und Vertrieb bietet die Asam Betriebs-GmbH Ihre erfolgreiche Mischung aus Vision, Forschung und Fertigung auch jedem an, der mit Herzblut an der Entwicklung und dem Verkauf von nachhaltiger Kosmetika hängt. 

In enger Zusammenarbeit wurde das Grundkonzept der Seite durch intensive Beratung von uns in Aufbau, Inhalt und Design optimiert und umgesetzt. Die bestehende Bilderwelt wurde überarbeitet und durch einen von uns vermittelten Fotografen wurden eigens für das Projekt neue Fotos erstellt. Zur besseren Positionierung auf dem internationalen Markt wurde die Seite zusätzlich auch noch auf Englisch übersetzt. So konnten die einzelnen Facetten des Private Label-Angebots noch besser für den Kunden über eine WordPress-Lösung in Szene gesetzt werden.

Ein großes Anliegen auf beiden Seiten war es, das Thema „Nachhaltigkeit“ präsenter in den Vordergrund zu rücken, um so die Unternehmenskultur von Asam Cosmetics als Forschungs- und Herstellungsbetrieb mit ökologischer Verantwortung noch klarer darzustellen.

Ganz ohne Tierversuche versteht sich!

Asam – ein Familienunternehmen seit 1963, mit eigener Forschung und Herstellung. Lokal erzeugt, lokal geblieben und immer mit Blick auf unsere Welt von Morgen.

Wir bedanken uns für das Vertrauen und freuen uns auf die weitere Zusammenarbeit!

Wer mehr erfahren möchte über das Unternehmen (und natürlich das tolle Angebot!) geht auf
www.asam-cosmetics.com

Eine wichtige Frage in 2020, denn am 01.Oktober 2019 hat der Europäische Gerichtshof (EuGH) eine Neuerung zur bereits bestehenden Cookie-Regelung für Seitenbetreiber im Web entschieden.

Bisher musste lediglich durch simple Hinweise per Text über die Verwendung von Cookies informiert werden und per Link auf die Datenschutzrichtlinien der Seite hingewiesen werden. Die bisherige „Opt-Out“-Lösung, also dass Cookies bereits bei Besuch der Website aktiv sind und Nutzer sie selber deaktivieren müssen, ist nicht mehr zulässig.

Fazit: Der Hinweis bzw. alte Banner/Pop-Ups reichen rechtlich nicht mehr aus!

Jeder, der eine Webseite oder einen Blog mit Besuchern aus der EU hat, ist dazu verpflichtet ein spezifischeres Cookie-Banner / Pop-Up für die „Cookie-Einwilligungen“ (Cookie-Opt-Ins) auf seiner Seite bereitzustellen.

Im Klartext: Seit dem 01.Oktober 2019 darf man keine Cookies mehr einsetzen, ohne dass sich Nutzer ausdrücklich dafür einverstanden erklären können.

Hier die 5 wichtigsten Änderungen zu „Cookies“ im Überblick:

  • Besucher müssen detaillierte Informationen über die eingesetzten Tracking-Technologien der Seite zugänglich gemacht werden
  • Besucher müssen die Option haben, Ihr Einverständnis bzw. Ihre Ablehnung in Bezug auf die diversen Cookies abzugeben und ggf. diese Meinung auch nachträglich ändern zu können
  • Betreiber müssen sicherstellen, dass keine Cookies eingesetzt werden, bis der Besucher seine Zustimmung gibt
  • Betreiber müssen gewährleisten, dass die Seite uneingeschränkt nutzbar ist für den Besucher, auch wenn dieser Cookies ablehnt
  • Abgegebene Zustimmungen seitens der Benutzer müssen alle 12 Monate erneut abgefragt werden

Damit eine Seite nun wieder als „DSGVO-konform“ gilt, muss ein Cookie-Banner / Pop-Up nun also mehr können als bisher.

Quelle: www.buddhahaus-muenchen.de

Neben der Möglichkeit zur Einverständniserklärung durch die Nutzer, muss jede einzelne Erklärung auch nachvollziehbar dokumentiert werden. Auch müssen noch eine Reihe weiterer und spezifischer Anforderungen erfüllt werden, um so auch mehr Handlungsspielraum und Transparenz für den Endnutzer zu schaffen.

Natürlich helfen wir Ihnen gerne dabei, die rechtlich korrekten Vorgaben für Ihre Website zu definieren und individuell umzusetzen.


  Einrichtung durch uns in Absprache mit Ihnen

  Technische Integration auf Ihrer Webpräsenz

  inkl. Lizenzgebühren für PlugIn

€ 150,00 (inkl. Lizenz) zzgl. MwSt.

Sprechen Sie uns an!

Ab 01.Juli 2020 ist es soweit: Die Mehrwertsteuer wird temporär gesenkt, d.h.

– Regulärer Mehrwertsteuersatz von 19 % auf 16 %
– Ermäßigter Mehrwertsteuersatz von 7 % auf 5 %

Diese Anpassung gilt zwar nur bis zum Ende 2020, aber sie birgt sowohl Stolpersteine als auch Möglichkeiten für Online-Shops. Zunächst muss aber der Shop fit gemacht werden für die anstehende Änderung. Hierfür muss der Steuersatz im jeweiligen Shopsystem angepasst werden. Shopware zum Beispiel wird dazu in den kommenden Tagen ein spezielles PlugIn anbieten. Natürlich kann das Ganze auch manuell eingestellt werden. Gerne sind wir ihnen dabei behilflich, jedoch finden sie hier auch eine Anleitung dazu:

> Zur Anleitung auf Shopware

Die Änderung wirkt sich auch auf die Produktpreise, den gesamten Bestellprozess und auf die jeweiligen Bestellbestätigungen und Rechnungen aus.

Grundsätzlich steht die Frage im Raum: Brutto oder Netto ändern?

Es steht selbstverständlich jedem Händler frei, wie er damit umgeht. Zu beachten dabei ist, wie es sich auf die Kunden auswirkt:

Brutto ändern bedeutet, dass Kunden profitieren wegen günstigeren Preisen
Netto ändern bedeutet, dass Händler profitieren wegen höherer Gewinnmarge

Hier entsteht die Möglichkeit bei seinen Kunden zu punkten oder seinen Absatz zu steigern. Fakt ist, dass Kunden, wie auch Händler, die Konkurrenz und deren Preise im Auge behalten werden. Daher sollte man mit seinem Gewerbe das Gleiche tun und die Entscheidung sollte wohl überlegt sein.

Online-Händler und Shopbetreiber sollten also über eine Änderung Ihrer Preisstrukturen nachdenken und entsprechend in Ihren Shops ändern. Der Kunde ist es schließlich gewohnt geschönte Preise zu sehen, die nicht zusätzlich in den Kommastellen übermäßig krumm sind. Zudem kann es zu Problemen führen, wenn es Abhängigkeiten bei den Preisen gibt, also z.B. ab 500.- EUR ein Nachlass entstehen soll und dies bisher mit zwei besonderen Produkten auf gewünschte Weise erreicht wurde und nun knapp unterschritten würde.

Zusätzlich sollte darauf geachtet werden, wo diese Informationen sonst noch erscheinen, wie z.B. auf:

► Produktseiten (Preis und „inkl. xxx% MwSt)
► Mailings
► Werbekampagnen
► Werbematerialien
► Preis- oder Kombi-Abhängigkeiten
► Produkte, die auf Amazon und Ebay beworben werden
► FAQs, AGBs und weiteren Rechtstexten
► Serienrechnungen
► Entscheidung: Steuervorteil an Kunde weitergeben oder nicht?

Bitte beachten: Für die Senkung der Steuern aus dem Koalitionspaket gibt es nach unserem Wissensstand keine Übergangsfrist. Die Änderungen müssen zum 1. Juli 2020 0.00 Uhr erfolgen.

Mehr Infos:
> Bundesfinanzministerium: Senkung Umsatzsteuer Juli 2020

Und wir wollen das auch – mehr Fahrrad für Alle. So war der Auftrag zum Relaunch von bikesale.de auch ein persönliches Projekt für uns. Vor allem für unseren begeisterten Downhiller und Geschäftsführer. Mit viel Begeisterung und Einfühlungsvermögen für die Materie gingen wir also an die Arbeit sowohl Homepage, als auch das bestehende Shop-System nochmal kräftig auf den Kopf zu stellen.

Geprüft, Poliert, Zertifiziert!

Wer also einen neuen Drahtesel oder ein E-Bike für den schmalen Taler braucht, wird hier schnell fündig. Im Shop findet sich eine große Auswahl an Restposten, Testrädern und dergleichen, die vom bikesale-Team auf Herz und Nieren geprüft werden, bevor es in den Verkauf geht. Schont den Geldbeutel, schont die Umwelt!

www.bikesale.de

…so oder so ähnlich könnte man unser neuestes Projekt zusammenfassen: 

“Das Buddha-Haus Projekt“

1989 wurde das Buddha-Haus von der deutschen Nonne Ayya Khema gegründet um die Lehre des Buddha und der Meditation im Westen zugänglich zu machen. In 30 Jahren entwickelte sich neben dem Seminarhaus im Allgäu, das buddhistische Waldkloster Metta Vihara und die beiden Meditationszentren München und Stuttgart, sowie mehr als 70 Meditationsgruppen. Aber auch die Publikationen von Büchern und Vorträgen und Meditationen auf CD im JhanaVerlag werden vom gemeinnützigen Buddha-Haus Verein getragen.

2019 trat der “Buddha-Haus Vorstand “ mit dem Wunsch einen neuen Internetauftritt des gesamten Buddha-Haus Projekts mit all den verschiedenen Bereichen übersichtlich und modern zu gestalten  an ein langjähriges Mitglied, das zufällig auch „Web“ kann. Mario – aktives Mitglied im „Buddha-Haus“ und unser “Head Of Development“. Wie das Leben manchmal so spielt…

So entstanden also Konzept und Design bei uns im Haus. Wir bauten ein darauf abgestimmtes Template auf WordPress-Basis, um das vielseitige Angebot des „Buddha-Haus Projekts“ noch besser im Netz darzustellen. Zusätzlich gab es noch eine fortbildende Schulung von unserer Seite, wie man sich heute im Web positioniert und präsentiert. Das Ganze wurde gleich in praktischen Beispielen im eigenen CMS der neuen Seite umgesetzt. Somit bekam der Verein die Möglichkeit, zukünftig Inhalte wie Bilder, Texte und News selbstständig auf der eigenen Website einzupflegen.

Größtes Highlight des Projekts ist und bleibt aber die enge Zusammenarbeit mit den einzelnen Vertretern der Bereiche des Vereins. In einem intensiven Arbeitswochenende kamen wir im Seminarzentrum im schönen Allgäu zusammen. In entschleunigter Atmosphäre trafen dann buddhistische Mönche mit spirituellen Themen der Ruhe und des bewussten Lebens auf die schnelllebigen Regeln des WorldWideWeb.

Anfang Oktober ging die neue Website online. Für uns mehr als nur ein Auftrag.

Mit unserer Arbeit wollten wir mehr machen als nur eine Website bauen…

Mit viel Engagement (auch nach Ladenschluss!) und einer Spende für das „Buddha-Haus Projekt wollten wir als Agentur den Verein in seiner bewundernswerten Arbeit unterstützen. Und dabei auch ein wenig zurückgeben, für das, was wir entlang des Weges so Wertvolles aufgeschnappt haben.

Daher bedanken wir uns herzlich beim gesamten “Buddha-Haus Projekt“ für diesen Auftrag.

Wer sich bereits für Meditation und Achtsamkeit interessiert oder jetzt mehr darüber erfahren möchte, dem möchten wir hiermit das „Buddha-Haus-Projekt“ ganz stark ans Herz legen.

Unser Tipp:

Unbedingt in den Ursprung des Projekts einlesen und mehr über die beeindruckende Geschichte von Ayya Khema erfahren – der Gründerin des „Buddha-Haus“.

www.buddha-haus.de

WordPress für Dr. C Soldan – Em-eukal

Mmmm.. lecker! – Es gibt ein paar Dinge die man immer mit seiner Kindheit verbindet. Eins davon ist der Kirschgeschmack der runden roten Bonbons von Kinder Em-eukal. So war es auch nicht verwunderlich, dass sich das ganze Team der memedia auf diesen Kunden gefreut hat und alle dankbare Abnehmer der verschiedenen Sample-Pakete waren, die wir im Laufe der Zusammenarbeit einheimsen konnten.

Weitere Produkte von Dr. C. Soldan sind das klassische Em-eukal, Rheila, die Bären-Garten Produkte oder auch der aecht Bayrische Blockmalz. Alle diese konnten wir nun kennenlernen.

Die Soldan-Erlebniswelt 

Schon in den ersten Terminen wurde klar, dass uns hier ein sehr freundliches und sympathisches Team begleiten wird. Die Zusammenarbeit hat viel Spaß gemacht und passte wunderbar zu unseren Core Values Inspriation und Gemeinschaft.

Zielsetzung war, den Markenauftritt der neuen Erlebniswelt von Soldan, einem modern gestalteten Werksverkauf der Soldan-Produkte, mit einer ansprechenden Website und weiteren Maßnahmen zu gestalten und bekannt zu machen.

Zum Umfang gehörten die Entwicklung des Logos und eines abgeleiteten CIs für die neue Erlebniswelt. Zudem als zentrales Marketing-Tool eine WordPress-Website, eine begleitende Banner-Kampagne, die Gestaltung von Schauobjekten am POS und ein Quiz, das die Leute, insbesondere Familien, vor Ort spielerisch durch die Location führt.

Eins nach dem anderen.

Markenauftritt

Das Ganze braucht ein Logo, das muss im CI von Soldan bleiben, aber auch zu Em-eukal passen und wenn es für sich alleine steht soll man auch erkennen können, dass es sich um Süßigkeiten handelt. Es gab viele Ideen und Ansätze, letztlich kamen wir aber in leichten Variationen immer wieder zu unseren ersten Ideen zurück und sind dann auch dabeigeblieben. Der hohe Wiedererkennungswert in allen Größen, auf der Website, auf Merchandise-Produkten, aber auch in klein auf den Banner-Ads hat am Ende deutlich dafür gesprochen.

WordPress in schick

Die Website im Stil einer vertical-scrolling Landingpage sollte die Besucher vor allem emotional  ansprechen und ihnen eine Idee geben, was sie vor Ort an bunter Vielfalt erwartet. „Man muss den Eukalyptus schon riechen können und das Knistern der sich öffnenden Bonbon Verpackungen hören.“

Optische Grundlage sind Eukalyptus Blätter die einen Großteil des Hintergrunds bilden. Above the fold deutet ein Image-Film die verschiedenen Geschmacksrichtungen der Produktpalette an und soll später auch um einen Rundgang durch die Erlebniswelt ergänzt werden.

Nach den meistgesuchten Grundinfos wie z.B. den Öffnungszeiten finden sich die wichtigsten thematischen Bereiche in sechs Kacheln unterteilt, die durch Bilder und kurze Texte schon einen guten Einblick in das geben, was einen vor Ort so erwartet. Große Bilder und wenig Text – gut zu erfassen und schnell zu verstehen.

In der Sektion darunter haben wir die Location angeteasert – mit einem kleinen Lageplan auf dem man die Erlebniswelt virtuell durchschreiten kann.

Im folgenden Slider kann man sich durch Teile des Produktsortiments klicken. Auch hier haben wir viel Wert auf möglichst viel plakative Bildinformation und kurze prägnante Texte gelegt.

Die Erlebnistour ist aus einer Konzeptidee von uns entstanden. Hier sollten beliebte Ausflugziele in der Nähe von Adelsdorf zu einer kleinen Tour kombiniert werden können. Selbstverständlich mit der Soldan-Erlebniswelt als zentralem Element. Dies gibt auch die Möglichkeit diese als Werbepartner zu gewinnen und sich gegenseitig zu bewerben. Zudem kann sich die Erlebniswelt im Zusammenhang mit teils international bekannten Attraktionen präsentieren.

Ein News/Blog-bereich wird noch dazu kommen und ist derzeit noch in Arbeit.

Das alles haben wir mit WordPress, dem aktuell führenden CMS technisch umgesetzt. Wichtig war, dass die Website auch responsive und somit für mobile Geräte attraktiv wirkt und gut zu bedienen ist.

Bannerkampagne

Begleitend zum Launch der Website wurde noch eine kleine regionale Kampagne gestartet. Diese soll dann abgewandelt, zu später folgenden Events, immer wieder Interessierte in die Erlebniswelt  bringen. Hierbei war die entsprechende Zielgruppe „Familien mit Kindern“, die vor Ort auch Gummibärchengießen, kleine Geschenke und unser Quiz erwarten sollte. Somit haben wir als Mittelpunkt der Kampagne immer Bonbons oder Felix das Testimonial von Kinder Em-eukal gewählt.

Gestaltung vor Ort: Historienwürfel

Auch bei manchen Elementen vor Ort wurden wir um Mithilfe gebeten. Insbesondere die attraktive und spielerische Darstellung der Historie von Soldan und der Rollen der verschiedenen Geschäftsführer in der Vergangenheit und bis heute. Als Präsentationsform wurden Würfel gewählt, die in der X-Achse drehbar sind und auf vier Seiten anschaulich bedruckt werden. Als zusätzliche Spielerei gibt es auch einen Bereich der den Blick auf das Innere des Würfels zulässt und dort weitere Informationen enthält.

Quiz

Die Besucher der Erlebniswelt erhalten eine Quiz-Karte (ca. A5 Format). Darauf sehen sie sowohl eine kurze Erklärung des Spiels an sich, als auch eine Art „Bingo“ Gitter. Jedes Kästchen auf der Karte enthält einen grafischen Hinweis (z.B. eine Silhouette oder ein einfaches Symbol), der einen Ort innerhalb der Erlebniswelt repräsentiert. Zusätzlich ist unter jedem Symbol ein kleines Feld, das beschrieben werden kann. Wenn ein Besucher nun einen Ort, der auf der Karte angedeutet wird, aufsucht, kann er dort angebrachte Fähnchen entdecken. Hinter diesen sind Rätsel oder Fragen versteckt, sowie die Aufforderung die Lösung dazu auf das jeweilige Feld auf der Karte einzutragen.

Sobald ein Besucher eine „Bingo Reihe“ vollständig ausgefüllt hat, kann er die Karte bei einem Mitarbeiter einlösen. Dieser überprüft die Antworten auf Richtigkeit. Sind alle Antworten korrekt, erhält der Besucher einen kleinen Preis. Wenn der Besucher will, kann er versuchen mehrere Bingo Reihen vollständig auszufüllen und erhält somit mehrere oder bessere Preise. Wird die gesamte Karte vollständig und korrekt ausgefüllt, erhält der Besucher zusätzlich eine Urkunde. Intention: Hiermit kann der Besucher sowohl die Schwierigkeit des Quiz selber bestimmen, als auch wie viel Zeit er mit dem Quiz verbringen will.

Wir als Münchner Agentur freuen uns, dass wir seit diesem Jahr zum Shopware Business Partner geworden sind. 

Auf der Suche nach einer umfangreichen und gut skalierbaren E-Commerce-Lösung für unsere Kunden haben wir uns neben WooCommerce, für kleine Shops, für Shopware entschieden. Nicht einfach so, sondern nach langer Recherche und einigen Umsetzungen bei denen wir wichtige Erfahrungen sammeln konnten.

Eine unserer aktuellen Shopware-Umsetzungen ist die Kosmetikmarke „bynacht“ auf https://www.bynacht.com. Überzeugen sie sich selbst!

Shopware begeistert durch eine flexible Struktur die alle Ansprüche an einen modernen Onlineshop erfüllt. Die durchdachten Features bringen unseren Kunden die Wettbewerbsvorteile die man in den umkämpften Märkten benötigt. Durch das deutsche Entwicklerteam ist eine hohe Qualität in der Umsetzung und vor allem im Support gewährleistet. Das sind Punkte die sich insbesondere in der Praxis als sehr positiv erweisen.

In der aktuellen Shopware Version ist u.a. auch ein ERP von Pickware als Warenwirtschaftssystem integriert. Es lassen sich aber auch alle möglichen anderen ERPs an den Webshop anbinden. Wenn man mit seinem aktuellen Shopsystem unzufrieden ist gibt es sogar ein Migrationstool mit dem sich die Daten aus bestehenden Shopsystemen einfach migrieren lassen. Zur Zeit geht das mit Magento, OXID, VEYTON, Gambio, xtcModified, xt:Commerce und Prestashop.

Die breiten Möglichkeiten von Shopware zeigen sich auch in der Fülle an einsetzbaren Plugins. Hier gibt es derzeit fast 2000 Lösungen für alle erdenklichen Anforderungen. Somit wird z.B. die Anbindung von Zahlungssystemen und Logistikdienstleistern sehr komfortabel.

Wenn sie zu Fragen zu Ecommerce Shops haben, freuen wir uns über ihren Kontakt.

„Wie sieht für Dich die perfekte Firma aus?“ – das war der Einstieg. Nicht immer einfach zu beantworten, dennoch eine schöne Vorbereitung auf das, was da noch kommen sollte.

Am 15.11.2018 hatten wir Melanie Hoffmann von „Customer Delight“ bei einer unserer internen Veranstaltungen „meUpdate“ zu Gast. Normalerweise bringen uns dabei zwei bis drei unserer Mitarbeiter in Vorträgen zu aktuellen, spannenden Themen auf den neusten Wissensstand.

Diesmal jedoch war ein Coaching zum Thema „Core Values“ angesagt. Also zu Prinzipien und Einstellungen, die sich durch die gesamte Firmenkultur nach außen und nach innen durchziehen. Selbiges Coaching hatte bereits ein paar Tage früher mit dem Firmengründer Benno Schmidtler stattgefunden und jetzt galt es zu sehen, was für das Team wichtig ist.

Dabei haben sich alle gut eingebracht und hatten sichtlich Spaß, gegenüber Melanie alles rauszulassen. Unsere „Remote-Mitarbeiter“ waren per Video-Chat ebenfalls live mit dabei. Melanie hatte mit Ihrer motivierenden Art an diesem Tag die volle Aufmerksamkeit des ganzen Teams, und es gab viele interessante, überraschende und auch witzige Ergebnisse. Daraus wurden dann gemeinsam Wertegruppen und Oberbegriffe abgeleitet. Jetzt muss im Nachgang noch die Quintessenz aus beiden Coachings erarbeitet werden. Erfreulicherweise kann man jedoch soweit vorgreifen: in sehr vielen Punkten stimmen Team und Geschäftsführung schon überein!

Zur Erreichung gemeinsamer Ziele ist es unerlässlich, sich darüber sowie über die für alle geltenden Regeln im Klaren zu sein, diese immer wieder zu diskutieren und mit Leben zu füllen. Hier ist ein wichtiger Meilenstein nun gelegt. Wir bedanken uns für das tolle Coaching und freuen uns auf die nächsten, aufregenden Entwicklungsschritte bei memedia!

Wir gratulieren O. Sredzinski zum Abschluß seiner Ausbildung.

Diese hat er nicht nur sehr gut bestanden, sondern sogar mit Auszeichnung als Jahrgangsbester!
Wir wünschen ihm viel Erfolg auf seinem zukünftigen Lebensweg und freuen uns auf die weitere Zusammenarbeit als freier Mitarbeiter bei tollen Projekten.

Ausbildung ist uns wichtig.

Wir bilden seit 1996 mit viel Spass den Beruf des Mediengestalters aus und freuen uns auch dieses Jahr auf frischen Input und neue Persönlichkeit in unserem Team.

Ab 25. Mai 2018 gelten EU weit die neue EU-Datenschutz-Grundverordnung (EU-DSGVO), die das europäische Datenschutzrecht weitgehend vereinheitlichen soll.  Besonders Webseitenbetreiber die Onlinedienste wie Google Analytics zur Datenverkehrsanalyse verwenden sind hiervon betroffen.

Was genau sowohl Webseitenbetreiber als auch Agenturen beachten müssen wenn es um die Nutzung von Google Analytics geht, haben wir im Folgenden zusammengefasst.

Wichtiges für Webseitenbetreiber

1. Vertragsabschluss mit Google (§ 11 BDSG)

Laut Ansicht der Aufsichtsbehörden gelten Webseitenbetreiber bei der Nutzung von Google Analytics als Auftraggeber und Google als Aufragnehmer. Deswegen muss hier ein schriftlicher Vertrag zur sogenannten Auftragsdatenverarbeitung separat für jede Domain abgeschlossen werden, damit Google Analytics benutzt werden kann.

Google bietet dafür hier einen offiziellen Entwurf zum ausdrucken und ausfüllen an.

2. Angepasste Datenschutzerklärung

Die bisherige Textvorlage, die Google als Datenschutzerklärung angeboten hat, muss ergänzt werden.  Der Nutzer wird hierbei primär über zwei Widerspruchsmöglichkeiten gegen die Erfassung von Nutzerdaten informiert:  Ein Google Analytics Deaktivierungs-Addon für Browser und ein sogenanntes Opt-Out-Cookie. In den folgenden Beispieltexten zur Datenschutzerklärung sind die wichtigen Textergänzungen rot markiert:

Deutsch:

„Diese Website benutzt Google Analytics, einen Webanalysedienst der Google Inc. („Google“). Google Analytics verwendet sog. „Cookies“, Textdateien, die auf Ihrem Computer gespeichert werden und die eine Analyse der Benutzung der Website durch Sie ermöglichen. Die durch das Cookie erzeugten Informationen über Ihre Benutzung dieser Website werden in der Regel an einen Server von Google in den USA übertragen und dort gespeichert. Im Falle der Aktivierung der IP-Anonymisierung auf dieser Website, wird Ihre IP-Adresse von Google jedoch innerhalb von Mitgliedstaaten der Europäischen Union oder in anderen Vertragsstaaten des Abkommens über den Europäischen Wirtschaftsraum zuvor gekürzt. Nur in Ausnahmefällen wird die volle IP-Adresse an einen Server von Google in den USA übertragen und dort gekürzt. Im Auftrag des Betreibers dieser Website wird Google diese Informationen benutzen, um Ihre Nutzung der Website auszuwerten, um Reports über die Websiteaktivitäten zusammenzustellen und um weitere mit der Websitenutzung und der Internetnutzung verbundene Dienstleistungen gegenüber dem Websitebetreiber zu erbringen. Die im Rahmen von Google Analytics von Ihrem Browser übermittelte IP-Adresse wird nicht mit anderen Daten von Google zusammengeführt. Sie können die Speicherung der Cookies durch eine entsprechende Einstellung Ihrer Browser-Software verhindern; wir weisen Sie jedoch darauf hin, dass Sie in diesem Fall gegebenenfalls nicht sämtliche Funktionen dieser Website vollumfänglich werden nutzen können.

Sie können darüber hinaus die Erfassung der durch das Cookie erzeugten und auf Ihre Nutzung der Website bezogenen Daten (inkl. Ihrer IP-Adresse) an Google sowie die Verarbeitung dieser Daten durch Google verhindern, indem Sie das unter dem folgenden Link (https://tools.google.com/dlpage/gaoptout?hl=de) verfügbare Browser-Plugin herunterladen und installieren.
Sie können die Erfassung durch Google Analytics verhindern, indem Sie auf folgenden Link klicken. Es wird ein Opt-Out-Cookie gesetzt, das die zukünftige Erfassung Ihrer Daten beim Besuch dieser Website verhindert:


<a href=“javascript:gaOptout()“>Google Analytics deaktivieren</a>


Nähere Informationen zu Nutzungsbedingungen und Datenschutz finden Sie unter https://www.google.com/analytics/terms/de.html bzw. unter https://www.google.de/intl/de/policies/. Wir weisen Sie darauf hin, dass auf dieser Website Google Analytics um den Code „anonymizeIp“ erweitert wurde, um eine anonymisierte Erfassung von IP-Adressen (sog. IP-Masking) zu gewährleisten.“

(Beispielhafte Formulierung von www.datenschutzbeauftragter-info.de)

English:

This website uses Google Analytics, a web analytics service provided by Google, Inc. (“Google”). Google Analytics uses “cookies”, which are text files placed on your computer, to help the website analyze how users use the site. The information generated by the cookie about your use of the website (including your IP address) will be transmitted to and stored by Google on servers in the United States. In case of activation of the IP anonymization, Google will truncate/anonymize the last octet of the IP address for Member States of the European Union as well as for other parties to the Agreement on the European Economic Area. Only in exceptional cases, the full IP address is sent to and shortened by Google servers in the USA. On behalf of the website provider Google will use this information for the purpose of evaluating your use of the website, compiling reports on website activity for website operators and providing other services relating to website activity and internet usage to the website provider. Google will not associate your IP address with any other data held by Google. You may refuse the use of cookies by selecting the appropriate settings on your browser. However, please note that if you do this, you may not be able to use the full functionality of this website.

Furthermore you can prevent Google’s collection and use of data (cookies and IP address) by downloading and installing the browser plug-in available under https://tools.google.com/dlpage/gaoptout?hl=en-GB.You can refuse the use of Google Analytics by clicking on the following link. An opt-out cookie will be set on the computer, which prevents the future collection of your data when visiting this website:

<a href=“javascript:gaOptout()“>Disable Google Analytics</a>

Further information concerning the terms and conditions of use and data privacy can be found at https://www.google.com/analytics/terms/gb.html or at https://www.google.de/intl/en_uk/policies/. Please note that on this website, Google Analytics code is supplemented by “anonymizeIp” to ensure an anonymized collection of IP addresses (so called IP-masking).

(Beispielhafte Formulierung von www.datenschutzbeauftragter-info.de)

3. Löschung von alten Daten

Alte, nicht-anonymisierte Daten müssen zusätzlich gelöscht werden.  Dies gilt für alle Profile/Properties die vor dem Update des Google Analytics Codes erfasst wurden.

Wichtiges für Agenturen

1. Anonymisierung von IP Adressen

Um eine datenschutzkonforme Anonymisierung von IP Adressen zu ermöglichen bietet Google hier eine Erweiterung des bisherigen Tracking Codes namens „anonymizeIp“. Hiermit werden die letzten acht Bit der IP Adressen automatisch gelöscht. Somit ist nur noch eine grobe Lokalisierung der Adressen möglich.Es gibt grundsätzlich zwei verschiedene Arten von Analytics: Universal Analytics und klassisches Analytics. Bei beiden Varianten muss der Tracking Code entsprechend angepasst werden. Dieser wird in den Header Quelltext aller Frontend Seiten der Website eingebunden.

Beispielhafter Tracking Code für Universal Analytics:

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga')
ga('create', 'UA-XXXXXXX-X', 'website.de');
ga('set', 'anonymizeIp', true);
ga('send', 'pageview');
</script>

Beispielhafter Tracking Code für klassisches Analytics:

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXX-X']);
_gaq.push(['_gat._anonymizeIp']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'https://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

2. Widerspruchsrecht

Zusätzlich muss den Benutzern, wie schon in der angepassten Datenschutzerklärung erwähnt, die Möglichkeit gegeben werden das Aufzeichnen ihrer Daten abzulehnen. Dazu müssen zwei Varianten des Widerspruchs implementiert werden: Ein Link zu einem Deaktivierungs-Add-on für Desktop Browser, und die Möglichkeit ein sogenanntes Opt-Out-Cookie zu setzen.    Für das Opt-Out-Cookie muss ein zusätzliches Script vor dem eigentlichen Google Analytics Code in den Quelltext eingefügt werden.

Opt-Out-Cookie Script

<script>
var gaProperty = 'UA-XXXXXXX-X';
var disableStr = 'ga-disable-' + gaProperty;
if (document.cookie.indexOf(disableStr + '=true') > -1) {
  window[disableStr] = true;
}
function gaOptout() {
  document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
  window[disableStr] = true;
}
</script>

Beide Widerspruchsmöglichkeiten, Deaktivierungs-Add-on und Opt-Out-Cookie, müssen in der Datenschutzerklärung erwähnt und verlinkt werden.  Mehr Informationen dazu von Google gibt es hier.

Fazit

Mit diesen Änderungen können sowohl Webseitenbetreiber als auch Agenturen Google Analytics weiterhin datenschutzkonform einsetzen. Doch auch bei Seiten ohne Google Analytics sollte zusätzlich darauf geachtet werden ob Tools von Drittanbietern verwendet werden, die Analytics mit sich bringen. Wenn diese Tools weiterhin benutzt werden sollen, muss auch hier für einen datenschutzkonformen Einsatz gesorgt werden.

Bei der täglichen Arbeit in der Medienbranche kommt man heutzutage an den Programmen der Firma Adobe nicht vorbei. Adobe dominiert mit seinen Werkzeugen den Großteil der Medienlandschaft und lässt sich das auch gehörig über einen monatlichen Zahlungsplan bezahlen. Das stößt vielen alteingesessenen Adobe-Kunden sauer auf, denn das monatliche Abomodell ist teuer, man kann nicht mehr wählen, welche Programmversion man kauft und auf welche man verzichtet, und beim stoppen des Abos hat man keine Möglichkeit seine bisherigen Dateien weiterzubearbeiten. Das ist ein sehr guter Grund sich vielversprechende und günstige Konkurrenzprodukte anzusehen.

Im Falle der Bildbearbeitungs-Software Adobe Photoshop ist das Affinity Photo, welches dem Platzhirsch Paroli zu bieten verspricht und das man zu einem Bruchteil der bei Photoshop anfallenden Kosten kaufen kann.

Wir haben uns entschieden Affinity Photo zu testen und mit Adobe Photoshop zu vergleichen, dabei erheben wir keinen Anspruch auf einen vollständigen Test, aber wir möchten wissen, ob die Softwareschmiede Affinity Serif mit ihrem Produkt einen ernstzunehmenden Photoshop-Konkurrenten auf die Beine gestellt hat und ob sich dieser vom Funktionsumfang her lückenlos in unseren Workflow integrieren lässt. 

Affinity Photo ist für Mac Os, Windows und für die neueste iPad-Generation verfügbar. Wir lassen Affinity Photo auf dem Mac Os gegen Photoshop antreten. Die schnelle Installation über den Apple App Store verläuft gewohnt unproblematisch und installiert ein einzelnes Programm im Programme-Ordner von MacOs.

Affinity Photo ist für Mac Os, Windows und für die neueste iPad-Generation verfügbar. Wir lassen Affinity Photo auf dem Mac Os gegen Photoshop antreten. Die schnelle Installation über den Apple App Store verläuft gewohnt unproblematisch und installiert ein einzelnes Programm im Programme-Ordner von MacOs.

Grundsätzliches zur Bildbearbeitung mit Affinity Photo 

Die Bildbearbeitungs-Suite Affinity Photo ist in ein Hauptprogramm und vier spezialisierte Module, sogenannte „Personae“ unterteilt, so zum Beispiel das RAW-Import-Modul „Develop Persona“. Das Programm startet mit der Hauptoberfläche und per Knopfdruck lässt sich in eines der Module wechseln. In dem Fall, ändert sich die Bedienoberfläche zur Moduloberfläche und beim Bestätigen oder Abbrechen der Arbeitsschritte im Modul ist wieder die Hauptoberfläche zu sehen. Aufgabe der vier Module sind Bildverzerrung, Import, Export und Farbtransformation. Alle anderen Aufgaben sind in der Hauptoberfläche zu erledigen.

Photo Persona
Die Hauptoberfäche im Zweischirmbetrieb

Vorab kann man schonmal sagen, dass das Programm die erwarteten und gewohnten Werkzeuge für den Bildbearbeitungs-Workflow zur Verfügung stellt und für die Programmsparte gewohnte Oberfläche und Bedienung bietet. Die Bedienoberfläche bietet dabei umfangreiche Paletten und ist ohne weiteres, wie Photoshop auch, für den Zweischirmbetrieb gedacht. Wenn man die Arbeit mit Photoshop kennt, findet man sich auch schnell auf den Paletten und mit den Werkzeugen zurecht. Man findet – wie man es von aktuellen Programmen gewohnt ist – eine sehr dunkel gehaltene Arbeitsumgebung vor; ein Umstellen auf eine komplett helle Variante ist leider nicht möglich. 

Bei der Arbeit fällt positiv die hohe Verarbeitungsgeschwindigkeit auf; die Arbeit mit Pinseln z. B. wirkt nahezu verzögerungsfrei und fühlt sich flüssiger an als von Photoshop gewohnt. Zum Speichern benutzt Affinity Photo, wie Photoshop, ein proprietäres Dokumentenformat, kann allerdings auch das Photoshop-Format lesen und schreiben – natürlich auch branchenübliche Bildformate. Viele Photoshop-Kurzbefehle funktionieren auch in Affinity Photo, das ermöglicht einen schnellen Einstieg für uns: es stellt sich recht bald ein flüssiger Arbeitsauflauf ein.

Aufklappmenü
Die Aufklappmenüs der Menüleiste in der Hauptoberfläche im Überblick

RAW-Konvertierung über das Bildimportmodul

Ein dedizierter RAW-Konverter sitzt im Bildbearbeitungs-Workflow in der Regel ganz am Anfang. Er setzt schon bei der Bildauswahl an und beschleunigt die „Entwicklung“ von Fotos erheblich durch Korrekturautomatismen, Farbtransformationspresets und die Möglichkeit zur Stapelverarbeitung. Affinity Photo verfolgt beim RAW-Import – analog zu Photoshop – einen ganz anderen Ansatz: das Import-Modul („Develop Persona“) ist auf Einzelkonvertierung von RAW-Files ausgelegt und kann einen dedizierten RAW-Konverter, wie z. B. Lightroom, nicht ersetzen. Durch fehlende  Automatismen bei Objektiv- und Farbkorrekturen ist der Durchsatz bei individueller Konvertierung in Photoshop oder Affinity Photo schließlich ein viel geringerer als in einer darauf spezialisierten Foto-Entwicklungs-Suite. Für individuellen RAW-Import hat Affinity Photo allerdings die passenden Tools.

Beim Vergleich mit Photoshop fällt der knappere Funktionsumfang des Konverters von Affinity Photo auf. Die Tools von Affinity wirken nicht aufgeblasen aber reichen völlig aus um eine RAW-Datei ordentlich zu entwickeln – Affinity Photo geht dabei einfach etwas weniger ins Detail als Photoshop. Das ist vollkommen in Ordnung so, denn meist wird die RAW-Foto-Entwicklung sowieso lieber im dedizierten RAW-Konverter erledigt.

Beim Import über das Modul „Develop Persona“ stehen dem Benutzer alle gängigen Farbtiefen und Farbräume inklusive ICC-Farbmanagement zur Verfügung. Allerdings sind Werte einzelner Regler nicht auf den Photoshop-RAW-Konverter übertragbar und umgekehrt und Affinity Photo speichert seine Importparameter nicht wie Adobe in einer XML-Datei, das heißt, diese sind dann für eine Wiederholung des Konvertierungsprozesses verloren.

Develop Persona
RAW-Konvertierung und Bildimport

Korrektur, Manipulation und Transformation von Farben

Die Farbkorrekturen in der Hauptoberfläche sind vom Grundgedanken her nicht-destruktiv konzipiert, das heißt sie werden im Default als Einstellungsebene überlagert. Möchte man die Korrektur direkt anwenden genügt ein Klick auf den entsprechenden Button in der Einstellungsebene. Die Hauptoberfläche bietet uns eine große Auswahl an Möglichkeiten zur Farbmanipulation. Einige „neue“ Funktionen haben uns besonders gefallen, wie zum Beispiel die Werkzeuge für Split-Toning, Verlaufsumsetzung, Leuchtkraft sowie Lichter- und Schattenzeichnung. Auch Tontrennung und Schwellwert werden als Layer appliziert! Die Vorschau der Korrekturen ist sehr schnell und man bekommt sogar eine Vorschau der Mischmoduswahl bei Mouseover.

Toll ist auch die Pipettenfunktion in Gradationskurven. Allerdings hat es uns sehr gestört, dass das eingestellte Gradationskurvenverhalten (RGB-Licht/CMYK-Farbe), beim Schließen des Dialogfeldes, fürs nächste Mal  immer wieder auf Default RGB-Licht zurückgesetzt wurde. In Affinity Photo gibt es zudem Einstellungsebenen zur Simulation von Farbenblindheit und Softproofs sowie Objektivfiltern (Dichte/Farbe) und man hat eine eigene Palette für EXIF-Kamera-Daten. Einige Dialogfenster sind an die Fotografie angelehnt, zum Beispiel zu sehen an der Maßeinheit „Blendenschritte“. Damit sieht es so aus, als wäre das Produkt ein wenig auf die Zielgruppe der Fotografen abgestimmt. 

Affinity Photo bietet über das Modul „Tone Mapping Persona“ noch weitere Farbmanipulations-
möglichkeiten. Hier führt man über anpassbare Presets komplette Farbtransformationen durch. Bilder lassen sich so in bestimmte Farbstimmungen bringen. Das erinnert an die Farbpresets von RAW-Konvertern. Photoshop bietet natürlich auch umfangreiche Farbkorrekturrmöglichkeiten, aber gerade die RAW-Konverter haben hier frischen Wind in die Branche gebracht und das scheint Affinity Photo erfolgreich aufzugreifen. Alles in allem ist die Farbkorrektur sicher eines der Stärken die das neue Programm mit sich bringt.

Retuschefunktionen

Bei den Werkzeugen zur manuellen Fotoretusche gibt es keine großen Überraschungen, es ist alles da was man an Werkzeugen für die Fotoretusche erwartet und die Funktionalität ist zufriedenstellend. Positiv fällt dabei auf, dass die Performance bei der Arbeit mit Pinseln sehr gut ist. Pinselbewegungen bleiben nicht auf dem Bildschirm hängen, sie folgen der Hand und ermöglichen eine flüssige Arbeitsweise. Erfreulicherweise fühlt sich das Brushen in Affinity Photo zielgerichteter an als in Photoshop. Leider gestaltet sich die Pinselauswahl sehr mühsam, denn dazu gibt es nur eine Palette aber kein schwebendes Kontextmenü wie bei Photoshop. Vielleicht haben wir da einfach nicht den richtigen Kniff gefunden. Der Protokoll-Pinsel erzeugte im Test ein unvorhergesehenes Ergebnis; einen nicht zu erklärenden Versatz. Das war wohl auf einen Bug oder falsche Bedienung zurückzuführen. Womöglich hat da Affinity Photo einen anderen Ansatz als Photoshop und man müsste die Protokoll-Funktion etwas genauer unter die Lupe nehmen um das dahinter zu kommen, was da schief lief.

Maskierung von Bildteilen und Fotomontage

Auch die einzelnen Möglichkeiten in Affinity Photo Bildteile zu maskieren überraschen uns nicht, die wesentlichen Werkzeuge, die uns von Photoshop bekannt sind, finden sich hier auch. Allerdings wirken die Masken- und Kanaloperationen etwas holprig. So fühlen sich die Kurzbefehl-Klick-Kombinationen aus Photoshop mit denen wir Kanäle miteinander verrechnen viel direkter an als die Bedienung über Aufklappmenüs der Kanalpalette in Affinity Photo. Wirklich störend war die Zoom-Handhabung bei der Benutzung des Maskierungswerkzeugs – Zoom über Tastatur in Verbindung mit Ziehen oder klicken war nicht möglich und ging nur schrittweise über Tastaturbefehle oder über einen Wechsel zum Zoom-Werkzeug. Was uns allerdings gefallen hat war die unkomplizierte Möglichkeit zur Transparenzauswahl (z. B. „Halbtransparenzen), trotzdem fühlen wir uns bei der Maskierung in Photoshop dann doch etwas wohler und kommen deshalb dort schneller vorwärts.

Liquify Persona
Modul zur Anwendung von komplexen Verzerrungen
Verzerrungstool
Gitterverzerrungen und perspektivische Verzerrungen

Das montieren von Bildteilen erfolgt ähnlich wie in Photoshop, allerdings kennen wir für Photoshop mittlerweile sehr viele Kniffe, die uns noch zum Zeitpunkt der Einarbeitung in Affinity Photo fehlen. Mit der nötigen Übung gleicht sich das sicher aus. Was allerdings in Affinity Photo herausstach, war das präzise und schnell zu bedienende Verformungswerkzeug. Das hat richtig Freude bereitet! Auch das Verformungsmodul, die „Liquify Persona“ ist kurz gesagt spitze.

Anwendung von Effektfiltern

Adobe Photoshop legt eine sehr hohe Messlatte an Effekten bzw. Filtern vor, was der jahrelangen Präsenz der Software auf dem Markt geschuldet ist. Es ist wenig verwunderlich, dass die Filterauswahl damit bei Affinity Photo etwas geringer ausfällt. Trotzdem kann man an der Filterauswahl nicht viel bemängeln, dem Benutzer steht ein guter Grundstock zur Verfügung. Es fällt positiv auf, dass viele Filter-Parameter in sehr kleinen Schritten angepasst werden können. Außerdem finden sich interessante Filter, die die etablierten Photoshop-Filter gut ergänzen. Es gibt zum Beispiel einen Filter zur Dunstentfernung, unkomplizierte Verpixelungs- und Rastereffekte und umfangreiche Rauschfilter. Dazu gibt es die Möglichkeit zu Photoshop kompatible Plug-Ins zu verwenden.

Textsatz und Vektorbearbeitung im Pixelbild

Das Text-Tool wirkt wirklich ausgereift, und die Platzierung von Textebenen geht angenehm flüssig von der Hand. Hilfreich für einen schnellen Workflow ist die Blindtextautomatik, die automatisch die gewählten Textrahmen passend füllt. Bei der Auswahl der Schriftschnitte hat man unter Mac Os eine direkte Schnittstelle zur Betriebssysteminternen Schriftenverwaltungssoftware, Schriftschnittbezeichnungen werden so, im Gegensatz zu Photoshop, auch lokalisiert angezeigt. Was uns gefehlt hat, war ein Knopf um automatische Trennungen einzuschalten. Für Web zwar toll, wenn ohne Trennungen gestaltet wird, aber für andere Zwecke könnte man es doch brauchen.

Die Werkzeuge zur Erstellung und Bearbeitung von Vektorformen überzeugen uns auch und wirken gleichermaßen ausgereift. Toll war, dass wir sehr große Anfasser beim Pfadwerkzeug zu sehen bekommen, die Zielgenauigkeit beim Treffen der Anfasser zur Kurvenbearbeitung ist somit weit höher als bei Photoshop. Affinity bietet eine große Auswahl an Formen-Presets, es gibt sogar ein eigenes Werkzeug für Sprechblasen. Nachdem die Arbeit mit den Vektortools so einen guten Eindruck hinterlässt stellen wir uns die Frage, ob womöglich das Illustrationsprogramm von Affinity Serif einen Blick wert ist!

Exportmöglichkeiten

Die Exportfunktionen von Affinity Photo sind praxisorientiert und umfangreich. Aus der Hauptoberfläche kann in branchenübliche, gängige Formate exportiert werden und mit dem dedizierten Exportmodul, der „Export Persona“ können Slices mit separaten Exportparametern erstellt werden und Ebenen für den Export ausgeblendet werden.

Damit kann man sich zwar voll zufrieden geben, allerdings bietet Photoshop in aktuellen Versionen zusätzlich die Möglichkeit zu automatisierter Erzeugung von Assets für Web und co. im Hintergrund. Diese Arbeitsweise kann den Workflow natürlich noch ein Stück beschleunigen.

Fazit

Abschließend können wir erstmal sagen, dass uns Affinity Photo und die ersten Gehversuche damit sehr gefallen haben. Als Werkzeug zur Bildbearbeitung ist es auf jeden Fall zufriedenstellend und überzeugt mit durchdachten Funktionen und flotter Arbeitsgeschwindigkeit. Wenn es sich an der einen oder anderen Stelle mal etwas hakeliger anfühlt als Photoshop oder einfach ungewohnt wirkt, kann es ausgleichend an anderen Stellen mit Innovation und Klarheit brillieren. Wir würden nun, nachdem wir die Vorzüge des Programms kennen, für die eine oder andere Spezialaufgabe aus der gewohnten Photoshop-Umgebung zu Affinity Photo wechseln, da es doch einige wertvolle Funktionen bereit hält.

Für einen Neueinsteiger oder jemanden, der nicht zum Zweck der Zusammenarbeit auf die Adobe-Suite zurückgreifen muss, ist Affinity Photo mit Sicherheit eine Kaufempfehlung. Bei diesem Kopf-an-Kopf-Rennen der zwei Programme, ist es nicht verwunderlich wenn man Affinity Photo favorisiert, das nur einen Bruchteil von Photoshop kostet. Man muss aber auch sehen, dass Photoshop sehr stark mit seinen Schwesterprogrammen aus der Adobe Creative Cloud verwoben ist, und mit ihnen Hand in Hand arbeitet. Affinity Photo eignet sich deshalb sehr gut für die primäre Bildbearbeitungszielgruppe, wie zum Beispiel Fotografen – auf die es sehr gut zugeschnitten scheint. Auch Privatanwender kommen mit Affinity Photo und seinem exzellentem Preis-Leistungs-Verhältnis voll auf ihre Kosten, ob sie nun Bilder kreativ oder sachlich bearbeiten möchten.

Im Nachtrag kann man noch bemerken, dass vor kurzem beide Programme ein Update erfahren haben. Das eine oder andere, was sich z. B. bei Affinity Photo hakelig angefühlt hat, wurde bereits ausgebügelt, und Photoshop wurde auch ein wenig aufgefrischt. Unser Fazit bleibt dadurch das gleiche.

Wie machen wir‘s?

Je nach Anforderung bauen wir Ads manuell, im Google Webdesigner, Adobe Edge oder mit Adobe Animate CC spezialisiert für Doubleclick, Flashtalking, Adwords, Bidmanager und Sizmek.

Was können wir?

Wir erstellen HTML5 Rich Media Banner für Desktop und Mobile. Rich Media Banner sind Werbemittel die nicht nur Bild und Text, sondern auch interaktive Elemente sowie Video und dynamische Elemente beinhalten.

Durch Animationen und geführte User Interaktion steigern wir das Interesse des Betrachters mit dem Banner zu interagieren. Dynamische Ads ermöglichen über optimierte Targeting Regeln bestimmte Elemente Ihrer Banner dynamisch anzupassen (Call-to-Action, Exit-URLs, Bilder oder Texte) und können somit spezifische Zielgruppen ansprechen.

Medium Rectangle mit Google Webdesigner Software

Folgende HTML5 Banner jeglicher Art sind hierfür möglich: Expandable-, Foating, Peeldown, In-page Standards (MRT, Skyscraper, Billboard, Leaderboard, …) Sitebranding / Fireplace, YouTube Mastheads, Dynamic Data: Zielgruppen, Screen Orientation, Location, Tageszeit.

Zertifizierungen von Doubleclick

Doubleclick Zertifikate bestätigen, dass unser Creativ-Team mit professionellem Wissen Rich-Media-Werbeanzeigen im Doubleclick Studio erstellen, vermarkten und administrieren kann.

HTML5 -Core Zertifikat

HTML5 hat sich in den letzten Jahren als neuer Standard für digitale Bannerwerbung etabliert. Unsere Ads werden gemäß den aktuellen technischen Standards produziert.

HTML5 Rich Media Banner laufen störungsfrei, responsive vom Smartphone bis zum Desktop und erreichen somit die gewünschte Zielgruppe.

Google Web Designer

Das Google-Web-Designer-Zertifikat bestätigt, dass unser Creativ-Team das nötige Knowhow hat, um dynamische oder interkative Web-Banner mit der Google-Web-Designer-Software zu erstellen.

Quality Assurance Zertifizierung

Unsere QA-Zertifizierung bescheinigt, dass wir alle Rich Media Werbemittel nach den Doubleclick-Richtlinien erstellen.

Dies verringert deutlich die Zeit für die externe Qualitätskontrolle Ihrer Werbemittel. Wir stellen sicher, dass die für Sie produzierten, hochwertigen Werbemittel technisch einwandfrei entwickelt und termingerecht ausgespielt werden.

Weitere Zertifizierungen

Wir beraten Sie gerne bei der Erstellung Ihrer Online-Werbemittel. Treten Sie mit uns in Verbindung und kommen Sie auf eine Tasse Kaffee bei uns vorbei.
Kennenlernen.Zuhören.Verstehen

Die bekanntesten und meist genutzten Open Source Content Management Systeme deutschlandweit sind WordPress, Drupal und TYPO3. Mit deren Hilfe und dem Know-how im Bereich Frontend-Entwicklung ist es möglich Webseiten beliebiger Größe mit der gewünschten Funktionalität zu erstellen. Da jedes CMS seine Vor- und Nachteile aufweist, die sowohl der Kunde, als auch der Entwickler wissen und beachten sollte, möchten wir diese in unserem Artikel übersichtlich vergleichen.

Anzahl der aktiven CMS Webseiten
 

WordPress

Das am weitesten verbreitete Content Management System weltweit wurde erstmals zur Erstellung und Verwaltung von Blogs konzipiert. Durch die große Anzahl von zusätzlichen Erweiterungen, die von der Community meist kostenlos zur Verfügung gestellt werden, wurde WordPress zu einem vollständigen, benutzerfreundlichen und leicht anpassungsfähigen CMS.

Das CMS WordPress basiert auf der Skriptsprache PHP und muss mit einer Datenbank (MySQL) verbunden werden.

Mehr Informationen finden Sie hier.

Backend WordPress 4.7.0

Drupal

Bestehend aus einem Kern, der die Grundfunktionalität liefert und einer großen Anzahl von Modulen, die bei Bedarf hinzugefügt werden können, ist Drupal ein sehr flexibles CMS, das alle Anforderungen an modernes Webdesign und Entwicklung erfüllt. Im Vergleich zur Konkurrenz sind die Funktionen für den Aufbau und die Verwaltung von großen Communitys wie Foren, News und Blogs von Vorteil.

Auch hier sind die Voraussetzungen für den Betrieb ein Webserver, PHP und eine SQL-fähige Datenbank.

Mehr Informationen finden Sie hier.

Backend Drupal 8.0

Typo3

Das Enterprise-Management-System eignet sich vor allem für große Unternehmen, da an erster Stelle die Sicherheit der Webseiten steht. Auch hier sind zahlreiche kostenlose Erweiterungen verfügbar, die von der Community bereitgestellt werden. Unter anderem für Blogs, News und Shops.

TYPO3 basiert auf der Skriptsprache PHP. Als Datenbank kann MySQL, MariaDB, aber auch PostgreSQL oder Oracle eingesetzt werden.

Mehr Informationen finden Sie hier.

Backend TYPO3 7.5

Der Direktvergleich

Abschließend zeigen wir Ihnen eine Zusammenfassung der Stärken und Schwächen der drei vorgestellten Content Management Systeme. Ein deutlicher Gewinner ist letztendlich nicht klar, da jedes System seine Vor- und Nachteile mit sich bringt und die Auswahl somit projektabhängend ist.

Wenn wir uns in der Print-Branche bewegen steht seit geraumer Zeit das PDF als Dateiformat bei der Zusammenarbeit von Dienstleister und Kunde im Mittelpunkt.


PDF-Dateien stehen uns als Mittel zur visuellen Kommunikation zur Verfügung. Per PDF transportieren wir unsere Ideen und präsentieren unsere Arbeit. Das PDF kann dabei Scribble, Layout oder das finale Druckprodukt sein. Auch Druckdaten gehen heute ausschließlich als PDF an die Druckerei.
 

Früher waren unsere Möglichkeiten auf Ausdrucke oder Proofs beschränkt; Korrekturinformationen konnten zwar qualitativ minderwertig gefaxt werden, aber so schnelle Transportzeiten und gleichzeitig anschauliche Ergebnisse wie wir jetzt über eine PDF-Datei per E-Mail-Versand erreichen können, waren damals nicht möglich. Tägliche Kurrierfahrten und Präsentationen vor Ort beim Kunden waren nötig um alles anschaulich besprechen zu können.
 

Das Portable Document Format (PDF) wurde genau für unsere Belange konzipiert und hat sich auch in vielen anderen Bereichen etabliert. Es wurde 1993 von Adobe entwickelt um eine platformunabhängige, homogene Ansicht von Dokumenten zu ermöglichen. Anders als im PDF werden Textdokumente aus einem Texteditor, je nach Bildschirmgröße zum Beispiel, anders umbrochen. Das PDF bietet dagegen eine sogenannte WYSIWYG-Ansicht – „what you see is what you get“ – es wird bei jedem Benutzer gleich dargestellt, und wir sehen schon auf dem Bildschirm, wie es ausgedruckt aussehen würde.

Das PDF-Format zu Ansichts- und Freigabezwecken und gleichzeitig für die Print-Ausgabe

Das PDF zeigt uns alles so, wie es gestaltet wurde; es wird überall gleich dargestellt und zur Darstellung ist keine aufwendige Software nötig, ein PDF-Reader reicht dazu. Je nach Betriebssystem hat man dazu sogar Bordmittel, wie unter Mac OS X, dort kann das PDF zum Beispiel direkt ohne Software betrachtet werden. Das PDF-Format erlaubt uns eine möglichst exakte Simulation des Druckergebnisses – der Druckprozess in der Druckerei basiert schliesslich auch auf der PDF-Ausgabe – und es erlaubt uns verschiedenste Vektor- und Pixelkombinationen, ihre Ineinanderblendungen und Transparenzen korrekt zu visualisieren. Im Gegensatz zu Pixelbildern werden die Vektorinformationen, wie Zeichnungselemente und Schriften, je nach Zoomstufe des Betrachters aufs neue fein berechnet dargestellt, das entspricht am ehesten dem Erscheinungsbild des fertigen Druckproduktes. Bei einem Ansichts-JPEG oder Screenshot zum Beispiel ist das nicht möglich, hier sind Schriften und Zeichnungselemente gerastert und werden deshalb weich und pixelig dargestellt. Besonders bei vergrößerter Ansicht hat das nichts mehr mit dem Druck zu tun. Das PDF-Format ist für uns „best of both worlds“ – durch die Kombination von Vektor- und Pixelinformationen wird die Limitation einzelner Formate aufgehoben. So gelingen Ausdrucke je nach PDF-Auflösung maximal gut bei relativ kleiner Datenmenge. Dazu liefert uns das Format noch vielfältige Werkzeuge, Navigationsmittel und Kommentarfunktionen.
 

Die Filmbelichtung von Offsetdruckfilmen aus der Layoutsoftware heraus lief früher über die Seitenbeschreibungssprache Postscript. Das Postscript-Format war dahin gehend eine Sackgasse, dass es zur Bildschirmvisualisierung oder zum Ausdruck von komplizierter, teurer Software interpretiert werden musste. Es kam je nach Interpretersoftware zu verschiedenen Ergebnissen und oftmals sogar zu Fehlern. Es war ein zeitaufwendiger und umständlicher Prozess, der keine schnelle WYSIWYG-Ansicht mit Farbmanagement- und Softproofmöglichkeit bot. Teure Lizenzen waren nötig um ein Postscript umzurechnen. Die Umstellung auf digitalen, filmlosen Workflow per CTP (Computer to Plate) brachte es mit sich, dass eine Belichtung von Offsetfilmen nicht mehr nötig war, und erforderte nun ein universelles Datenformat. Adobe entschloss sich Postscript durch ein moderneres Format zu ersetzen und entwickelte PDF, das auf Postscript basiert. Das PDF bietet uns nicht nur eine korrekte Voransicht der Druckdaten, sondern auch ein integriertes Fontmanagement, was für uns von großer Bedeutung ist. Zuvor waren Schriften separat im RIP, der Postscript-Interpreter-Software, abgelegt und das konnte zur falschen Verwendung von Schriften beim Druck führen. Das PDF trägt seine verwendeten Fonts in sich mit und schliesst damit eine falsche Verwendung aus. Speziell für den Prepress-Bereich gibt es noch eine explizite PDF-Form, das PDF/X-Format. Dabei läuft das Dokument bei der PDF-Erzeugung durch einen Evaluationsprozess, während dem druckspezifische Parameter geprüft werden. Ist das PDF konform nach dem entsprechenden PDF/X-Standard, kann man grundlegende Fehler bei der Weiterverarbeitung in der Druckerei ausschließen. Je nach Software der Druckerei sind aktuelle Standards wie PDF/X4 oder nur alte Standards wie PDF/X1 möglich. Die alten Standards haben dabei viel mehr Limitationen und können die neuen Gestaltungsmöglichkeiten der Layoutsoftware nicht in vollem Umfang abbilden und es werden zum Beispiel Transparenzen und Verläufe qualitativ schlecht umgesetzt. So kann es bei einem alten PDF-Standard wie PDF/X1 sein, dass man komplett auf Transparenzen verzichten muss.

JPEG in der vergrößerten Bildschirmansicht
Pixelige Schriften sind schlecht zu erkennen und Strichstärken nicht zu beurteilen, die Dateigröße ist sogar relativ groß.
PDF in der vergrößerten Bildschirmansicht
Schriften werden in jeder Zoomstufe neu berechnet und werden so immer scharf abgebildet, das sogar bei der schlechtesten und kleinsten PDF-Qualität.

PDF in der vergrößerten Bildschirmansicht

Schriften werden in jeder Zoomstufe neu berechnet und werden so immer scharf abgebildet, das sogar bei der schlechtesten und kleinsten PDF-Qualität.

Dokumente können auf unterschiedliche Weise in das PDF-Format gesichert werden. Wir unterscheiden in unserer Branche zwischen Ansichts-PDF und Print-PDF.

Ein Ansichts-PDF ist ausschliesslich zur Kommunikation zwischen Dienstleister und Kunde da. Das Ansichts-PDF wird im beschnittenen Netto-Format erstellt, der Kunde kann so die Gestaltung des Endproduktes beurteilen. Ein Print-PDF dagegen muss den Beschnitt beinhalten, die Flächen, die nach dem Druck weggeschnitten werden, und eventuell noch andere druckspezifische Zeichen, wie Passzeichen, Schneidmarken oder Farbkontrollstreifen. Die Beschnittzugabe ist nötig um Blitzern, die aufgrund der Zuschneideungenauigkeit auftreten, zu vermeiden. Durch das vergrößerte Format und eventuelle Druckzeichen aber können beim Betrachten die Abstände zum Rand hin nicht mehr richtig beurteilt werden, die Beurteilung der Gestaltung sollte deshalb auf dem Ansichts-PDF passieren. Von Druckereien wird heutzutage oft das Bruttoformat inklusive Beschnitt angefordert, denn die weiteren Druckzeichen sind heutzutage oft unnötig.

Ansichts-PDF
Moderate Auflösung für Bildschirmansicht und Ausdrucke, zu sehen ist das beschnittene Nettoformat, hier kann die Gestaltung genau beurteilt werden.
Print-PDF
Hohe Auflösung für Druckmaschinen mit PDF/X-Evaluierung und Farbprofilen, zu sehen ist das
unbeschnittene Bruttoformat, falls erforderlich mit Druckzeichen.

Um ein schnelles Datenhandling zu ermöglichen, versucht man in der Regel das Ansichts-PDF so klein wie möglich zu schreiben, dabei aber so groß wie nötig um das Ergebnis vernünftig beurteilen zu können. Deshalb hat das Ansichts-PDF oft nicht die maximal möglichen Bildinformationen, es würde damit im Druck nicht die maximale Qualität erreichen. Das auf Qualität ausgelegte Print-PDF dagegen wird genau auf die Druckgröße abgestimmt und ist damit meist größer. Bei manchen Formatgrößen und Druckereivorgaben kommt es natürlich vor, dass Print-PDF und Ansichts-PDF sich kaum oder garnicht unterscheiden, dabei sieht man womöglich auch nicht auf den ersten Blick, ob das PDF als Print-PDF mit X4-Evaluierung geschrieben wurde oder ob es sich nur um ein Ansichts-PDF handelt. Eine genaue Nomenklatur ist dabei von Nutzen.
 

Bei der Weitergabe von gelieferten PDF-Dokumenten ist auf jeden Fall ein Augenmerk darauf zu legen, worum es sich dabei eigentlich handelt, denn ein PDF mit Pixelinhalt ist eben nicht das gleiche wie ein PDF mit Vektorinhalt und nur weil es als PDF gespeichert wird, ist nicht jedes Dokument automatisch qualitativ gut. Das hängt einfach von der Qualität des Ausgangmaterials ab, zum Beispiel von der Auflösung und Komprimierung der verwendeten Pixelbilder und davon, wie stark ich das PDF selbst beim schreiben komprimiere. Ein eingescannter Brief der als PDF gespeichert wird, ist genauso gut bzw. schlecht wie als JPEG gespeichert, denn beim PDF schreiben passiert in der Regel genau das gleiche mit Pixelbildern, eine JPEG-Kompression. Das speichern in einem Format wie PDF, welches Vektoren enthalten kann, macht auch nicht automatisch Pixelinformationen zu Vektorinformationen! Das Umsichern eines Bildes im JPEG-Format als PDF, wird die Qualität nicht verbessern, aber je nach Softwareeinstellung womöglich verschlechtern und es macht für die Weiterverarbeitung mehr Sinn, Pixelbilder in ihrem eigentlichen Format zu belassen.

Wir wollten trotz der hektischen Vorweihnachtszeit nicht versäumen Ihnen die neuen tollen Webauftritte der Messen SPIELWIESNFORSCHA und CREATIVMESSE zu zeigen. Ein schönes Ergebnis das in Zusammenarbeit mit der MPA Public Relations & Event Agentur GmbH und der i!bk Institut für innovative Bildungskonzepte GmbH entstanden ist. Hier ein paar Eindrücke und die passende Pressemeldung zu der von uns entwickelten Drupal-Seite:

Mehr Leichtigkeit und Transparenz: Facelift für SPIELWIESN, FORSCHA und CREATIVMESSE München

(PresseBox) (München, 21.10.2016) 25 Jahre wird sie im kommenden November, die SPIELWIESN, die größte süddeutsche Messe für Brett- und Gesellschaftsspiele. Mit ihrer ersten eigenen Mitmachmesse, die mit knapp 400 Besuchern im Nebenzimmer eines Münchner Gasthauses startete, schrieb die MPA PR & Event Agentur Erfolgsgeschichte. 60.000 Besucher stürmten im letzten Jahr die Hallen des MOC Veranstaltungscenter München, um zu spielen, zu daddeln und auf der Partnermesse FORSCHA zu experimentieren. Das Jubiläum nahm die Münchner Agentur zum Anlass, ihren mittlerweile drei Publikumsveranstaltungen ein Redesign zu verordnen.

SPIELWIESN und FORSCHA – die beiden Herbstmessen und die CREATIVMESSE München, die alljährlich das Frühjahr einläutet – präsentieren sich mit einem erfrischend verjüngten Erscheinungsbild. Es spiegelt wider, wofür die als Mitmach- und Erlebnismessen konzipierten Veranstaltungen stehen: Drei lebendig inszenierte Themenwelten mit Inspiration für anspruchsvolle Freizeitgestaltung, für Schule, Ausbildung und Beruf für ein unternehmungslustiges, neugieriges Publikum jeden Alters.

Reduziert, farblich zurückgenommen und klar strukturiert signalisiert das Redesign der Messen Leichtigkeit und Transparenz bei hoher Wiedererkennbarkeit. Jedes der Logos mit neu entwickelter Wort-Bildmarke und frei platziert auf weißem Untergrund, hat mit dem umfassenden Redesign deutlich an Ausdruckskraft gewonnen. Das modulare, lebendige Design erlaubt eine große Gestaltungsvielfalt für individuelle Anwendungen im Print- und Onlinebereich. Dabei setzt Art Director Michael Vitzthum, mv:ad, auf die universelle Sprache geometrischer Formen und damit auf Orientierung und hohe Wiedererkennbarkeit. Aus Dreiecken entwickelt er markante Zeichen, die er als Elemente der neuen Wort-Bildmarken einsetzt oder zu variablen Hintergründen kombiniert. Im Zusammenspiel mit neu geschaffen Icons symbolisieren diese Zeichen die Vielfalt des jeweiligen Messethemas und unterstützen die Claims.

„Mit unserem neuen Corporate Design wollen wir über alle Kommunikationskanäle verstärkt bei der Zielgruppe Jugendliche und jungen Erwachsene punkten“, erklärt Thomas Gärtner, Geschäftsführer der Agentur. Die SPIELWIESN will visualisieren, dass trotz großer Konkurrenz an interaktiver Unterhaltungselektronik, das Brett- und Gesellschaftsspiel keineswegs eine ‚alte Schachtel‘ ist. Die FORSCHA soll mehr Schulabsolventen, Auszubildende und Studenten in der beruflichen Orientierungsphase zum Besuch mobilisieren. Das Publikum der CREATIVMESSE hat sich in den letzten Jahren deutlich verjüngt. Eigenkreationen statt Massenartikel von der Stange sind ‚in‘, genau wie Upcycling, ‚Re-pair‘ und ‚Re-use‘. Das filigrane neue Logo, das an eine Origami-Kreation erinnert und sich animiert in fantasievolle Formen entfaltet, soll diese bunte Vielfalt des Themas widerspiegeln.

Moderner und deutlich User-freundlicher sind auch die neu gestalteten Webseiten, angepasst an Mediengewohnheiten und Bedürfnisse der Smartphone- und Tablet-Nutzer. Benno Schmidtler, Geschäftsführer der memedia – Agentur für neue Medien, zeichnet für die Online- Umsetzung verantwortlich.

Die Kampagne der SPIELWIESN und FORSCHA startet noch im Oktober. Die CREATIVMESSE geht in den nächsten Wochen im neuen Gewand online.

Zu den Seiten:

SPIELWIESN

FORSCHA

CREATIVMESSE

Schon seit einiger Zeit online vertreten, kann man den GadgetStore.Berlin seit August auch live im Bikini Berlin besuchen. Hier lädt der Store mit brandneuen technischen Spielereien zum Ansehen, Anfassen und Ausprobieren ein. Zu Beginn füllten Smartwatches des Kickstarter-Höhenfliegers Pebble die Regale. Anfang September nahm der GadgetStore.Berlin auch den App-gesteuerten Droide BB-8 ins Sortiment – und war damit der erste Händler in Deutschland, bei dem das StarWars Gimmick erhältlich war. 

Der kleine Store in Berlin zog schnell Blicke und Besucher auf sich, ein neuer Look für Website und CI  sollte bald folgen: Nach Design eines neuen Logos samt Corporate Identity für den Onlineshop wurde das Web-Projekt mit WordPress und WooCommerce umgesetzt – natürlich mobilefriendly und responsive. Zur größten europäischen Consumer Electronics-Messe IFA, die Anfang September in Berlin die Gadget-Gemeinde in die Hauptstadt lockte, fuhr der GadgetStore.Berlin dann wortwörtlich groß auf: mit Design und Beklebung des „GadgetMobil“.

Wer schon jetzt ein passendes Geschenk zu Weihnachten sucht, sollte schnell im GadgetStore.Berlin vorbeisurfen.

„Swiss Japanese Contemporary Cuisine”: Die perfekte Balance aus japanischer Harmonie, Minimalismus und Funktionalität, gepaart mit Schweizer Qualität. Das – und nicht weniger – war auch die Anforderung an die Umsetzung der WordPress-Webpräsenz des neuen Restaurants von Sternekoch Werner Rothen an der Rheinpromenade in Basel.

Das Konzept des Onlineauftrittes setzte hohe Maßstäbe in Sachen Design. Um diesem stilistischen Anspruch gerecht zu werden schöpften wir bei der Umsetzung die modernen Möglichkeiten aktueller Technik voll aus. Das Ergebnis ist eine WordPress-Seite mit ungewöhnlicher „horizontal Scrolling”-Funktion und einem dezenten Parallax-Effekt. Großflächige Stimmungsbilder blenden sanft ineinander über und präsentieren sowohl raffinierte Speisen als auch das ansprechende Ambiente von „LOKAMI – Restaurant, Bar und Lounge”. Um bei Google als „mobile-friendly” eingestuft zu werden – ein wichtiges Kriterium für SEO –, wurde die Seite durchgehend im responsive Webdesign programmiert. Dies sorgt nicht zuletzt auch für optimale Lesbarkeit der Webseite auf mobilen Endgeräten.

Sollten Sie in Basel sein, schauen Sie doch mal vorbei. „LOKAMI – Restaurant, Bar und Lounge” ist immer einen Besuch wert!

Die Entwicklung hin zu Mobile war schon seit einiger Zeit zu erkennen.  Inzwischen surfen 70 Prozent aller deutschen Internetuser über ihr Smartphone oder Tablet. Dieser Trend hat auch Folgen für das SEO von Websites: Denn jetzt setzt Google den Rankingfaktor „mobile-friendly“ für Mobilgeräte um. Und das schon ab dem 21. April 2015.

„mobile-friendly“ als Rankingfaktor ab 21.4.2015
Unsere Responsive-Website wird derzeit schon von über 20% mit dem Smartphone oder Tablet angesurft.

Dass der Anteil der mobilen Surfer wächst ist weder neu noch überraschend. Wer googelt nicht schnell einen Begriff oder die Adresse eines Restaurants, wenn er gerade mit dem Handy unterwegs ist, oder liest mal den Artikel eines Newsportals in der U-Bahn. Auch Tablets sind groß im Kommen und gewinnen deutlich Marktanteile. Meist werden diese am Abend parallel zum TV auf der Couch genutzt.

„mobile-friendly/für Mobilgeräte“ rankt höher und wird hervorgehoben

Google will den mobilen User zukünftig besser unterstützen und in den Suchergebnissen Seiten die „für Mobilgeräte“ optimiert sind, prominenter anzeigen und auch als solche kennzeichnen. Dies wird durch den grauen Tag „für Mobilgeräte“ angezeigt.

Ob Ihre Seite dafür bereits optimiert wurde, können Sie auf der von Google schon vor einigen Monaten gelaunchten Website im Rahmen der Google Webmaster Tools ganz einfach testen. Insbesondere werden folgende Kriterien dabei überprüft:

Webmaster Tools testet die „Mobile Friendliness“ Ihrer Website

Dies alles lässt sich gut mit einem Responsive Webdesign lösen. Wenn Ihre Website bereits responsive ist, sind Sie für die Neuerungen im Google-Ranking gut vorbereitet. Falls nicht sollten Sie dringend noch über eine Anpassung nachdenken. Hier finden Sie dazu einige Tipps und Erklärungen.

Was ist Responsive Design und warum ist es für Sie wichtig?

Links zu „mobile-friendly“ und „Responsive Webdesign“

Webmaster Tools
https://www.google.com/webmasters/tools/mobile-friendly/

Bericht zu „für Mobilgeräte“
https://t3n.de/news/mobile-friendly-google-markiert-579756/

Post zum Start am 21.5.2015
https://plus.google.com/u/0/+GoogleWebmasters/posts/BASN3qVNMKV

Statistik zu 70% der Internetuser sind mobil
https://de.statista.com/statistik/daten/studie/197383/umfrage/mobile-internetnutzung-ueber-handy-in-deutschland/

Responsive Webdesign erklärt
https://www.memedia.de/blog/responsive-webdesign

IHK Logo BNI Logo