Mobile First???

ในระยะหลังมานี้ จริงก็หลายปีมาแล้ว นับตั้งแต่ smart phone แบบหน้าจอเต็มไร้ซึ่งปุ่มกดใดๆ การทำงานทั้งหมดสั่งการจากปลายนิ้วของผู้ใช้งาน คำว่า Mobile First ลอยมาเข้าหูอยู่บ่อยๆ เนื่องจากปัญหาการออกแบบเวปไซต์แบบเก่าที่คำนึงถึง Desktop หรือหน้าจอ monitor ของคอมพิวเตอร์ขนาด PC เท่านั้น ทำให้เวลาที่ผู้ใช้งานเข้าชมเวปไซต์ด้วย smart phone, tablet หรืออุปกรณ์ที่มีหน้าจอขนากเล็กกว่า เวปไซต์นั้นก็ยังคงแสดงผลเป็นแบบ 1:1 อยู่ดี ทำให้เราต้องใช้แว่นขยายส่องเข้าไป โดยการใช้นิ้วมือสองนิ้วของเรานั้นถ่างหน้าจอออกมาเพิ่มทำการอ่านข้อมูลในหน้าเพจนั้น ซึ่งเป็นสิ่งที่ไม่สะดวกสบายเป็นอย่างมาก

ตั้งนั้นการออกแบบเวปไซต์ให้สามารถแสดงผลได้ในหลายขนาดหน้าจอของอุปกรณ์แสดงผลต่างจึงจำเป็นต้องนำเข้ามา

แต่ทำไมต้อง Mobile First? ทำไมต้องให้ความสำคัญกลับมือถือมากกว่า?

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

1,000,000,000,000 (อ่านว่า หนึ่งล้านล้าน) ในปัจจุบันมีจำนวนโทรศัพท์เคลื่อนที่อยู่เท่านี้บนโลกใบนี้

เพราะฉะนั้นเราควรต้องมาใส่ใจกับ Moblie มากกว่า Desktop ได้แล้ว

Screen Shot 2015-07-25 at 9.04.19 PM

สถิติจากเวปหนึ่งที่ผมดูแลอยู่และหลายเวปก็เป็นไปในทิศทางเดียวกัน คือ สถิติผู้ใช้งานจาก moblie มากกว่า desktop เป็นเท่าตัว

HOW?

ออกแบบอย่างไร

แยกเป็นสองเวอร์ชั่น? mobile version กับ desktop version…

หรือ

responsive design?

คำตอบสำหรับผมคือ ถูกทุกข้อ อะไรก็ได้อย่าง เพราทั้งสองอย่างคือเรื่องเดียวกัน แต่ผมให้คะแนนแอนเอียงไปทาง responsive desing มากกว่า

Responsive Design คืออะไร?

ATCM-Responsive-Design

Responsive Design คือการออกแบบ(พัฒนา)เว็ปไซต์ ให้สามารถแสดงผลได้อย่างเหมาะสม บนอุปกรณ์ที่แตกต่างกัน โดยใช้โค้ดร่วมกัน URL เดียวกัน

ไม่จำเป็นต้องต้องแยกเป็น www.something.com กับ m.something.com

หลักการคือจะใช้ความสามารถของ CSS และ Javascript ในการทำงาน โดยพระเอกคือ CSS3 Media Queries ที่สามารถเลือก style ที่เหมาะสมสำหรับอุปกรณ์ต่างๆ ซึ่งมันก็คือการแยก desktop version กับ mobile version หรือแม้กระทั่ง tablet version โดยใช้ CSS นั้นเอง

ds-mobilefirst-2

ส่วนการเริ่มออกแบบหรือพัฒนาเราจะมองที่ mobile เป็นหลักก่อนแล้วค่อยขยายใหญ่ไปที่ tablet และ desktop ซึ่งนี้ก็คือความหมายของ Mobile First ที่ต้องมองที่ mobile เป็นหลักก่อน็เพราะว่า ในหน้าจอขนาดเล็กที่สุดนั้น ต้องมีฟังก์ชั่นการทำงานที่ครบถ้วนและจำเป็นจริงๆเท่านั้น ซึ่งหลังจากนั้นเมื่อหน้าจอมีขนาดใหญ่ขึ้นเราจึงสามารถเติมเต็มส่วนที่ขาดหายไปหรือไม่จำเป็นต้องมีเท่าไร เข้าไปได้

มองกลับกันถ้าเราออกแบบหรือพัฒนาที่ desktop ก่อน เราคงต้องใส่ทุกอย่างลงไปในนั้น เทคโนโลยีต่างๆที่มี ความเจ๋งเป้ง และของที่เรามีในตัวลงไปอย่างเต็มที่ ซึ่งคงเป็นเรื่องยากหากต้องย่อลงมาในขนาดหน้าจอที่เล็กลง

แต่ทั้งนี้ทั่งนั้นผมไม่ได้หมายความว่า Responsive Web จะมาแทนที่ Mobile Web ยังคงเห็นว่าเวปใหญ่ๆหลายเวปก็ยังเลือกที่จะใช้ Mobile Web อยู่ เช่น youtube, facebook ก็คงต้องดูกันต่อไปใหนระยะยาวว่าอะไรที่จะเหมาะสม และถูกเลือกให้คงอยู่กันต่อไปคับ เหมือนอย่าง Flash ที่ตายสนิท หรือ HTML5 ที่ดูเหมือนจะไม่ค่อยเกิด หรืออย่าง javascript ที่เดินทางมาถึง Node.js ซึ่งใครจะไปคิดว่า javascript จะมาได้ไกลขนาดนี้

…つづく