วิธีการเขียนเว็บเพจสำหรับอุปกรณ์เคลื่อนที่

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

แต่คุณต้องการให้เพจของคุณทำงานได้ดีเพียงใด? นักออกแบบส่วนใหญ่ต้องการให้หน้าเว็บของตนส่องแสง!

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

หลักทั่วไปสำหรับการสร้างไซต์สำหรับอุปกรณ์เคลื่อนที่

• ทดสอบอุปกรณ์ให้ได้มากเท่าที่จะเป็นไปได้ สิ่งแรกที่คุณควรทำคือการดูไซต์ของคุณบน iPhone และ อุปกรณ์เคลื่อนที่ หรือเครื่องเลียนแบบต่างๆที่คุณสามารถทำได้ แม้ว่าคุณจะสามารถใช้โปรแกรมเลียนแบบสำหรับการทดสอบของคุณได้ แต่จริงๆแล้วพวกเขาไม่รู้สึกเหมือนกำลังพยายามนำทางไปยังเว็บไซต์บนหน้าจอเล็ก ๆ น้อย ๆ เพื่อทดสอบอุปกรณ์ที่เกิดขึ้นจริงให้มากที่สุดเท่าที่จะเป็นไปได้
• ทำให้หน้าเว็บของคุณลดลงอย่างสง่างาม คุณสามารถเขียนหน้าเว็บของคุณสำหรับเบราว์เซอร์ที่ใช้งาน Flash ได้ แต่ให้แน่ใจว่าข้อมูลสำคัญสามารถมองเห็นได้แม้ในจอภาพขนาดเล็กที่ไม่สามารถจัดการกับคุณลักษณะพิเศษใด ๆ (เช่นคุกกี้, Ajax, Flash, JavaScript เป็นต้น) สิ่งที่นอกเหนือจาก XHTML Basic จะอยู่นอกเหนือโทรศัพท์มือถือบางรุ่น แม้ว่าสมาร์ทโฟนส่วนใหญ่จะสามารถจัดการกับสิ่งเหล่านี้ได้ทั้งหมด (ยกเว้น Flash บน iPhone แน่นอน) อุปกรณ์เคลื่อนที่อื่น ๆ ไม่สามารถทำได้
• สร้างหน้าเว็บเฉพาะแบบไร้สายและช่วยให้ค้นหาได้ง่าย หากคุณกำลังจะสร้างหน้าเว็บเฉพาะสำหรับโทรศัพท์มือถือและลูกค้าแบบไร้สายของคุณให้ใช้งานได้ วิธีที่ดีคือใส่ลิงก์ไปยังหน้าไร้สายที่ด้านบนสุดของเอกสารแล้วซ่อนลิงก์นั้นจากอุปกรณ์ที่ไม่ใช่มือถือโดยใช้สื่อบันทึกชนิดใช้มือถือ หลังจากที่ทุกคนส่วนใหญ่มาที่หน้าแรกของคุณแม้กระทั่งบนโทรศัพท์มือถือและถ้าลิงก์ไปยังหน้าไร้สายของคุณไม่อยู่ที่นั่นพวกเขาจะออกจากระบบถ้าหน้าเว็บใช้ยากเกินไป

เค้าโครงหน้าเว็บสำหรับสมาร์ทโฟน

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

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

ลิงค์และการนำทางบน iPhone

