หากต้องการสร้าง mobile website จะเลือกใช้เครื่องมือในแถบใด

ในการที่จะมีเว็บไซต์ 1 เว็บไซต์ ในสมัยนี้นั้น นอกจากเราจะต้องดีไซน์เว็บให้สวยงามเมื่อดูผ่านจอคอมพิวเตอร์แล้ว เราก็จะต้องทำให้เว็บเราอ่านได้ง่ายและสวยงามผ่านอุปกรณ์พกพา (Mobile devices) อื่นๆ ด้วย เพราะว่าทุกวันนี้เราก็คงไม่ปฏิเสธว่ามือถือหรือแท็บเล็ตเริ่มมีบทบาทในชีวิตเรามากขึ้นทุกวัน เราอ่านข่าวบนมือถือในขณะที่นั่งรถไปทำงาน เราเปิดเฟซบุ๊กในขณะกินข้าว ฯลฯ ทีนี้เราๆ ที่คุ้นเคยกับ “เว็บไซต์บนคอมพิวเตอร์” เมื่อต้องย้ายเว็บไซต์มาอยู่บนอุปกรณ์พกพาเราจะเลือกทำอะไร? บางคนอาจเคยได้ยินว่าทำเว็บให้อ่านง่ายบนอุปกรณ์พกพาก็ทำ App สิ หรือทำ Mobile site สิ หรือทำเว็บแบบ Responsive ไปเลย ซึ่ง 3 คำนี้มันมีความหมายแตกต่างกันยังไงนะ? มาดูกันเลยฮับ

หากต้องการสร้าง mobile website จะเลือกใช้เครื่องมือในแถบใด

Mobile app

  • Mobile app ก็คือ Application บนอุปกรณ์พกพานั่นเอง (เอ่อ) คือเราก็จะเห็นๆ อยู่ว่าใน App Store เนี่ย ก็จะมีแอปหลายประเภท ทั้งแอปเล่นเกม แอปเครื่องมือนู่นนี่นั่น และเราก็สามารถทำเว็บให้กลายเป็น Mobile app ได้
  • ตัวอย่างของ Mobile app มีเยอะแยะมากมาย เช่น Facebook, Twitter หรือถ้าเป็นแอปที่สามย่านร่วมด้วยช่วยพัฒนา ก็จะมี Majorcineplex?และ Jeban นะฮับ อะฮิๆ
  • ข้อดีของการทำ Mobile app ก็คือ ผู้ใช้จะสามารถเข้าถึงเนื้อหาได้รวดเร็ว สวยงาม เพราะในเชิงการเขียนโปรแกรมนั้น สามารถเขียนแบบ Native ได้ โหลดเร็วด้วย เพราะไม่ต้องมานั่งดาวน์โหลด CSS หรือ JavaScript แบบเว็บไซต์แล้ว
  • แต่การทำ Mobile app ในปัจจุบันมีข้อเสียก็คือ ค่าใช้จ่ายในการทำค่อนข้างสูง และจะต้องทำแอปพลิเคชันให้กับทุก platform (iOS, Android, Windows Phone และอื่นๆ) ซึ่งในความเป็นจริงนั้นเราสามารถแสดงผลคอนเทนต์ในเบราเซอร์บนทุกอุปกรณ์พกพาได้โดยไม่จำเป็นต้องทำแอปพลิเคชันเลย Mobile site และการทำเว็บแบบ Responsive จึงตอบโจทย์แทนการทำ Mobile app ที่จะมานำเสนอต่อไปฮับ

Mobile site

  • คือการแยกเว็บไซต์มาเป็นอันใหม่อีก 1 เวอร์ชัน เป็นคนละเว็บกับตัวหลักที่มีอยู่
  • ซึ่งจะมีการออกแบบฟีเจอร์ให้เหมาะสมกับการใช้งานบนโทรศัพท์มือถือด้วย เช่น อาจมีการเปลี่ยนรูปแบบเมนู ปุ่มกดต่างๆ ให้ใช้งานได้ง่ายขึ้น
  • นอกจากนี้อาจตัดหน้าเว็บบางหน้าที่ไม่จำเป็นออก เหลือไว้เฉพาะหน้าที่เป็นเนื้อหาหลักสำคัญๆ เท่านั้น
  • Mobile site จะเหมาะกับเว็บยุค desktop คือไม่ได้ออกแบบเว็บมาเพื่ออ่านง่ายในอุปกรณ์พกพามาตั้งแต่ต้น และเหมาะกับเว็บที่มีฟังก์ชันยุบยับ แต่ต้องการจะแสดงเนื้อหาบางส่วนในอุปกรณ์พกพาก็พอ
  • แต่ถ้าทำเว็บเป็น Mobile site ข้อเสียก็คือจะต้องทำ CMS (Content Management System) ที่ทำมาเพื่อ update เนื้อหาใน Mobile site ให้เท่ากับหน้าเว็บปัจจุบันที่มีอยู่ (ก็คือว่าเราจะต้องเสียเวลาในการจัดการ content เพิ่มขึ้นนั่นเอง)
  • ตัวอย่าง Mobile site ได้แก่?m.facebook.com,?mobile.twitter.com, m.majorcineplex.com

