Ogólne wymagania
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.
Responsive Web Design
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).
Szkielet strony HTML5
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.
<!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>Meta-tag viewport
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">
