One Content, Multiple Screens

ในฐานะคนทำเว็บ สิ่งที่เราจะเจอแน่ๆ ในอนาคตคืออุปกรณ์ชนิดใหม่ๆ ที่มี 1) ขนาดของหน้าจอ และ 2) input method ที่ต่างออกไปจากพีซี

ผมกำลังทำ mobile theme อันใหม่ของ Blognone อยู่ หลังจากเรียนรู้ว่าอันเก่ามันยังไม่ค่อยดีนัก เท่าที่ลองทำมาพบว่า mobile edition (สำหรับจอ capasitive เราคงไม่ต้องพูดถึงมือถือแบบจอไม่สัมผัสหรือ resistive กันแล้ว) จำเป็นต้อง

  • ปุ่มใหญ่ๆ ใช้นิ้วกดได้ไม่ผิดพลาด ไม่ต้องเล็ง
  • ขนาดความกว้างพอดีกับหน้าจอ แปลว่าไม่ควรมี sidebar
  • ห้ามมีพวกเมนูแบบ scroll list ที่ต้อง mouse over ก่อน
  • หน้าจอต้องไม่ยาวเกินไป เพราะการ scroll หน้าจอด้วยนิ้วทำได้ยาก (ตรงนี้พวก collapsible ช่วยได้)
  • รองรับจอสองขนาดคือแนวตั้งกับแนวนอน อันนี้ยังหาโซลูชันไม่ได้กับพวกรูปภาพและ embed video ให้ปรับขนาดอัตโนมัติตามความกว้างของจอที่เปลี่ยนไปได้

อันนี้แค่แนวทางกว้างๆ ในรายละเอียดมันต้องมีอย่างอื่นอีกมาก พอผมซื้อ Kindle ก็พบว่า "เฮ้ย มันคนละเรื่องเลยว่ะ"

เว็บสำหรับ Kindle "ควร" มีคุณสมบัติดังนี้ (ใช้คำว่า "ควร" เพราะยังไม่ได้ลองทำจริงๆ แต่ kindle.blognone.com อยู่ในคิวแน่ๆ ครับ เพราะผมต้องการใช้เองหนึ่งคนล่ะ)

  • contrast เป็นสิ่งสำคัญมาก ถ้าไม่ใช้ฟอนต์สีดำแท้ (#000000) Kindle มันจะเรนเดอร์เป็นสีเทาจางๆ อ่านยากสุดๆ ต้องเปิดเข้า article mode ซึ่งยุ่งยาก เปลืองคลิก
  • ขนาดหน้าจอต้องออกแบบมาพอดีกับความกว้างของ Kindle เพื่อให้ไม่ต้องซูม เพราะการซูมของ Kindle ทำได้ยากเช่นกัน จอไม่สัมผัสก็แบบนี้ สรุปว่าไม่ควรมี sidebar เช่นกัน
  • ฟอนต์ - เนื่องจาก Kindle ไม่มี text zoom (มีแต่ full page zoom) และไม่มี text reflow แบบมือถือ ต้องทำขนาดมาให้พอดีจริงๆ
  • clickability - การคลิกบน Kindle ยังทำได้ยาก ควรมีปุ่มใหญ่ที่ช่วยให้กดได้แม่น พวก paging ของ Drupal นี่สอบตกแน่ๆ
  • scrolling - อันนี้จะกลับกับบนมือถือ คือ Kindle เนี่ยมัน scroll ง่ายมาก (กดปุ่ม next page ไปเรื่อยๆ) ดังนั้นถ้าเลือกได้ ทำหน้าเดียวยาวๆ ดีกว่าแยกเนื้อหาเป็นหลายหน้าแล้วต้องกดเปลี่ยนหน้า (เพราะต้องคลิก ไม่ใช่กด next page ในกรณีของเว็บ)

เว็บที่ "ดูดี" บน Kindle คือหน้า mobile edition ของ Ars Technica โดยเฉพาะหน้าแรก แต่ก็มาสอบตกตรง paging อีกเหมือนกัน

แค่อุปกรณ์สองอย่างยังยากขนาดนี้ นี่ยังไม่รวมแท็บเล็ต (ซึ่งผมยังไม่มีแผนจะซื้อ) ซึ่งมีหน้าจอหลายขนาดอีกนะ

ผมคิดว่าในอีก 2-3 ปีข้างหน้า ตลาดเกิดใหม่อีกอันคือ Internet-enabled TV (เคยเขียนไว้ในตอน Media Center Frontier ซึ่งการมาถึงของ Google TV ก็ทำให้ "เว็บ" ที่ปรากฎบน "จอทีวี" เปลี่ยนไปอีก

อันนี้ต้องยอมรับว่าไม่เคยใช้เว็บบนทีวี นึกภาพไม่ออก ไว้ซื้อแล้วค่อยมาว่ากัน ระหว่างนี้ก็อ่านเอกสารของกูเกิล Designing For TV แล้วจินตนาการตามไปก่อน

Comments

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

อีกหน่อย css media type อาจจะแยก handheld ย่อยๆ ตาม property เช่น touch, nontouch, bigsize, smallsize, highdpi, lowdpi, color, greyscale, ฯลฯ แล้วก็เขียน css แยกกัน แต่ใช้ HTML ตัวเดิมได้ :D

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

@ipats

ถ้าแค่ CSS เพียงลำพังมันทำได้ จะดีมากเลย

แต่ผมว่ามันคงพอทำได้ แต่ทำเองคงยากมาก และคงมีพวก CSS toolkit แบบเดียวกับ JS library ในปัจจุบันมาช่วยนะ

เริ่มหนักใจด้วยคน

ยิ่งเจอ DPI สูงๆ ต่ำๆ ต่างกันในต่างอุปกรณ์ ยิ่งเริ่มรู้สึกออกแบบยากขึ้นเรื่อยๆ เพราะ 1px ของเรา มันไม่เท่ากัน :P

ถ้าให้ JS ตรวจสอบ agent แล้วดึง CSS + JS สำหรับปรับแต่งให้เข้ากับอุปกรณ์อันนั้นเข้ามา เพื่อเปลี่ยนหน้าเว็บนั้นไป (ตัดตรงโน้น เพิ่มตรงนี้) มันไม่ง่ายที่จะมองเห็นภาพรวมทั้งหมดในทุกอุปกรณ์สักเท่าไหร่ แต่ดูเหมือนว่าจะเพิ่มอุปกรณ์ที่รองรับได้เรื่อย ๆ

เรื่องหมุนจอ ไม่รู้ว่ามันจะมี event ส่งมาจากเบราว์เซอร์ไหม ผมคิดว่า onResize + ตรวจสอบขนาดหน้าจอ น่าจะแก้ปัญหาตรงนี้ได้นะครับ

ธีมสำหรับมือถือน่าสนใจดี เดี๋ยวลองดูบ้างดีกว่า

เพิ่งอ่านเรื่อง "Mobile First" เมื่อไม่กี่วันก่อน ผมว่ามันเกี่ยวกันนะ

http://insideria.com/2010/07/design-for-mobile-first.html

ไม่ค่อยเห็นด้วยเท่าไรครับ คือคิดว่า mobile มันไม่ใช่ subset ของ PC อะ มันมีส่วนที่ intersection กันอยู่แต่ไม่ใช่ทั้งหมด สุดท้ายแล้วทุกจอก็ต้องการ specific formatting & testing ของมันเอง