คือการออกแบบเว็บไซต์ให้รองรับขนาดหน้าจอสำหรับอุปกรณ์ทุกชนิด ตั้งแต่ คอมพิวเตอร์ที่มีขนาดจอหลากหลาย ไปจนถึง Tablet ซึ่งมีมาตรฐานของขนาดหน้าจอที่แตกต่างกัน และโทรศัพท์มือถือ Smart Phone ต่างๆ พูดได้ว่าออกแบบครั้งเดียวสามารถใช้ได้กับทุกหน้าจอกันไปเลย
ลองดูตัวอย่างจากรูปภาพนี้
รูปด้านบนนี้เป็นตัวอย่างการแสดงผลบนหน้าจอของแต่ละอุปกรณ์ ซึ่งจะเห็นได้ว่าหน้าเว็บไซต์จะปรับการแสดงผลให้อย่างเหมาะสมตามชนิดของอุปกรณ์ สามารถอ่านข้อมูลบนเว็บง่ายกว่าการออกแบบเว็บไซต์แบบเดิมที่คนเปิดเว็บกับมือถือต้องใช้วิธีการซูมหรือเลื่อน scroll ไปทางซ้าย/ขวาเพื่ออ่านข้อมูลให้ครบทั้งหน้าเว็บ ในขณะที่ถ้าเราออกแบบโดยใช้หลักการ Responsive Web Design เราก็จะออกแบบเพียงครั้งเดียว คนที่ดูเว็บจากอุปกรณ์ Tablet / Smart Phone ก็เพียงแค่ scroll ขึ้นลงเพื่ออ่านข้อมูลเท่านั้น แถมได้หน้าเว็บที่สวยและเหมือนกันบนอุปกรณ์ทุกชนิดอีกด้วย
อย่างไรก็ตาม การออกแบบของ Responsive Web Design ก็มีข้อจำกัดอยู่บ้าง เช่น
1. เว็บไซต์จะต้องไม่เป็น Flash อันที่จริงก็ไม่น่าจะมีปัญหาไหม เพราะสมัยนี้นิยมออกแบบเว็บไซต์แบบไม่ใช้ Flash เพราะนอกจากจะมีปัญหาเรื่องของการโหลดหน้าเว็บช้าแล้ว แล้วยังทำ SEO ยาก แถมปัจจุบันนี้อุปกรณ์ Tablet กับ Smart Phone ยอดนิยมอย่าง iPAD iPhone ก็ไม่รองรับการใช้งาน Flash
2. ข้อจำกัดของการออกแบี่ต้องวาง layout เป็นบล็อกๆ แต่ถ้าอยากทำให้เจ็งกว่านั้นก็คงต้องใช้พลังภายในของ web designer และ web programer มากหน่อย
3. โปรแกรมมิ่งก็ใช้ HTML5 / CSS3
4. ต้องมีการออกแบบที่ดีตั้งแต่แรก เพราะถ้าออกแบบผิดชีวิตก็พัง มันแก้ไขยุ่งยาก ดังนั้นจึงไม่เหมาะกับคนที่รับงานเว็บแล้วลูกค้ามีการแก้ไข layout บ่อยๆ
สรุปว่า การออกแบบเว็บไซต์ตามหลัก Responsive Web Design เป็นอีกเรื่องที่คนทำเว็บอย่างเราๆ ควรจะศึกษาไว้ และใช้กับงานเว็บไซต์ให้เหมาะสม ซึ่งในปัจจุบันเมืองนอกเขาก็จะมีเว็บไซต์ที่ออกแบบแนวนี้อยู่หลายเว็บ อันที่จริงพี่ไทยเราที่เก่งๆ ก็มีหลายเว็บนะที่ทำแบบนี้ รวมถึงพวก Theme ของ CMS อย่าง WordPress ก็มีให้เลือกซื้อเลือกโหลดกันเยอะ ลองศึกษากันดู วันนี้ขอจบเพียงเท่านี้ก่อน เอาใจช่วยคนทำเว็บทุกคนค่ะ ใครมีคำแนะนำเพิ่มเติม แลกเปลี่ยนกัน
ตัวอย่างเว็บที่ออกแบบตาม Responsive Web Design (ลองย่อหน้าต่างเล่นๆ ดู)
เป็นข้อมูลที่มีประโยชน์มากเลยค่ะ เราสามารถนำมาประยุกต์การออกแบบเว็บไซต์ได้ในชีวิตจริง
ตอบลบมีเนื้อหาที่น่าสนใจมาก สามารถมาประยุกต์ใช้ได้ค่ะ
ตอบลบข้อมูลมีประโยชน์ดีค่ะ สามารถใช้ต่อยอดในการขายได้ค่ะ ขอบคุญสำหรับข้อมูลนะคะ :))
ตอบลบเป็นข้อมูลที่มีประโยชน์มากเลย ทำไปใช้ได้ดีมากเลยนะ
ตอบลบขอบคุณสำหรับข้อมูลดีๆๆ
ตอบลบสุดยอดมาก ออกแบบครั้งเดียวเปิดได้ทั้ง คอม เเท็บเล็ต สมาร์ทโฟน น่าลองไปออกแบบดูบ้าง
ตอบลบน่าเอาไปลองใช้มากๆเลยนะ ออกเเบบเพียงครั้งเดียวปรับใช้ได้กับทุกอุปกรณ์เลย
ตอบลบดีจัง ออกแบบครั้งเดียวได้ครบทุกการแสดงผล ทั้งคอม มือถือ แท็ปเลทเลย
ตอบลบโปรเเกรมนี้ดีอ่ะ ครอบคลุมดีไม่ว่าจะใช้งานกับอ่ะไร เวิลค์มากค่ะ
ตอบลบยอดมากครับมีสรุปด้วยทำให้เข้าใจมากขึ้น
ตอบลบข้อมูลเป็นประโยชน์ดีครับ
ตอบลบเป็นบทความที่ให้ความรู้มากๆเลย ตอนนี้กำลังเรียนเกี่ยวกับด้านนี้พอดีเลยค่ะ
ตอบลบขอบคุณที่นำความรู้มาแบ่งปันนะคะ
เป็นข้อมูลที่มีประโยชน์มากเลยครับ
ตอบลบสามารถนำไปประยุกต์ใช้ในการออกแบบเว็บไซต์ได้จริง
ได้ความรู้มากเลยค่ะ :)
ตอบลบข้อมูลมีประโยชน์มากเลยๆๆ มีสาระความรู้เพิ่มขึ้นมาอีกก ขอบคุนนะค่ะ
ตอบลบน่าสนใจมากๆๆๆค่ะ ^^
ตอบลบสะดวกดีแฮะ เราไม่ต้องคอยจัดหน้าเว็บตามแต่ละขนาดของหน้าจอเลย น่านำมาใช้จริงๆ
ตอบลบเป็นข้อมูลที่มีประโยชน์มากจ้า
ตอบลบข้อมูลสามารถนำมาใช้ในการออกเว็บได้จริง มีประโยชน์มากๆเลยค่ะ ขอบคุณสำหรับข้อมูลดีดีน่ะค่ะ
ตอบลบบทความให้ความรู้มากๆเลยค่ะ ขอบคุณสำหรับบทความดีๆแบบนี้ :)
ตอบลบ