I den här screencast gräver vi in i avsnittet Deals. Avsnittet om erbjudanden är i huvudsak en ”annonsvägg”. Det är ett område på webbplatsen som människor måste navigera till sig själva, så jag är inte orolig för att fastna annonser i folks tankar. Dessutom har varje annons en rabatt på den och är en produkt som jag personligen rekommenderar, så ingen skumhet pågår.
Vi har redan rubriken på plats. Vi har också redan innehållet som spottas ut på sidan som vi behöver utforma. Detta är den perfekta platsen att vara att starta direkt till att skriva lite CSS.
Det som är coolt med den här sidan är att vi kan doppa tårna i responsiv annonsering. Reklamvärlden har verkligen inte kommit ikapp med responsiv design. Annonser är ofta av fast storlek och att ändra storlek på dem är svårt eller rakt upp förbjudet. Så är inte fallet på den här webbplatsen eftersom jag skapar annonserna själv.
Varje annons skapas från en bakgrundsbild, en logotypbild och bitar av text. Med hjälp av ett background-imagemedel kan vi skära kanterna på det och det är OK. Vi tappar ingen text eller viktiga delar av logotypen.
Layouten för denna "vägg" kommer att vara vägglik =). Vi får det vara tre kolumner i breda skrivbordsstorlekar och sedan gå ner till två kolumner och sedan äntligen en enda kolumn i telefonstorlekar. Allt vi gör är att flytta annonserna och använda en för min-heightatt hålla dem alla i samma höjd. Vid olika mediefrågor justerar vi helt enkelt annonsernas bredder och ändrar vilka av dem som har rätt marginal och vilka som inte har (via :nth-child).
På baksidan är varje annons ett anpassat fält i WordPress. När vi skickar ut dem till sidan frågar vi först efter dem och placerar dem i en matris. Blanda sedan den matrisen. Sedan ekar dem äntligen ut. Kan lika gärna ge alla en rättvis chans att vara den bästa annonsen!