Blognone Mobile สำหรับมือถือจอสัมผัส

By mk Founder on Tag: Announcement
Announcement

ตามสมัยนิยมครับ เว็บอื่นมีกัน เราก็อยากมีบ้าง หลังจากทดสอบเป็นวงแคบๆ ใน Blognone Groups ได้สักระยะ ผมก็คิดว่าได้เวลาเปิดตัว Blognone Mobile อย่างเป็นทางการเสียที

ผู้ที่สนใจลองเล่น เข้าไปได้ทันทีที่ m.blognone.com

Blognone Mobile ออกแบบขึ้นมาสำหรับมือถือจอสัมผัสสมัยใหม่โดยเฉพาะ แนวคิดในการออกแบบมี 2 ประการ

  1. พยายามคง look & feel ของ Blognone ฉบับเต็มเอาไว้ รวมถึงความสามารถบางอย่างที่มีคนใช้ค่อนข้างเยอะ เช่น การอ่านและตอบคอมเมนต์
  2. ลดความซับซ้อนของหน้าเว็บลง ให้เหมาะกับหน้าจอสัมผัสมากขึ้น

แนวคิดทั้งสองมันขัดกันอยู่บ้าง ดังนั้นบางอย่างเราต้องเลือก ฟีเจอร์และข้อจำกัดของ Blognone Mobile ได้แก่

  • ออกแบบมาสำหรับจอ 320px ซึ่งเป็นความกว้างของมือถือจอสัมผัสส่วนใหญ่
  • ล็อกอินได้ คอมเมนต์ได้ แสดงคอมเมนต์ใหม่ที่ยังไม่ได้อ่าน เหมือนกับเวอร์ชันปกติ
  • เพื่อลดความซับซ้อนของเพจ คอมเมนต์จะถูกแสดงเรียงกันเป็น flat ไม่ใช่ thread อันนี้จงใจครับ
  • แสดงข่าวเฉพาะจากหน้าแรกหน้าเดียวเท่านั้น ถ้าอยากอ่านข่าวเก่าๆ ต้องใช้เวอร์ชันปกติเช่นกัน อันนี้ก็จงใจ
  • แถมไอคอนสำหรับวางบน Home Screen ของ iPhone

หน้าตาเป็นไปตามภาพ (ขอบคุณคุณ @poakpong สำหรับภาพและคำแนะนำ)

Blognone Mobile รุ่นนี้ถือเป็นรุ่นแรก มันยังไม่สมบูรณ์มากนัก ดังนั้นในระยะอันใกล้ เราจะยังไม่ detect user-agent เพื่อ redirect ไปยัง Blognone Mobile ครับ ให้ผู้ใช้เป็นคนเลือกเองไปก่อนว่าจะเข้าอันที่เหมาะกับหน้าจอของตัวเองมากที่สุด

ในโอกาสเดียวกันนี้ ผมมีคำถาม 3 ข้อ ที่อยากให้ผู้ใช้ Blognone Mobile ช่วยตอบ

  1. ฝากทดสอบบนมือถือและเบราว์เซอร์ที่ท่านใช้ การทดสอบเว็บไซต์บนมือถือเป็นเรื่องไม่ง่ายเลยเพราะเดี๋ยวนี้แพลตฟอร์มมันหลากหลายมาก ตอนนี้ที่ทดสอบไปแล้วคือ Android, iPhone (ขอบคุณ @poakpong), IE/Windows Mobile 6.1 (ขอบคุณ @ipats) และ BlackBerry (ขอบคุณ @fordantitrust) ยังต้องการตัวอื่นๆ อีกมาก โดยเฉพาะสายตระกูล Symbian/Maemo ไม่ว่าจะเจอบั๊กหรือแสดงผลได้สมบูรณ์ ช่วยตอบให้เห็นหน่อยในคอมเมนต์ โดยระบุระบบปฏิบัติการ-เบราว์เซอร์ที่ใช้ ถ้ามีภาพประกอบด้วยจะดีมาก
  2. ฟีเจอร์อย่าง Forum หรือ Poll ควรมีไว้ใน Blognone Mobile หรือไม่?
  3. ตอนนี้แนวทางการวางเนื้อหาในหน้าเว็บ แยกเป็น 2 ทาง คือ แสดงเฉพาะ headline แล้วให้ไปกดต่อกันเองถ้าอยากอ่านข่าวเต็ม กับแสดงข่าว+คำโปรย เหมือนกับเวอร์ชันปกติ แต่ละแบบก็มีข้อดีข้อเสียแตกต่างกันไป ปัจจุบันเพื่อความง่ายในการพัฒนา เราใช้แบบที่สอง ซึ่งก็มีผลเสียทำให้หน้าเว็บยาวพอสมควร คำถามคือสะดวกที่จะใช้แบบไหนมากกว่ากัน

