Bannière Responsive annonces avec HTML5 et CSS3
Responsive Web Design est un grand bond en avant pour l'Internet. Nous ne sommes plus enchaînée au-vieillesse métaphore page imprimée 'où le contenu est statique et paginé en morceaux de taille normale. Maintenant, l'Internet peut vivre et respirer, et s'adapter à remplir tout l'espace dont il dispose sur les écrans de téléphones mobiles à écrans de cinéma massifs. Voici comment l'Internet était censé être.
Un nouveau format pour les bannières
La seule façon de faire des bannières aussi sensibles que nos mises en page HTML5 est de les faire avec HTML5 aussi. Cela pourrait tout d'abord son comme une idée folle, mais je vous assure que ce n'est pas. En fait, il y a beaucoup d'avantages à faire des annonces avec HTML.
Alors, comment pouvons-nous faire un?
Le temps d'une démonstration rapide
Voici un exemple HTML5 ad montré à la taille des pixels 125x125 populaire:
Et voici la même annonce avec une largeur flexible:
Remarquez comment la deuxième annonce répond lorsque vous modifiez la taille de la fenêtre de votre navigateur. Très soigné hein. )
Une nouvelle convention pour les tailles de bannières
mises en page réactifs nécessitent des éléments de la page pour avoir des largeurs variables afin bannières doivent suivre cette convention maintenant aussi. La hauteur d'une bannière ne pas vraiment dans la conception réactive afin que nous puissions utiliser toute la hauteur que nous aimons. Mais le choix d'une hauteur ne signifie pas que notre annonce est coincé à cette hauteur, on peut avoir plusieurs hauteurs définies pour chaque annonce!
Pour maintenir la rétrocompatibilité, annonces sensibles devraient utiliser les mêmes hauteurs de pixels que la taille des bannières traditionnelles. On pourrait en théorie créer des bannières sensibles qui fonctionnent avec une largeur ou la hauteur, mais ce n'est pas facile de construire ou de test. Je suggère que nous en tenir à une largeur minimale de 88 pixels et ont l'ensemble des hauteurs standards suivants:
31px "micro" micro barre (88 x 31) 60px bouton "bouton" 2 (120 x 60) bannière moitié (234 x 60) bannière complète (468 x 60) 90px bouton "drapeau" 1 (120 x 90) classement (728 x 90) 125px "petit rectangle" bouton carré (125 x 125) 250px "rectangle moyen" bannière verticale (120 x 240 * Fermer assez!) pop-up carré (250 x 250) rectangle moyen (300 x 250) 400px « grand rectangle » en rectangle vertical (240 x 400) 600px "gratte-ciel gratte-ciel"(120 x 600) gratte-ciel large (240 x 600) annonce une demi-page (300 x 600)
Les sept pixels-hauteurs que j'ai choisi ci-dessus nous donnent une belle gamme de taille verticale et avec des largeurs variables, nous couvrons formats d'annonces les plus populaires en usage aujourd'hui. Bien sûr, comme avec des bannières traditionnelles, vous pouvez créer des formats personnalisés si vous en avez besoin.
La meilleure chose à propos des annonces sensibles est que nous avons vient de réduire 14 bannière classique tailles jusqu'à seulement sept hauteurs, et tous ces éléments peuvent être affichés par une seule annonce HTML5! Non seulement cela, mais ma démo annonce arrive à moins de 25K pour le tout (HTML, CSS et l'image JPG). Ceci est plus petite que la taille maximale de fichier pour une seule petite bannière!
Essayez ces nouvelles tailles de bannières en utilisant mon vérificateur d'annonces réactif - vous pouvez l'utiliser pour tester vos propres annonces aussi. Assurez-vous de changer votre taille de la fenêtre du navigateur pour voir comment tous régler.
iframes Redimensionnement avec des requêtes de médias CSS
Et voici le CSS:
Voir ma bannière réactive fichier ad CSS pour voir un exemple de travail complet.
suivi des impressions clics
Il est également une tâche triviale de suivre les clics sur votre annonce en utilisant l'un des nombreux services de raccourcissement d'URL gratuit. Personnellement, je préfère bit.ly. Si votre annonce a des liens multiples, vous pouvez les suivre individuellement. Rappelez-vous d'utiliser un target = « _ top » sur vos liens afin que vos bustes publicitaires sur l'iframe et le lien remplit la fenêtre principale du navigateur.
Enregistrement tailles de bannières dans les balises META
annonces réactives peuvent être faits pour soutenir un certain nombre de tailles, mais plutôt que par le chalut CSS pour découvrir ce que les hauteurs sont pris en charge, je suggère que nous les enregistrons dans une balise META. Voici un exemple:
Ce qui est bon parce que les balises META sont lisibles par ordinateur. Votre navigateur pourrait avoir besoin de connaître la taille de rechange pour afficher une annonce dans certaines situations.