Banery na stronie dla urządzeń mobilnych - instrukcja

Ostatnio trafiłem na problem, jak zapewnić sobie działanie banerów animowanych na Smartfonach i tabletach?

Usiadłem i zacząłem czytać, zbierać informacje i kombinować z powodu wrodzonej niecierpliwości do tematu. Dowiedzieć się można, że SWF to historia i przeżytek (jakoś żadna nowość), jednak jak zrobić swój baner animowany bez flash-a?

Rozwiązaniem jest HTML5 i CSS3.

Odradzam samodzielne dłubanie i zabawy dla początkujących w notatnikach i kodzie. Nie męczmy się skoro są już gotowe produkty do takich zadań. Najłatwiejszym i przyjemnym rozwiązaniem jest program który otrzymujemy od Google. Google Web Designer, to darmowe narzędzie pozwoli nam przygotować baner animowany i zapisać w odpowiednim dla nas formacie. Po zakończeniu prac wystarczy kliknąć Publikuj, wybrać lokalnie i gotowe. Po zapisie otrzymamy folder z naszym projektem.
     Pamiętajmy tylko o tym, że taki baner to nie będzie 1 plik, a zestaw styli i grafik. Dlatego też, nasz wynik zostanie zapisany w postaci:

• 1 pliku html z ustawieniami, tekstami i stylami baneru
• wszystkimi grafikami osobno, każda grafika będzie osobno

Teraz już wystarczy wgrać wszystko na nasz serwer i zaimplementować plik html w wybranym miejscu.

W następnym artykule przedstawię pełną instrukcję obsługi Google Web Designer-a krok po kroku.