Responsive Web Design คือ
การออกแบบ Web
Page ให้แสดงผลออกมาให้เหมาะสมกับขนาดหน้าจออุปกรณ์ซึ่งปัจจุบันมีขนาดที่แตกต่างกันออกไปเช่น
คอมพิวเตอร์ มือถือ แท็บเล็ต เครื่องเล่นเกมพกพา เป็นต้นซึ่งปัจจุบัน Browser ได้พัฒนาให้สามารถใช้ได้กับหลากหลายอุปกรณ์
แต่ที่เราเจอกันจะพบปัญหาการแสดงผลหน้าเว็บที่ไม่ตรงกับอุปกรณ์เช่น
ขนาดตัวหนังสือเล็กไป, ปุ่มต่างๆก็เล็กลง
หรือแม้กระทั่งการแสดงผลข้อมูลไม่ครบถ้วน เป็นต้น
หลักการของ Responsive
Web Design
การจะทำ Responsive
Web Design มักใช้เทคนิคหลายๆ อย่าง ร่วมกัน ไม่ว่าจะเป็น Fluid
Grid, Flexible Images และ CSS3
Media Queries
เริ่มแรกคือการทำ Fluid
Grid ซึ่งก็คือการออกแบบ Grid ให้เป็นแบบ Relative ซึ่งก็คือการที่ไม่ได้กำหนดขนาดของ Grid แบบตายตัว
แต่จะกำหนดให้สัมพันธ์กับสิ่งอื่นๆ เช่น กำหนดความกว้างแบบเป็น % หรือการใช้ font-size หน่วยเป็น em เป็นต้น
ต่อมาคือการทำ Flexible
Images หรือการกำหนดขนาดของ Images ต่างๆ
ให้มีความสัมพันธ์กับขนาดของหน้าจอแสดงผล หากรูปต้นฉบับมีขนาดใหญ่มาก
เวลาแสดงในมือถือที่มีจอขนาดเล็ก ก็ควรลดขนาดลงมา เพื่อให้แสดงผลได้อย่างสวยงาม
เป็นต้น
สุดท้ายคือการใช้ CSS3
Media Queries ซึ่งจะช่วยให้เราสามารถกำหนด style
sheets สำหรับ Devices ต่างๆ
ได้ โดยส่วนใหญ่ เราจะเขียน style sheets พื้นฐานเอาไว้
ซึ่งกลุ่มนี้ จะไม่ขึ้นอยู่กับ Devices ใดๆ
หลังจากนั้นให้เราเขียน style sheets สำหรับ Devices ที่มีขนาดหน้าจอที่เล็กสุด
เพิ่มขึ้นไปเรื่อยๆ จนถึงขนาดใหญ่สุด ซึ่งการเขียนแบบนี้
จะช่วยลดความซ้ำซ้อนของโค้ด และยังทำให้การแก้โค้ดในภายหลังทำได้ง่ายอีกด้วย
ข้อเสียของ Responsive
Web Design
อย่างไรก็ตาม Responsive
Web Design ก็ยังมีข้อเสียอยู่บ้าง เนื่องจากการเขียนโค้ดเดียว ให้รองรับหลายๆ Devices จึงอาจทำให้เกิดปัญหา
เช่น โทรศัพท์มือถือที่มีหน้าจอขนาดเล็ก
ถึงแม้เราจะซ่อนเนื้อหาบางส่วนที่ไม่จำเป็นเอาไว้ เช่น โฆษณา
แต่ในบางเว็บบราวเซอร์ ข้อมูลเหล่านี้ยังจะถูกโหลดเข้ามาอยู่ รวมไปถึงเรื่องของ Image
Resizing ที่เราไม่ได้ไปลด File Size ของตัว Image จริงๆ
ทำให้โทรศัพท์มือถือจำเป็นต้องโหลดรูปเดียวกับรูปที่ใช้แสดงบน Desktop ทำให้เสียเวลาโดยไม่จำเป็น
ที่มา : http://www.siamhtml.com/responsive-web-design-