เว็บไซต์เดียว
แต่แสดงผลแปรผันไปตามขนาดของอุปกรณ์
สร้างเว็บไซต์ย่อยหลายเว็บไซต์
เพื่อให้รองรับการแสดงผลในหน้าจอแต่ละขนาดที่แตกต่างกัน
—
- การตอบสนองต่อหน้าจอที่ขนาดแตกต่างกัน
ด้วยเว็บไซต์หลักเพียงเว็บเดียว
ก็สามารถแสดงผลที่แตกต่างกันบน Desktop แท็ปเล็ต และมือถือ
รองรับการแสดงผล
ได้ทั้งบน Desktop แท็ปเล็ต และมือถือด้วยเช่นกัน
—
- แง่ของ SEO Responsive Web Design กับ Mobile Site อะไรที่ดีกว่ากัน
Responsive Web Design นั้นผ่าน Google mobile friendly test ได้อยู่แล้ว
เพราะเว็บไซต์สามารถปรับเปลี่ยนการแสดงผลไปตามขนาดของหน้าจอ แต่อาจมีข้อด้อยอยู่นิดคือ UX หรือการแสดงผล อาจไม่ได้สวยงามหมดจดเท่ากับการออกแบบมาเพื่อ Mobile โดยเฉพาะ จึงทำให้ Google จะจัดอันดับเว็บเหล่านี้ไว้ต่ำกว่า เว็บที่มี Mobile site เล็กน้อย
สามารถผ่าน Google mobile friendly test ได้อย่างสบายๆ
เพราะ Google bot จะถูก redirect ไปยังหน้าเว็บ Mobile site ที่จัดเตรียมไว้โดยเฉพาะ ซึ่งจะทำให้การแสดงผล หรือ UX ออกมาสวยงามกว่าแบบ Responsive Web Design จึงส่งผลให้ Google จะจัดอันดับเว็บเหล่านี้ไว้เหนือกว่าเว็บที่พัฒนาแบบ Responsive Web Design
—
- Responsive Web Design กับ Mobile Site แนวทางไหนง่ายกว่ากัน
Responsive Web Design ค่อนข้างมีข้อจำกัดหลายเรื่องและมีความยุ่งยากในการพัฒนา
เพราะการออกแบบและความเร็วในการโหลดไฟล์นั้นเป็นอุปสรรคสำคัญ ซึ่งนักพัฒนาจำเป็นต้องจัดเตรียมสคริป จัดการเรื่องขนาดของตัวอักษรและอัพโหลดรูปหลายรูปสำหรับการแสดงผลในหน้าจอขนาดต่างกันด้วย ซึ่งทั้งหมดนี้อาจทำให้เว็บไซต์มีจำนวนชุดคำสั่งที่มากกว่าปกติถึง 2 เท่า สำหรับบริษัทพัฒนาเว็บขนาดใหญ่ที่เชี่ยวชาญ สามารถแบ่งงานให้ทีมโปรแกรมเมอร์ร่วมกันพัฒนาและทดสอบเว็บไซต์บนหน้าจอหลายๆ ขนาดได้ไม่ยาก แต่สำหรับเว็บมาสเตอร์ทั่ว ๆ ไป อาจต้องเสียเวลาพัฒนาเว็บไซต์แบบ Responsive Web Design นี้นานกว่าปกติ
อุปสรรคของแนวทางนี้คือโทรศัพท์และแท็ปเล็ตที่มีอยู่ในตลาดผู้บริโภคนั้น มันช่างมากมายและแตกต่างกันมาก จนทำให้การพัฒนา Mobile site เพียงขนาดเดียวไม่เพียงพอ
แต่ปัญหาไม่ได้อยู่ที่การพัฒนาเว็บไซต์ ปัญหาที่นักพัฒนาเว็บและเจ้าของเว็บไซต์มักบ่นกัน คือ พวกเขาจะต้องดูและเว็บและอัพเดทข้อมูลอย่างน้อย 2 เว็บไซต์ ซึ่งก็ทำให้การดูแลเว็บไซต์เหล่านี้เป็นงานที่ค่อนข้างลำบาก และใช้เวลามากกว่าปกติ แต่ข้อดีคือ Mobile site นั้นจะมีการใส่ชุดโปรแกรมคำสั่งที่แยกจากเว็บไซต์หลัก และไม่ยุ่งเกี่ยวกัน ซึ่งมันไม่ได้ซับซ้อนอะไรมากนัก ดังนั้นจึงทำให้ทำงานง่ายกว่าแบบ Responsive Web Design
—
- เรื่องการออกแบบล่ะ
การออกแบบเว็บแบบ Responsive Web Design นั้นจำเป็นต้องคำนึงถึงองค์ประกอบ
ที่จะต้องแสดงในหน้าเว็บในขนาดที่แตกต่างกัน จึงถือเป็นข้อจำกัดที่ทำให้ไม่สามารถใส่ลูกเล่นได้มากนัก
คุณสามารถใส่ลูกเล่นต่างๆ ลงใน Mobile site ได้อย่างเต็มที่
เพียงแค่คำถึงถึงขนาดของพื้นที่ในแนวกว้างเท่านั้น แถมคุณยังสามารถเพิ่มแนวคิดแบบ Responsive Web Design เข้าไปเพื่อให้เว็บไซต์มีความยืดหยุ่นรองรับ Mobile devices ได้หลายขนาด แต่สำหรับเว็บไซต์หลัก เพื่อการแสดงผลบน Desktop นั้น คุณสามารถใส่รายละเอียด และลูกเล่นได้อย่างไม่จำกัดอีกด้วย
—
- ด้าน UX ล่ะ อะไรที่สร้างประสบการณ์ให้แก่ผู้ใช้ได้ดีกว่ากัน
เพราะจริงๆ แล้วโลกใบนี้ไม่ได้มี Superman ที่จะทำอะไรได้ดีเลิศไปหมดซะทุกอย่าง
ด้วยข้อจำกัดด้านการออกแบบทางสถาปัตยกรรม ข้อมูลที่ต้องรองรับหน้าจอหลายๆ ขนาด และมีชุดคำสั่งที่ซับซ้อนมากมาย นั่นจึงทำให้เว็บแบบ Responsive Web Design เป็นเว็บที่แค่สอบผ่านด้าน UX แต่ไม่ได้สร้างความประทับใจเท่า Mobile site
คงต้องยอมรับในเรื่องนี้ว่า Mobile site นั้นเป็นเว็บที่ถูกออกแบบมาสำหรับหน้าจอของมือถือ
ดังนั้นมันจึงแสดงผลที่สวยงามกว่า และโหลดเร็วกว่าแบบ Responsive Web Design แน่นอน
—
- แล้วอะไรที่เหมาะกับการแสดงผลทั้งบน desktop และ mobile devices มากกว่ากัน
Responsive Web Design นั้นถูกออกแบบมาเพื่อการนี้โดยเฉพาะ
ซึ่งจะช่วยให้เว็บไซต์มีความยืดหยุ่นและแปรผันไปตามขนาดของหน้าจอที่ใช้งาน เพียงแต่คุณจะต้องคำนึงเรื่องรายละเอียด และลูกเล่นที่จะนำมาใส่ลงในเว็บ เพราะมันจะต้องรองรับการแสดงผลในหน้าจอทุก ๆ ขนาด
Mobile site ก็เป็นอีก 1 ทางเลือกที่น่าสนใจ
เพราะต้องไม่ลืมว่าจริงๆแล้วคุณมีเว็บไซต์อย่างน้อย 2 เว็บ คือ เว็บไซต์หลักที่ออกแบบสำหรับ desktop และ mobile site สำหรับมือถือ ซึ่งจะทำให้คุณนำเสนอลูกเล่นเก๋ ๆ หรือรูปภาพขนาดใหญ่ได้อย่างสนุก
—
- Responsive Web Design กับ Mobile Site แบบไหนโหลดเร็วกว่ากัน
เป็นธรรมดาอยู่แล้วที่ของใหญ่กว่าย่อมต้องเคลื่อนไหวช้ากว่า
เพราะชุดคำสั่งของ Responsive Web Design นั้นมีความซับซ้อนมากมาย นั่นจึงเป็นสาเหตุให้เว็บไซต์แบบ Responsive Web Design นั้นโหลดช้ากว่า Mobile site
คุณได้แยกเว็บไซต์สำหรับ Mobile devices ที่มีขนาดกะทัดรัดเหมาะสำหรับมือถือ
ไฟล์ย่อมจะเล็กกะทัดรัดตามไปด้วย จึงเป็นเหตุผลให้ Mobile site สามารถดาว์นโหลดได้เร็วกว่าเว็บปกติทั่วไป เรื่องความเร็วก็เป็นอีกเรื่องที่ Google คำนึงถึงมาก ๆ ขนาดที่ทำตัวทดสอบออกมาให้ใช้กันเลยทีเดียว Google page speed insights
—
- การอัพเดทเนื้อหาล่ะ อะไรที่ง่ายกว่ากัน
หากคุณมีกำลังคนน้อย ขอแนะนำแนวทางของ Responsive Web Design
เพราะด้วยความที่เป็นเว็บเดียวแล้วรองรับการแสดงผลบนทุก devices คุณจึงง่ายมาก ๆ ที่จะจัดการข้อมูล และอัพเดทเนื้อหาได้จาก CMS ที่เดียว
คุณจะต้องอัพเดทเนื้อหาอย่างน้อย 2 ที่
เพราะเว็บไซต์ของคุณถูกออกแบบให้ทำงานแยกกันโดยสิ้นเชิง แต่ถ้าคุณมีคนน้อยและกังวลว่าจะทำการอัพเดทไม่ไหว ก็ขอแนะนำว่าคุณควรจะโฟกัสไปที่เว็บหนึ่งเว็บใดก่อน เช่น ตั้งค่าให้ Mobile site เป็นเว็บหลักไปเลย แล้วปรับให้เว็บสำหรับ desktop เป็น Responsive Web Design ซะ
—
- ถ้ากำลังจะสร้างเว็บใหม่ล่ะ จะเลือกแนวทางไหนดี
ก็นี่แหละคือเรื่องที่พวกเราสงสัยกันและได้เข้ามาอ่านบทความจนถึงตรงนี้ จริงๆ แล้ว
ถ้าเว็บของคุณไม่ซับซ้อน แถมคุณยังมีกำลังคนน้อยด้วย all-in-one อย่าง Responsive Web Design ก็ถือเป็นทางเลือกที่ดีนะ
แม้คุณจะมองว่า Desktop มันกำลังจะตก trend แต่ก็ต้องไม่ลืมว่าธุรกิจของคุณมีใครเป็นลูกค้ากลุ่มเป้าหมาย
ถ้าหากธุรกิจของคุณเป็นประเภท B2B หรือ B2G แล้วละก็ Desktop version จะมีความสำคัญมากกว่า Mobile version แน่นอน แต่ถ้าลูกค้าของคุณคือ C – consumer แล้วละก็ Mobile site นี่แหละคือคำตอบ
—
- มุมมองของผู้เขียน
ลองจินตนาการว่าคุณมียานพาหนะที่สามารถวิ่งบนถนนหรือแล่นในน้ำได้
มันคงเป็นอะไรที่เจ๋งสุดๆ แต่ถ้าคุณต้องไปขับแข่งกับรถสปอร์ตล่ะ มันอาจจะวิ่งไม่เร็วเท่าที่คุณต้องการ หรือถ้าแล่นลงทะเลไปเที่ยวเกาะล่ะมันคงพาคุณไปได้ แต่ก็คงไม่ได้สะดวกสบายเท่ากับการนั่งเรือยอร์ชไป
ลองจินตนาการดูว่าหากคุณมีรถยนต์สปอร์ตอยู่หนึ่งคัน และมีเรือยอร์ชอีกหนึ่งลำ
เวลาคุณขับไปไหนก็มีแต่คงมองแถมยังซิ่งวิ่งเร็วเป็นจรวดอีก หรือเมื่อคุณจะไปเที่ยวทะเล แล้วคุณมีเรือยอร์ชส่วนตัว ขับไปเที่ยวเกาะนู้นเกาะนี้ได้ไม่อายใคร ซึ่งทั้งรถสปอร์ตและเรือยอร์ชมันถูกออกแบบมาให้เหมาะกับงานที่แตกต่างกันชัดเจน
—
- เรื่องชื่อโดเมนเนมของเว็บไซต์
คุณใช้ชื่อโดเมนเนมเพียงชื่อเดียว
ง่ายต่อการโปรโมท ง่ายต่อการจดจำ
จริงๆ แล้ว Mobile site มันไม่จำเป็นต้องมีโดเมนเนมเฉพาะอะไรเลย
เพียงแค่มีชื่อที่ยาวขึ้นเล็กน้อย ทุกวันนี้ Google จะมองว่าคุณมี 2 เว็บไซต์แยกกัน ซึ่งมีการจัดอันดับที่แตกต่างกันด้วย Mobile site จะไปปรากฏในอันดับการค้นหาที่มาจากมือถือ และ Desktop ก็จะไปปรากฏอันดับในการค้นหาที่มาจาก Desktop
—
- อนาคตของเว็บไซต์
ถ้าคุณไม่มีแผนที่จะปรับเปลี่ยนรูปแบบของเว็บไซต์ของคุณอยู่บ่อยๆ
RWD ถือเป็นทางเลือกที่ใช่เลย
ปกติการใช้งาน Mobile site มักจะใช้งานกันไม่นานนักประมาณ 6-8 เดือน
ก็จะมีการปรับเปลี่ยนรูปแบบไปตามกระแสนิยมและแคมเปญการตลาด ดังนั้นคุณจึงควรพัฒนาเว็บไซต์หลักด้วยแนวคิดแบบ Responsive Web Design ควบคู่ไปด้วย
—
- Responsive Web Design กับ Mobile Site แนวทางไหนเหมาะกับใคร
เป็นทางเลือกที่ดีสำหรับเว็บไซต์ที่ไม่มีความยุ่งยากซับซ้อนของข้อมูล
เช่น มีสินค้าจำนวนไม่มาก หรือไม่มีตารางข้อมูลขนาดใหญ่
เป็นทางเลือกที่ดีสำหรับเว็บไซต์ที่มีความซับซ้อนของข้อมูล หรือมีสินค้าจำนวนมาก
แต่แนวทางนี้คุณจะต้องแยกผู้ใช้ออกเป็น 2 กลุ่มที่ชัดเจนคือกลุ่มที่ใช้มือถือ และกลุ่มที่ใช้ Desktop
—
- เพิ่มเติมเกี่ยวกับการทำ SEO ของแต่ละแนวทาง
Responsive Web Design นั้นรองรับการทำ SEO อยู่แล้ว
แต่เพราะเว็บแบบ Responsive Web Design นั้นมักไม่นิยมใส่ content ที่เป็นตัวอักษรมากนัก เพราะเมื่อแสดงบนหน้าจอขนาดเล็กอย่างมือถือแล้ว จะไม่น่าอ่าน จึงอาจทำให้ใส่ keyword ลงในเนื้อหาได้ไม่มากนักด้วย
Content มีความสำคัญต่อการทำ SEO มาก
ด้วยแนวทางของ Mobile site นั้นค่อนข้างเหมาะกับเว็บไซต์ที่นำเสนอเนื้อหาหรือบทความยาวๆ กล่าวคือคุณสามารถสร้าง SEO content เพื่อใส่เนื้อหาได้อย่างครบถ้วนบน Responsive Web Design Desktop version จากนั้นก็นำเอาเนื้อหาเพียงบางส่วนที่มี keyword สำคัญมาวางใน Mobile site
—
- สรุปว่า…
เป็นทางเลือกที่ดีที่สุดสำหรับเว็บไซต์ที่มีเนื้อหาไม่มาก ไม่ซับซ้อน ไม่ต้องการมีการเปลี่ยนแปลงดีไซน์และโครงสร้างของเว็บไซต์บ่อยๆ
โดยเฉพาะอย่างยิ่งหากคุณไม่มีคนและไม่มีเวลาในการมาอัพเดท content หลายๆ ที่พร้อมๆ กัน เพราะ Responsive Web Design นั้นจำเป็นจะต้องมีเว็บมาสเตอร์ที่เชี่ยวชาญมาช่วยจัดการในเรื่องการปรับเปลี่ยนดีไซน์ของเว็บไซต์
 | เหมาะกับเว็บไซต์ขนาดกลางและขนาดเล็กที่ไม่ซับซ้อน |
