หลักการ

การทำ Responsive Web Design ใช้เทคนิคหลายอย่าง ทั้ง Fluid Grid, Flexible Images , CSS3 Media Queries

1.ทำ Fluid Grid
ออกแบบ Grid ให้เป็นแบบ Relative
ไม่ได้กำหนดขนาดของ Grid แบบตายตัว แต่จะกำหนดให้สัมพันธ์กับสิ่งอื่นๆ
เช่น กำหนดความกว้างแบบเป็น % หรือการใช้ font-size หน่วยเป็น em เป็นต้น

2.ทำ Flexible Images
หรือการกำหนดขนาดของ Images ต่างๆ ให้มีความสัมพันธ์กับขนาดของหน้าจอแสดงผล หากรูปต้นฉบับมีขนาดใหญ่มาก เมื่อแสดงในมือถือที่มีจอขนาดเล็ก ก็จะลดขนาดลงมา

3.ใช้ CSS3 Media Queries
ช่วยให้กำหนด style sheets สำหรับ Devices ต่างๆ ได้
ส่วนใหญ่ เราจะเขียน style sheets พื้นฐานเอาไว้ ซึ่งกลุ่มนี้ จะไม่ขึ้นอยู่กับ Devices ใดๆ
หลังจากนั้นให้เราเขียน style sheets สำหรับ Devices ที่มีขนาดหน้าจอที่เล็กสุด เพิ่มขึ้นไปเรื่อยๆ จนถึงขนาดใหญ่สุด ซึ่งการเขียนแบบนี้ จะช่วยลดความซ้ำซ้อนของโค้ด และยังทำให้การแก้โค้ดในภายหลังทำได้ง่าย

ข้อเสีย

-การเขียนโค้ดเดียว ให้รองรับหลายๆ Devices ทำให้เกิดปัญหา
เช่น โทรศัพท์มือถือที่มีหน้าจอขนาดเล็ก ถึงแม้เราจะซ่อนเนื้อหาบางส่วนที่ไม่จำเป็นเอาไว้ เช่น โฆษณา แต่ในบางเว็บบราวเซอร์ ข้อมูลเหล่านี้ยังจะถูกโหลดเข้ามาอยู่ รวมไปถึงเรื่องของ Image Resizing ที่เราไม่ได้ไปลด File Size ของตัว Image จริงๆ ทำให้โทรศัพท์มือถือจำเป็นต้องโหลดรูปเดียวกับรูป ที่โหลดเมื่อใช้งานบน Desktop (รูปเดียวกัน)

Responsive Web ไม่สามารถจะมาแทนที่ Mobile Web ได้

Responsive Web ยังมีข้อจำกัดในเรื่อง
– performance (สู้ Mobile site ไม่ได้)
และเหตุผลทางเทคนิคบางประการ ทำให้มันยังไม่สามารถทำในสิ่งที่ Mobile Web สามารถทำได้ทั้งหมด
เว็บไซต์ facebook และ youtube ยังมี Mobile Version อยู่ เพราะต้องการให้ผู้ใช้งาน ได้รับประสบการณ์การใช้งานที่ดีที่สุด (เปิดหน้าเว็บได้เร็ว ตัดส่วนที่ไม่จำเป็นออก) ซึ่ง Responsive Web ยังทำในจุดนี้ไม่ได้ทั้งหมด หากจะเปรียบกับสูท Responsive Web ก็เหมือนกับสูทแบบฟรีไซส์ ส่วน Mobile Web ก็เหมือนกับสูทแบบสั่งตัด หาก จะทำเว็บไซต์ ต้องพิจารณาก่อน ว่า Responsive Web ตอบโจทย์ของเราไหม?