Wann Sie nicht mit Ihren Webbildern COPE [Video]

Um strategisch über Ihre webbasierten visuellen Inhalte nachzudenken, müssen Sie mehr tun, als nur die zu verwendenden Bilder auszuwählen. Sie müssen auch sicherstellen, dass diese Bilder für große und kleine Bildschirme funktionieren.

Wenn ein Bild für alle Bildschirmgrößen funktioniert, ist das großartig. Laden Sie eine Datei hoch (das Bild aus einer Hand) und los geht's.

Nicht alle Bilder machen Ihr Leben so einfach. Manchmal lohnt es sich, mehrere Versionen eines Bildes bereitzustellen, um den Benutzern auf jedem Gerät das zu bieten, was sie vom Bild benötigen.

So sagt Buddy Scalera, Senior Director für Content-Strategie bei The Medicines Company. In seinem Vortrag auf der Intelligent Content Conference, Erstellen und Ausführen einer skalierbaren Strategie für visuelle Inhalte, sagte Buddy uns, dass er alles für Single-Sourcing ist… außer wenn er es nicht ist. Er setzt sich für das ein, was er und andere „meistens COPE“ (COPE-M) nennen, insbesondere wenn es um Bilder geht.

COPE steht für "einmal erstellen, überall veröffentlichen". COPE-Inhalte sind Inhalte aus einer Hand. In vielerlei Hinsicht ist der COPE-Inhalt ideal. Sie erstellen einmal einen Teil des Inhalts - eine Produktbeschreibung, eine Spezifikation, eine Definition, ein Bild - und das System kann diesen Teil in mehrere Ergebnisse ziehen (nicht einfügen). Wenn Sie die Quelle aktualisieren, wird das Update durch Ihr Repository übertragen. Der COPE-Inhalt ist elegant. Es ist effizient. Es ist logisch. Dies spart Unternehmen Millionen von Dollar an Übersetzungskosten. Es hilft ihnen, peinliche, verrückte, gerichtliche Inkonsistenzen zu vermeiden. COPE funktioniert gut mit Text, Audio und Video (wenn Sie YouTube verwenden).

Trotzdem ist COPE manchmal der falsche Weg. Moderne Browser leiten Ihren Text neu, aber die Bilder für Ihre Geräte werden verkleinert. Ein Bild, das auf dem Desktop gut aussieht, ist auf einem Smartphone möglicherweise nicht mehr zu erkennen. (Hallo, kneifen und zoomen.)

Hier kommt das M in COPE-M ins Spiel. „Obwohl es ein gutes Ziel ist, Ihre Inhalte für die Mehrkanal-Wiederverwendung vorzubereiten, lassen sich im COPE-Modell nicht alle Inhalte effektiv skalieren“, sagt Buddy.

In diesem Artikel fasse ich Buddys Rat aus seinem ICC-Vortrag zusammen. Alle Bilder in diesem Beitrag stammen von seinen Folien, und alle Zitate stammen, sofern nicht anders angegeben, aus seinem Vortrag und aus meinen nachfolgenden Gesprächen mit ihm.

Warum es schwierig ist, mit einigen Bildern zu kopieren

Buddy lässt eine „Wahrheitsbombe“ über Bilder fallen: Sie sind nicht dasselbe wie Text.

Text eignet sich für Single-Sourcing, da Text von seinem Erscheinungsbild getrennt werden kann. Durch kaskadierende Stylesheets kann das Erscheinungsbild von Text von Instanz zu Instanz variieren, ohne dass die zugrunde liegende Textquelle geändert wird. „Text ist ein wunderbarer, flexibler, fließfähiger, wiederverwendbarer, kanalunabhängiger Vermögenswert, der in der digitalen Welt hervorragend funktioniert“, sagt er.

Nicht so bei Bildern. Sie können nicht von ihrem Aussehen getrennt werden. Bei Bildern passt eine Größe nicht immer für alle.

Wie Justyn Hornor es vor einigen Jahren ausdrückte, ist der „Elefant im Raum“ für reaktionsschnelles Webdesign „der Umgang mit Bildern“. Ein kleines Bild kann auf einem Mobiltelefon scharf und auf einem hochauflösenden Monitor lächerlich klein aussehen. Das Rendern eines großen Bildes kann auf einem kleinen Gerät lange dauern, wenn ein kleineres Bild ausreichen würde.

Wie man über Multisourcing-Bilder nachdenkt

Anstatt zu erwarten, dass ein einzelnes Image für alle Geräte funktioniert, indem Kompromisse im oberen und unteren Bereich eingegangen werden, kann es sich zumindest gelegentlich lohnen, mehrere Images hochzuladen und dem System dann mitzuteilen, an welchem ​​Haltepunkt die einzelnen Images verwendet werden sollen.

