หน้าเว็บบนมือถือต่างจากหน้าเว็บปกติอย่างไร

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

01 จาก 08

ขนาดหน้าจอและ 'อสังหาริมทรัพย์' ต่างกัน

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

02 จาก 08

วิดเจ็ตและ 'Sliders' อยู่ใน; Sidebars และ whitespace Out Out

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

03 จาก 08

การแตะนิ้วมือไม่แม่นยำกว่าการคลิกเมาส์

การแตะนิ้วมือแตกต่างจากการคลิกเมาส์:

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

04 จาก 08

URL ของหน้าเว็บมือถือแตกต่างกัน

URL ของหน้าเว็บมือถือแตกต่างกัน

หน้าเว็บที่เหมาะกับอุปกรณ์เคลื่อนที่มักมีตัวอักษร 'm' เป็นส่วนสำคัญของที่อยู่ (คลิกที่นี่เพื่อเป็นตัวอย่าง) URL บนอุปกรณ์เคลื่อนที่จะถูกเลือกให้คุณโดยอัตโนมัติเมื่อคุณท่องเว็บด้วยแท็บเล็ตหรือสมาร์ทโฟนมือถือ ในบางกรณีคุณจะเห็นลิงก์ที่ใช้ไม่ได้ซึ่งจะช่วยให้คุณเปลี่ยนไปใช้หน้าเว็บเดสก์ท็อปเวอร์ชันปกติได้

05 จาก 08

โฆษณาสามารถลดหรือลบออกได้

การโฆษณามักลดลงในหน้าเว็บบนมือถือ

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

06 จาก 08

ช่องทำเครื่องหมายและลิงค์ขนาดเล็กจะทำให้ไม่พอใจ

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

07 จาก 08

การเข้าสู่ระบบรหัสผ่านอาจกลายเป็นข้อมูลที่บดบังหรือเล็กเกินไป

การเข้าสู่ระบบรหัสผ่านมักทำให้เกิดความหงุดหงิดในการพิมพ์บนหน้าเว็บบนมือถือ

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

08 ใน 08

กลายเป็นภาพที่โดดเด่นมากขึ้น

รูปภาพมีขนาดแตกต่างกันบนหน้าเว็บบนมือถือ

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