Responsive Web Design อธิบายง่ายๆ คือการออกแบบเว็บไซต์ให้รองรับขนาดหน้าจอสำหรับอุปกรณ์ทุกชนิด ตั้งแต่ คอมพิวเตอร์ที่มีขนาดจอหลากหลาย ไปจนถึง Tablet ซึ่งมีมาตรฐานของขนาดหน้าจอที่แตกต่างกัน และโทรศัพท์มือถือ Smart Phone ต่างๆ
หลักการของ 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
1. Responsive Web Design ได้รับการรับรองจาก google ช่วยให้ติด index google ได้ทั้ง desktop และ mobile ในหน้าเดียว
2. การทำ Responsive เพียงแค่ไซต์เดียวก็รองรับทุกอุปกรณ์ และไม่ต้องทำหลายๆหน้า ช่วยให้ไม่หนักเซิฟเวอร์
3. ประหยัดค่าใช้จ่ายในการจัดทำ โดยที่ไม่ต้องทำหน้าต่างแยกกันระหว่าง mobile และ desktop
4. ลดระยะเวลาในการทำงานหลายๆ หน้า โดยที่วางแผนครั้งเดียว และทำเพียงแค่หน้าเดียวเท่านั้น
5. รวดเร็วในการดูแล จัดการเว็บไซต์ ไม่ยุ่งยาก และไม่ต้องไปเปลี่ยนแปลงเว็บไซต์หลายๆ หน้า
6. รองรับผู้ใช้ทุกอุปกรณ์ เพราะผู้คนจากหลายอุปกรณ์ก็มีความต้องการเดียวกัน
7. เว็บไซต์ไม่ต้อง redirect หน้าไปหาหน้า mobile ช่วยให้เซิฟเวอร์ไม่ทำงานหนัก
8. Googlebot-Mobile จะสนใจกับไซต์ที่รองรับอุปกรณ์ประเภท mobile ช่วยทำให้การค้นหาผ่าน mobile เป็นไปได้ง่ายมากยิ่งขึ้น
ข้อจำกัดในการออกแบบเว็บไซต์เพื่อรองรับการทำ Responsive Web Design
1. เว็บไซต์จะต้องไม่เป็น Flash เนื่องจากการออกแบบไม่ยืดหยุ่น ที่สำคัญ Tablet และ มือถือ ที่ได้รับความนิยมอย่าง iPhone และ iPad นั้น ไม่รองรับการใช้งาน Flash อีกด้วย
2. การออกแบบเว็บไซต์จะต้องถูกวางเป็น Block เป็นกล่อง แต่หากจะออกแบบให้แปลกแหวกแนวออกไป จะทำได้ค่อนข้างยากและซับซ้อน
3. ต้องมีการวางแผนการออกแบบให้ดี เพราะหากต้องมาปรับเปลี่ยนแก้ไขทีหลัง จะยุ่งยากมาก
4. ต้องเขียนโปรแกรมมิ่งด้วย HTML 5
5. ต้องทดสอบให้ใช้งานได้ในอุปกรณ์ทุกประเภท
อย่างไรก็ตาม Responsive Web Design ถือเป็นเรื่องที่ดี เป็นอีกทางเลือกใหม่ที่คนทำเว็บไซต์ และ ลูกค้า ควรต้องใส่ใจ และศึกษา เพื่อรองรับสิ่งที่กำลังจะมาถึงในอนาคตอันใกล้ เพราะการออกแบบที่ดี คือการออกแบบที่มีทั้งความสวยและการใช้งานที่เหมาะสม