สุดท้ายเผื่อหลายคนอาจยังไม่รู้ Blognone ยังมี PDA version ที่สนับสนุนโดย scriptdd ให้เลือกใช้ด้วยเช่นกันครับ

Hiring! บริษัทที่น่าสนใจ

Carmen Software company cover
Carmen Software
Hotel Financial Solutions
 Next Innovation (Thailand) Co., Ltd. company cover
Next Innovation (Thailand) Co., Ltd.
We are web design with consulting & engineering services driven the future stronger and flexibility.
 KKP Dime company cover
KKP Dime
KKP Dime บริษัทในเครือเกียรตินาคินภัทร
 Kiatnakin Phatra Financial Group company cover
Kiatnakin Phatra Financial Group
Financial Service
 Fastwork Technologies company cover
Fastwork Technologies
Fastwork.co เว็บไซต์ที่รวบรวม ฟรีแลนซ์ มืออาชีพจากหลากหลายสายงานไว้ในที่เดียวกัน
 Thoughtworks Thailand company cover
Thoughtworks Thailand
Thoughtworks เป็นบริษัทที่ปรึกษาด้านเทคโนโยลีระดับโลกที่คว้า Great Place to Work 3 ปีซ้อน
 Iron Software company cover
Iron Software
Iron Software is an American company providing a suite of .NET libraries by engineer for engineers.
 CLEVERSE company cover
CLEVERSE
Cleverse is a Venture Builder. Our team builds several tech companies.
 Nipa Cloud company cover
Nipa Cloud
#1 OpenStack cloud provider in Thailand with our own data center and software platform.
 Bangmod Enterprise company cover
Bangmod Enterprise
The leader in Cloud Server and Hosting in Thailand.
 CIMB THAI Bank company cover
CIMB THAI Bank
MOVING FORWARD WITH YOU - CIMB is the leading ASEAN Bank
 Bangkok Bank company cover
Bangkok Bank
Bangkok Bank is one of Southeast Asia's largest regional banks, a market leader in business banking
 MuvMi (Urban Mobility Tech Co.,Ltd.) company cover
MuvMi (Urban Mobility Tech Co.,Ltd.)
Shape the future of urban mobility towards affordable, clean, and safe solutions
 T.N. Digital Solution Co., Ltd. company cover
T.N. Digital Solution Co., Ltd.
TNDS has been involving in every first move of banking’s major digital transformation.
 KBTG - KASIKORN Business-Technology Group company cover
KBTG - KASIKORN Business-Technology Group
KBTG - "The Technology Company for Digital Business Innovation"
 Siam Commercial Bank Public Company Limited company cover
Siam Commercial Bank Public Company Limited
"Let's start a brighter career future together"
 Icon Framework co.,Ltd. company cover
Icon Framework co.,Ltd.
Global Standard Platform for Real Estate แพลตฟอร์มสำหรับธุรกิจอสังหาริมทรัพย์ครบวงจร มาตรฐานระดับโลก
 REFINITIV company cover
REFINITIV
The Financial and Risk business of Thomson Reuters is now Refinitiv
 H LAB company cover
H LAB
Re-engineering healthcare systems through intelligent platforms and system design.
 The Gang Technology Co., Ltd. company cover
