Responsive Design for Content Site - Next Guardian

Guardin Responsive Design

เรื่องมีอยู่ว่าหนังสือพิมพ์ The Guardian ของอังกฤษเขากำลังออกแบบหน้าเว็บใหม่ (ลองเล่นได้ที่ Guardian Next) ซึ่งโจทย์ของการออกแบบคือเป็น responsive รองรับอุปกรณ์ทุกขนาดหน้าจอ

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

สุดท้าย Guardian ได้พัฒนาแนวคิดที่น่าสนใจมาก เรียกมันว่า Container Model กับ Blended Content (รายละเอียดอ่านได้จาก Guardian Beta Blog และ Nieman Lab) ไอเดียของ Container Model คือแตกเนื้อหาเป็นส่วนย่อยๆ ที่เรียกว่า item (1 item = 1 ข่าวหรือบทความ) จากนั้นค่อยจัดกลุ่มเนื้อหาเป็น slice และจัดกลุ่มอีกชั้นเป็น container

ตัวอย่าง container ก็อย่างเช่นการจัดกลุ่มแยกตามหมวดเนื้อหา (News, Sports, Entertainment) หรือจะจัดกลุ่มตามตรรกะแบบอื่นก็ได้ (เช่น Most Popular, Opinions)

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

ตัวอย่างเพจเวอร์ชันเดสก์ท็อป

ตัวอย่างเพจเวอร์ชันมือถือ

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

ส่วนแนวคิดเรื่อง Blended Content คือการลองเปลี่ยนวิธีคิดแบบเดิมๆ ที่แยกเนื้อหาในเว็บหนังสือพิมพ์ตามหมวดหมู่ (category) เช่น ข่าวการเมือง กีฬา ไลฟ์สไตล์ เรียงกันไปเรื่อยๆ (ภาษาสื่อเรียก verticals) มาเป็นการแยกหมวดด้วยวิธีอื่นๆ เช่น แยกตามคุณลักษณะของเนื้อหา (เช่น สกู๊ปพิเศษที่รวมเนื้อหาจากทุกหมวด)

ตัวอย่าง Container ที่ใช้แนวคิด Blended Content ที่ Guardian ลองทำกับหน้าแรกของตัวเองคือ

  • News - containing news and sport stories
  • Features - primarily non news stories
  • Most popular - the most read stories across the site
  • Comment & debate - containing not just our Comment is Free stories but comment and analysis across the Guardian
  • People in the news - stories and interviews with people in the news
  • Watch and listen - video and audio from across the Guardian
  • Special - used for short duration news events like the Oscars where we want to package together stories on a single theme

ทีมงานทดสอบการใช้งานจากผู้ใช้ด้วยวิธี a/b test และการเก็บสถิติอย่างละเอียด พบว่าแนวคิดข้างต้นนี้เวิร์ค ยกเว้นเรื่องเดียวคือการรวม news/sport ไว้ด้วยกัน สุดท้ายก็ต้องแยกกลับมาเป็นคนละส่วนกัน