Założenia projektowe reklam w technologii HTML5, zarówno pełnoekranowych, jak i bannerowych, nie powinny różnić się od wytycznych projektowych mobilnych stron www czy aplikacji.
Nie istnieje jeden rozmiar, według którego należy zaprojektować reklamę - mnogość urządzeń mobilnych oraz obecność dwóch trybów wyświetlania (portrait i landscape) uniemożliwia "sztywne" zaprojektowanie reklamy. Dlatego sugerujemy użycie wytycznych projektowych Responsive Web Design w celu zoptymalizowania wyświetlania dla każdego z urządzeń mobilnych oraz zapewnienia prawidłowego odbioru reklamy.
Rodzaj, ilość oraz ułożenie poszczególnych elementów wchodzących w skład reklamy powinno być zależne przede wszystkim od ekranu urządzenia użytkownika, zapewniając prawidłowy odbiór elementów reklamy (zbyt mały tekst jest niewidoczny na ekranie telefonu, tapnięcie na mały przycisk będzie utrudnione dla osób z większymi dłońmi).
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Szablon reklamy HTML5</title>
</head>
<body>
<!-- Treść -->
</body>
</html>Znacznik pozwala określić domyślne skalowanie strony na urządzeniach mobilnych oraz jak użytkownik może je zmienić. Poniższy kod określa, że plik HTML domyślnie będzie zawsze rozciągnięty do 100% szerokości urządzenia.
<meta name="viewport" content="width=device-width, initial-scale=1">Dodatkową, rekomendowaną opcją jest user-scalable=no. Sprawia ona, że użytkownik traci możliwość powiększenia strony za pomocą domyślnych metod przeglądarki (np. powiększenie gestem Pinch), przez co strona (reklama) zachowuje się bardziej jak aplikacja mobilna.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">Poniższy kod definiuje kodowanie znaków na uniwersalny format UTF-8, co gwarantuje poprawne wyświetlanie się polskich znaków.
<meta charset="utf-8">Reklamy HTML5 emitowane za pośrednictwem SpicyMobile do prawidłowego działania elementów interaktywnych wymagają załączenia biblioteki Javascript oaoa.js oraz utworzenia i odpowiedniego skonfigurowania obiektu reklamy:
<script src="https://cdn.happypixel.pl/oaoa.min.js" type="text/javascript"></script>
<script>
var nazwaReklamy = new oaoaAd( CONFIG );
</script>gdzie CONFIG to obiekt Javascript z opcjami konfiguracyjnymi, zdefiniowanymi zgodnie z poniższą dokumentacją
Reklamy obsługujące kliknięcia za pośrednictwem tagu <a/>
CONFIG.clickTag: oaoaSelector( QUERYSELECTOR )QUERYSELECTOR to selektor css dla elementów, którym ma zostać nadany odpowiedni atrybut href, przykładowo:
var nazwaReklamy = new oaoaAd({
clickTag: oaoaSelector("a.clickTag")
});Uwaga: dla elementów zostanie nadany atrybut target="_blank"
Reklamy obsługujące kliknięcia poprzez javascript, np. window.open
nazwaReklamy.clickTagAdres url do odtwarcia jest dostępny w zmiennej .clickTag dla obiektu zdefiniowanego w nazwaReklamy, przykładowo:
var nazwaReklamy = new oaoaAd();
var onClick = function(){
window.open(nazwaReklamy.clickTag,"_blank");
};Reklamy obsługujące zamykanie poprzez tapnięcie na wybrany element HTML.
CONFIG.adClose: oaoaSelector( QUERYSELECTOR )QUERYSELECTOR to selektor css dla elementów, które po tapnięciu mają wywołać metodę zamykającą reklamę, przykładowo:
var nazwaReklamy = new oaoaAd({
adClose: oaoaSelector(".adClose")
});Reklamy obsługujące zamknięcie bezpośrednio przez wywołanie funkcji Javascript.
W ramach definiowanego obiektu oaoaAd ( obiektu zdefiniowanego w nazwaReklamy) dostępne są następujące metody wewnętrzne:
.adClose()zamyka reklamę; analogicznie do działania po tapnięciu dla elementów zdefiniowanych w obsłudze zamykania, przykładowo:
var nazwaReklamy = new oaoaAd();
var onClose = function(){
nazwaReklamy.adClose();
};
.removeAutoClose()dezaktywuje wewnętrzne odliczanie, po którym nastąpiłoby autozamknięcie reklamy bez interakcji ze strony użytkownika
Niektóre przeglądarki blokują dostęp do zdarzenia DeviceMotion dla reklam, tj. stron wyświetlanych w iframe. By ominąć tę niedogodność przygotowaliśmy dedykowane rozwiązanie, zastępujące bezpośredni dostęp do eventu.
var nazwaReklamy = new oaoaAd({
onInit: function(){
this.deviceMotion = new oaoaDeviceMotion({
// funkcja wywoływana każdorazowo po wywołaniu eventu DeviceMotion
onChange: function(eventData){
// dowolny kod
},
// funkcja wywoływana dla customowego zdarzenia Shake
shake_threshold : 10, // siła konieczna do uruchomienia funkcji onShake
shake_timeout : 1000; // czas, co jaki zostanie wywołana funkcja onShake, jeżeli warunek z shake_threshold jest spełniony
onShake: function(eventData){
// dowolny kod
}
});
}
});gdzie eventData zawiera dane dla zdarzenia:
eventData = {
x : Math.round(event.accelerationIncludingGravity.x),
y : Math.round(event.accelerationIncludingGravity.y),
z : Math.round(event.accelerationIncludingGravity.z),
t: (new Date()).getTime()
}Uwaga: w ramach jednej reklamy powinien istnieć tylko jeden obiekt oaoaAd
Niektóre przeglądarki blokują dostęp do zdarzenia DeviceOrientation dla reklam, tj. stron wyświetlanych w iframe. By ominąć tę niedogodność przygotowaliśmy dedykowane rozwiązanie, zastępujące bezpośredni dostęp do eventu.
var nazwaReklamy = new oaoaAd({
onInit: function(){
this.deviceOrientation = new oaoaDeviceOrientation({
// funkcja wywoływana każdorazowo po wywołaniu eventu DeviceOrientation
onChange: function(eventData){
// dowolny kod
}
});
}
});gdzie eventData zawiera dane dla zdarzenia:
eventData = {
alpha : num, // event.alpha
beta : num, // event.beta
gamma : num, // event.gamma
x : num, // liczba stopni położenia telefonu w poziomie
y : this.y-60 // liczba stopni położenia telefonu w pionie
}Uwaga: w ramach jednej reklamy powinien istnieć tylko jeden obiekt oaoaAd
Brak obecności kursora myszy i specyfiki jego zachowania wymusza odmienny sposób projektowania interakcji z reklamą. Użytkownik nie jest w stanie sprawdzić, czy dany element jest klikalny (kursor "łapki"), zatem elementy, które po tapnięciu przekierują na inną stronę powinny być wyraźnie oznaczone tak, by dana akcja i jej konsekwencje były klarowne.
Dodatkowo reklama powinna rozróżniać poszczególne gesty oraz intencje użytkownika. Gest Swipe wykonany na linku nie powinien być równoznaczny z kliknięciem/tapnięciem i nie powinien otwierać URL-a z linku.
Jeżeli reklama wymaga od użytkownika wykonania bardziej skomplikowanego gestu (np. Pinch), to powinno być to w bardzo klarowny sposób zakomunikowane w ramach samej treści reklamy. Użytkownik nie może domyślać się, co ma zrobić.