จับคู่ Battle

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

เครื่องมือในการทดสอบ

เราจะใช้ web browser เป็นเครื่องมือในการทดสอบกันครับ ซึ่งก็น่าจะคุ้นเคยกันอยู่แล้ว

คุณสามารถใช้เว็บ browser ที่คุณถนัดได้เลย Chrome, Firefox, IE หรือ Edge ได้หมด เพราะต่างก็มีฟังชั่นที่เรียกว่า Developer Tools ติดมาให้อยู่แล้ว โดยขอให้เป็น browser เวอร์ชั่นล่าสุดของค่ายนั้นๆ ก็พอ ในที่นี้ผมจะใช้ Chrome เพราะผมถนัดกว่า และจะใช้พีซีหรือโน๊ตบุ๊ตก็ได้ ในการเปิดเว็บที่ต้องการตรวจสอบในขั้นต่อไป

ผมแบ่งการทดสอบแบ่งออกเป็น 2 วิธีคือ

  • 1. การแสดงหน้าเว็บบนอุปกรณ์จำลองผ่านทาง Developer Tools ของ Chrome
  • 2. การลด-เพิ่มขนาดของหน้า browser เพื่อดูการตอบสนองของหน้าเว็บ

วิธีที่ 1 แสดงหน้าเว็บบนมือถือจำลอง

เราจะใช้ฟังก์ชั่นของ Chrome ที่สามารถจำลองการแสดงผลบนมือถือรุ่นต่างๆ (ที่ขนาดหน้าจอต่างๆ กัน) ได้

เว็บไซต์ที่ผมเลือกมาทดสอบ เป็นของ บ. Inspire Mach ซึ่งผมคิดว่าน่าจะเป็นตัวอย่างที่ดี ให้คุณใช้พีซีเปิด Chrome ขึ้นมาแล้วเข้าไปที่ www.inspiremach.com


หน้าเว็บไซต์ยังแสดงผลได้ตามปกต ิเมื่อเปิดดูด้วยพีซีหรือโน๊ตบุ๊ต
หน้าเว็บไซต์ยังแสดงผลได้ตามปกติ เมื่อเปิดดูด้วยพีซีหรือโน๊ตบุ๊ต

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

ด้วยหน้าเว็บที่ดูโอเค มีรูปสไลด์โชว์ คุณอาจเริ่มมีความรู้สึกเป็นบวก และให้ความสนใจกับสินค้าของ Insprie Mach ตอนเปิดเว็บขึ้นมาบ้างไม่มากก็น้อย

คราวนี้มาลองเปิดบนหน้าจอมือถือดูบ้าง ซึ่งเราจะให้ Chrome แสดงผลให้ดูบนหน้าจอมือถือจำลอง

ให้คุณกดปุ่ม F12 จะปรากฏเมนู Developer Tools ขึ้นมาทางด้านขวาของ Chrome (เมนูอาจโผล่มาจากด้านล่างสำหรับบางคน ซึ่งสามารถเปลี่ยนตำแหน่งของเมนูได้ โดยไปที่ปุ่มที่มีจุดเรียงกันด้านขวาบนของเมนู แล้วเลือก Dock side เพื่อเปลี่ยนตำแหน่งของเมนู)


ใช้ Chrome Developer Tools แสดงผลในโหมดมือถือจำลอง
เข้าโหมดหน้าจอมือถือจำลอง (Device Mode)

จากนั้นให้ให้คุณกดปุ่ม ไอคอนรูปมือถือ ที่ปรากฏอยู่ด้านซ้ายบนของ Developer Tools Menu หรือกด Ctrl + Shift + M ก็ได้ เพื่อเข้าสู่โหมดของการแสดงผลบนหน้ามือถือจำลอง (Device Mode)

หน้าต่างของ Chrome จะถูกย่อขนาดลงจนมีความกว้างเท่ากับขนาดของหน้าจอมือถือ ซึ่งไม่เพีบยงแต่ขนาดที่เล็กลงเท่านั้น แต่ฟังชั่นการทำงานของ browser ก็จะถูกจำลองให้เป็นแบบเดียวกับ browser ที่เปิดบนมือถือด้วย

ใน Device Mode นี้ เราสามารถเลือกได้ว่า จะให้แสดงหน้าเว็บด้วยมือถือรุ่นไหน ซึ่งเลือกได้จาก drop down เมนู ด้านบน ผมขอเลือกเป็น “Apple iPhone 5” เพราะมีขนาดความกว้างของหน้าจออยู่ที่ 320px เท่ากับมือถืออีกหลายๆ รุ่น จากนั้นให้คุณกดปุ่ม Refresh เพื่อให้แสดงผลใหม่อีกครั้ง

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

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