The Gang Technology Co., Ltd.
We're a Digital Agency that helps our customers transform their business into digital with ease.
 LTMH company cover
LTMH
LTMH มุ่งเน้นการพัฒนาผลิตภัณฑ์ที่สามารถช่วยพันธมิตรของเราให้บรรลุเป้าหมาย
 Seven Peaks company cover
Seven Peaks
We Drive Digital Transformation
 Wisesight (Thailand) Co., Ltd. company cover
Wisesight (Thailand) Co., Ltd.
The Best Choice For Handling Social Media · High Expertise in Social Data · Most Advanced and Secure
 MOLOG Tech company cover
MOLOG Tech
We are Modern Logistic Platform, Specialize in WMS, OMS and TMS.
 Data Wow Co.,Ltd company cover
Data Wow Co.,Ltd
We enable our clients to realize increased productivity by solving their most complex issues by Data
 LINE Company Thailand company cover
LINE Company Thailand
LINE, the world's hottest mobile messaging platform, offers free text and voice messaging + Call
 LINE MAN Wongnai company cover
LINE MAN Wongnai
Join our journey to becoming No.1 food platform in Thailand

nuntawat Mon, 08/03/2010 - 09:27

โอ้ว ข่าวเราขึ้นเป็นรูปด้วย :D

เพิ่มเติม Blognone RSS บนมือถือ น่าจะลิงก์ไปยังหน้าเว็บมือถือนะครับ ไม่ควรลิงก์ไปหน้าเว็บพีซีครับ (เล่นบนซิมเบียน S60 FP1)

lew Mon, 08/03/2010 - 09:43

ผมว่า Blognone RSS ควรจะลิงก์ไปหน้าเต็มถูกแล้วครับ ไว้เราเปิดตัวส่วน Mobile เป็นทางการแล้ว (ทดสอบผ่านบน major platform) ถึงตอนนั้นเดี๋ยวจะมีการตรวจ user-agent เพื่อ redirect อีกที

jeno Mon, 08/03/2010 - 10:28

ans#1
ทดสอบ Blognone Mobile บน Windows Mobile 6.5.5 จอ WVGA 800*480
Opera mobile 9.7 mode Mobile View

  • http://twitpic.com/17adx9

ด้วย Opera mobile 9.7 mode Desktop View

  • http://twitpic.com/17aei7

ด้วย Internet Explorer mode Mobile View/Desktop View (ผลออกมาเหมือนกัน)

  • http://twitpic.com/17af65

สำหรับผม ดูด้วย Opera mobile ด้วย mobile view จะดีที่สุด ที่เหลือ font ล้นตกขอบจอ
แต่ปกติผมเปิด web บนมือถือด้วย Opera mobile desktop view อาจะลำบากบ้างหากต้องคอยสลับ

ans#2
คิดว่า ไม่จำเป็นต้องมี Forum หรือ Poll บน blognone mobile

ans#3
ชอบแบบที่สอง แสดงข่าว+คำโปรย ครับ

mk Mon, 08/03/2010 - 11:03

ถ้าเป็น desktop view ก็คงต้องเข้าเว็บเวอร์ชันเต็มครับ น่าจะเหมาะกับงานมากกว่า

ส่วนรูปภาพประกอบก็ขอบคุณที่ช่วยส่งเข้ามาครับ

moosaTAE Mon, 08/03/2010 - 11:27

ใช้ Browser ของ Symbian S60 V5 ตามแนวตั้งจอยังล้นด้านข้างอยู่ครับ

แล้วก็มีพวกลิงค์ Youtube ที่มันจะแสดงเป็นพื้นที่ว่างว่าง ๆ ไม่มีอะไรไว้ ทำให้เปลืองพื้นที่หน้าจอไปโดยปริยาย ถ้าเปลี่ยนเป็นแสดงลิงค์ไปยังคลิปแทนก็จะดีครับ

Nozomi Mon, 08/03/2010 - 20:07

ทำให้แทนละกันครับ

