Responsive Web Design คือ การออกแบบ Web Page ให้แสดงผลออกมาให้เหมาะสมกับขนาดหน้าจออุปกรณ์ที่มีแตกต่างกันออกไป
เช่น คอมพิวเตอร์ มือถือ แท็บเล็ต เครื่องเล่นเกมพกพา เป็นต้นซึ่งปัจจุบัน Browser
ได้พัฒนาให้สามารถใช้ได้กับหลากหลายอุปกรณ์ แต่ที่เราเจอกันจะพบปัญหาการแสดงผลหน้าเว็บที่ไม่ตรงกับอุปกรณ์
เช่น ขนาดตัวหนังสือเล็กไป ปุ่มต่างๆก็เล็กลง
หรือแม้กระทั่งการแสดงผลข้อมูลไม่ครบถ้วน เป็นต้น
Responsive Web Design ทำอะไรได้
Responsive Web Design จะแก้ไขปัญหาการพัฒนาเว็บแบบเก่า
เพื่อให้แสดงบนอุปกรณ์ทุก Platform และกำลังได้รับความนิยมในขณะนี้
จุดประสงค์เพื่อ
ทำให้ผู้ใช้งานสามารถดูเนื้อหาของเว็บไซต์ได้ง่ายที่สุดและแสดงผลหน้าเว็บในขนาดหน้าจอที่แตกต่างกันไป
โดยที่ผู้ใช้งานไม่ต้องมาถ่างหน้าจอเพื่อดูข้อมูลที่ขนาดเล็กจิ๊ดเดียวอีก
ซึ่งมีข้อดีคือ พัฒนาครั้งเดียว ทำให้ประหยัดเวลา และค่าใช้จ่ายอย่างมาก
แต่สามารถปรับการแสดงผลให้เหมาะสมกับอุปกรณ์อื่นๆ เช่นเดียวกับการพัฒนา2เวอร์ชั่น คือ คอมพิวเตอร์ กับ มือถือ
หลักการของ 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
เนื่องจากการเขียนโค้ดเดียว
ให้รองรับหลายๆ Devices จึงอาจทำให้เกิดปัญหา เช่น
โทรศัพท์มือถือที่มีหน้าจอขนาดเล็ก ถึงแม้จะซ่อนเนื้อหาบางส่วนที่ไม่จำเป็นเอาไว้
เช่น โฆษณา แต่ในบางเว็บบราวเซอร์ ข้อมูลเหล่านี้ยังจะถูกโหลดเข้ามาอยู่
รวมไปถึงเรื่องของ Image Resizing ที่ไม่ได้ไปลด File
Size ของตัว Image จริงๆ
ทำให้โทรศัพท์มือถือจำเป็นต้องโหลดรูปเดียวกับรูปที่ใช้แสดงบน Desktop ทำให้เสียเวลาโดยไม่จำเป็น
ไม่มีความคิดเห็น:
แสดงความคิดเห็น