Specyfikacja videomailingu
Transkrypt
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.