4 แนวคิดเอาไปใช้ออกแบบ Responsive Web Design ปี 2014

Responsive Web Design สำหรับมือใหม่นั้น ควรรู้เรื่องแนวคิด PC-First และ Mobile-First ซึ่งเป็นเรื่องที่ตอนนี้ดูจะเป็นเรื่องปกติทั่วไปแล้ว (ดู slide ที่ผมเคยใช้แนะนำในงานสัมมนาได้ที่นี่)

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

ไปป้ะครับ เลยเอามาเขียนรวมกับแนวคิดที่ผมสอนเดิม เพื่อให้พวกเราได้เอาไปปรับใช้ตามสถานการณ์กัน

เนื้อหาบางส่วนผมได้นำมาจากเว็บของคุณ Brad Frost โดยนำมาเพิ่มมุมมอง และแนวคิดจากประสบการณ์ที่ทำและได้ไปโค้ชสอนนักเรียนหลายๆ ที่มา ลองศึกษาดูครับ

1. ใหญ่ไปเล็ก (PC-First, Retrofitting Responsive Web Design)

เป็นวิธีที่ใช้กันมากที่สุด กับการแปลงเว็บไซต์ในปัจจุบันให้เหมาะสมกับอุปกรณ์พกพา (ต้นฉบับคุณ Brad Frost เรียกว่า Retrofitting ส่วนของผมเรียก PC-First)

ข้อดี

1. ทำได้เร็วสุด เรียนรู้เทคนิค และนำไปใช้ได้ทันที เหมือนเพิ่ม CSS เข้าไปใน HTML ของเราอีก 1 ไฟล์
2. คนเข้าเว็บไม่งง ส่วนต่างๆ ของเว็บแทบจะไม่เปลี่ยนแปลง ผู้ใช้ยังคุ้นเคยกับการใช้งานแบบเดิม
3. จัดการได้เร็วกว่า สามารถใช้พวกรูปภาพหรือ content ต่างๆ เหมือนเดิมได้ ไม่ต้องมานั่งพิจารณากันใหม่

ข้อเสีย

1. เป็นการแก้ปัญหาเฉพาะหน้า เพราะเป็นวิธีที่ใช้เวลาน้อยที่สุด เลยถูกเลือกใช้เป็นวิธีแรกๆ ในการแปลงเว็บ ในอนาคตอาจต้องกลับมาปรับปรุงใหม่อีกครั้ง (ช่วงเวลาที่ผมเขียนอยู่นี้ ผมเรียกว่ายุคยำ 3 สหาย คือ PC, Tablet, Smartphone)
2. ผู้ใช้จะอ่านเนื้อหาได้ยากกว่า ลองนึกถึงการอ่านข้อความบนปลาเส้นทาโร่ที่ยาวเป็นพิเศษ การทำ Responsive Web แบบ PC-First จะเป็นการบีบความกว้างในการแสดงผลเว็บให้เล็กลง บังคับให้ข้อมูลต้องเรียงกันในแนวที่ยาวกว่าการอ่านข้อมูลทั่วไป
3. เว็บจะอืดกว่าการใช้วิธีอื่น เพราะปรับเปลี่ยนแค่หน้าตา แต่ความหนักของเว็บคงเดิม ให้นึกถึงคนที่ไปศัลยกรรม แต่ยังไม่ลดนำ้หนัก
4. ไม่ได้เป็น Responsive Web ที่แท้จริง ซึ่งการออกแบบ Responsive Web Design เป็นการคิดที่แตกต่างจาก Web design สำหรับคอมพิวเตอร์ทั่วไปเกือบจะสิ้นเชิง ทั้งในแง่การนำเสนอข้อมูล และการใช้งาน PC-First เป็น
5. เว็บบราวเซอร์รองรับไม่กว้างเท่าแบบ Mobile-first

 

2. แยกเว็บใหม่ทำต่างหาก (Responsive Mobile Site)

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

