Responsive Web Design คืออะไร

คาดว่าหลายๆ คน คงเคยได้ยินคำนี้มาก่อนแล้วนะครับ จริงๆ แล้ว Responsive Web Design ไม่ใช่เรื่องใหม่ครับ แต่บทความนี้ ผมจะสรุปง่ายๆ สั้นๆ เพื่อให้เพื่อนๆ ได้ทำความรู้จักกับ Responsive Web Design และลองนำไปใช้กับเว็บไซต์ตัวเองดูนะครับ

ความหมาย และ ความสำคัญ ของ 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 ไม่ใช่พระเจ้า!

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

ถึงตอนนี้ เพื่อนๆ คงจะพอเข้าใจเกี่ยวกับ Responsive Web Design อย่างคร่าวๆ แล้วใช่มั้ยครับ ถ้าใครสนใจจะเริ่มลงมือทำจริงๆ สามารถอ่านต่อได้ที่ Responsive web design ง่ายๆ ใน 6 ขั้นตอน ครับ

(Visited 45,946 times, 13 visits today)

5 Responses to “Responsive Web Design คืออะไร”

  1. NeeOn says:

    แล้วอะไรที่ตอบโจทย์ Mobile Web ได้ทั้งหมดค่ะ

    • Boonterm Termboon says:

      ในขณะนี้ผมว่ามันยังไม่มีอะไรที่สามารถตอบโจทย์ได้ทั้งหมดครับ เพราะเทคโนโลยีมันเปลี่ยนแปลงไปเรื่อยๆ หากเว็บไซต์ที่จะสร้างเป็นเว็บที่มีการใช้งานในระยะยาว การ Re-design เว็บไซต์ก็เป็นอีกส่วนหนึ่งที่ช่วยให้เว็บมีความทันสมัยและเหมาะสมกับเทคโนโลยีในช่วงเวลานั้นๆ

      ฉะนั้นคำตอบก็น่าจะเป็นการเลือกใช้เทคโนโลยีให้เหมาะสมกับสิ่งที่ User หรือเป้าหมายของเว็บไซต์ที่เรากำลังจะทำให้มากที่สุดครับ นอกเหนือจากนี้ก็อยู่ที่ปัจจัยอื่นๆ ที่ต้องพิจารณาร่วมด้วยเช่นระยะเวลาของงานรวมถึงงบประมาณด้วยครับ

  2. เยี่ยมครับ

Leave a Reply