กระแส Responsive Design ที่ปรับหน้าของตัวเว็บให้เหมาะสมกับอุปกรณ์แต่ละแบบที่กำลังเข้าถึงหน้าเว็บนั้นๆ กำลังเป็นหัวข้อที่กำลังทำให้การออกแบบเว็บในปีนี้ แต่ปัญหาของเว็บจำนวนหนึ่งคือตัว Ads ในบางผู้ให้บริการไม่ได้ออกแบบมารองรับและปรับสภาพขนาดแต่อย่างใด ซึ่งเว็บผมก็เจออยู่คือ Adsense นั้นจะเป็นลักษณะความกว้างและสูงตายตัว ทำให้ลำบากต่อการปรับแต่ง
แต่หลังจากที่ได้ค้นหา ก็พบว่ามีคนใช้ Media Query ใน CSS3 มาช่วย แต่ปัญหาคือ การทำแบบนี้จะผิดข้อกำหนดของ Google ที่ไม่ยอมให้ Adsense นั้นอยู่ใน tag “display:none;” หรือหลบด้วยการเลื่อนตำแหน่งไปซ่อน ซึ่งผิด TOS เต็มๆ และยังมีผลทางเทคนิคในเรื่องของการโหลด JavaScript เกินความจำเป็นทำให้หน้าเว็บโหลดช้า
แต่ก็เจอทางออกจนได้จาก Google Approves Responsive AdSense Ads นั้นสามารถใช้โค้ดจาก How to use Google AdSense Ads on Responsive Websites ได้ ผมจึงนำมาปรับแต่งเล็กน้อยเพื่อให้เหมาะสมกับขนาดหน้าจอ 4 screen (960px, 800px, 480px และ 320px) ที่ Theme ของ Blog นี้ทำงานอยู่ ตามโค้ดด้านล่างนี้ คราวนี้ Ads ก็รองรับการทำงานควบคู่กับ Theme แบบ Responsive Design แล้วครับ
[javascript]
[/javascript]