Wie Sie eine Instagram-Post-Vorlage für Ihr Unternehmen oder Ihre Marke erstellen
Instagram ist ein unbestreitbar mächtiges Marketing-Tool, aber mit über 25 Millionen Unternehmen auf der Plattform ist es entscheidend, dass Sie sich die Zeit nehmen, gut gestaltete und durchdachte Instagram-Posts zu erstellen, um sich abzuheben.
Sie müssen einen strategischen Designplan für Ihr Unternehmen auf Instagram anwenden, um eine treue Fangemeinde zu gewinnen und langfristig Erfolg auf der App zu haben.
Allerdings erfordert die Erstellung eines sauberen und zusammenhängenden Instagram-Feeds Design-Fähigkeiten, die Sie vielleicht vermissen. Außerdem bevorzugt der Algorithmus von Instagram Marken, die mindestens einmal am Tag posten – dieser Zeitaufwand könnte Sie zusätzlich belasten.
Wenn das der Fall ist, haben Sie Glück – es gibt Möglichkeiten, vorgefertigte Instagram-Post-Vorlagen zu erstellen, so dass Sie einen Vorrat haben, der sofort einsetzbar ist. Wenn Sie außerdem sicherstellen, dass Sie dieselben Vorlagen für verschiedene Posts verwenden, fällt es Ihnen leichter, einen kohärenten und ästhetisch ansprechenden Feed zu erstellen.
Instagram Post-Vorlagen verwenden
Seien wir ehrlich – Sie haben nicht immer die Zeit, die Ressourcen oder das Personal, um bemerkenswerte Instagram-Posts zu gestalten. Deshalb empfehlen wir die Verwendung von Instagram-Post-Vorlagen für Unternehmen, auf denen Sie aufbauen und die Sie anpassen können.
Wir empfehlen dabei einen Blick auf Canva.com zu werfen. Dieses webbasierte Tool beinhaltet bereits eine Vielzahl an verfügbaren Vorlagen.
Wählen Sie Ihr Beitragsformat
Während herkömmliche Instagram-Posts in Ihrer permanenten Timeline langlebiger sind und Kommentare und Likes zulassen, sollten Sie die Macht von Instagram Stories nicht unterschätzen, die für unmittelbarere Bedürfnisse und Anlässe genutzt werden können.
Tatsächlich nutzen 500 Millionen Accounts täglich die Instagram Stories-Funktion. Fragen Sie sich also bei der Erstellung Ihres Posts, ob er eine Veröffentlichung als Story oder als traditionellen Post rechtfertigt.
Wählen Sie ein Bild
Vielleicht haben Sie beschlossen, dass Ihr Beitrag kein Foto braucht und dass eine Textüberlagerung auf einem einfarbigen Hintergrund für Sie funktioniert. Wenn das der Fall ist, gehen Sie zum nächsten Schritt über.
Wenn Sie sich entschieden haben, ein Foto zu verwenden – insbesondere, wenn Sie ein Foto als Hintergrund für eine Textüberlagerung verwenden möchten -, haben Sie mehrere Möglichkeiten.
- Machen Sie ein Foto mit Ihrem Telefon oder mit einer Kamera. Sie müssen kein professioneller Fotograf für Ihre Instagram-Posts sein – hier können Sie lernen, wie Sie mit Ihrem Telefon tolle Fotos machen können.
- Verwenden Sie ein Foto aus den Dateien Ihres Unternehmens. Dies funktioniert gut, wenn Sie Teamfotos oder Produktfotos verwenden müssen, die möglicherweise eine bessere Qualität aufweisen.
- Verwenden Sie ein Stockfoto, das zu Ihrem Unternehmen passt (Stellen Sie nur sicher, dass Sie nicht dasselbe Foto mehrfach verwenden!).
Egal, für welches Foto Sie sich entscheiden, ersetzen Sie es einfach als Hintergrund für die Vorlage und ändern Sie die Grösse des Fotos so, dass es Ihren Vorstellungen entspricht (und eine gute Qualität hat).
Designelemente hinzufügen
Instagram-Post-Vorlagen werden mit Design-Platzhaltern für Text mit speziellen Schriftarten und anderen Elementen geliefert. Ihr nächster Schritt besteht darin, alle Elemente zu ändern, hinzuzufügen oder zu entfernen, die Sie für geeignet halten.
Dazu gehört auch das Aktualisieren des Textes, damit er die Informationen widerspiegelt, die die Follower wissen sollen, und/oder die Aktion, die sie ausführen sollen.
Speichern Sie das Foto
Wenn Sie im Vorlagenersteller Ihrer Wahl alles erledigt haben, speichern Sie Ihr Foto, das auf Instagram gepostet werden soll. Dazu müssen Sie nur auf “Datei” > “Herunterladen” > “PNG-Bild” oder “JPEG-Bild” klicken. Benennen Sie dann einfach die Fotodatei, senden Sie sie per E-Mail oder Nachricht an sich selbst, und speichern Sie sie auf Ihrem Telefon, damit Sie sie posten können.
Auf Instagram hochladen
Sobald Sie Ihr Foto gespeichert haben, ist es an der Zeit, es hochzuladen und mit Ihren Followern zu teilen. Für einen herkömmlichen Post öffnen Sie Instagram, klicken auf die Schaltfläche “+” unten in der Mitte, wählen Ihr Foto aus, fügen einen Filter, eine Beschreibung oder Hashtags hinzu und klicken auf “Teilen”. (Werfen Sie einen Blick auf “How to Post on Instagram: a Step-by-Step Guide”, wenn Sie noch unsicher sind.)
Für einen Instagram-Story-Post klicken Sie auf das Kamera-Symbol oben links auf dem Bildschirm, rufen unten links auf dem Bildschirm Ihre Kamerarolle auf, wählen Ihr Bild aus, minimieren das angezeigte Datum so weit, dass es nicht mehr zu sehen ist, und fügen weitere Gestaltungselemente – wie ein GIF oder einen zusätzlichen Text – zum Bild hinzu. Von dort aus klicken Sie unten links auf “Ihre Story”.
So gestalten Sie Ihre Website für Screen Reader
Wenn wir über das Design von Websites sprechen, geht es in der Regel darum, wie uns diese Websites visuell erscheinen – wie Farben und Typografie zusammenwirken, wie Seitenelemente platziert und beabstandet sind und ob Navigationslinks an den richtigen Stellen platziert sind. Allerdings interagiert nicht jeder auf diese Weise mit Websites, daher müssen wir auch nicht-visuelle Aspekte des Designs berücksichtigen.
In der Schweiz sind etwa 1.6 Millionen Menschen gesundheitlich beeinträchtigt, teilweise etwa blind oder taub. Viele sind auf alternative Methoden angewiesen, um eine Tätigkeit auszuüben, die Menschen mit normalem Sehvermögen mit ihren Augen ausführen würden. Viele dieser Menschen sind auf unterstützende Technologien wie Bildschirmleser angewiesen, um Websites und andere digitale Inhalte zu erleben. Als Designer, Entwickler und/oder Website-Besitzer liegt es an Ihnen, Ihre Website für diesen Teil Ihrer Zielgruppe zugänglich zu machen.
Was ist ein Bildschirmlesegerät?
Ein Bildschirmlesegerät ist eine Computersoftware, die digitalen Text in eine hörbare und/oder taktile Form umwandelt. Bildschirmlesegeräte ermöglichen es Benutzern, mit ihren Geräten auf nicht-visuelle Weise zu interagieren, und werden hauptsächlich von blinden oder sehbehinderten Menschen sowie von Menschen mit kognitiven Einschränkungen verwendet, die sie daran hindern, Text und Medien auf dem Bildschirm zu betrachten. Viele Bildschirmlesegeräte verfügen über zusätzliche Funktionen, die den Benutzern bei der Navigation durch Webseiten, Computeranwendungen und Betriebssystemoberflächen helfen.
Bildschirmlesegeräte sind eine wichtige und beliebte Hilfsmitteltechnologie. Sie ermöglichen die unabhängige Nutzung digitaler Geräte durch Personen, die sonst nicht in der Lage wären, oder die mit erheblichen Schwierigkeiten konfrontiert wären.
Obwohl sie am häufigsten von blinden oder sehbehinderten Menschen genutzt werden, helfen Bildschirmleser auch denjenigen, die:
- kognitive Schwierigkeiten oder Lernbehinderungen wie Legasthenie haben.
- Schwierigkeiten beim Lesen von Schrift haben.
- eine Sprache lernen.
- es vorziehen, Inhalte auditiv zu konsumieren, anstatt zu lesen.
Manche verwenden auch Bildschirmlesegeräte neben ihrer eingeschränkten Sehkraft. Zum Beispiel kann man die Bilder und Medien auf einer Webseite visuell konsumieren, während man sich für textbasierte Inhalte auf einen Screenreader verlässt.
Wie funktionieren Bildschirmleser?
Ein Bildschirmlesegerät ist eine Softwareanwendung, die auf einem Gerät installiert wird (oder in einigen Fällen als Browsererweiterung) und mit anderen Anwendungen auf diesem Gerät verwendet wird. Es gibt eine Vielzahl von kostenlosen und kostenpflichtigen Screenreadern für Windows, macOS, Linux, iOS und Android.
Ein Benutzer steuert sein Bildschirmlesegerät über die Tastatur. Ein Bildschirmlesegerät wird mit einer Bibliothek von Tastaturbefehlen geliefert, die das Bildschirmlesegerät anweisen, Dinge zu tun wie das Lesen zu starten/stoppen, zurückzuspringen, um einen Textabschnitt erneut zu lesen, Wörter zu buchstabieren, zu verschiedenen Teilen einer Seite zu springen, den Cursor/Fokus zu bewegen, eine Mediendatei abzuspielen oder einen Link, eine Schaltfläche oder ein anderes interaktives Element anzuklicken.
Bildschirmlesegeräte können Textinformationen in zwei Formen übersetzen: Sprache und Braille. Am häufigsten verwenden Bildschirmlesegeräte die Text-to-Speech-Technologie (TTS), um Textinhalte mit einer synthetischen menschlichen Stimme vorzulesen. Geübte Benutzer von TTS-Bildschirmlesegeräten erhöhen die Lesegeschwindigkeit oft weit über das hinaus, was die durchschnittliche Person visuell lesen kann.
Zusätzlich zu TTS können einige Bildschirmlesegeräte Bildschirmtext in Blindenschrift umwandeln. Für diese Funktion schließen die Benutzer ein externes Gerät an, eine so genannte aktualisierbare Braillezeile, die Braillezeichen auf einem Pad erzeugt, während das Bildschirmlesegerät den Text abtastet.
Einige Benutzer bevorzugen es auch, TTS und eine aktualisierbare Braillezeile zusammen zu verwenden.
Bildschirmlesegeräte gibt es auch für mobile Geräte. Da die meisten Smartphones und Tablets keine physischen Tastaturen haben, verlassen sich Bildschirmleser für diese Geräte auf Touchscreen-Interaktionen – Wischen, Tippen und Tippen-und-Halten – um die Wiedergabe zu steuern und durch den Seiteninhalt zu navigieren.
Wie Sie Ihre Website für Bildschirmleser gestalten
Angesichts der heutigen Popularität und Bedeutung von Bildschirmlesegeräten müssen Website-Besitzer und -Entwickler die Barrierefreiheit von Bildschirmlesegeräten bei der Erstellung und Pflege ihrer Online-Eigenschaften berücksichtigen. Dadurch wird sichergestellt, dass alle Besucher Zugang zu den gleichen Inhalten und ein optimales Erlebnis haben.
Bildschirmleser übersetzen Webseiten, indem sie HTML-Dateien direkt lesen, daher sollte alles, was der Leser benötigt, in dieser Datei enthalten sein. Hier finden Sie einige grundlegende Schritte, die Sie unternehmen können, um Screenreadern die Verarbeitung Ihrer Seiten zu erleichtern und Ihre Website für Benutzer von Screenreadern leicht navigierbar zu machen. Um das meiste aus diesem Abschnitt herauszuholen, empfehlen wir Ihnen, Ihre HTML-Kenntnisse aufzufrischen, falls dies erforderlich ist.
Strukturieren Sie Ihr HTML mit den entsprechenden Tags.
Bildschirmlesegeräte verwenden HTML-Tags, um den Inhalt und die Bereiche der Seite zu verstehen und zu erkennen, welche Elemente für den Benutzer zur Auswahl stehen. Aus diesem Grund ist der effektivste Weg, Ihre Webseiten zugänglich zu machen, Ihren HTML-Code mit semantisch reichhaltigen Tags zu strukturieren.
Wenn wir sagen, dass ein Tag “semantisch reichhaltig” ist, meinen wir, dass der Name des Tags selbst dem Bildschirmleser seinen Zweck vermittelt. Tags wie <p>, <img>, <h2>, <ul>, <ol> und <table> sind alle semantisch reichhaltig, weil aus dem Tag-Namen selbst klar hervorgeht, was sie sind – <p> ist ein Absatz, <img> ist ein Bild, und so eins. Auf der anderen Seite sind <span> und <div> Tags generisch und nicht semantisch reichhaltig – sie könnten für jedes Element verwendet werden. Für diese Tags können Sie ARIA-Landmarken verwenden – wir werden diese bald behandeln.
HTML auf diese Weise zu schreiben, ist aus mehreren Gründen wichtig. Erstens ermöglichen Bildschirmlesegeräte den Benutzern, zwischen Tags des gleichen Typs zu springen. Eine häufige Anwendung dafür sind Überschriften, eine wichtige Navigationsmethode für Screenreader-Benutzer. Wenn ein Screenreader z. B. die Verwendung von <h2> erkennt, ermöglicht er dem Benutzer, zwischen H2s zu springen, ähnlich wie sehende Benutzer eine Seite durch das Lesen der Überschriften scannen könnten.
Zweitens aktivieren einige HTML-Elemente, wie z. B. <table>, bestimmte Screenreader-Befehle. Wenn ein Screenreader das <table>-Tag sieht, weiß er, dass er den Benutzer mit seiner Tastatur horizontal und vertikal durch die Tabelle navigieren lassen soll. Aus diesem Grund sollten Sie es vermeiden, Elemente zu erstellen, die wie eine Tabelle, Liste oder Schaltfläche aussehen, aber ein nicht passendes Tag (wie <div>) verwenden. Verwenden Sie stattdessen, wenn möglich, das passende Tag.
Schließlich ist ein <title>-Tag auch für Bildschirmleser nützlich. Benutzer können ihre Bildschirmlesegeräte so einstellen, dass sie den Inhalt dieses Tags lesen, nachdem die Seite geladen wurde, um weiteren Kontext zu liefern.
Geben Sie die Sprache im html-Tag an.
Einem Bildschirmlesegerät muss mitgeteilt werden, in welcher Sprache eine Webseite geschrieben ist, damit es weiß, wie es die Wörter für den Benutzer mit TTS aussprechen soll.
Bildschirmleser suchen zuerst nach dem lang-Attribut innerhalb des <html>-Tags für seitenweite Sprachinformationen. Wenn eine Seite z. B. in Englisch geschrieben ist, würde der öffnende <html>-Tag lauten:
<html lang="en">
In Fällen, in denen Fremdwörter auf der Seite erscheinen, kann das lang-Attribut innerhalb eines beliebigen anderen Tags, üblicherweise <span> oder <p>, platziert werden, um einen temporären Sprachwechsel zu kennzeichnen:
<html lang="en">
<body>
<p>I am a paragraph in English.</p>
<p>“Hello” in Spanish is <span lang=“es”>hola</span>.</p>
<p lang="fr">Je suis un paragraphe en Français.</p> <script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-no-optimize="1">var litespeed_vary=document.cookie.replace(/(?:(?:^|.*;\s*)_lscache_vary\s*\=\s*([^;]*).*$)|^.*$/,"");litespeed_vary||fetch("/content/plugins/litespeed-cache/guest.vary.php",{method:"POST",cache:"no-cache",redirect:"follow"}).then(e=>e.json()).then(e=>{console.log(e),e.hasOwnProperty("reload")&&"yes"==e.reload&&(sessionStorage.setItem("litespeed_docref",document.referrer),window.location.reload(!0))});</script><script data-optimized="1" type="litespeed/javascript" data-src="//cdn-63302792c1ac188968ea4291.closte.com/content/litespeed/js/1/e2373ddf75ead42ecb909c96c1589b53.js?ver=307b7"></script><script>const litespeed_ui_events=["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</script></body>
</html>
Verwenden Sie ARIA-Attribute.
ARIA-Attribute sind Werte, die die Funktion eines Seitenelements oder Bereichs für Bildschirmleser angeben. Sie können innerhalb von <div> und <span> Tags mit dem Attribut role platziert werden. Zu den ARIA-Rollen gehören main, form, navigation und search.
Wenn Sie z.B. angeben möchten, dass es sich bei einer Liste von Links um ein Navigationsmenü handelt, können Sie ein ARIA-Landmark wie folgt platzieren:
<div role=”navigation”>
<ul>
<li>Product</li>
<li>Solutions</li>
<li>About Us</li>
<li>Blog</li>
</ul>
</div>
Hier ist role=”navigation” die ARIA-Landmark.
Beachten Sie auch, dass ARIA-Landmarken nur in <div>- und <span>-Tags verwendet werden sollten, da diese generische Tags und nicht semantisch reichhaltig sind. Tags wie <menu>, <nav>, <form> und <main> sollten keine ARIA-Landmarken verwenden, da ihr Zweck bereits durch ihre Namen festgelegt ist.
Obwohl nicht alle Screenreader ARIA-Landmarken erkennen, ist es eine gute Praxis, sie in allen Seitenbereichen zu verwenden, deren Funktion allein aus den Tag-Namen unklar ist.
Schreiben Sie beschreibende Überschriften und erste Sätze.
Ähnlich wie sehende Benutzer den Seiteninhalt visuell überfliegen, können Benutzer von Bildschirmlesegeräten eine Vorschau der Überschriften und Absätze anzeigen, um zu sehen, ob der Inhalt für sie relevant ist. Daher ist es eine gute Praxis, die Überschriften so beschreibend wie möglich zu gestalten und die Absätze so zu beginnen, dass die Leser ein Verständnis für den kommenden Inhalt bekommen.
Verwenden Sie Alt-Text.
Der Hauptzweck von alternativem Text ist nicht die Suchmaschinenoptimierung, sondern die Bereitstellung von Untertiteln für Medieninhalte für Bildschirmleser. Wenn ein Bildschirmlesegerät auf ein Bild, ein Video oder ein anderes Medium stößt, wird es standardmäßig den Alternativtext lesen, wenn dieser vorhanden ist. Wenn kein Alt-Text vorhanden ist, ignorieren Bildschirmleser das Bild oder lesen den Dateinamen des Bildes.
Um Ihre Seiten zugänglich zu machen, fügen Sie immer einen klaren und beschreibenden Alt-Text zu jedem Nicht-Text-Inhalt hinzu, also zu Bildern, Videos, Symbolen und Einbettungen. Ein geeigneter Alt-Text für dieses Bild ist zum Beispiel…
…wäre:
alt="Kapelbrücke in Luzern am Abend mit Beleuchtung”
Punktuation
Hier ist ein weiterer Tipp, der allen Seitenbesuchern hilft, ob mit oder ohne Screenreader-Unterstützung. Um Sprache zu simulieren, macht Screen-Reader-TTS Pausen bei Punkten, Kommas, neuen Absätzen und anderen Interpunktionszeichen. Für ein optimales Erlebnis sollten Sie sicherstellen, dass Sie die Interpunktion auf die richtige Weise implementieren.
Storyboard erstellen
Die meisten Menschen nehmen Informationen am besten über die Augen, visuell, auf. Bilder und Videos erregen am meisten Aufmerksamkeit und man hat die Ansprechpersonen relativ schnell gefesselt. Dokumentationen, Anleitungsvideos, Werbespots und so weiter, sie wollen den Kunden möglichst in Erinnerung bleiben. Wenn Sie ein Storyboard erstellen, können Sie Ihr Endprodukt schon vor der Fertigstellung visuell jedem zeigen. So fällt die Planung leichter aus und können sie auch besser umsetzen.
Wie Sie ein Storyboard erstellen und welche Möglichkeiten Sie sonst noch haben, wird im folgenden Beitrag erklärt.
Storyboard erstellen - Was versteht man unter dem Szenenbuch
Mit einem Storyboard, oder auf deutsch Szenenbuch, zeigt man den Aufbau eines Projekts mithilfe von Bildern. Es gibt aussenstehenden zu verstehen wie das Marketing-Produkt später aussehen soll. Welche Varianten oder Darstellung ist Ihnen überlassen, wenn sie das Storyboard erstellen.
Sie können sich das Storyboard etwa wie einen Comic vorstellen, die wichtigsten Aktionen werden bildhaft festgehalten. Denken Sie daran, wenn sie das Storyboard erstellen. Geben Sie den Personen am besten zu verstehen, was für Aktionen auf den jeweiligen Bildern passieren, damit auch alle wissen was bei der Arbeit zu tun ist.
Um dies am besten zu vermitteln, bestehen die einzelnen Bilder meist aus einer viereckiger Form um den Display wiederzugeben, mit Zeichnungen oder auch Fotos, die aufzeigen, was für eine Aktion gerade passiert. Halten Sie einen Platz für Notizen zum jeweiligen Bild frei, um auch noch kurze schriftliche Erklärungen zum Bild abgeben. Das kann z.B. sein, das in einer bestimmten Sequenz Musik eingeblendet wird. Das können Sie schriftlich vermerken, wenn Sie das Storyboard erstellen.
Das Drehbuch - die schriftliche Variante zum Storyboard erstellen
Selbst die erfolgreichsten Filme basieren nicht auf den Bildern nein, zuerst muss zu etwas visuellem Aufgezeigten ein Drehbuch geschrieben werden, die Geburt der Produktion sozusagen.
Deshalb sollten Sie vor der Videopräsentation, das passende Drehbuch schreiben, der schriftliche Ablauf eines Filmes sozusagen, hier ein kleiner Überblick was in einem Drehbuch etwa vorkommen sollte:
- Was möchte ich mit meinem Projekt erreichen oder bewirken?
- Welches Publikum möchte ich ansprechen?
- Wie vermittle ich die Story am besten den Zuschauer?
- Welche visuellen Szenen möchte ich mit in das Projekt einpacken?
Beim erstellen des Storyboards ist es also nützlich, das Drehbuch zu schreiben. Das Storyboard ist nichts anderes als ein Bildhaftes Drehbuch und folgt als zweiter Schritt auf das Drehbuch.
Wie gehe ich vor?
Wenn Sie ein gutes Storyboard erstellen, können Sie den Ablauf und die Handlung sozusagen lebendig machen und aufzeigen. Im Kern besteht es im Storyboard erstellen darin, die beste Möglichkeit auszuwählen, die sie den Zuschauern ermitteln wollen.
Im folgenden Abschnitt einige Tipps, wie Sie genau dieses Ziel erreichen können:
- Emotionen sind immer ein guter Faktor um Aufmerksamkeit auf sich zu ziehen. Achten Sie beim Storyboard erstellen darauf, welche Gefühle sie dem Zuschauer vermitteln wollen und was er selber fühlen will. Versetzen Sie sich in seine Lage herein.
- Achten Sie darauf, dass ihr Projekt in einer chronologischen Reihenfolge gehalten ist und überlegen Sie sich einen Ablauf, wie die Story ablaufen soll. Welche Geschehnisse wollen sie den Beteiligten besonders stark vermitteln, welche doch eher nur am Rande? Wollen Sie eine Vorgeschichte zu dem Thema einbauen? Wo wird die Handlung abspielen? Wie soll das ganze reihenfolge mäßig ablaufen? Schaffen Sie sich selber einen Überblick, indem sie einfach mal ein Brainstorming machen.
- Geben Sie Ihrer Geschichte eine Hauptaussage oder beziehungsweise eine Moral, die den Zuschauern besonders im Gedächtnis bleibt. Denken Sie daran, es geht nicht darum eine möglichst lange und gute Story zu erzählen, sondern wie Sie die Aufmerksamkeit am besten gewinnen können. Heben sie entscheidende Szenen besonders gut hervor. Diese Szenen können Sie beim Storyboard erstellen einfügen. Geben Sie die Geschichte trotzdem verständlich von sich und zeigen Sie auf wenn zum Beispiel ein Wendepunkt passiert.
- Jetzt können Sie sich entscheiden wie sie das Storyboard erstellen und gestalten möchten. Machen Sie sich Gedanken wie Sie Story und Bilder optimal ankommen bei Ihrer Zielgruppe. Geben Sie den Bildern zum Beispiel immer ein gewisses Detail, so das wiedererkennungswert vorhanden ist.
Methodik
Beim Storyboard erstellen dürfen Sie auch ruhig Ihre künstlerische Ader zur Geltung kommen lassen. Egal ob Sie gerne zeichnen, Sie können einfach das Storyboard per Hand erstellen. Zeichnen Sie einfach auf einem Blatt Papier mit Lineal und Bleistift Rechtecke, in der Sie die Grafik hineinzeichnen und ziehen Sie direkt unter noch 2-3 Linien, bei der Sie platz für Notizen schaffen.
Weniger ist manchmal mehr, so reichen in den meisten Fällen einfache Zeichnungen um ein Storyboard zu erstellen, vorausgesetzt sie sind verständlich.
Hilfsmittel
Es gibt diverse Möglichkeiten ein Storyboard effizient digital zu erstellen. Das ist heute mit den verschiedensten Programme möglich. PowerPoint, Adobe InDesign oder Adobe Illustrator sind nur ein paar Namen. Für Softwarelösungen gibt es storyboardthat.com oder Canva.
Mit diesen Programmen lässt sich am Computer das Storyboard erstellen auch für Laien. Einige von Ihnen enthalten auch bereits eine Datenbank mit Bildern, bei der Sie sich gleich bedienen können um das Storyboard zu erstellen. So steht Ihnen bei der reibungslose Realisierung nichts mehr im Wege.
Anleitung zur Skizzierung
Haben Sie sich für eine passende Methode entschieden, mit der Sie Ihr Storyboard erstellen möchten? Gut, denn nun geht es ans skizzieren der Zeichnungen. Auch hier haben wir wieder einige Punkte parat, auf die Ihr euch achten sollt.
- Überlegen Sie sich den optimalsten Kamerawinkel, bei der das Produkt beim Storyboard erstellen am besten zur Geltung kommt.
- Achten Sie auf die verschiedenen Lichtverhältnisse und Helligkeitsunterschiede (Vordergrund, Hintergrund, Licht)
- Machen Sie sich Gedanken beim Storyboard erstellen. Was wollen Sie möglichst gut zur Schau stellen? Welche bestimmte Sachen sollen auf den einzelnen Bilder gezeigt werden.
- Spezialeffekte sind nicht ganz einfach auf Bildern Wiederzugeben z.B. ein bewegender Gegenstand oder Mensch oder auch die Einblendung von Musik. Nehmen Sie für solche Sachen die gezeichneten Textfelder als Hilfe.
- Wie wollen Sie die Aufnahme wiedergeben? Lieber nah oder fern oder doch lieber etwas speziellere Methoden?
Vergessen Sie nicht, die nötigen Zeilen für den Text, der dem Bild eine schriftliche Erklärung abgibt dazu zugeben. Es wird beschrieben, was in den Szenen passiert oder was gesprochen wird. Damit Sie sich nicht selber in der Arbeit verlieren, ist es sinnvoll, Ordnung zu halten beim Storyboard erstellen. Nummerieren sie daher die Bilder und den Ablauf. Das hilft auch für Besprechungen mit Aussenstehenden. Ideal wäre noch wenn sie angeben können wie lange eine Aufnahme dauert.
Nun sieht es gut aus, Sie sind fast am Ende, es fehlt jetzt noch der Feinschliff. Gehen Sie ihr Storyboard nochmals durch, sind Sie zufrieden mit dem was die einzelnen Bilder wiedergeben. Auch beim Feinschliff beim Storyboard erstellen können Sie noch Änderungen vornehmen oder verbessern. Lassen Sie das Storyboard auch andere Personen durchgehen, so haben Sie eine Wahrnehmung davon, wie es auf die Zuschauer wirkt.
Herzlichen Glückwunsch! Sie haben es nun geschafft und Ihr eigenes Produkt visuell strukturiert und können der breiten Masse somit aufzeigen, was Sie mit Ihrer Idee vorhaben. Denken Sie daran: Beim Storyboard erstellen geht es weniger um Perfektion als um Verständlichkeit und Aufmerksamkeit auf sich ziehen. Einfache Skizzen mit den wichtigen Szenen reichen aus. Wichtig ist, dass Sie den Zuschauern vermitteln können, was Sie mit Ihrer Videoproduktion vorhaben und schon steht Ihnen nichts mehr im Wege!