เปรียบเทียบหน้าเว็บระหว่าง มือถือและหน้าจอพีซี ของเว็บไซต์แบบเก่า
ทั้งรูปภาพและข้อความจะโดนบีบ จนมองแทบไม่เห็น ถ้าเปิดเว็บไซต์แบบเก่าบนมือถือ

เริ่มมองเห็นปัญหา ของเว็บไซต์แบบเก่าเมื่อเปิดดูด้วยมือถือกันแล้วใช่ไหมครับ

ทีนี้ ลองไปทดสอบเว็บไซต์ที่เป็น Responsive Design กันบ้างว่าเป็นอย่างไร โดยให้เปิดเว็บของ Goldenduck Studio (www.gdsthai.com) ขึ้นมาแทน ทำตามขั้นตอนที่ผ่านมาซ้ำอีกครั้ง แล้วลองสังเกตุการแสดงผลดู

จะเห็นว่า ถึงแม้ว่าจะเปิดหน้าเว็บด้วยมือถือ แต่ตัวหนังสือของหน้า Goldenduck Studio ยังคงอ่านออกอย่างชัดเจนโดยไม่ต้องขยาย รูปภาพก็ยังคงชัด จะสังเกตุเห็นว่าหน้าเว็บโดยรวม เมื่อเปรียบเทียบกันระหว่างตอนเปิดบนหน้าจอพีซี กับตอนเปิดดูบนมือถือ ไม่ได้ถูกบีบ ให้มีขนาดหน้าจอให้เล็กลงเหมือนเว็บแบบเก่า แต่จะเป็นการจัดวางรูปภาพและเนื้อหาใหม่ เป็นการจัด layout ใหม่ ให้พอดีกับขนาดหน้าจอที่ใช้เปิดหน้าเว็บเองโดยอัตโนมัติ

การปรับเปลี่ยน layout รวมทั้งรูปภาพและเนื้อหา ไปตามหน้าจอขนาดต่างๆ นี้เอง ที่เป็นข้อแตกต่าง ที่เว็บไซต์แบบเก่า เทคโนโลยีแบบเก่าไม่สามารถทำได้

เปรียบเทียบหน้าเว็บระหว่าง มือถือและหน้าจอพีซี ของเว็บไซต์ที่เป็น Responsive Design
สำหรับเว็บที่เป็น Responsive Design รูปภาพและข้อความ รวมถึง layout จะถูกจัดวางในขนาดที่เหมาะสม

วิธีที่ 2 เปลี่ยนความกว้างของหน้าต่าง browser

วิธีทดสอบว่าเว็บไซต์ใดเป็น Responsive design หรือไม่ อีกวิธีหนึ่งก็คือ การทดลองเปลี่ยนความกว้างของหน้าต่างของ browser แล้วสังเกตุการเปลี่ยนแปลงการแสดงผลของหน้าเว็บ

วิธีนี้เป็นวิธีง่ายๆ แต่มีประสิทธิภาพ เพราะสามารถบอกเราได้ด้วยว่าเว็บไซต์ไหนที่เป็น Responsive เทียม

ขั้นตอนก็คือ ให้ข้าหน้าเว็บไซต์ที่เราต้องการทดสอบ ในที่นี้ก็เป็น www.inspiremach.com เหมือนเดิม จากนั้นให้ ค่อยๆ ลดขนาดความกว้างของหน้าต่าง browser ลง แล้วสังเกตุความเปลี่ยนแปลงที่หน้าเว็บ

รูปภาพและข้อความของเว็บไซต์แบบเก่า จะถูกยึดอยู่กับที่ ถ้าเราลดความกว้างของหน้าต่าง browser
รูปภาพและข้อความของเว็บไซต์แบบเก่า จะถูกยึดอยู่กับที่ ถ้าเราลดความกว้างของหน้าต่าง browser

จากรูปจะเห็นว่า เมื่อลดความกว้างของหน้าต่างลงมาถึงระดับหนึ่ง การแสดงผลของหน้าเว็บไซต์นี้ก็ยังคง “ติดอยู่กับที่” ที่ตำแหน่งเดิม ทำให้เนื้อหาและรูปภาพบางส่วนทางด้านขวา ในที่นี้คือตำแหน่ง A, B และ C โดนหน้าต่างบังไปจนหมด

