Responsive web design บทที่ 1
Responsive web design หรือ Responsive layout คำๆนี้อาจเริ่มฮิตในช่วงนี้และต่อๆไปในอนาคต เพราะมันหมายถึง การออกแบบเว็บเพื่อให้รองรับกับอุปกรณ์ที่มีการแสดงผลแตกต่างกันหลายขนาดหน้าจอ เช่นบน Desktop บน Tablet หรือบนมือถือ บนหน้าเว็บเดียวกัน
ทำไมต้องทำเว็บให้เป็น Responsive
เรามักจะถูกสอนกันมาว่าการออกแบบ layout ที่เหมาะสมที่สุดคือขนาด 900 พิกเซล หรือ 960 พิกเซล แต่ขนาดของ Layout ขนาดนี้ มันถูกออกแบบมาเพื่อการแสดงผลบน Desktop ครับ ซึ่งถ้าสมัยนี้มีแต่ Desktop เพียงอย่างเดียวเราคงไม่ต้องมานึกถึง Responsive กันหรอก แต่เนื่องจากราคาของ Tablet ที่ถูกลงรวมถึงการที่โทรศัพท์มือถือสามารถเข้าถึงเว็บไซต์ได้ดีและสวยงามยิ่งขึ้นพอๆกันกับบน Desktop ทำให้ความนิยมในการใช้งานมือถือหรือ Tablet เพื่อเปิดเว็บไซต์สูงขึ้นการละเลยไม่ให้เว็บไซต์ของเราเปิดดูบนมือถือได้ ดูจะทำให้ผู้มาเยือน(หรือลูกค้า)หดหายไปไม่ใช่น้อย
ในสมัยก่อนการออกแบบเว็บสำหรับมือถือมักจะถูกแยกออกจากเว็บปกติ และถูกออกแบบแยกต่างหาก เช่นถ้าต้องเข้าเว็บสำหรับมือถือต้องเรียกไปที่ m.domain.tld เป็นต้น แต่ในปัจจุบัน ด้วยความสามารถของ HTML5 และ CSS3 ทำให้การออกแบบเว็บเพียงเว็บเดียวเพื่อแสดงผลบนทุกอุปกรณ์ทำได้ง่ายขึ้น
จริงๆแล้วเว็บไซต์ต่างๆในปัจจุบันก็สามารถเปิดดูบนมือถือกันได้อยู่แล้วแหละครับ เพียงแต่มัน "ไม่ค่อยสะดวก" ยกตัวอย่างเช่น เปิดเว็บขึ้นมาแล้วต้องคอยซูมเข้าซูมออกเพื่ออ่านเนื้อหา หรือไม่ก็รูปภาพที่แสดงมีขนาดใหญ่โตซะจนโทรศัพท์ 10 เครื่อง เรียงต่อกันยังดูไม่หมด (แต่มันสามารถดุได้บน Desktop อย่างสบายตา) ซึ่งถ้าคุณคิดจะทำเว็บให้สามารถดูได้บนมือถืออย่าสะดวกคุณอาจต้องคำนึงถึงสิ่งเหล่านี้
ถ้านึกภาพเว็บแบบ Response ไม่ถูกก็ลองใช้มือถือเปิดเว็บของผมดูครับ ซึ่งปัจจุบันผมได้ออกแบบให้เป็น Responsive แล้ว หรือถ้าไม่มีมือถือก็สามารถลองปรับขนาดของบราวเซอร์ให้เล็กลงเพื่อดูการแสดงผลของเว็บที่ขนาดหน้าจอต่างๆกันได้เลยครับ
ข้อดีของ Responsive Web Design
ข้อเสียของ Responsive Web Design
ทำไมต้องทำเว็บให้เป็น Responsive
เรามักจะถูกสอนกันมาว่าการออกแบบ layout ที่เหมาะสมที่สุดคือขนาด 900 พิกเซล หรือ 960 พิกเซล แต่ขนาดของ Layout ขนาดนี้ มันถูกออกแบบมาเพื่อการแสดงผลบน Desktop ครับ ซึ่งถ้าสมัยนี้มีแต่ Desktop เพียงอย่างเดียวเราคงไม่ต้องมานึกถึง Responsive กันหรอก แต่เนื่องจากราคาของ Tablet ที่ถูกลงรวมถึงการที่โทรศัพท์มือถือสามารถเข้าถึงเว็บไซต์ได้ดีและสวยงามยิ่งขึ้นพอๆกันกับบน Desktop ทำให้ความนิยมในการใช้งานมือถือหรือ Tablet เพื่อเปิดเว็บไซต์สูงขึ้นการละเลยไม่ให้เว็บไซต์ของเราเปิดดูบนมือถือได้ ดูจะทำให้ผู้มาเยือน(หรือลูกค้า)หดหายไปไม่ใช่น้อย
ในสมัยก่อนการออกแบบเว็บสำหรับมือถือมักจะถูกแยกออกจากเว็บปกติ และถูกออกแบบแยกต่างหาก เช่นถ้าต้องเข้าเว็บสำหรับมือถือต้องเรียกไปที่ m.domain.tld เป็นต้น แต่ในปัจจุบัน ด้วยความสามารถของ HTML5 และ CSS3 ทำให้การออกแบบเว็บเพียงเว็บเดียวเพื่อแสดงผลบนทุกอุปกรณ์ทำได้ง่ายขึ้น
จริงๆแล้วเว็บไซต์ต่างๆในปัจจุบันก็สามารถเปิดดูบนมือถือกันได้อยู่แล้วแหละครับ เพียงแต่มัน "ไม่ค่อยสะดวก" ยกตัวอย่างเช่น เปิดเว็บขึ้นมาแล้วต้องคอยซูมเข้าซูมออกเพื่ออ่านเนื้อหา หรือไม่ก็รูปภาพที่แสดงมีขนาดใหญ่โตซะจนโทรศัพท์ 10 เครื่อง เรียงต่อกันยังดูไม่หมด (แต่มันสามารถดุได้บน Desktop อย่างสบายตา) ซึ่งถ้าคุณคิดจะทำเว็บให้สามารถดูได้บนมือถืออย่าสะดวกคุณอาจต้องคำนึงถึงสิ่งเหล่านี้
- ไม่ต้องคอยซูมเข้าซูมออกเว็บเพื่อให้อ่านเนื้อหาได้ครบถ้วนตลอดทั้งเว็บ หรืออ่านตัวอักษรตัวกระจิดริด
- การนำทางที่ง่าย ชัดเจนและกระชับ เนื่องจากบนอุปกรณ์ขนาดเล็กเราอาจไม่สามารถแสดงเมนูที่ซับซ้อนได้
- Layout ที่สามารถปรับขนาดได้ตามขนาดจอ (หรือที่เคยเรียกว่า Liquid Layout) เพื่อให้สามารถแสดงผลได้สมบูรณ์กับหน้าจอหลากหลายขนาด
ถ้านึกภาพเว็บแบบ Response ไม่ถูกก็ลองใช้มือถือเปิดเว็บของผมดูครับ ซึ่งปัจจุบันผมได้ออกแบบให้เป็น Responsive แล้ว หรือถ้าไม่มีมือถือก็สามารถลองปรับขนาดของบราวเซอร์ให้เล็กลงเพื่อดูการแสดงผลของเว็บที่ขนาดหน้าจอต่างๆกันได้เลยครับ
ข้อดีของ Responsive Web Design
- แน่นอนว่ามันรองรับกับหน้าจอหลายขนาดบนเว็บเดียว ไม่จำเป็นต้องอออกแบบสำหรับมือถิอ สำหรับ Tablet และ สำหรับ Desktop แยกกัน ลดเวลาการอัปเดทข้อมูลหลายๆที่ ดูแลง่าย
- เพิ่มโอกาสจะได้ลูกค้าใหม่ๆ หรือผู้เยี่ยมชมใหม่ๆ อันเนื่องมาจากการที่เว็บสามารถเปิดดูบนมือถือได้ทำให้สามารถเปิดดูได้ทุกที่ทุกเวลา ซึ่งถ้าคุณเป็นเว็บขายของ โอกาสที่จะได้ลูกค้าใหม่ๆก็เพิ่มขึ้นด้วย (ผลดีด้าน SEO)
ข้อเสียของ Responsive Web Design
- ข้อจำกัดอันเกิดจากอุปกรณ์แสดงผลที่มีขนาดเล็ก อาจทำให้ไม่สามารถใช้ Javascript หรือ แฟลช หรือรูปภาพที่มีขนาดใหญ่หรือหวือหวาได้
- การออกแบบ Layout ที่ยุ่งยากขึ้น และอาจต้องเรียนรู้การใช้งาน Javascript, HTML5 และ CSS3 ในระดับที่สูงขึ้น
- การปรับปรุงหรือแก้ไขในภายหลังอาจยุ่งยากขึ้น เนื่องจากการที่ Layout แต่ละตัวจะต้องสัมพันธ์กัน การแทรกหรือแก้ไขที่ผิดเพียงนิดเดียวอาจทำให้เว็บพังไม่เป็นท่าได้