เบื้องหลัง Onceinlife.co

15 November 2020 / on Project / by paipure/ 177 Views

ช่วงปลายปี 2019 ขณะที่พวกเรากำลังปั่นงานกันอยู่นั้น ก็มีสายโทรเข้ามา เป็นเบอร์ไม่คุ้น แนะนำตัวกันก็ทราบว่าเป็น พี่แอน เจ้าของบริษัท นะโม คิดดี บริษัทที่รับผลิต Content ครบวงจร พี่แอนอธิบายเพิ่มว่า อยากจะทำเว็บไซต์ magazine online เกี่ยวกับการท่องเที่ยว ชื่อ ONCE

ในตอนนั้น พวกเราได้ทำเว็บ magazine ไปบ้างแล้ว เช่นเว็บ Sarakadee.com กับ budnet.org และหลายๆเว็บก็มีฟังก์ชั่น blog และเมื่อฟังพี่แอนเล่าถึง Concept ของ ONCE แล้ว ก็ทำให้พวกเราอยากร่วมทำด้วย

คอนเซปท์ของ ONCE ที่พี่แอนเล่ามาคือ อยากให้เว็บ ONCE แตกต่างจากเว็บท่องเที่ยวทั่วไปในตลาด ซึ่งถ้าลองไปค้นดูจะพบว่าเว็บส่วนใหญ่จะเป็นลักษณะของการรีวิว เช่น 5 สถานที่เที่ยวยอดฮิต ในเชียงใหม่ หรือ 10 ร้านกาแฟสุดเก๋ในเวียดนาม แต่พี่แอนไม่อยากให้ ONCE เป็นแบบนั้น อยากจะให้เนื้อหาเกี่ยวข้องกับการท่องเที่ยวเชิงสร้างสรรค์ มองการเดินทางในมุมที่แตกต่าง เนื้อหาบนเว็บจึงจะเป็นบทความการท่องเที่ยวเชิงวิเคราะห์ โดยจะมีการสอดแทรกไอเดียลงไปด้วย

แค่ฟังไอเดีย เราก็คล้อยตามแล้ว และคิดว่าเว็บนี้จะต้องเป็นเว็บที่สนุกแน่ๆ

Magazine layout

“พี่อยากได้เว็บที่แตกต่าง”

นี่คือ 1 ใน requirement ของพี่แอน ต้องยอมรับว่าจะทำให้เว็บดูแตกต่างจาก เว็บ magazine ที่มีอยู่เป็นล้านเว็บบนโลก ก็แอบยากอยู่ ถ้าลองมองเว็บในไทย ส่วนใหญ่ก็จะมีลักษณะคล้ายๆกัน แต่ถ้าโจทย์คือความแตกต่าง เราก็ต้องมองอีกมุมนึง เราลองหาไอเดียทั้งเว็บในไทย และเทศ พบว่าปัญหาที่เจอของเว็บ magazine คือการจัดวาง layout ที่เป็นการวางต่อๆกัน ภาพ เนื้อหา ภาพ เนื้อหา ไปเรื่อยๆ ซึ่งแตกต่างกับการวาง layout ในนิตยสาร ที่เราจะสามารถจัด layout ได้หลากหลายมากกว่า

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

Easy Admin Area

ส่วนหนึ่งที่ทำให้เว็บ magazine ยากกว่าเว็บ corporate คือ ระบบการอัพโหลดความที่ต้องง่ายพอให้ทางแอดมิน (ซึ่งอาจจะไม่มีประสบการณ์ด้านโค้ด) สามารถใช้งานง่ายโดยไม่ต้องเรียนรู้เยอะ จุดนี้จึงเป็นส่วนสำคัญที่พวกเราตั้งใจตั้งแต่เริ่มโปรเจกต์

เว็บไซต์บทความโดยทั่วไปจะใช้ระบบ Editor ของ WordPress ซึ่ง ปัญหาที่เราพบคือ ในลักษณะ layout ที่หลากหลายแบบเว็บ ONCE การใช้ Editor ของ WordPress อาจจะไม่เหมาะ พวกเราจึงสร้างระบบการวาง layout ใหม่ เรียกว่า Flexible content คือ ให้ layout แต่ละแบบเป็น Section แต่ละ Section สามารถเรียงต่อกันได้ โดยจะไม่ได้บังคับว่า Section ไหนต้องมาก่อนหรือหลัง ผลคือ แต่ละบทความจะมี layout ที่แตกต่างกัน ขึ้นอยู่กับว่า เนื้อหา เหมาะกับ layout แบบไหน