| เหมาะกับเว็บไซต์ที่มีจำนวนหน้าไม่มาก |
| มีชื่อโดเมนเนมเดียว จดจำง่าย |
 | มีชุดคำสั่งโปรแกรมที่ซับซ้อน |
| โหลดช้า |
เป็นทางเลือกที่ดีที่สุดสำหรับเจ้าของเว็บไซต์ที่ชอบเปลี่ยนแปลงดีไซน์บ่อยๆ
ให้อิสระแก่นักออกแบบในการใส่ลูกเล่นต่างๆ ลงในหน้าเว็บไซต์ และมีทีมงานในการใส่ content แต่ก็ต้องไม่ลืมว่าจริงๆ แล้วคุณจะมี 2 เว็บไซต์ให้ต้องดูแลโดยที่มีการแบ่งกลุ่มของผู้ใช้แยกกันอย่างชัดเจน แนะนำว่าก็ควรทำ Responsive Web Design ควบคู่ไปด้วย เหมาะกับเว็บขนาดใหญ่ที่มีความซับซ้อน
| แยกกลุ่มผู้ใช้ตามประเภทของอุปกรณ์อย่างชัดเจน |
| ต้องการสร้างความประทับใจให้แก่ผู้ใช้ แต่ก็ได้เรื่อง SEO พ่วงมาด้วย |
| ต้องเสียเวลาอัพเดทหลายหลายที่ |
| Automatic redirect script ด้วย |
มุมมองของผู้เขียน
ทั้งนี้ผู้เขียนจะขอโฟกัสไปที่เว็บไซต์เพียงอย่างเดียวก่อน เพราะจริงๆ แล้วยังมีอีกวิธีการหนึ่ง ซึ่งก็คือ การสร้าง Mobile Application เพื่อให้ผู้ใช้สามารถดาว์นโหลดแอพไปติดตั้งบนอุปกรณ์พกพา (Mobile Devices) ของแต่ละคน เพื่อให้สามารถเข้าถึงบริการของท่านได้อย่างสะดวก
แต่ผู้เขียนเล็งเห็นว่า หากท่านจะต้องจ้างนักพัฒนา เพื่อมาสร้าง Mobile App ของท่านแล้ว ท่านอาจจำเป็นจะต้องสร้างอย่างน้อย 2 แพลตฟอร์ม (iOS และ Android) ซึ่งอาจทำให้ท่านต้องเสียค่าใช้จ่ายในการพัฒนาแอพและค่าโปรโมทแอพของท่านด้วยงบประมาณที่สูงขึ้น
แต่ถ้าหากท่านมีงบประมาณที่มากพอ และมีวัตถุประสงค์ที่ชัดเจน ในการสร้างแอพ เพื่อเพิ่มช่องทางการให้บริการและการติดต่อสื่อสารกับผู้ใช้ของท่านแล้ว ผู้เขียนก็อยากแนะนำให้ท่านมี Mobile App ไว้ด้วยเช่นกัน
ตัวอย่าง Responsive Web Design
ตัวอย่าง Mobile Site
http://www.tnt.co.th/en/news/123-responsive-web-design-mobile-site
อนาคตของเว็บไซต์ เมื่อใครๆ ก็ใช้แต่โมบาย
ยุคนี้เป็นยุคที่ใครๆ คงปฏิเสธไม่ได้ว่าโทรศัพท์มือถือที่เชื่อมต่ออินเทอร์เน็ตกลายเป็นเพื่อนสนิทของมนุษย์เมืองอย่างเราๆ ท่านๆ ไปแล้ว ตั้งแต่ตื่นนอนจนเข้านอน โทรศัพท์มือถือมักจะอยู่ข้างกายที่ไม่เคยห่าง คนยุคนี้จะเดินทางไปไหนหรือจะทำอะไรมีได้ควักมือถือออกมาส่องมาเล่นกัน ซึ่งเราๆ ท่านๆ ก็คงเห็นกันจนชินตากันแล้ว
พอพฤติกรรมของผู้ใช้เปลี่ยนไปแบบนี้ เจ้าของเว็บไซต์จะอยู่เฉยทำเป็นทองไม่รู้ร้อนก็คงจะต้องตกยุคเป็นแน่
เพราะคงไม่มีใครอยากเข้าเว็บไซต์ของท่านที่โหลดช้า เนื้อหาก็อ่านลำบาก จนแม้แต่ Google ก็ยังออกมาประกาศปาวๆ ว่าต่อไปนี้ฉันจะไม่ยอมรับเว็บไซต์ที่ไม่เหมาะกับการใช้งานบนมือถืออีกต่อไป แล้วท่านเจ้าของเว็บไซต์ที่ยังไม่ได้ปรับเว็บไซต์ของท่านให้เหมาะกับมือถือล่ะ
ท่านจะมีวิธีการใดหรือจะเลือกแนวทางไหนให้เหมาะกับธุรกิจของท่าน
ผมขอแบ่งแนวทางในการปรับปรุงเว็บไซต์ออกเป็น 2 แนวทางด้วยกันคือ
แนวทางที่ 1 การทำ Responsive Web Design
Responsive Web Design หรือการทำให้เว็บไซต์ที่สามารถปรับเปลี่ยนการแสดงผลแบบแปรผันไปตามขนาดของหน้าจอที่ใช้งาน ซึ่งเรียกได้ว่าเว็บของท่านจะสวยงามและใช้งานง่ายบนหน้าจอทุกๆ ขนาดกันเลยทีเดียว
แนวทางที่ 2 การทำ Mobile Sub-site
Mobile Sub-site คือ การสร้างเว็บย่อยเพิ่มขึ้นมาสำหรับอุปกรณ์พกพาแต่ละขนาดโดยเฉพาะ หรือที่เรียกว่า Adaptive Web Design วิธีการนี้จะช่วยเพิ่มคุณภาพของการแสดงผลและการใช้งานได้ตรงกับขนาดของอุปกรณ์แต่ละชนิดมากที่สุด เช่น การออกแบบเว็บไซต์สำหรับ iPhone โดยเฉพาะ หรือออกแบบ sub-site สำหรับแท็ปเล็ตขนาด 1024*768 พิเซล เป็นต้น
อาจฟังดูว่ามีความยุ่งยากและซับซ้อนกว่าแนวทางแรก แต่มันจะช่วยให้คุณง่ายต่อการจัดสรรองค์ประกอบ และเนื้อหาบนหน้าเว็บไซต์ให้ตรงกับผู้ใช้กลุ่มเป้าหมาย และยังช่วยให้เว็บไซต์โหลดเร็วขึ้นด้วย
แนวทางนี้ท่านก็ไม่ต้องกังวลว่า ท่านจะต้องทำการโปรโมทเว็บไซต์ทีละหลายๆ หน้า
เพราะเพียงแค่ท่านติดตั้งสคริปเพียงไม่กี่บรรทัดลงในเว็บเดิม ผู้ใช้ที่เข้าเว็บของท่านผ่านมือถือหรือแท็ปเล็ต (Mobile devices) ก็จะเข้าสู่เว็บ Mobile Sub-site ของท่านเองโดยอัตโนมัติ
==
vir9.com
m.vir9.com
โดยใช้ script check device ถ้าเป็นมือถือ ให้ redirectไป m
หรือ อีกวิธีใส่ปุ่มกด เพื่อให้ดูในเวอร์ชั้นมือถือ แล้วจะวิ่งไป m
สรุป ถ้าทำ mobile site ต้องทำอีกเว็บหนึ่ง
อาจจะทำหน้าเดียว
โปรเจคต่อไป m.vir9.com