โดยให้เว็บไซต์เดิม (ที่ไม่เป็น Responsive) ทำหน้าที่ตามปกติ ในอีกทาง ให้สร้างเว็บที่เป็น Responsive ใหม่อีกอัน เอาไปไว้ใน sub domain อย่าง m.nextflow.in.th หรือ www.nextflow.in.th/mobile แล้วใช้ developer ช่วยแยกคนเข้าเว็บจากอุปกรณ์ให้ไปที่เว็บ responsive

ปัจจุบันมียักษ์ใหญ่อย่าง BBC.com และ The Guardian ใช้วิธีนี้อยู่

ข้อดี

1. เสี่ยงน้อยกว่า เจ้าของเว็บไม่ต้องเสี่ยงกับผลตอบรับของการเปลี่ยนรูปแบบเว็บที่อาจออกมาเป็นลบ ซึ่งสำคัญมากในเว็บธุรกิจที่มีขนาดใหญ่ หรือพวกเว็บโรงเรียน และมหาวิทยาลัย,​ เว็บหน่วยงานราชการ, เว็บขายของออนไลน์ขนาดใหญ่, และเว็บองค์กรต่างๆ ที่ต้องรองรับลูกค้าจำนวนมาก
2. ได้ใช้เวลาเรียนรู้โลกใหม่ของ Web Design อย่างที่บอก ทีมขนาดใหญ่จะไม่ช้อคกับการเปลี่ยนแนวคิด และกระบวนการทำงานในทันที สามารถปรับตัว และเรียนรู้ไปทีละส่วน และไม่ต้องแบกรับงาน หรือปัญหาที่ไม่เคยเจอมาก่อนในทันที
3. เหมาะกับการค่อยๆ เปลี่ยนเป็น mobile site เต็มรูปแบบในอนาคต

ข้อเสีย

ข้อเสียที่เห็นชัดเจนเลย คือวิธีการนี้เหมาะกับเว็บขนาดใหญ่ ที่มีทีมดูแลเว็บโดยเฉพาะจริงๆ เพราะนอกจากค่าใช้จ่ายด้านเงินทุน และทรัพยากรมนุษย์ที่เพิ่มขึ้น จะมีผลเสียต่างๆ ดังนี้

1. เว็บยังแยกเป็น 2 ส่วน ใช้ทรัพยาการเพิ่ม และผลกระทบต่างๆ ที่ไม่ใช่แค่การลงทุน เหมือนเราต้มแกงแบบเดียว พร้อมกัน 2 หม้อ จะมีเรื่องของการจัดการ Content,​ ระบบหลังบ้าน, และ SEO ที่ต้องแบกรับไปพร้อมๆ กัน
2. ผู้บริหารระดับสูงอาจจะเห็นโครงการนี้เป็นส่วนเกิน มีการตัดงบ และสุดท้ายก็ยุบโปรเจคส่วนนี้ทิ้ง (เพราะคิดว่าทำไมต้องมี 2 เว็บ) ทำให้ตกขบวนรถ Mobile Website ในที่สุด นี่เป็นเหตุการณ์จริงที่ผมไป consult และเจอมา

3. คิดจะทำเว็บ คิดถึงมือถือก่อน (Mobile-First Responsive Web Design)

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

ข้อดี

1. เหมือนได้ทำเว็บใหม่ Mobile-First จะทำให้เราได้พิจารณาถึงข้อเสียต่างๆ ที่เรามีบนเว็บเก่าที่มี และนำมาปรับปรุงให้เหมาะสมกับเว็บ Responsive โดยใส่แนวความคิดใหม่ๆ ได้เต็มที่
2. เว็บเร็วกว่า สร้างเว็บโดยพิจารณาเนื้อหาจริงๆ ที่จะนำเสนอบนเว็บไซต์​ ทำให้ตัวเว็บเบามากขึ้น โหลดได้เร็วขึ้น
3. รองรับอุปกรณ์และขนาดหน้าจอได้มากกว่า Mobile-First เป็นแนวคิดที่ไม่ยึดติดกับอุปกรณ์ยี่ห้อใดยี่ห้อหนึง หรือชิ้นใดชิ้นหนึง ทำให้ตัวเว็บที่สร้างสามารถแสดงผลบนหน้าจอต่างๆ ได้อย่างสวยงามและเหมาะสม
4. รองรับของใหม่ๆ ในอนาคต ด้วยแนวคิดแบบ Mobile-First จะทำให้ตัวเว็บของเรายืดหยุ่นมากขึ้น รองรับของใหม่ๆ เช่น Google Glass และ Android Wear