แนวตั้ง
P01

ขอบขวาที่เหลือในแนวตั้ง
P02

แนวนอน
P03

ขอบขวาที่เหลือในแนวนอน
P04

ผมกลับว่ามันเป็นปัญหาการตัดคำใน Symbian เองเสียมากกว่าที่จะเป็นที่ CSS นะครับ
เพราะข่าวของคุณ MK ก็จะอยู่ในกรอบพอดี ส่วนที่เป็นของคุณ Lew ที่เขียนติดกันเป็นพรืด ก็เลย ล้นกรอบออกมาอย่างที่เห็น จนเป็นขอบขวาที่เหลือครับ

mk Mon, 08/03/2010 - 22:05

ถ้าเป็นเรื่องตัดคำ ผมก็คงทำอะไรไม่ได้แล้วน่ะครับ (Android Browser ก็ไม่ตัดคำ) ยกเว้นให้ผู้เขียนข่าวทั้งหลาย ช่วยเคาะแบ่งวรรคกันบ่อยหน่อย

lawender Tue, 09/03/2010 - 09:38

ผมเจอปัญหาเดียวกันบน Opera Mobile บน WM 6.5.3 ครับ
น่าจะไม่เกี่ยวกับเรื่องการตัดคำของ Opera เพราะเข้า www.blognone.com
มันก็สามารถแสดงผลได้ถูกต้อง ไม่ล้นไปด้านข้างครับ

Nozomi Tue, 09/03/2010 - 13:49

แต่ผมเจอปัญหากับ Opera ตัวเต็มนี่แหละครับ

ทั้งตัว Mobile Site บน Opera ตัวเต็ม
Opera ดู mobile site

และตัว Full Site บน Opera ตัวเต็ม
Opera ดู Full site

ยื่นออกมาเหมือนกันเลย ถ้าผมบีบหน้าจอให้เล็กลงครับ ซึ่งถ้าเป็นใน FF มันจะตัดให้พอดีกรอบ

moosaTAE Mon, 08/03/2010 - 21:23

ขอโทษทีไม่ได้โพสภาพประกอบนะครับ พอดียังไม่ได้ลงโปรแกรมแคปหน้าจอไว้
และขอขอบคุณ คุณ Nozomi ที่ช่วยโพสต์ภาพด้วยนะครับ

siamnotebook Mon, 08/03/2010 - 15:40

HTC + Window Mobile 6 กับ IE

หน้าแรกอ่านได้ปกติดีครับ Font ไม่เพี้ยน จะมีนิดหน่อยก็ชื่อ Post ถ้าพิมพ์ติดกันยาวๆ จะไม่ตัดคำ

เข้ามาใน Post ก็อ่านปกติ

ส่วน Forum กับ Poll มีก็ดี แต่อย่าซีเรียสมากถึงขนาด แก้ระบบเว็บให้รองรับเกินไป เพราะปกติมือถือรุ่นใหม่ๆ รองรับเว็บที่ไม่มี Graphic หรือ Java หรือ Flash ได้อยู่แล้ว

vaLVE Mon, 08/03/2010 - 17:50

ลองใช้บน opera mini 4.2 บน feature phone ธรรมดาอย่าง PIXON หน้าตาออกมาเหมือนกันกับเข้าหน้าเว็บปกติแล้วเปิดฟังก์ชัน mobile view ครับ แต่หน้าปกติแบบเปิด mobile view จะตัดคำให้เองอัตโนมัติ ส่วน m.blognone ไม่ตัดคำแฮะ ทำให้เข้าไปแล้วจะเป็นหน้า preview พร้อมกรอบของ opera mini ต้อง zoom in 1 ทีก่อน ส่วนความเร็วในการ pan ถือว่าเร็วกว่าแบบรู้สึกได้ครับ

ทดสอบแบบเร็ว ๆ ส่วนถ้าเวลาใช้งานจริงแล้วเป็นไง จะว่าอีกทีครับ

chayaninw Tue, 09/03/2010 - 19:37

