หลักการของ Responsive Web Design
การทำ Responsive Web Design มักใช้เทคนิคหลาย ๆ อย่างร่วมกัน ไม่ว่าจะเป็น Fluid Grid, Flexible Images และ CSS3 Media Queries
- Fluid Grid ซึ่งก็คือการออกแบบ Grid ให้เป็นแบบไม่กำหนดขนาดตายตัว
- Flexible Images หรือการกำหนดขนาดของรูปภาพต่างๆ ให้มีความสัมพันธ์กับขนาดของหน้าจอ หากรูปต้นฉบับมีขนาดใหญ่มาก เวลาแสดงในมือถือที่มีจอขนาดเล็กก็ควรลดขนาดลงมา เพื่อให้แสดง ผลได้อย่างสวยงาม
- CSS3 Media Queries จะช่วยให้เราสามารถกำหนด style sheets สำหรับ Devices ต่าง ๆ ได้ ช่วยลดความซ้ำซ้อนของโค้ด และยังทำให้การแก้โค้ดในภายหลังทำได้ง่ายอีกด้วย
อย่างไรก็ตาม Responsive Web Design ก็ยังมีข้อเสียอยู่บ้าง เนื่องจากการเขียนโค้ดเดียว ให้รองรับหลายๆ Devices จึงอาจทำให้เกิดปัญหา เช่น โทรศัพท์มือถือที่มีหน้าจอขนาดเล็ก ถึงแม้เราจะซ่อนเนื้อหาบางส่วนที่ไม่จำเป็นเอาไว้ แต่ในบางเว็บบราวเซอร์ ข้อมูลเหล่านี้ยังจะถูกโหลดเข้ามาอยู่ ทำให้โทรศัพท์มือถือจำเป็นต้องโหลดรูปเดียวกับรูปที่ใช้แสดงบน Desktop ทำให้เสียเวลา
การทำ Responsive Website นั้น มี 4 วิธี
- Responsive Retrofitting
- Responsive Mobile Site
- Mobile First Responsive Site
- Piecemeal
เลือกวิธีการทำเว็บ RESPONSIVE แบบไหนดี
- งบประมาณในการพัฒนาเว็บไซต์
- รูปแบบองค์กร (มีผลว่าเทคนิคไหนจะล่มไม่ล่ม จะมีงบประมาณต่อในปีหน้ามั้ย)
- ความสามารถของสมาชิกในทีม
- ผลลัพธ์ที่เราต้องการจากการทำเว็บไซต์แบบ Responsive (เช่น ทำให้คนซื้อสินค้าในเว็บได้ง่ายขึ้น หรือเว็บไซต์โหลดเร็วขึ้นบนมือถือ)
