Responsive Web Design (RWD) หรือการออกแบบเว็บไซต์ให้ตอบสนองได้นั้น ถ้าเราจะอธิบายให้เด็กน้อยวัย 8 ขวบเข้าใจได้ง่ายๆ เราอาจจะเปรียบเทียบอย่างนี้:
"นึกว่าเว็บไซต์เป็นหนังสือนิทานที่เธอจะพกไปอ่านที่ไหนก็ได้ ไม่ว่าจะอยู่ที่บ้าน ในสวน หรือในรถ เพราะหนังสือเล่มนั้นสามารถเปลี่ยนขนาดตัวอักษรและรูปภาพให้เข้ากับขนาดหน้าต่างที่เธออ่านได้ทันที เช่น ถ้าเธออ่านจากมือถือ หนังสือก็จะเล็กพอที่จะอ่านได้สบายๆ หรือถ้าเปลี่ยนไปอ่านบนคอมพิวเตอร์หรือทีวี หนังสือก็จะขยายให้ใหญ่ขึ้น"
เหตุผลที่ Responsive Web Design นั้นสำคัญมากในทางเขียนโปรแกรมเว็บ ก็เพราะมันทำให้เว็บไซต์ของเราสามารถใช้งานได้อย่างง่ายดายในทุกขนาดของหน้าจอ ไม่ว่าจะเป็นมือถือ แท็บเล็ต หรือคอมพิวเตอร์
ลองนึกภาพเว็บไซต์ที่มีส่วนประกอบหลัก 3 ส่วน: แถบนำทาง (Navigation Bar) ส่วนของเนื้อหา (Content Section) และส่วนท้ายเว็บไซต์ (Footer)
บนหน้าจอขนาดใหญ่ เช่น คอมพิวเตอร์:
- แถบนำทางอยู่ด้านบนของหน้าจอ
- เนื้อหาแสดงเป็นคอลัมน์หลายๆ แถว
- ส่วนท้ายเว็บไซต์อยู่ด้านล่างสุดตามปกติ
บนหน้าจอขนาดเล็ก เช่น มือถือ:
- แถบนำทางอาจหดเป็นเมนูแบบกด (หรือเรียกกันว่า hamburger menu) ที่อยู่ที่มุมขวาบน
- เนื้อหาจะเรียงกันเป็นคอลัมน์เดียวตามลำดับ
- ส่วนท้ายเว็บไซต์ก็ยังอยู่ที่ตำแหน่งเดิม
ตัวอย่างโค้ด CSS สำหรับ Responsive Web Design
/* กำหนดค่าเริ่มต้นของเว็บไซต์ */
body {
margin: 0;
padding: 0;
font-family: 'Arial', sans-serif;
}
/* กำหนดสไตล์สำหรับแถบนำทาง */
.navbar {
background-color: #333;
text-align: center;
padding: 10px 0;
}
/* กำหนดสไตล์สำหรับแถบนำทางบนหน้าจอขนาดเล็ก */
@media screen and (max-width: 600px) {
.navbar {
padding: 20px 0;
}
}
/* กำหนดสไตล์สำหรับเนื้อหารวมถึงคอลัมน์ข้อมูล */
.content {
padding: 20px;
}
/* กำหนดสไตล์สำหรับเนื้อหาเมื่ออยู่บนหน้าจอขนาดเล็ก */
@media screen and (max-width: 600px) {
.content {
padding: 15px;
text-align: justify;
}
}
/* กำหนดสไตล์สำหรับส่วนท้ายเว็บไซต์ */
.footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
}
จากตัวอย่างโค้ดข้างต้น เราใช้ `@media` ใน CSS เพื่อกำหนดสไตล์บนอุปกรณ์ที่มีขนาดหน้าจอต่างกัน (ในที่นี้คือหน้าจอที่มีขนาดสูงสุด 600px)
การออกแบบเว็บไซต์ที่ตอบสนองได้ดีนั้นไม่เพียงแต่ให้ความสะดวกสบายแก่ผู้ใช้เท่านั้น แต่ยังยกระดับคุณภาพและมาตรฐานของเว็บไซต์ในสายตาของผู้เยี่ยมชม รวมถึงการจัดอันดับในเครื่องมือค้นหาด้วย จึงเป็นหนึ่งในทักษะพื้นฐานที่ดีที่สุดสำหรับการเขียนโปรแกรมเว็บไซต์ในปัจจุบันและโลกของการแข่งขันด้านตลาดแห่งอนาคต
แม้บทความนี้จะไม่ได้ชักชวนให้เข้าร่วมเรียนรู้การเขียนโปรแกรมกับ EPT โดยตรง แต่ผ่านการแบ่งปันความรู้ที่ลึกซึ้งและน่าสนใจอย่างนี้ ก็นับว่าเป็นการเชิญชวนที่หุ้มห่อด้วยความรู้อย่างหนึ่งเลยทีเดียวนะครับ!
หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง
หากเจอข้อผิดพลาด หรือต้องการพูดคุย ติดต่อได้ที่ https://m.me/expert.Programming.Tutor/
หากมีข้อผิดพลาด/ต้องการพูดคุยเพิ่มเติมเกี่ยวกับบทความนี้ กรุณาแจ้งที่ http://m.me/Expert.Programming.Tutor
085-350-7540 (DTAC)
084-88-00-255 (AIS)
026-111-618
หรือทาง EMAIL: NTPRINTF@GMAIL.COM