เว็บแบบ Responsive

  • Responsive เป็นเทคนิคการเขียนเพื่อปรับรูปแบบการแสดงผลให้เหมาะกับอุปกรณ์พกพา เช่น มีการปรับเปลี่ยนขนาดตัวอักษร หรือปรับเปลี่ยนรูปแบบการจัดวางให้เหมาะกับการแสดงผลในแนวแคบ และรองรับการสัมผัสด้วยนิ้วมือได้ดีกว่า
  • ซึ่งข้อดีคือ จะอัพเดทข้อมูลแค่ครั้งเดียว ก็จะแสดงผลได้หมดในทุกๆ platform
  • แต่เว็บแบบ Responsive นั้น “ไม่ได้เหมาะกับเว็บทุกประเภท” อย่างที่บอกไปแล้วว่า การทำเว็บแบบ Responsive นั้นเหมาะแก่การปรับแต่งรูปแบบการแสดงผล แต่ก็มีบางเว็บไซต์ที่นำข้อดีของการทำ Mobile site และการทำเว็บแบบ Responsive มาอยู่ในเว็บเดียวกันได้
  • ตัวอย่างเว็บ responsive ได้แก่ microsoft.com,?ghosthorses.co.uk,?mediaqueri.es?(อันนี้เอาไว้ดูตัวอย่างเว็บที่เป็น responsive ได้ สวยๆ เพียบ)

ก็หวังว่าจะช่วยให้มองความแตกต่างระหว่าง Mobile app , Mobile site และการทำเว็บแบบ Responsive ได้มากขึ้นนะฮับ ใครสนใจอยากทำเว็บไซต์ให้ผ่านง่ายในอุปกรณ์พกพาต่างๆ ก็ให้สามย่านรับใช้ได้นะฮ้า 😀

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

การออกแบบเว็บไซต์ที่ดีจะต้องคำนึงถึงการใช้งานบนแพลตฟอร์มอื่น ๆ ให้เข้าถึงได้ง่ายและมีความสวยงาม ซึ่งเจ้าของธุรกิจบางท่านอาจจะยังสับสนว่าการย้ายเว็บไซต์บนหน้าจอคอมพิวเตอร์ไปที่อุปกรณ์อื่น ๆ วิธีไหนที่จะเหมาะกับกลุ่มเป้าหมายและงบประมานที่ตั้งไว้มากที่สุด ดังนั้นในบทความนี้ เราจะมาเล่าถึงความแตกต่างระหว่าง Mobile App และ Responsive Website เพื่อให้เห็นภาพมากขึ้นว่า ตัวเลือกใดเหมาะสมกับธุรกิจคุณ

Mobile app (แอปบนมือถือ)

ซอฟต์แวร์ที่ถูกสร้างขึ้นมาโดยเฉพาะเพื่อใช้ในอุปกรณ์พกพา เช่น โทรศัพท์มือถือ แทบเล็ต เป็นต้น การจะเปิดใช้แอปพลิเคชันได้ จะต้องดาวน์โหลดและติดตั้งบนอุปกรณ์ก่อนและต้องมีการอัพเดตอย่างต่อเนื่องเพื่อการใช้งานที่ดีขึ้น นอกจากนั้น ในการทำแอปจะต้องคำนึงถึงระบบปฏิบัติการ (OS: Operating system) ของอุปกรณ์ของผู้ใช้ด้วย เช่น iOS, Android, Windows และอื่น ๆ เพื่อให้ผู้ใช้สามารถเข้าถึงอย่างครอบคลุม

หากต้องการสร้าง mobile website จะเลือกใช้เครื่องมือในแถบใด

(Image: invisionapp.com)

ข้อดี

  • หน้าจอสวยงามรองรับมือถือได้เป็นอย่างดี
  • สร้าง Brand Awareness และความน่าเชื่อถือให้กับธุรกิจ
  • เข้าถึงเนื้อหาบางส่วนโดยไม่ต้องเชื่อมต่ออินเทอร์เน็ต
  • สื่อสารกับผู้ใช้งานได้โดยตรงผ่าน push notifications
  • เหมาะอย่างยิ่งสำหรับอุตสาหกรรมเกมส์

ข้อเสีย

  • ราคาสูงและต้องทำรองรับหลายระบบปฏิบัติการ
  • ใช้เวลาในการผลิตนานกว่าเว็บไซต์
  • ดึงดูดผู้ใช้งานให้ดาวน์โหลดได้ยาก

Responsive Website (เว็บไซต์ที่รองรับหน้าจอทุกชนิด)

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

หากต้องการสร้าง mobile website จะเลือกใช้เครื่องมือในแถบใด

ข้อดี

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

ข้อเสีย

  • ไม่ได้ถูกออกแบบมาให้รองรับความต้องการแบบเฉพาะเจาะจง
  • ไม่เหมาะกับในกรณีที่มีเว็บไซต์อยู่ก่อนหน้าแล้วนำมาดัดแปลงให้เข้ากับแพลตฟอร์มอื่น
  • การใช้ animation บนเว็บไซต์บางอย่างอาจถูกจำกัด

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

ติดตามอ่านบทความดี ๆ ที่น่าสนใจ ไม่ว่าจะเป็น Machine Learning, Startup, Design, Software Development และ Management ทาง Senna Labs Blog ได้ทุกวัน