Ein Haltepunkt ist der Punkt, an dem das System aufhört, ein Bild zu ziehen, und stattdessen ein anderes zieht - je nach Auflösung des Geräts ein größeres oder ein kleineres. Diese Abbildung zeigt drei mögliche Haltepunkte: 320 Pixel für ein Mobiltelefon, 720 Pixel für ein Tablet oder ein großes Telefon und 1.024 Pixel für einen Laptop.

Haltepunkte werden entsprechend der Gerätebreite definiert, da wir eine unendliche vertikale Bildlauffähigkeit, aber eine begrenzte Breite haben.

Buddy beschreibt eine Zeit, in der eines der Content-Teams seines Unternehmens eine Broschüre druckte, die eine Grafik enthielt, in der die Fragen der Ärzte zu einem bestimmten Produkt beantwortet wurden.

Die Grafik sah im Druck großartig aus. Und dann haben sie es auf eine Website gestellt und es wurde kleiner. Bei der Anzeige auf einem Smartphone war das Diagramm nicht lesbar. Menschen, die in einem Krankenhaus auf einem Smartphone nach etwas suchen, haben eine gewisse Dringlichkeit. Sie brauchen die Antwort. Sie müssen nicht kneifen und zoomen.

In vielen Fällen ist es akzeptabel, ein großes Bild auf Ihre Website hochzuladen (dh das Bild aus einer Hand zu beziehen) und es vom Browser für Sie skalieren zu lassen. In anderen Fällen werden Bilder nahezu unleserlich, wenn sie in ein kleines Fenster oder einen kleinen Bildschirm gedrückt werden. Um diesen Punkt zu veranschaulichen, zeigt Buddy, was passiert, wenn ein Browser ein 800 Pixel breites Foto seiner Töchter skaliert:

Dies ist ein COPE-Beispiel. Wenn der Browser dieses Bild für ein schmales Fenster oder einen kleinen Bildschirm skaliert, ist es leider schwierig, die Gesichter der Mädchen zu erkennen. Wenn dieses Bild ein Diagramm oder eine Infografik wäre, könnte der Text auf dem kleineren Bildschirm unleserlich werden.

Für visuelle Elemente, die für Ihre Markenerzählung von entscheidender Bedeutung sind, möchten Sie möglicherweise zusätzliche Anstrengungen unternehmen, um mehrere Bilder zu verwenden. Dieser Ansatz, den Buddy als "Responsive Art Direction" bezeichnet, bietet Menschen eine bessere Chance, wichtige Details auf jedem Bildschirm zu erkennen.

Da Buddy die Bildbreite von 800 auf 400 auf 200 Pixel ändert, ändert er auch die Bildzusammensetzung: Dies ist kein COPE. Das ist Bildplanung. Das 800 Pixel breite Foto zeigt die Mädchen und den Hund nebeneinander in einer so genannten dreifachen horizontalen Aufnahme. Das 400 Pixel breite Foto bringt die Mädchen enger zusammen und steckt den Hund für eine zwei breite vertikale Aufnahme nach vorne. Die 200 Pixel breite Aufnahme drückt alle drei Figuren zu einer Totempfahlanordnung zusammen.

Wenn Sie die Beispielseite von Buddy in einem Browser anzeigen und das Fenster strecken und verkleinern, ändert sich das Bild jedes Mal, wenn Sie einen der im HTML-Code angegebenen Haltepunkte erreichen. Spielen Sie dieses sechs Sekunden lange Video ab, um ein Gefühl für die Benutzererfahrung zu bekommen:

Um dieses Verhalten in Ihrem eigenen Browser zu erleben, besuchen Sie die Beispielseite von Buddy auf einem Gerät, mit dem Sie die Fensterbreite ändern können.

Obwohl dieser Beitrag kein Tutorial zum Schreiben dieser Art von Code ist, ist es möglicherweise hilfreich zu sehen, wie dieser Code aussieht:

Das Wichtigste (siehe zwischen den "Bild" -Tags) ist, dass Buddy drei Quellbilder angegeben hat:

• GirlsDog_200w.jpg
• GirlsDog_400w.jpg
• GirlsDog_800w.jpg

Jede JPG-Datei ist einem Haltepunkt zugeordnet:

• maximale Breite: 499px
• maximale Breite: 799px
• Mindestbreite: 800px

Wie viele Haltepunkte sollten Sie erstellen? Wie bestimmen Sie ihre maximale und minimale Breite? Es gibt keine Regeln. In einem ausgezeichneten Artikel, auf den Buddy hinweist, sagt Jason Grigsby: „Die Auswahl von Bild-Haltepunkten ist etwas, mit dem jeder konfrontiert sein wird, und ehrlich gesagt habe ich keine guten Antworten für Sie.“

Sie werden wahrscheinlich nicht für jedes Bild auf Ihrer Website mehrere Bilder erstellen. Bestimmen Sie, welche Bilder für Ihren Kunden wirklich wichtig sind. Wenn Sie wissen, dass ein Bild (z. B. Grafik, Diagramm, Produktfoto) für Ihren Benutzer wirklich wichtig ist, überlassen Sie es nicht dem Webbrowser, um zu bestimmen, wie das Bild gerendert werden soll. Die Kontrolle übernehmen.

