แนวทางการออกแบบเว็บบนมือถือ

แนวทางการออกแบบเว็บบนมือถือ

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

จริงๆแล้วเป็นเรื่องยาก ที่จะออกแบบเว็บบนมือถือได้ เพราะว่าข้อจำกัดมีเยอะมาก ไม่ว่าขนาดหน้าจอที่ไม่เท่ากัน (ลองนึกถึง nokia รุ่นที่ขายสองพันกว่าบาทกับ HTC ที่ขาย หมื่นกว่าบาท ขนาดหน้าจอคนละเรื่องกันเลย) นอกจากนี้ ที่ค่อนข้างจะเป็นประเด็นมากก็คือ เรื่องของความเร็วเชื่อมต่อ ที่แสนช้า ถึงแม้ว่าจะมีความหวัง ว่าจะได้ใช้ 3G ที่เร็วกว่า EDGE, GPRS แต่ความหวังก็ดับลงไปอย่างที่ทราบกันดีแล้ว

ดังนั้น เราจะต้องออกแบบแค่ไหนล่ะ จึงจะดี

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

แต่เมื่อเป็นการออกแบบหน้าเว็บเพื่อใช้กับมือถือ หรืออุปกรณ์พกพาแล้ว การตั้งค่าขนาดหน้าจอถือว่ามีผลมาก โดยหากเราตั้งที่ 320*480 ก็จะใช้ได้กับ iphone,palm pre, first gen ของ android ซึ่งแปลว่า พื้นที่ 80% ของ หน้าจอขนาด 1024*768 ก็จะหายไป ตามขนาดหน้าจอที่เล็กลง

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

ตัวอย่างนี้ เป็นหน้าเว็บของ Southwest Airline  และ iphone app ซึ่งหน้าเว็บก็จะมีส่วนต่างๆปรากฏมากมาย แต่เมื่อเป็น mobile app ก็จะพบเพียงแค่ส่วนสำคัญคือ book travel, check in, check flight status, check mile, etc 


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

และควรทำให้เหมือนกันในทุกๆ browser  โดยเราจะเป็นต้องเรียนรู้ถึงข้อจำกัดในแต่ละ browser ด้วยว่ามีข้อจำกัดอย่างไร เช่น ใช้ javascript ไม่ได้, ใช้ css ไม่ได้  เพื่อให้ได้หน้าตา และการทำงานที่เหมือนกัน

จากตัวอย่างด้านบน เราจะเห็นได้ชัดเลย ระหว่างมือถือกับหน้าเว็บ มีความแตกต่างกันอย่างเห็นได้ชัด แต่ก็เอามา focus เฉพาะ แต่สิ่งที่จำเป็นต่อ customer และ business เท่านั้น ไม่ใช่ว่าจะเอาทุกอย่างมาใส่ในหน้าเว็บได้

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

บทความนี้ ผมสรุปเอามาจาก http://www.lukew.com/ff/entry.asp?1117 อยากอ่านต้นฉบับก็ได้ไม่ว่ากันครับผม

[PRINT VERSION] เขียน: 2010-10-14 09:01:42 แก้ไข : 2010-10-14 09:01:42 อ่าน : 5764
tag : ออกแบบหน้าเว็บ,เว็บมือถือ,ออกแบบเว็บมือถือ, หน้าเว็บมือถือ, mobile web design, web design

Comment

Comment
BeYourCyber - 14/10/2010 08:01:42 -
ร่วมพูดคุยในหัวข้อของบทความ แนวทางการออกแบบเว็บบนมือถือ
ลองอ่านเพื่อเป็นแนวทางครับ สำหรับคนที่ยังไม่รู้ว่า จะต้องออกแบบเว็บอย่างไรเพื่อใช้กับมือถือ
lusasha - 01/09/2011 08:51:28 - 180.183.56.203
สวัสดีค่ะ พี่ๆ ทีมงาน
บุ๋มอยากได้รายละเอียดเกี่ยวกับการออกแบบเว็บบนมือถือค่ะ ตอนนี้กำลังจะทำให้กับ บ. แต่พยายามอ่านบทความหลายๆ บทความแล้ว แต่ยังไม่ค่อยเข้าใจ และไม่รู้ว่าจะเริ่มตรงไหนก่อน ต้องทำในโปรแกรมอะไร การเซตขนาด แนวทางการ design บุ๋มอยากรบกวนพี่ๆ เหมือนแบบว่า สอนเด็กนักเรียนเลยอ่ะค่ะ รบกวนหน่อยนะค่ะ ด่วนมาก
BeYourCyber - 01/09/2011 13:25:38 - 58.10.65.42
บทความนี้เป็นเพียง concept มากๆครับ เพื่อให้เอาไปประยุต์กับการทำเว็บบนมือถือ

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

ดูจากตัวอย่างที่แปะให้ดูก็ได้ครับว่าหน้าเว็บจริงกับมือถือต่างกัน

มือถือข้อจำกัดมันเยอะมาก ดังนั้นเราต้องนำเสนอเฉพาะสิ่งที่จำเป็นเท่านั้น

ส่วนการทำเว็บให้แสดงบนมือถือได้ ก็ใช้เทคนิคการทำเว็บธรรมดาครับ เพราะว่าปัจจุบันที่เป็น feature phone, smart phone, tablet ไม่มีปัญหาเรื่องการแสดงหน้าเว็บแล้วครับ แสดงได้ค่อนข้างดีเหมือนบนเครื่อง computer แล้วครับ