Gimmicky

สิ่งที่จะทำให้เว็บ ONCE ดูแตกต่างอีกอย่างคือเรื่อง Gimmick เล็กๆน้อยๆ สิ่งต่างๆที่เราใส่เข้าไป ยกตัวอย่าง เช่น section “Read At ONCE” จะมีลูกตาเล็กๆอยู่ ถ้าเราเลื่อนเมาส์ไปมา ตาจะขยับตามเมาส์ของเราด้วย หรือจะเป็น ONCEBOOK ที่เราทำให้หน้าปกหนังสือสามารถพลิกไปดูหน้าหลังได้ เหมือนกับเวลาเราเลือกหนังสือในร้านหนังสือจริงๆ ที่เราจะอยากดูปกหลัง

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

Mobile is as important as Desktop

ผลสถิติของเว็บ ONCEinlife.co พบว่า 80% เปิดจากมือถือ Responsive design จึงเป็นส่วนที่เราให้ความสำคัญมาก โดยเราออกแบบส่วน Desktop พร้อมกันกับส่วน Mobile ความตั้งใจของเราคืออยากให้การใช้งานบนมือถือ สามารถใช้ได้ดี พอๆกัน หรือ แม้กระทั่ง ดีกว่า การใช้งานบนคอมพิวเตอร์ ดังนั้นจะเห็นว่า layout ที่ซับซ้อนของ ONCE บน Desktop สามารถแสดงผลได้อย่างสวยงามบนหน้าจอมือถือ

อีกส่วนประกอบสำคัญของเว็บบทความ รองลงมาจากเนื้อหาคือ ตัวอักษร เราเลือกใช้ฟอนต์ Thonglor เป็นฟอนต์ Body ซึ่งเป็นฟอนต์ที่อ่านง่ายทั้งบนคอม และมือถือ พวกเราปรับขนาด และระยะห่างระหว่างบรรทัดให้เหมาะสม เพื่อให้สามารถ อ่านได้สบายตาที่สุด

Speedy

คงไม่มีใครอยากเข้าเว็บมาเพื่ออ่านบทความ แต่เว็บกลับโหลดช้า เว็บนี้เราเลยวางฐานการทำให้เว็บโหลดเร็วแบบจัดเต็ม ตั้งแต่การใช้ lazyload, การ optimize ขนาดภาพ กับไฟล์ต่างๆ, การใช้ picture tag เพื่อให้ภาพที่เปิดใน mobile กับ desktop เป็นคนละภาพกัน (ขนาดภาพบน mobile จะเล็กกว่า) พวกเราใช้เวลาปรับความเร็วเว็บกันเป็นอาทิตย์เพื่อให้ได้ผลออกมาดีที่สุด ผลคือทำให้ Google Page Speed อยู่ในเกณฑ์ที่เราตั้งไว้ คือ Desktop > 70, Mobile > 50

Content is the king

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

เว็บ ONCEinlife.co เป็นอีกหนึ่งผลงานที่พวกเราภูมิใจ และสนุกกับการทำมากๆ ขอบคุณพี่แอน และทีมนะโมคิดดี ที่ไว้ใจให้พวกเราเป็นคนทำเว็บนี้ ขอบคุณทีมวันดีดีทุกคน โดยเฉพาะ วอนัท  ที่ช่วยเขียนเว็บออกมาได้ตรงกับความตั้งใจไว้ ตอนนี้เว็บได้ใช้งาน ไปประมาณเดือนกว่าๆ ก็มี Fanpage กว่า 6,000 คนแล้ว โดยนี่เป็นแค่ก้าวแรกของ ONCE และจะก้าวไปเรื่อยๆ เหมือนกับสโลแกนของ ONCE ที่ว่า Because you only live ONCE, just make it happen!

paipure

Writer

เริ่มออกแบบและเขียนเว็บมาตั้งแต่ ม.ต้น ทำมาหมดแล้วตั้งแต่เว็บโรงแรม เว็บบริษัท เว็บร้านค้า จนถึงเว็บแฟนคลับเกาหลี! มีความสุขทุกครั้งที่เห็นคนเอาเว็บที่ทำไปใช้ประโยชน์