Știu că prima impresie contează foarte mult și este cea care determină ca utilizatorul final să mai stea măcar o clipă pe platformă ta online. De aceea, este foarte important ca design-ul website-ului să fie ca la carte și dacă se poate cât mai responsive?
De ce este important să fie cât mai responsive? Pentru că în ziua de astăzi traficul web este generat în principal de pe dispozitive mobile, care au o rezoluție relativ mică. Dacă site-ul tău se vede bine doar la rezoluții mari, atunci e o problemă și s-ar putea ca persoana care accesează platforma de pe smartphone să aibă probleme la vizualizarea conținutului, unele dintre ele să fie chiar deranjante și să producă părăsirea platformei.
Pe de cealaltă parte, spațiile publicitare sunt importante pentru că aduc un câștig pasiv, câștig care să permită acoperirea cheltuielilor generate de site. De exemplu, în cazul meu, am ales să aplic la programul Google Adsense pentru a afișa câteva spații publicitare pe blog. Probabil că le-ați observat deja.
Google Adsense îți permite să creezi un spațiu publicitar care să fie responsive și să îl injectezi oriunde vrei tu în blog. Cu alte cuvinte, se ocupă el de tot. Cu toate acestea, în cazul meu, nu prea am fost mulțumit de rezultat. De ce? Pentru că anumite spații publicitare îmi ieșeau din dimensiunea permisă de către părinte. Apoi, nici nu prea aveam prea mult control. Așadar, am decis să mă joc puțin din CSS și să îmi configurez lucrurile după bunul plac.
Iată ce am făcut din CSS:
.responsive_h_ad {
width: 320px;
height: 100px;
}
@media(min-width: 500px) {
.responsive_h_ad {
width: 468px;
height: 60px;
}
}
@media(min-width: 700px) {
.responsive_h_ad {
width: 624px;
height: 80px;
}
}By default, am configurat ca toate elementele din pagină care au clasa responsive_h_ad atașată să aibă un width de 320px și un height de 100px. Această configurare va fi deosebit de utilă pentru dispozitivele cu o rezoluție mică. Apoi, dacă cumva rezoluția e mai mare de 500px, atunci aceste proprietăți de width și height vor fi suprascrise la 468px, respectiv 60px. Mai mult decât atât, dacă rezoluția depășește 700px, atunci noile valori pentru width și height vor deveni: 624px și 80px. Cu alte cuvinte, dimensiunea bannerului va crește pe măsură ce rezoluția browserului este mai mare.
Nice, nu? Ce trebuie să facem pentru a fi luată în calcul clasa responsive_h_ad? La scriptul Google ce trebuie injectat, va trebui să specificăm și această clasă. Iată un exemplu:
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle responsive_h_ad"
style="display:inline-block"
data-ad-client="ca-pub-XXXX"
data-ad-slot="YYYY"</ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>Simplu, ușor, cât se poate de responsive! Alege și tu un design clean pentru blogul tău!
