ความหมาย และ ความสำคัญ ของ Responsive Web Design
Responsive Web Design คือ การออกแบบเว็บไซต์ด้วยแนวคิดใหม่ ออกแบบเพียงครั้งเดียว แต่สามารถใช้ได้กับทุกขนาดของหน้าจอ บนอุปกรณ์ที่แตกต่างกัน ทำให้เว็บไซต์สามารถแสดงผลได้อย่างเหมาะสม และสามารถตรวจจับขนาดของหน้าจอ และปรับขนาด และ Layout ให้เหมาะสมตามขนาดของหน้าจอโดยอัตโนมัติ โดยอาศัยการทำงานร่วมกันระหว่างเทคโนต่างๆ ดังต่อไปนี้ คือ Layout ของเว็บแบบ Flexible Grid, รูปภาพแบบ Flexible Image และ CSS3 Media Query
ถ้าเป็นสมัยก่อน เราต้องทำเว็บไซต์ออกมาหลายๆ version เช่น Desktop version กับ Mobile version เพื่อให้เว็บไซต์ของเรา สามารถแสดงผลได้อย่างเหมาะสมกับ Device นั้นๆ ซึ่งวิธีนี้จะทำให้ต้นทุนเพิ่มขึ้น ทั้งในด้านเวลาและค่าจ้างในการพัฒนา
บางคนอาจถามว่า ปัจจุบัน เราก็สามารถดูเว็บไซต์ต่างๆบนมือถือได้อยู่แล้ว โดยไม่เห็นต้องออกแบบเว็บไซต์ให้เป็นแบบ Responsive ให้ยุ่งยาก ซึ่งก็ถูกต้อง แต่สำหรับเว็บไซต์ที่ไม่ได้รับการออกแบบมาในแบบ Responsive เวลาดูข้อมูล จะต้องใช้การ Zoom เข้ามาดูทีละส่วน เพราะว่าไม่มีความสามารถในการปรับรูปแบบให้เหมาะสมตามขนาดของหน้าจอนั่นเอง ซึ่งแตกต่างจากเว็บไซต์ที่ได้รับการออกแบบมาในแบบ Responsive ซึ่งจะสามารถปรับ ขนาดของรูปภาพ และ Layout ของเว็บ ให้เหมาะสมตามขนาดของหน้าจอ ทำให้ดูข้อมูลได้สะดวกมากยิ่งขึ้นนั่นเอง
เว็บไซต์ที่ออกแบบมาตามปกติ โดยไม่ได้ใช้เทคนิค Responsive เวลาแสดงผลบน Mobile Device จะเป็นเพียงแค่การ ย่อ ขนาด เพื่อให้สามารถแสดงผลได้บนหน้าจอเท่านั้น แต่จะไม่สามารถปรับรูปแบบ หรือ Layout ให้เหมาะสมตามขนาดหน้าจอ ในขณะนี้เว็บที่ได้รับการออกแบบมาโดยใช้เทคนิคการออกแบบเว็บไซต์แบบ Responsive จะสามารถปรับ Layout และ ขนาดของรูปภาพ ให้เหมาะสม ตามขนาดของหน้าจอ ทำให้มี User Experience ที่ดีกว่า
หลักการของ 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 ทำให้เสียเวลาโดยไม่จำเป็น
ไม่มีความคิดเห็น:
แสดงความคิดเห็น