Responsive Banner-Anzeigen mit HTML5 und CSS3
Responsive Web-Design ist ein großer Schritt vorwärts für das Internet. Wir sind nicht mehr auf die uralten ‚gedruckte Seite‘ Metapher gekettet, wo Inhalt statisch und paginierte in Normalgröße mit Brocken ist. Jetzt kann das Internet lebt und atmet, und paßt zu füllen, was Raum, der sie von Handy-Displays zu massivem Kino-Displays zur Verfügung hat. Dies ist, wie das Internet war zu sein.
Ein neues Format für Bannerwerbung
Die einzige Möglichkeit, Banner-Anzeigen so reagieren, wie unser HTML5-Layout zu machen, ist sie mit HTML5 zu machen. Dies könnte auf den ersten Ton wie eine verrückte Idee, aber ich versichere Ihnen, es ist nicht. Tatsächlich gibt es viele Vorteile für die Anzeigen mit HTML zu machen.
So wie wir eine machen?
Zeit für eine kurze Demo
Hier ist ein Beispiel HTML5-Anzeige an der beliebten 125x125 Pixelgröße gezeigt:
Und hier ist die gleiche Anzeige mit einer flexiblen Breite:
Beachten Sie, wie die zweite Anzeige reagiert, wenn Sie die Größe des Browserfensters ändern. Recht ordentlich eh. )
Eine neue Konvention für Bannergrößen
Responsive Layouts erfordern Seitenelemente variabler Breite haben, so Banner dieser Konvention nun auch folgen müssen. Die Höhe eines Banners nicht wirklich in Responsive Design Rolle, so dass wir jede Höhe verwenden können, die wir möchten. Aber eine Höhe Wahl bedeutet nicht, unsere Anzeige in dieser Höhe stecken, können wir mehrere Höhen für jede Anzeige definiert haben!
Zur Aufrechterhaltung der Abwärtskompatibilität Responsive-Anzeigen sollten die gleichen Pixelhöhen wie herkömmliche Bannergrößen verwenden. Wir könnten theoretisch ansprechende Banner erstellen, die mit einem beliebigen Breite oder Höhe arbeiten, aber das ist nicht praktikabel oder Test zu bauen. Ich schlage vor, wir auf eine Mindestbreite von 88 Pixeln halten und haben den folgenden Satz von Standardhöhen:
31px "Mikro" micro bar (88 x 31) 60px "button" Taste 2 (120 x 60) Halb Banner (234 x 60) Voll Banner (468 x 60) 90px "Banner" Taste 1 (120 x 90) Leader (728 x 90) 125px "kleines Rechteck" Quadrat-Taste (125 x 125) 250px "Medium Rectangle" vertikale banner (120 x 240 * Es liegt nahe genug!) Platz Pop-up (250 x 250) Medium Rectangle (300 x 250) 400px „groß Rechteck“vertikales Rechteck (240 x 400) 600px "Hochhaus" Hochhaus (120 x 600) breites Hochhaus (240 x 600) halbseitige Anzeige (300 x 600)
Die sieben Pixelhöhen ich oben gewählt haben, geben Sie uns eine schöne Auswahl in vertikale Größe und mit variablen Breiten decken wir die beliebtesten Anzeigengrößen heute im Einsatz. Natürlich wie bei herkömmlichen Bannern können Sie benutzerdefinierte Größen erstellen, wenn Sie sie benötigen.
Das Beste an Responsive-Anzeigen, die wir haben nur 14 herkömmliche Banner reduziert Größen auf nur noch sieben Höhen, und alle diese Faktoren können durch eine einzige HTML5-Anzeige angezeigt werden! Nicht nur das, aber meine Demo-Anzeige kommt bei weniger als 25k für die ganze Sache (HTML, CSS und das JPG-Bild). Dies ist kleiner als die maximale Dateigröße für ein einzelnes kleines Banner!
Probieren Sie diese neue Bannergrößen meine Responsive-Anzeigenprüfung mit - Sie können es verwenden, Ihre eigenen Anzeigen zu testen. Stellen Sie sicher, dass Ihr Browser-Fenster Größe ändern, um zu sehen, wie sie alle einstellen.
Ändern der Größe von Iframes mit CSS-Medienanfragen
Und hier ist die CSS:
Meine ansprechenden Werbebanner CSS-Datei ein komplettes Arbeitsbeispiel zu sehen.
Tracking-Eindrücke Klicks
Es ist auch eine triviale Aufgabe, indem Sie eine der vielen kostenlosen URL Verkürzung Services Klicks auf Ihre Anzeige zu verfolgen. Ich persönlich bevorzuge bit.ly. Wenn Sie Ihre Anzeige mehrere Links hat, können Sie diese einzeln verfolgen. Denken Sie daran, einen target = „_ top“ auf Ihren Links zu verwenden, um Ihre Anzeige Büsten aus dem iframe und der Link füllt die gesamten Browser-Fenster.
Aufnahme Bannergrößen in META-Tags
Responsive-Anzeigen können eine beliebige Anzahl von Größen unterstützen gemacht werden, sondern als Schleppnetz durch die CSS zu entdecken, was Höhe unterstützt Ich schlage vor, wir sie in einem META-Tag aufzunehmen. Hier ein Beispiel:
Das ist gut, weil META-Tags Computer lesbar sind. Ihr Browser muss möglicherweise alternative Größen wissen, eine Anzeige in einigen Situationen angezeigt werden soll.