การออกแบบเว็บไซต์มือถือมีความซับซ้อนเนื่องจากเว็บไซต์มือถือรุ่นหนึ่งอาจไม่สามารถใช้งานได้กับทุกอุปกรณ์ นักออกแบบจะต้องตระหนักถึงแนวทางการออกแบบที่ดีที่สุดเพื่อให้สถานะโทรศัพท์มือถือของคุณมีความหมายและคุ้มค่า
มีการถกเถียงกันอย่างต่อเนื่องในหมู่นักพัฒนาเว็บเกี่ยวกับวิธีการสร้างเว็บไซต์ที่ปรับให้เหมาะกับมือถือเป็นวิธีที่ดีที่สุด มีสามวิธีในการพัฒนาเว็บไซต์มือถือ
เหล่านี้คือ:
- ออกแบบเว็บไซต์ที่ตอบสนอง
- เว็บไซต์มือถือโดยเฉพาะ
- RESS: การเขียนโปรแกรมฝั่งเซิร์ฟเวอร์ทำให้ CSS และ HTML ขึ้นอยู่กับประเภทของอุปกรณ์
แต่ละวิธีมีข้อดีข้อเสีย นักพัฒนาเว็บจะต้องตระหนักถึงแต่ละเทคนิคในการใช้สิ่งที่ดีที่สุดสำหรับสถานการณ์
3 วิธีในการออกแบบเว็บไซต์มือถือ
ออกแบบเว็บไซต์ตอบสนอง (RWD)
RWD อาศัยการสืบค้นสื่อ CSS3 เพื่อจัดวางเลย์เอาต์ของหน้าเว็บกับขนาดของพื้นที่การดูของอุปกรณ์ รหัส HTML เดียวกันนั้นใช้เพื่อแสดงเค้าโครงหน้าเว็บที่แตกต่างกันสำหรับแท็บเล็ตอุปกรณ์มือถือเดสก์ท็อปและอุปกรณ์อื่น ๆ
ประโยชน์ที่ได้รับ:
- เว็บไซต์ของคุณจะมีเนื้อหาที่คล้ายกันและ HTML mark-up ดังนั้นผู้เข้าชมบนมือถือจะได้รับประสบการณ์เดียวกันไม่ว่าจะใช้อุปกรณ์ประเภทใด
- URL เดียวช่วยให้ผู้ใช้เชื่อมโยงและแบ่งปันเนื้อหาได้ง่ายขึ้น (หากหน้าเว็บพร้อมใช้งานภายใต้ที่อยู่ URL มากกว่าหนึ่งที่อยู่ผู้ใช้อาจสับสนได้)
ข้อเสีย:
ไม่สามารถแยกเนื้อหาบนมือถือให้เหมาะสมได้ ดังนั้นผู้ออกแบบที่ใช้ RWD ไม่สามารถปรับเนื้อหาแยกต่างหากสำหรับผู้ใช้มือถือ
ตามข้อมูลมกราคม 2013 จากไฟล์เก็บถาวร HTTP หน้าเว็บเฉลี่ยประมาณ 1.3 MB อย่างไรก็ตามไซต์ RWD ส่วนใหญ่มีขนาดค่อนข้างใหญ่กว่า ขนาดที่ใหญ่กว่านี้จะลดประสิทธิภาพของเว็บไซต์บนมือถือทำให้ช้าลง
ผู้ใช้อุปกรณ์พกพานั้นมีรูปแบบการออกแบบส่วนต่อประสานกับผู้ใช้ที่เฉพาะเจาะจงกับมือถือมากขึ้น ยิ่งไปกว่านั้นผู้ใช้มือถือคุ้นเคยกับการทำงานหลายอย่าง ผู้ใช้สามารถประสบปัญหาเมื่อพยายามทำงานหลายอย่างพร้อมกันเว้นแต่ว่าโครงสร้างการนำทางจะถูกปรับแต่งสำหรับอุปกรณ์เฉพาะ
ไซต์มือถือโดยเฉพาะ
วิธีนี้ช่วยปรับปรุงประสบการณ์ของผู้ใช้มือถือโดยการสร้างเว็บไซต์แยกต่างหากทั้งหมด
ประโยชน์ที่ได้รับ:
- ความเรียบง่ายของการจัดการ: จำเป็นต้องทำการเปลี่ยนแปลงแยกต่างหากสำหรับไซต์มือถือและเดสก์ท็อป การเปลี่ยนแปลงที่ทำจะถูก จำกัด ในแต่ละรุ่นที่เกี่ยวข้อง นี่หมายถึงการเปลี่ยนแปลงที่เกิดขึ้นกับแพลตฟอร์มมือถือไม่สามารถเข้าถึงได้จากเดสก์ท็อป
- ในขณะที่คุณกำลังพัฒนาเว็บไซต์สำหรับมือถือมันจะง่ายขึ้นในการปรับปรุงและปรับให้เหมาะสมสำหรับผู้ชมกลุ่มนั้นโดยเฉพาะ
- เนื้อหาและโครงสร้างการนำทางสามารถกำหนดเองได้สำหรับผู้ใช้มือถือ
ข้อเสีย:
การแบ่งปันหน้าเว็บผ่านโซเชียลมีเดียนั้นยากขึ้นเนื่องจากเว็บไซต์มือถือโดยเฉพาะมี URL จำนวนมากสำหรับหน้าเว็บ เมื่อผู้ใช้เดสก์ท็อปคลิกที่ URL มือถือที่ใช้ร่วมกันบนแพลตฟอร์มโซเชียลมีเดียพวกเขาอาจได้รับเว็บไซต์เวอร์ชันมือถือโดยไม่ได้ตั้งใจแทนที่จะเป็นเวอร์ชันเดสก์ท็อป
เพื่อหลีกเลี่ยงปัญหาเนื้อหาซ้ำกันนักพัฒนาเว็บจะต้องใช้แท็ก meta rel =” ทางเลือก” และ rel =” canonical” หากผู้ใช้มือถือค้นหา Google และคลิกที่ URL ของเดสก์ท็อปผู้ใช้จะดูเวอร์ชันเดสก์ท็อปหรือจะถูกเปลี่ยนเส้นทางไปยังหน้าเว็บสำหรับมือถือ หากไม่มีรุ่นมือถือผู้ใช้จะได้รับข้อความแสดงข้อผิดพลาด
การสร้างเว็บไซต์ที่แตกต่างอย่างสิ้นเชิงสำหรับผู้ใช้มือถือหมายความว่าเว็บไซต์นั้นจะได้รับการปรับแต่งเป็นพิเศษสำหรับผู้ใช้มือถือ อย่างไรก็ตามเพื่อให้บรรลุวัตถุประสงค์ดังกล่าวผู้พัฒนาเว็บจึงต้องลดฟังก์ชันการทำงานและเนื้อหาซึ่งกลายเป็นฝันร้ายสำหรับพวกเขา
ออกแบบเว็บไซต์ที่ตอบสนอง+ ส่วนประกอบฝั่งเซิร์ฟเวอร์ (RESS)
วิธีนี้ขึ้นอยู่กับการเขียนโปรแกรมฝั่งเซิร์ฟเวอร์เพื่อให้ HTML และ CSS แบบกำหนดเองสำหรับอุปกรณ์ต่าง ๆ รหัสสำหรับผู้ใช้มือถือจะแตกต่างจากผู้ใช้เดสก์ท็อป
วัตถุประสงค์หลักที่อยู่เบื้องหลังการดำเนินการนี้คือเพื่อปรับปรุงประสิทธิภาพของเว็บไซต์ วิธีนี้ใช้ได้ดีเมื่อรวมกับการออกแบบเว็บที่ตอบสนอง ดังนั้นการใช้งานนี้สามารถเรียกว่า Responsive Web Design + ส่วนประกอบด้านเซิร์ฟเวอร์ (RESS)
ประโยชน์ที่ได้รับ:
- โครงสร้างการนำทางสามารถปรับแต่งสำหรับงานต่าง ๆ ที่ดำเนินการโดยผู้ใช้เดสก์ท็อปและมือถือ
- นักพัฒนาสามารถลบองค์ประกอบของหน้าออกจาก HTML และ CSS เพื่อให้ได้การแสดงที่ต้องการ
- เป็นไปได้ที่จะลบ JavaScript ที่ไม่จำเป็นออกจาก HTML ซึ่งทำให้ทรัพยากร CPU, หน่วยความจำและแคชของอุปกรณ์มือถือว่างเปล่า
ข้อเสีย:
- HTML แบบไดนามิกเพิ่มการโหลดบนเซิร์ฟเวอร์
- การตรวจจับอุปกรณ์ไม่สามารถเชื่อถือได้
- HTML และ CSS ได้รับการปรับให้เหมาะกับประสิทธิภาพของอุปกรณ์พกพา เวอร์ชันเดสก์ท็อปใช้การร้องขอ HTTP และจาวาสคริปต์มากขึ้น
เลือกวิธีใด
การตัดสินใจออกแบบเว็บไซต์บนมือถือขึ้นอยู่กับผลิตภัณฑ์ที่คุณขายกลุ่มเป้าหมายของคุณการลงทุนที่ต้องการการแข่งขันอัตราการแปลง ฯลฯ วิธีการออกแบบที่จะทำงานได้ดีที่สุดนั้นขึ้นอยู่กับรูปแบบหน้าจอระบบปฏิบัติการเบราว์เซอร์และ มติ
ไซต์ออกแบบเว็บที่ตอบสนองส่วนใหญ่จะไม่ได้รับการติดตั้งอย่างเหมาะสมและดังนั้นเว็บไซต์เหล่านี้จึงใช้เวลาโหลดนานขึ้น เนื่องจากการแข่งขันรุนแรงคุณอาจสูญเสียลูกค้าหากเว็บไซต์ของคุณทำงานช้าลง ผู้ใช้จะเปลี่ยนไปยังเว็บไซต์อื่นที่ใช้เวลาในการเปิดน้อยกว่า แม้ว่ามันจะเป็นไปได้ที่จะสร้างเว็บไซต์ที่มีเวลาโหลดสั้นลงด้วยไซต์มือถือโดยเฉพาะ แต่ก็มีข้อเสียต่าง ๆ ที่เกี่ยวข้องกับการใช้งานนี้เช่นกัน
RESS ให้ประโยชน์ของ RWD ในการเอาชนะข้อบกพร่องหลักสองประการ ข้อเสียเปรียบหลักของ RESS คือการตรวจจับอุปกรณ์นั้นไม่น่าเชื่อถือ คุณต้องทดสอบอุปกรณ์ใหม่บ่อยครั้งเพื่อให้แน่ใจว่ากระบวนการทำงานอย่างต่อเนื่อง
มีบริการอย่างเช่น DeviceAtlas, WURFL และอื่น ๆ ที่สามารถตรวจจับอุปกรณ์ใหม่ได้ มันจะเป็นความช่วยเหลือที่ดีในการอัพเดทอุปกรณ์ใหม่ในฐานข้อมูลของคุณ
การออกแบบเว็บมือถือจะประสบความสำเร็จก็ต่อเมื่อเว็บไซต์แสดงอย่างถูกต้องบนอุปกรณ์มือถือ แม้ว่าจะเป็นงานที่น่ากลัวสำหรับนักออกแบบที่จะแสดงส่วนสำคัญทั้งหมดของไซต์เดสก์ท็อปในหน้าต่างมือถือขนาดเล็ก แต่ทุกวันมีเทคนิคใหม่ ๆ ที่จะทำให้เว็บไซต์บนมือถือดีขึ้นเร็วขึ้นและมีคุณสมบัติครบถ้วนมากขึ้น
ภาพถ่ายเว็บไซต์มือถือผ่าน Shutterstock
15 ความเห็น▼