ให้สังเกตุว่าในขณะที่ความกว้างของหน้าต่างลดลงไปนั้น ตัว browser จะโชว์ scroll bar ขึ้นมาทางด้านล่าง (ในตำแหน่ง D) ของหน้าจอ เพื่อให้สามารถเลื่อนไปดูส่วนที่ถูกหน้าต่างบังไป

ถ้าลดขนาดของหน้าจอลงเรื่อยๆ จนมี ขนาดใกล้เคียงกับขนาดของหน้าจอมือถือแล้ว เนื้อหาและรูปภาพของหน้าเว็บจะถูกบังไปหมด

เว็บไซต์ที่มีลักษณะแบบนี้ ถือว่าไม่เป็น Responsive Design เพราะถึงแม้ว่า เราจะลดขนาดความกว้างของหน้าต่าง browser ลงแล้วแต่ layout ของหน้าเว็บก็ยังไม่มีการปรับเปลี่ยนให้พอดีกับขนาดความกว้างของหน้าต่างที่เปลี่ยนไป

หากลองใช้วิธีเดียวกันกับเว็บไซต์ที่เป็น Responsive Design โดยเราจะลองกับเว็บของ Goldenduck Studio เหมือนเดิม

จะเห็นว่า ไม่ว่าเราจะลดขนาดหน้าต่าง Browser ลงมาเท่าไหร่ก็ตาม การแสดงผลของหน้าเว็บที่เป็น Responsive design จะถูกปรับให้พอดีกับขนาดความกว้างของหน้าต่างโดยอัตโนมัติ สังเกตุได้ว่าจะไม่มีลักษณะของตัวหนังสือ หรือรูปภาพที่หลุดกรอบจากหน้าต่าง Browser และจะไม่มี scroll bar ด้านล่างโผล่ออกมาให้เห็นเลย

รูปภาพ ข้อความ รวมถึง layout ของเว็บไซต์แบบ Responsive Design จะปรับเปลี่ยนตามขนาดของหน้าต่าง browser ให้เห็นทันที
รูปภาพ ข้อความ รวมถึง layout ของเว็บไซต์แบบ Responsive Design จะปรับเปลี่ยนตามขนาดของหน้าต่าง browser ให้เห็นทันที

เว็บไซต์บางแห่งที่เป็น Responsive เทียม คือไม่ 100% เพราะออกแบบ layout มาให้พอดีกับหน้าจอบางขนาดเท่านั้น เช่น ออกแบบมาสำหรับหน้าจอขนาด 320px (ขนาดความกว้างต่ำสุดของสมาร์ทโพนทั่วๆ ไป) และขนาดตั้งแต่ 1200px (ขนาดที่หน้าจอพีซีหรือโน๊ตบุ๊ก) เป็นต้น ซึ่งเว็บไซต์แบบนี้อาจแสดงผลได้ดีกับมือถือบางรุ่น แต่แสดงผลได้ไม่ดี อาจถึงขั้นผิดเพี้ยนไปเลย กับมือถือคนละรุ่นที่มีขนาดหน้าจอกว้างกว่า

วิธีทดสอบโดยการเปลี่ยนความกว้างของหน้าต่าง จะสามารถแยกเว็บไซต์ลักษณะนี้ได้ เพราะเราจะเห็นได้ชัดเจนเลยว่าการจัด layout หรือการแสดงผลที่ขนาดความกว้างต่างๆ กันนั่น มีความผิดปกติหรือไม่ เช่น ช่องไฟ เล็กใหญ่ ไม่เสมอกัน, ตัวหนังสือหรือรูปภาพ ตกขอบ หรือเกยกัน เป็นต้น

Responsive Design สร้างความแตกต่างให้กับเว็บไซต์บนมือถือ

คุณอาจจะคิดว่า เรื่องของตัวหนังสือหรือภาพที่เล็กลงเพราะโดนบีบ มันไม่น่าจะเป็นเรื่องใหญ่ เพราะสมาร์ทโฟนส่วนใหญ่ก็ซูมได้ ถ้าลูกค้าสนใจสินค้าเขาน่าจะซูมดูกันเองได้

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

ที่เป็นแบบนี้ เพราะลูกค้าเข้าถึงข้อมูลได้ง่ายขึ้น และเข้าถึงได้มากขึ้น อย่างที่ไม่เคยเกิดขึ้นมาก่อน ในขณะที่ความอดทนและความมีสมาธิในการรับข้อมูลลดน้อยลง

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