ข้อเสีย

ข้อเสียที่ใหญ่ที่สุดในที่นี้คือมันใหม่! ใช่ มันเป็นวิธีมองการออกแบบและสร้างเว็บไซต์ใหม่ แบบที่ของเก่าๆ ที่เราทำกันมา 10 ปี แตกต่างกับแบบนี้แทบสิ้นเชิง

1. ใช้เวลานานกว่าแบบอื่น Mobile-First ไม่ใช่ทางลัด โดยผมจะแนะนำทุกที่ที่ไปสอน ว่าการย่อขนาดเว็บอย่างเดียวแล้วคิดว่าทำ Responsive Web Design แล้วเป็นความคิดที่ผิด ต้องอาศัยความเข้าใจ, เวลา, และเทคนิคต่างๆ เสริมเข้าไปด้วย
2. ทีมต้องเรียนรู้แนวความคิดใหม่ หากคุณทำเว็บมานานแล้ว หรือมีทีมที่ทำเว็บมานาน ของใหม่นี้จะแตกต่างจากที่คุณและทีมรู้มาแทบทั้งหมด ต้องมีการปรับตัว เรียนรู้กันเพิ่มเติมเยอะทีเดียว (ลองนึกภาพคุณเป็นคนขายข้าวแกงเนื้อ แต่ต้องไปขายอาหารในย่านคนกินมังสวิรัติดู)
3. การไม่เข้าใจความสำคัญและแนวคิดที่ถูกต้อง ปัญหานี้อาจจะเกิดขึ้นในองค์กรขนาดใหญ่ ที่ผู้มีอำนาจตัดสินใจ หรือหน่วยงานอื่นๆ อาจจะเข้าใจเรื่อง Responsive Web Design ผิดไป หรือคลาดเคลื่อนจากความจริง
4. ลูกค้าอาจจะไม่คุ้น หากคิดว่าเราเอาเว็บไซต์ใหม่ใส่แทนที่เว็บเก่าที่คนใช้กันมาสัก 3 ปีได้ทันที อาจจะคิดผิดไป (จำตอนที่ Facebook เปลี่ยนหน้าตาเว็บใหม่ๆ ได้ไหมครับ?) แต่เราสามารถใช้แผนการ เพื่อค่อยๆ ปรับใช้เว็บที่เป็น responsive ให้กับลูกค้า ไม่ให้ลูกค้าเกิดอาการช๊อค หรือ “โดนหมัดตรง” ตอนกลับมาเข้าเว็บคุณในวันรุ่งขึ้น

 

4. ทำทีละส่วน (Piecemeal)

ตามชื่อเลยครับ ให้นึกถึงเค้ก 2 ปอนด์ที่เราต้องกินให้หมด! เราสามารถหั่นมันออกเป็นชิ้นๆ แล้วค่อยๆ กินทีละชิ้น มากกว่าที่จะสวาปามทั้งก้อนครับ

โดยให้เรามองเว็บไซต์เราทั้งหมดเป็นเค้กทั้งก้อน และมอง web page ต่างๆ เป็นเค้กที่ถูกหั่นออกเป็นชิ้นๆ และค่อยๆ ให้เปลี่ยนมันเป็น Responsive ทีละส่วนๆ จนครบ

ถ้าศึกษาข้อ 1 และ 2 แล้ว จะเป็นว่าวิธีที่ 4 นี้เหมือนเป็นส่วนผสมของ 2 ข้อนั่นเลย

ข้อดี

