ความหมาย
และ ความสำคัญ ของ Responsive Web Design
ในปัจจุบัน Mobile Internet
Users ได้มีจำนวนเพิ่มขึ้นอย่างรวดเร็ว และมีแนวโน้มที่จะแซง Desktop
Internet Users ในปี 2013 อีกด้วย ซึ่ง Mobile
Devices นั้นมีความหลากหลายมาก ไม่ว่าจะเป็น
ขนาดและความละเอียดของหน้าจอแสดงผล(screen size and resolution) แนวของการแสดงผล(orientation) หรือแม้แต่ระบบปฏิบัติการ(OS)
ถ้าเป็นสมัยก่อน
เราต้องทำเว็บไซต์ออกมาหลายๆ version เช่น Desktop
version กับ Mobile version เพื่อให้เว็บไซต์ของเรา
สามารถแสดงผลได้อย่างเหมาะสมกับ Device นั้นๆ
ซึ่งวิธีนี้จะทำให้ต้นทุนเพิ่มขึ้น ทั้งในด้านเวลาและค่าจ้างในการพัฒนา
Responsive Web Design คือ
การออกแบบเว็บไซต์ด้วยแนวคิดใหม่ ที่จะทำให้เว็บไซต์ สามารถแสดงผลได้อย่างเหมาะสม
บนอุปกรณ์ที่แตกต่างกัน โดยใช้ โค้ดร่วมกัน URL เดียวกัน
เพื่อแก้ปัญหาดังกล่าว
หลักการของ 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 ทำให้เสียเวลาโดยไม่จำเป็น
ประโยชน์ของเว็บไซต์ Responsive Web Design
ปัจจุบันระบบเว็บไซต์ได้มาถึงยุคที่จะต้องรองรับการใช้งานผ่านอุปกรณ์เคลื่อนที่
เช่น สมาร์โฟน ยี่ห้อต่างๆ, แท็บเล็ต, iPad และ iPhone ได้โดยที่หน้าตาของเว็บไซต์จะ
ต้องมีการปรับรูปแบบการแสดงผลตามอุปกรณ์โดยอัตโนมัติ
ไม่ใช่การย่อขนาดหน้าเว็บไซต์แบบเดิมๆ ซึ่งจะทำให้ตัวหนังสือเล็ก ใช้งานยาก
เนื่องด้วยความก้าวหน้าทางด้านเทคโนโลยี
ทำให้ทุกสิ่งทุกอย่างเปลี่ยนไป เราในฐานะมนุษย์ที่ต้องใช้ประโยชน์จากเทคโนโลยี
จึงต้องก้าวตามให้ทัน เพราะเมื่อโลกเปลี่ยน เราก็ต้องเปลี่ยนตาม
เว็บไซต์ก็เช่นเดียวกันเมื่อถึงเวลาที่ต้องเปลี่ยนเราก็จำต้องเปลี่ยน
เพื่อสิ่งที่ดีกว่า
Responsive Web Design คือ
การออกแบบเว็บไซต์ให้รองรับขนาดหน้าจอของอุปกรณ์ทุกชนิด
ตั้งแต่คอมพิวเตอร์ที่มีขนาดหน้าจอหลากหลาย ไปจนถึงโทรศัพท์มือถือ Smart
Phone และ Tablet ต่างๆ
ที่มีมาตรฐานขนาดหน้าจอที่แตกต่างกัน พูดได้ว่าออกแบบครั้งเดียวสามารถนำไปใช้ได้กับทุกหน้าจอเลยทีเดียว
Responsive Web Design ไม่ใช่พระเจ้า!
เพื่อนๆ คงจะเห็นแล้วนะครับว่า Responsive
Web Design มีข้อดีอย่างไร และข้อเสียอย่างไร ทุกวันนี้
คนส่วนใหญ่เข้าใจว่า Responsive Web จะมาแทนที่ Mobile
Web ซึ่งผมคิดว่ามันก็ยังไม่ถูกซะทีเดียว Responsive Web ยังมีข้อจำกัดในเรื่องของ performance รวมไปถึงเหตุผลทางเทคนิคบางประการทำให้มันยังไม่สามารถทำในสิ่งที่
Mobile Web สามารถทำได้ทั้งหมดครับ
จะเห็นได้ว่าเว็บไซต์อย่าง facebook และ youtube ยังมี Mobile Version อยู่ เพราะต้องการให้ผู้ใช้งาน
ได้รับประสบการณ์การใช้งานที่ดีที่สุด ซึ่ง Responsive Web ยังทำในจุดนี้ไม่ได้ทั้งหมด
หากจะเปรียบกับสูท Responsive Web ก็เหมือนกับสูทแบบฟรีไซส์
ส่วน Mobile Web ก็เหมือนกับสูทแบบสั่งตัด ดังนั้น
หากเพื่อนๆ คิดจะทำ Responsive Web อย่าลืมพิจารณาก่อนนะครับว่า
มันตอบโจทย์ของเรามั้ย
แหล่งที่มา : www.thaiwebwizard.com/ResponsiveWebDesign.asp
และ http://www.siamhtml.com/responsive-web-design-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/
ไม่มีความคิดเห็น:
แสดงความคิดเห็น