ด้วยความก้าวหน้าของเทคโนโลยีในปัจจุบัน และพฤติกรรมการใช้เครื่องมือสื่อสารที่หลากหลายมากขึ้น การเข้าถึงเว็บเบราว์เซอร์ผ่านอุปกรณ์หลากหลายชนิด จึงมีขนาดแตกต่างกันออกไป เช่น หน้าจอคอมพิวเตอร์ มือถือ สมาร์ตโฟน แท็บเล็ต โดยเฉพาะโทรศัพท์มือถือ ที่เข้ามามีบทบาทในการเข้าถึง Social Media เป็นอย่างมาก ส่งผลต่อการแสดงผลในเว็บไซต์นั้น ๆ จึงจำเป็นต้องมีความยืดหยุ่นกับหน้าจอ ให้เหมาะสมกับอุปกรณ์ที่ต้องการเปิด
นักออกแบบเว็บไซต์ต้องการลดความยุ่งยากในการใช้เว็บไซต์กับเครื่องมือสื่อสารขนาดเล็ก Responsive Website จึงเป็นแนวคิดการออกแบบเว็บแบบใหม่ ให้เหมาะสมกับอุปกรณ์ที่แตกต่างกัน โดยไม่คำนึงถึงความละเอียด เช่น การกำหนดขนาดของรูปภาพให้มีความสัมพันธ์กับขนาดของหน้าจอแสดงผล อีกทั้งยังแก้ไขปัญหาการใช้ลิงก์เชื่อมโยง URL ระหว่างจอคอมพิวเตอร์และมือถือให้แตกต่างกัน สังเกตง่าย ๆ คือ ตัวอักษรนำหน้าของลิงก์นั้น ๆ “www.” เอาไว้ดูจากหน้าจอคอม ส่วน “m.” เอาไว้ดูผ่านมือถือนั่นเอง
กล่าวคือ Responsive Website เข้ามาเป็นตัวช่วยที่ดี ให้ผู้ชมได้เข้าถึงเว็บเบราว์เซอร์ผ่านอุปกรณ์ที่มีขนาดแตกต่างกันได้ง่ายมากขึ้น เช่น การเข้าเว็บไซต์ในหน้าจอคอมพิวเตอร์และจอโทรศัพท์มือถือจะมีความยืดหยุ่น และแสดงผลตามขนาดหน้าจอของอุปกรณ์นั้น ๆ ไม่ต้องซูมเข้าซูมออกอีกต่อไป
หลักการทำงานของ Responsive Web Design
- การออกแบบ Grid แบบ Relative คือการที่ไม่ได้กำหนดขนาดของ Grid แบบตายตัว แต่จะกำหนดให้สัมพันธ์กับสิ่งอื่นๆ เช่น กำหนดความกว้างแบบเป็น % หรือการใช้ font-size หน่วยเป็น em เป็นต้น
- การทำ Flexible Images หรือการกำหนดขนาดรูปภาพ ให้มีความสัมพันธ์กับขนาดของหน้าจอแสดงผล
- การใช้ CSS3 Media Queries ช่วยให้เราสามารถกำหนด style sheets เริ่มจากเขียน style sheets สำหรับ Devices ที่มีขนาดหน้าจอที่เล็กจนไปถึงขนาดใหญ่ ซึ่งจะช่วยลดความซ้ำซ้อนของโค้ด และเป็นการง่ายเมื่อมีการแก้ไขโค้ดในภายหลัง
ข้อเสียของ Responsive Website
ในกรณีที่โทรศัพท์มือถือมีหน้าจอขนาดเล็ก แม้เราจะซ่อนเนื้อหาบางส่วนที่ไม่ต้องการ หรือการปิดหน้าโฆษณาในเว็บ ๆ นั้นไว้แล้ว แต่ในบางเว็บเบราว์เซอร์ ข้อมูลเหล่านี้ยังไม่หายไป สาเหตุมาจากการรองรับในหลาย ๆ Devices แต่ใช้เพียงโค้ดเดียวนั่นเอง นอกจากนี้ยังมีเรื่องของ Image Resizing บางครั้งที่เราไม่ได้ลด File Size ของตัวรูปภาพจริง ๆ เป็นเหตุให้โทรศัพท์มือถือโหลดรูปภาพแบบเดียวกับรูปที่ใช้แสดงบน Desktop โดยอัตโนมัติ อาจทำให้เสียเวลาโดยไม่จำเป็น