1. เห็นได้ชัดเจน วัดผลได้ชัดเจน วิธีนี้เราอาจจะเลือกเพจที่มีคนเข้าดูเยอะที่สุดมาทำเป็น Responsive แล้วสังเกตการตอบสนองของผู้เข้าเว็บว่ามีอาการอย่างไร และปรับแต่งอย่างรวดเร็ว
2. เรียนรู้ได้คล่องตัวกว่า การเปลี่ยนเว็บที่ละส่วนให้เป็น Responsive นั้น จะทำให้ทีม และฝ่ายออกแบบเรียนรู้การทำงานได้สะดวกกว่า
3. ทำเสร็จเร็วกว่า การเปลี่ยนเว็บทุกส่วนให้เสร็จอาจจะใช้เวลานาน การใช้วิธีนี้จะทำให้เว็บเราเป็น Responsive ทีละส่วนๆ ซึ่งจะเห็นการพัฒนามากกว่าทำทีเดียวจบ

ข้อเสีย

1. ความไม่เข้ากันของเว็บทั้งหมด ผู้ใช้อาจจะประหลาดใจถ้าคลิกลิ้งค์ในเพจที่ทำ Responsive แล้วไปเจอเพจที่ยังเป็นแบบเดิมอยู่ จุดนี้รุนแรงที่สุดในเรื่องความเหมือนกันของเว็บทั้งหมด (Consistency) มีผลต่อความเชื่อมั่น และความรู้สึกของผู้ใช้
2. มองเหมือนเป็นเรื่องที่ง่าย การเปลี่ยนทีละส่วนจะดูใช้เวลาน้อยกว่า แต่หากนับในภาครวมของการเปลี่ยนทั้งเว็บไซต์ อาจจะประเมินเวลาและทรัพยากรผิดเอาง่ายๆ
3. โปรเจคมีสิทธิ์ล่ม การวางแผนที่ไม่รัดกุม ทำให้โครงการใช้เวลานานกว่าเดิม สุ่มเสี่ยงต่อการล้มโครงการ เพราะมีงานอื่นที่อาจสำคัญกว่าเข้ามาแทน

 

สรุปเราควรเลือกแบบไหน?

แน่นอน การเลือกใช้แผนทั้ง 4 แบบต้องเหมาะสมกับสถานการณ์ คุณอาจจะเลือกใช้แบบที่ 2 หรือว่าแบบที่ 4 ก็ได้ แต่ก็ต้องพิจารณาผลเสียที่จะตามมาด้วย โดยส่วนตัว ผมขอแนะนำดังนี้

• ถ้าคุณมีองค์กรที่ใหญ่ ทีมดูแลหลายส่วน ลองพิจารณา วิธีที่ 2 และ 4 นอกจากมั่นใจว่าทีมคุณว่องไว และแกร่งจริงๆ ถึงมาดูวิธีที่ 3 ถ้ามีคำถามติดต่อผมได้ทาง email ผมยินดีเข้าไปให้ความเข้าใจถึงที่
• ถ้าคุณเป็นทีมขนาดเล็ก และมีเวลาพอสมควร ปรับตัวมาเรียนรู้วิธีที่ 3 จะซึมซับได้ไวกว่า คล่องตัวกว่า และใช้ได้ต่อเนื่องระยะยาวในอนาคต
• ถ้าคุณเป็นอาจารย์ และกำลังสอนให้นักเรียน นักศึกษาทำ Web Design หรือสร้าง Web วิธีที่ 3 Mobile-First จะเป็นทางที่ดีที่สุดสำหรับน้องๆ ที่กำลังเริ่มต้น เพราะเรียนรู้ได้ไม่ยาก

สำหรับวิธีที่ 1 นั้น ถ้าไม่จำเป็นจริงๆ ไม่แนะนำให้ใช้ เพราะจะมีปัญหาในระยะยาว (แต่มันใช้เวลาน้อยที่สุดนี่?) ลองพิจารณาเอานะครับ

ถ้ามีไอเดียแจ่มๆ ก็คุยกันใน comment ด้านล่างกันได้ครับ

เนื้อหาบางส่วนจาก Brad Frost Web

[sb name=”Bottom-Post-Ads”]