Specyfikacja videomailingu

Specyfikacja videomailingu
1
Wersja 1.0, dn. 03-10-2014
Wstęp
Videomailing charakteryzuje się wyższymi CTRami, które wynikają z naturalnej ciekawości
użytkownika, którego bardziej niż tekst intryguje ruchomy obraz – video.
Opisany tu sposób tworzenia videomailingu wykorzystuje ten trend pokazując użytkownikowi tyle, ile
można pokazać w wykorzystywanej przez niego przeglądarce lub kliencie pocztowym.
W przypadku urządzeń Apple (Iphone, Ipad, Mac) użytkownik w kliencie pocztowym zobaczy film, a
po kliknięciu w niego przeniesiony zostanie na Landing Page.
W przypadku wielu klientów pocztowych i niektórych klientów www użytkownik zobaczy animowany
obrazek GIF.
W przypadku Outlooka i kilku innych klientów pocztowych, użytkownik zobaczy tylko nieruchomą
pierwszą klatkę z GIFa.
Przygotowanie kreacji
1. Kreacja videomailingu powinna jasno dawać do zrozumienia, że użytkownik ma do czynienia
z video. Nawet w przypadku, gdy jedyne co zobaczy, będzie nieruchomym obrazkiem (np. w
Outlooku) wyraźnie widoczny przycisk Play /Odtwarzaj i otoczenie obrazka powinny wyraźnie
wskazywać, że jednym klikiem możemy przejść do filmu.
2. Animowany GIF widoczny, jeśli klient pocztowy blokuje możliwość obejrzenia filmu
bezpośrednio w mailu powinien prezentować atrakcyjny fragment filmu (kilka klatek) i
sugerować, że to fragment większego filmu. Wyraźnie widoczny przycisk Play / Odtwarzaj
powinien nie budzić wątpliwości, że po kliknięciu w obrazek użytkownik będzie miał do
czynienia z filmem. Animowany GIF nie powinien przekraczać wagi 200 kb. Czym mniej, tym
lepiej.
Przykład: http://goo.gl/J5xaMs
3. Film powinien być skonwertowany do formatów: mp4, webm, ogg, aby maksymalnie
zwiększyć szansę, że zostanie on poprawnie wyświetlony na jak największej ilości
przeglądarek. Film w trzech wersjach powinien znajdować się na serwerze klienta. Jego
wielkość (wysokość i szerokość) powinny być standardowe, zalecamy tu przetestowanie kodu
HTML5 na różnych przeglądarkach w celu upewnienia się, że film jest w nich poprawnie
wyświetlany. Należy przy tym starać się wybrać optymalną jakość do wielkości, pamiętając,
że nie każdy komputer i łącze internetowe jest w stanie odtwarzać płynnie wysokiej jakości
film.
Przykład: http://goo.gl/ndDoK8
4. Landing page powinien zawierać samoodtwarzający się film, może to być np. serwis Youtube.
Przykład: http://goo.gl/Xg8B56
Kod HTML
Najważniejszym elementem wideomailingu jest kod HTML5:
<video autoplay="" height="wysokosc" muted="" poster="image-poster.gif" width="szerokosc">
<a href="http://url-filmu">
2
<source src="http://film-w-formacie.mp4" type="video/mp4">
<source src=" http://film-w-formacie.webm" type="video/webm">
<source src=" http://film-w-formacie.ogg" type="video/ogg">
<img height="wysokosc" src="image-poster.gif" width="szerokosc" />
</source>
</source>
</source>
</a>
</video>
Gdzie:
wysokosc – wartość w pikselach
szerokosc – wartość w pikselach
image-poster.gif – animowany gif, maksymalna waga 200 kb.
http://url-filmu – ścieżka url do Landing Page, gdzie znajduje się film (np. Youtube lub strona klienta z filmem)
http://film-w-formacie.mp4 – ścieżka do filmu w formacie mp4
http://film-w-formacie.webm – ścieżka do filmu w formacie webm
http://film-w-formacie.ogg – ścieżka do filmu w formacie ogg
Przykład dodatku do przeglądarki Firefox, który konwertuje film do powyższych formatów.
http://firefogg.org/
UWAGA! Nie wszystkie rozmiary filmów są obsługiwane przez przeglądarki.