Responsive web design บทที่ 1
ทำไมต้องทำเว็บให้เป็น 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 แต่ละตัวจะต้องสัมพันธ์กัน การแทรกหรือแก้ไขที่ผิดเพียงนิดเดียวอาจทำให้เว็บพังไม่เป็นท่าได้