• URL ที่สั้นลงดียิ่งขึ้น หากคุณเคยพยายามพิมพ์ URL บนโทรศัพท์มือถือคุณจะทราบว่าเป็นความเจ็บปวด (ยกเว้นสำหรับวัยรุ่นที่ใช้ในการส่งข้อความจำนวนมาก) แม้ใน iPhone ก็น่าเบื่อที่จะพิมพ์ URL ยาว ให้คำแนะนำสั้น ๆ
• แต่ข้อความลิงก์ยาว ๆ จะง่ายกว่าการแตะ เมื่ออยู่บนหน้าเว็บที่มีคำที่แยกจากกันหลายคำเชื่อมโยงกับบทความอื่น ๆ ทั้งหมดติดกันอาจเป็นการยากที่จะแตะที่ถูกต้องโดยไม่ต้องซูม หลายคนก็จะยอมแพ้และไปที่อื่น ลิงก์ที่มีคำ 3-5 คำอยู่ในนั้นจะง่ายกว่าการคลิกที่โทรศัพท์มากกว่าการเชื่อมโยงแบบ 1 คำ
• อย่าวางการนำทางที่ด้านบนสุดของหน้าจอ ไม่มีอะไรน่ารำคาญมากกว่าต้องหน้าผ่านหน้าจอและหน้าจอของการเชื่อมโยงเพื่อหาข้อมูลที่คุณต้องการ หากคุณได้ดูหน้าเว็บที่ออกแบบมาสำหรับโทรศัพท์มือถือคุณจะเห็นว่าสิ่งแรกที่แสดงขึ้นคือเนื้อหาและบรรทัดแรก จากนั้นด้านล่างคือการนำทาง
• อย่ากลัวที่จะซ่อนการนำทางของคุณ การซ่อนลิงค์การนำทางด้วย CSS หรือ JavaScript และทำให้ปรากฏเฉพาะเมื่อผู้ใช้ถามว่าเป็นวิธีที่จะทำให้ผู้ใช้สมาร์ทโฟนสามารถใช้งานเพจได้ง่ายขึ้น

เคล็ดลับสำหรับรูปภาพบนสมาร์ทโฟน

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

สิ่งที่ควรหลีกเลี่ยงเมื่อออกแบบสำหรับมือถือ

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

• Flash - โทรศัพท์มือถือส่วนใหญ่ไม่รองรับ Flash ดังนั้นจึงไม่รวมไว้ในหน้าแบบไร้สายของคุณ
• คุกกี้ - โทรศัพท์มือถือจำนวนมากไม่มีการสนับสนุนคุกกี้ iPhones มีการสนับสนุนคุกกี้
• เฟรม - แม้ว่าเบราว์เซอร์จะรองรับก็ตามลองดูขนาดของหน้าจอ เฟรมไม่ทำงานบนอุปกรณ์เคลื่อนที่ซึ่งเป็นเรื่องยากหรือไม่สามารถอ่านได้
• ตาราง - อย่าใช้ตารางสำหรับการจัดวางบนเพจบนมือถือ และพยายามหลีกเลี่ยงตารางโดยทั่วไป พวกเขาไม่ได้รับการสนับสนุนในทุกโทรศัพท์มือถือ (แม้ว่า iPhone และสมาร์ทโฟนอื่น ๆ จะสนับสนุนพวกเขา) และคุณก็จะได้ผลลัพธ์แปลก ๆ
• ตารางที่ซ้อนกัน - ถ้าคุณต้องใช้ตารางอย่าลืมวางไว้ในตารางอื่น เบราว์เซอร์เดสก์ท็อปเหล่านี้เป็นสิ่งที่ยากสำหรับการสนับสนุนและอย่างน้อยที่สุดทำให้หน้าเว็บโหลดช้าลง
• มาตรการสัมบูรณ์ - กล่าวคือห้ามระบุขนาดของวัตถุในขนาดที่แน่นอน (เช่นพิกเซลมิลลิเมตรหรือนิ้ว) หากคุณกำหนดสิ่งที่กว้าง 100px ในโทรศัพท์มือถือเครื่องหนึ่งซึ่งอาจเป็นครึ่งหน้าจอและอีกมุมหนึ่งอาจมีความกว้างกว่าสองเท่า ขนาดสัมพัทธ์ (เช่น ems และเปอร์เซ็นต์) ทำงานได้ดีที่สุด

• แบบอักษร - อย่าคิดว่า แบบอักษรที่ คุณใช้ในการเข้าถึงจะมีอยู่ในโทรศัพท์มือถือ

อ่านเพิ่มเติม

• วิธีการทำให้เว็บไซต์ของคุณเป็นมิตรกับโทรศัพท์มือถือโดยใช้ PHP