Es ist erwähnenswert, dass einige der Digital Asset Management (DAM) -Systeme mehrere Ausgaben eines einzelnen Bildes in unterschiedlichen Größen und Verhältnissen erstellen können. Es wird nicht replizieren, was Buddy mit separaten Fotos gemacht hat, aber Sie sollten untersuchen, was Ihr Softwaresystem bietet.

Die einzige Regel, die ich vorschlagen kann, ist, Ihre strategischen Entscheidungen über Bilder genauso zu treffen, wie Sie strategische Entscheidungen über andere Inhalte treffen: Fragen Sie sich, was Ihr Publikum braucht und warum. Experimentieren Sie mit verschiedenen Bildern und Haltepunkten. Wiederholen.

Weitere Informationen zu Buddy zum Erstellen und Ausführen einer skalierbaren Strategie für Ihre visuellen Inhalte finden Sie in seiner kommentierten ICC-Präsentation.

Wann Sie Ihre Bilder aus mehreren Quellen beziehen müssen

Sie möchten sich zwar nicht die Mühe machen, für jedes Bild mehrere Quelldateien zu erstellen, sollten jedoch die Bilder mit den meisten Auswirkungen in Betracht ziehen, z. B. die Hauptbilder auf Ihren Conversion-Seiten. Wie Buddy sagt:

Denken Sie an all das Geld, das Sie für Ihre Website ausgegeben haben. Wenn Sie Maschinen entscheiden lassen, wie mit all Ihren Bildern umgegangen werden soll, und die Leute manchmal die Schlüsselbilder nicht sehen können, verpassen Sie eine Gelegenheit.

Sie kennen die wichtigen Seiten und Bilder auf Ihrer Website. Sie haben sie wahrscheinlich bereits in Ihrer Analysesoftware markiert. Es ist besonders wichtig, diese Seiten auf Mobilgeräten zu testen, „nicht nur auf den wunderschönen Breitbildmonitoren, mit denen Ihre Designer Inhalte erstellt haben“, sagt Buddy.

Berücksichtigen Sie auch Multisourcing-Bilder auf anderen Seiten, die die meisten Benutzer auf kleinen Geräten anzeigen. „Sehen Sie sich an, wie viel Verkehr Sie von Ihren Smartphone-Geräten erhalten. Wenn es wie wir ist, 65%, ist das Ihr Publikum. Sie müssen sich um sie kümmern “, sagt Buddy. Wenn Smartphone-Benutzer ein Bild nicht lesen können, ohne es einzuklemmen und zu zoomen, können Sie das Bild für kleine Bildschirme anpassen.

Der beste Weg, um herauszufinden, welche Bilder für mehrere Quellen verwendet werden sollen, besteht darin , Ihre Webseiten auf mehreren Geräten zu testen . Alle Content-Teams - einschließlich Ihrer Kollegen in den Bereichen Content-Strategie, Design, Content Engineering und Benutzererfahrung - müssen wissen, wie die Bilder Ihrer Website auf Smartphones geladen werden. Besorgen Sie sich einen Stapel Geräte und einen Designer, Content-Strategen oder eine UX-Person. Laden Sie Ihre Inhalte so, wie es Ihr Kunde tun würde. "Wenn die Bilder, die Sie liebevoll auf Ihre Website geladen haben, etwas zerquetscht aussehen, sollten Sie überlegen, wie der Browser Ihre Bildressourcen skaliert", sagt Buddy und plant entsprechend.

Fazit

Überlegen Sie, wann COPE und wann nicht COPE mit Ihren Bildern durchgeführt werden sollen, bis unsere Content-Systeme intelligent genug sind, um den Menschen automatisch ideale Erlebnisse für jedes Bild auf einem beliebigen Gerät zu bieten. Es kann sich lohnen, zusätzliche Anstrengungen zu unternehmen und bestimmte Bilder aus mehreren Quellen zu beziehen.

Wie wäre es mit deinem Team? Erstellen Sie manchmal mehrere Versionen Ihrer wichtigen Bilder, um eine Reihe von Bildschirmgrößen zu berücksichtigen? Was haben Sie beim Testen Ihrer Bilder auf mehreren Geräten gelernt? Lass es uns in einem Kommentar wissen.

Hier ist ein Auszug aus Buddys Vortrag:

Melden Sie sich für unseren wöchentlichen E-Newsletter "Content Strategy for Marketers" an , der exklusive Geschichten und Einblicke von CMI-Chef-Content-Berater Robert Rose enthält. Wenn Sie wie viele andere Vermarkter sind, die wir treffen, werden Sie sich darauf freuen, jeden Samstag seine Gedanken zu lesen.

Titelbild von Joseph Kalinowski / Content Marketing Institute