ใช้ Browser ของ Symbian S60 V3 บน Nokia E63 ครับ จอขนาด 240x320 แนวนอน

ความกว้างเนื้อหาพอดี ไม่มีเนื้อหาล้น แต่ตัวหน้ามันล้นออกไปเล็กน้อยตรงขอบ (เล็กน้อยจริงๆ) ทำให้ยังสามารถ scroll ด้านข้างได้ เดาว่าเป็นผลจาก scroll bar ที่ทำให้เนื้อที่แสดงผลไม่ถึง 320px เป๊ะ ไม่มีปัญหากับการอ่านเนื้อหา

ข่าวที่มีคลิป YouTube ตัวคลิปจะล้นเกิน 320px คลิปสามารถเปิดดูได้ตามอัตภาพของระบบมือถือ

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

Nozomi Mon, 08/03/2010 - 20:23

Forum Poll Fullsite Login นี่จะไว้แบบนี้ก็ดีครับ

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

ปุ่มกลับมา Home ใช้ Logo ไปเลยก็ดีครับ

แต่ถ้าข้างล่างสุดมีปุ่ม สำหรับอ่านข่าวเก่าๆก็จะดีนะครับ แม้ว่าจะ จงใจให้ไม่มีก็เถอะ
หรือไม่อย่างนั้น ควรจะมี search box ให้ด้วย

ส่วนเนื้อข่าว ผมชอบ แสดงข่าว+คำโปรย มากกว่ามีแต่พาดหัว

mk Mon, 08/03/2010 - 22:07

ผมไม่คิดว่าการ search บนมือถือ เป็นวิธีหาข่าวเก่าที่ดีสักเท่าไรนะครับ อันนี้เป็นปัญหาของกูเกิล

แต่เรื่องข่าวเก่าๆ นี่ อยากอ่านสักแค่ไหนละครับ

Nozomi Mon, 08/03/2010 - 23:29

เหมือนมานั่งทำ Usability test ให้คนอื่นเลย 555
(ของตัวเองก็ยังเขียนไม่เสร็จ)

สำหรับข่าวเก่า ผมให้ 2/5
topic ผมให้ 3/5
ค้นหา ผมให้ 2/5

แต่ถ้าคิดกลับกัน ถ้าอยากอ่านข่าวเก่าจริงๆ เข้า Fullsite
ก็ได้เหมือนกันนี่เนอะ

willwill Mon, 08/03/2010 - 21:31

webOS SDK 1.4.0.42 ดูแล้วไม่น่าจะมีปัญหาอะไรครับ แต่ OS มันไม่รองรับภาษาไทยในระดับ engine

ปัญหาที่เจอคือ หน้า login ไม่ error เวลาใส่รหัสผิดครับ (หรือว่าขึ้นเป็นภาษาไทยไม่มีกรอบ?)

Golffy Tue, 09/03/2010 - 05:53

ผมลองบน hTC Touch (จอ 240x320)
Windows Mobile 6, Opera Mobile 10
พบว่าขนาดฟ้อนท์เล็กมากจนแทบอ่านไม่ออกเลยครับ
ทำไงดีครับ (T-T)

varavut Tue, 09/03/2010 - 20:18

ผมทดสอบบน Windows Mobile 6.5.5 23544 บนเครื่อง Acer F900 ขนาดจอ 480x800 ครับ โดยใช้ Opera Mini 5 beta 2 ครับ
สามารถแสดงผลได้ค่อยข้างดี แต่มีบางบรรทัดเกินออกมาคาดว่ามาจากการที่ opera ตัดคำไทยไม่ได้
http://farm5.static.flickr.com/4025/4418863571_c2f2f48bee.jpg

ปล.ผมใส่รูปไม่เป็นครับ

shaclow Wed, 10/03/2010 - 06:33

Blackberry browser ก็แสดงผลหน้าแรกถูกนะครับ แต่พอคลิกมาอ่านเนื้อข่าวแล้วมีรูปยื่นออกมานอกกรอบครับ