หน้าเว็บที่ได้รับการปรับให้เหมาะสมสำหรับการใช้งานบนอุปกรณ์เคลื่อนที่แตกต่างจากที่ปรากฏบนคอมพิวเตอร์เดสก์ท็อปและแล็ปท็อป ส่วนหลังได้รับการออกแบบมาสำหรับหน้าจอขนาดใหญ่และการคลิกเมาส์ที่แม่นยำ ในขณะที่หน้าเว็บบนมือถือนั้นมีขนาดสำหรับหน้าจอที่เล็กกว่าและการแตะด้วยนิ้วที่ไม่แม่นยำ
- ออกแบบมาสำหรับหน้าจอขนาดเล็กและการแตะนิ้วที่ไม่แม่นยำ
- ออกแบบมาสำหรับหน้าจอขนาดใหญ่ด้วยการคลิกเมาส์ที่แม่นยำ
เนื่องจากการเข้าชมเว็บไซต์ส่วนใหญ่มาจากอุปกรณ์เคลื่อนที่ นักออกแบบเว็บไซต์จึงได้รับมอบหมายให้จัดหาเวอร์ชันที่ใช้งานได้กับทั้งอุปกรณ์เคลื่อนที่และคอมพิวเตอร์เดสก์ท็อปวิธีที่พบบ่อยที่สุดคือการใช้การออกแบบเว็บที่ตอบสนอง ซึ่งส่งเวอร์ชันที่เหมาะสมโดยอัตโนมัติตามอุปกรณ์ของผู้ใช้และขนาดหน้าจอตามที่เบราว์เซอร์ตรวจพบ
อย่างไรก็ตาม หน้าเว็บที่เหมาะกับอุปกรณ์เคลื่อนที่มีความแตกต่างจากเวอร์ชันเดสก์ท็อปในหลายวิธี
การออกแบบหน้า: หน้าจอมือถือมีพื้นที่น้อยลง
- หน้าจอสมาร์ทโฟนและแท็บเล็ตมีขนาด 4 ถึง 10 นิ้วในแนวทแยง
- วิดเจ็ตเมนูแบบพับได้หรือขยายได้มักจะแทนที่แถบด้านข้างและเมนูส่วนหัวขนาดใหญ่
- กราฟิกแบบเต็มความกว้างพร้อมการใช้ช่องว่างระหว่างข้อความในการพิจารณาคดี
-
จอภาพเดสก์ท็อปส่วนใหญ่มีขนาด 19 นิ้วถึง 24 นิ้วในแนวทแยง
- สปอนเซอร์และโฆษณาแบนเนอร์ขนาดใหญ่มีมากขึ้น
- ข้อความแน่นขึ้นและมีพื้นที่สำหรับกราฟิกมากขึ้น
ความแตกต่างที่ชัดเจนที่สุดระหว่างหน้าเดสก์ท็อปและมือถือคือหน้าจออสังหาริมทรัพย์ แม้ว่าจอภาพเดสก์ท็อปส่วนใหญ่จะวัดได้อย่างน้อย 19 นิ้วถึง 24 นิ้วในแนวทแยง แต่โดยทั่วไปแล้วแท็บเล็ตจะมีขนาดประมาณ 10 นิ้ว สมาร์ทโฟนมีแนวทแยงประมาณ 4 นิ้ว การย่อขนาดออกเพียงอย่างเดียวไม่สามารถแปลงหน้าเว็บให้เป็นเวอร์ชันที่เหมาะกับอุปกรณ์เคลื่อนที่ได้ เนื่องจากจะทำให้ข้อความไม่สามารถอ่านได้และต้องมีขั้นตอนเพิ่มเติมจากผู้เยี่ยมชมไซต์ นอกจากนี้ การแตะอย่างแม่นยำบนองค์ประกอบเล็กๆ ก็เป็นไปไม่ได้
เพื่อแก้ไขปัญหา นักออกแบบอาจลบแถบด้านข้างและกราฟิกที่ไม่จำเป็นอย่างยิ่ง แต่จะใช้กราฟิกที่เล็กกว่า เพิ่มขนาดฟอนต์ และยุบเนื้อหาลงในวิดเจ็ตที่ขยายได้ ข้อจำกัดด้านอสังหาริมทรัพย์นี้ทำให้เกิดความคิดที่แตกต่างไปจากเดิมอย่างสิ้นเชิงในหมู่นักออกแบบเว็บไซต์
นอกจากนี้ วิดเจ็ตเมนูแบบยุบหรือขยายได้มักจะมาแทนที่แถบด้านข้างและเมนูส่วนหัวขนาดใหญ่ ในการพยายามทำให้ทุกมิลลิเมตรของพื้นที่หน้าจอมีค่า นักออกแบบได้ลบพื้นที่สีขาวที่ไม่จำเป็นออกไป ในขณะที่ต้องระมัดระวังในการอ่าน
กลุ่มลิงก์ผู้สนับสนุนและโฆษณาแบนเนอร์ขนาดใหญ่ใช้งานไม่ได้บนโทรศัพท์หรือแท็บเล็ตขนาดเล็ก โฆษณาป๊อปอัปขนาดเล็กจะพบเห็นได้ทั่วไปในหน้าเว็บบนมือถือแทน
เลย์เอาต์ที่มีข้อความล้อมรอบกราฟิกเล่นได้ไม่ดีบนอุปกรณ์มือถือ นักออกแบบมักจะให้กราฟิกเหล่านั้นเต็มความกว้างของหน้าจอและเรียกใช้ข้อความด้านล่างหรือด้านบน ในทำนองเดียวกัน การออกแบบเว็บที่ดีจะแบ่งข้อความเป็นส่วนๆ เพื่อให้อ่านง่าย ไม่มีใครอยากอ่านข้อความที่เป็นของแข็ง สิ่งนี้สำคัญยิ่งขึ้นในหน้าจอขนาดเล็ก การใช้พื้นที่สีขาวอย่างรอบคอบเป็นสิ่งสำคัญ
การควบคุมหน้า: ความแม่นยำของเดสก์ท็อปเทียบกับ Mobile Blobs
- พื้นที่การแตะขนาดใหญ่หรือจุดสำคัญเพื่อการนำทางที่แม่นยำยิ่งขึ้น
- URL อื่น: เพิ่มตัวอักษร "m" มักเป็นตัวเลือกในการดูไซต์เวอร์ชันเดสก์ท็อป
- ข้อมูลประจำตัวในการเข้าสู่ระบบมักมีพื้นที่เฉพาะ บางครั้งอาจเข้าถึงลายนิ้วมือได้
- ลิงก์และปุ่มที่ใช้เคอร์เซอร์ที่แม่นยำยิ่งขึ้น
ไม่เหมือนกับตัวชี้เมาส์ที่แม่นยำบนเดสก์ท็อปของคุณ นิ้วของมนุษย์คือหยด และการแตะต้องใช้เป้าหมายขนาดใหญ่บนหน้าจอสำหรับไฮเปอร์ลิงก์ ไซต์ที่เหมาะกับอุปกรณ์เคลื่อนที่มีพื้นที่การแตะขนาดใหญ่ (หรือฮอตสปอต) เพื่ออำนวยความสะดวกในการนำทางที่ถูกต้อง
หน้าเว็บที่เหมาะกับอุปกรณ์เคลื่อนที่มักมีตัวอักษร m ในที่อยู่ด้วย ตัวอย่างเช่น ที่อยู่มือถือของ Facebook คือ m.facebook.com โดยปกติ URL มือถือจะถูกเลือกให้คุณโดยอัตโนมัติเมื่อคุณท่องเว็บด้วยแท็บเล็ตมือถือหรือสมาร์ทโฟน ในบางกรณี คุณจะเห็นลิงก์ที่แตะได้ซึ่งช่วยให้คุณสลับไปใช้หน้าเวอร์ชันเดสก์ท็อปปกติได้
ช่องเข้าสู่ระบบและรหัสผ่านสำหรับเดสก์ท็อปและแล็ปท็อปกลายเป็นช่องเล็กๆ และใช้ไม่ได้บนโทรศัพท์ ดังนั้นผู้เผยแพร่เว็บจึงขยายช่องเหล่านี้ให้ใหญ่ขึ้น และบางครั้งก็ให้หน้าของพวกเขาเองเพื่อความสะดวกในการใช้งานการเข้าสู่ระบบด้วยลายนิ้วมือหรือบัญชีอื่น เช่น Google หรือ Facebook กลายเป็นเรื่องปกติมากขึ้นเมื่อความสามารถของอุปกรณ์และบริการพัฒนาขึ้น
ทำไมถึงสำคัญ
หน้าเว็บบนมือถือออกแบบมาสำหรับอุปกรณ์พกพาและค่อนข้างแตกต่างจากหน้าเว็บที่สร้างขึ้นสำหรับการอ่านเดสก์ท็อป แม้ว่าโดยปกติแล้วคุณจะสามารถดูหน้าเว็บเวอร์ชันเดสก์ท็อปบนอุปกรณ์เคลื่อนที่ได้ และในทางกลับกัน พวกเขาได้รับการออกแบบมาให้แตกต่างออกไปเพื่อให้ดู อ่าน และไปยังส่วนต่างๆ ของเนื้อหาได้ง่ายขึ้น