แม้ว่าจำนวนเว็บไซต์ที่ไม่มีการเพิ่มประสิทธิภาพมือถือจะลดลง แต่ก็ยังมีบางเว็บไซต์ที่ออกแบบมาสำหรับเดสก์ท็อปเท่านั้น ขออภัย บริการเว็บ 'mobilizer' ก่อนหน้าของ Google ได้หยุดให้บริการแล้ว ผู้สืบทอดทางจิตวิญญาณของบริการคือ Google Weblight ที่ออกแบบมาเพื่อการเพิ่มประสิทธิภาพสำหรับการเชื่อมต่อที่ช้ามากกว่าการแก้ไขไซต์สำหรับการดูบนมือถือ นอกเหนือจากบริการของ Google แล้ว ยังมีแนวทางปฏิบัติและเครื่องมือมากมายที่ควรพิจารณาเมื่อพัฒนาเว็บไซต์โดยคำนึงถึงอุปกรณ์เคลื่อนที่
ขั้นตอน
ส่วนที่ 1 จาก 2: การทดลองกับ Google Weblight
ขั้นตอนที่ 1 วิเคราะห์ว่า Weblight ทำงานอย่างไร
Weblight เป็นอัลกอริธึมที่สร้างขึ้นโดย Google เพื่อให้ผู้ใช้โหลดหน้าเว็บได้เร็วขึ้นและน้อยลงเมื่ออยู่ในสภาวะเครือข่ายที่ไม่ดี ซึ่งหมายความว่า Weblight ไม่มีส่วนต่อประสานกับผู้ใช้และทำงานบนแบ็กเอนด์ เพจถูกถอดออกจากองค์ประกอบที่ซับซ้อนมากขึ้น มอบประสบการณ์การใช้งานที่เบาและเรียบง่าย แทนที่จะปรับให้เหมาะสมสำหรับแพลตฟอร์มมือถืออย่างชัดเจน
ขั้นตอนที่ 2 ทดสอบการเปลี่ยนแปลงไซต์ด้วย Weblight
บนอุปกรณ์มือถือของคุณ เพียงเพิ่ม URL ไซต์แบบเต็มของคุณต่อท้ายที่อยู่เว็บไลท์ (เช่น หากเว็บไซต์ของคุณคือ "mywebsite.com" ให้ป้อน https://googleweblight.com/?lite_url=https://mywebsite.com). หน้าจะโหลดเวอร์ชันที่เรียบง่าย แต่ใช้งานได้จริง ด้วยองค์ประกอบที่ถูกลบออก บางไซต์อาจปรากฏบนหน้าจออุปกรณ์มือถือได้ดีขึ้นมาก
ขั้นตอนที่ 3 ตระหนักถึงข้อจำกัด
โปรดทราบว่านี่ไม่ใช่เครื่องมือแปลงที่ชัดเจนซึ่งออกแบบมาสำหรับการโต้ตอบกับผู้ใช้ แม้ว่าการเข้าสู่เว็บไซต์ด้วยตนเองนั้นสามารถทำได้โดยง่าย แต่ Weblight ได้รับการออกแบบมาเพื่อความเร็ว ไม่ใช่ความสามารถในการใช้งาน
ส่วนที่ 2 จาก 2: การออกแบบเพื่อความเข้ากันได้กับอุปกรณ์พกพา
ขั้นตอนที่ 1 คำนึงถึงข้อจำกัดของอุปกรณ์มือถือ
อุปกรณ์พกพามีคุณลักษณะบางอย่างที่ทำให้แตกต่างจากเดสก์ท็อป คุณลักษณะหลักเหล่านี้ควรเป็นข้อพิจารณาหลักเมื่อสร้างไซต์สำหรับการใช้มือถือ
- หน้าจอขนาดเล็กและแนวตั้ง: แม้ว่าความละเอียดหน้าจอบนอุปกรณ์มือถือจะได้รับการปรับปรุงอย่างต่อเนื่อง แต่ขนาดและรูปแบบยังคงเป็นปัญหาสำหรับการออกแบบเว็บไซต์ การออกแบบไซต์ในรูปแบบคอลัมน์เดียวดีที่สุดสำหรับโทรศัพท์ (แท็บเล็ตมักจะใช้ไซต์เดสก์ท็อปได้โดยไม่มีปัญหามากเกินไป)
- อินเทอร์เฟซระบบสัมผัส: ควรวางองค์ประกอบของหน้าโดยคำนึงถึงขนาดของนิ้ว องค์ประกอบที่ใช้เมาส์โอเวอร์ควรย่อเล็กสุดหรือออกแบบใหม่สำหรับการสัมผัส (เช่น เมนูแบบเลื่อนลง)
- ความเร็วข้อมูล: ข้อดีอย่างหนึ่งของอุปกรณ์มือถือคือการใช้งานนอกช่วงสัญญาณ wifi แต่โดยทั่วไปแล้วการเชื่อมต่อข้อมูลจะช้ากว่าและเชื่อถือได้น้อยกว่า ส่วนต่อประสานผู้ใช้ (UI) ควรเรียบง่ายและเนื้อหาควรมองเห็นได้และเข้าถึงได้ ความยุ่งเหยิงมากเกินไปจะทำให้เวลาในการโหลดช้าลงและทำให้การนำทางทำได้ยาก
ขั้นตอนที่ 2 ใช้บริการระบบจัดการเนื้อหา (CMS)
สำหรับผู้ที่กำลังพัฒนาโดยใช้ทรัพยากรน้อยลง การใช้บริการ CMS เช่น Wordpress หรือ Squarespace เป็นตัวเลือกที่ยอดเยี่ยมสำหรับการออกแบบอุปกรณ์พกพาราคาประหยัดและใช้งานง่าย ธีมที่ใช้การออกแบบเว็บแบบตอบสนองจะมีเทมเพลตที่ง่ายที่สุดสำหรับไซต์บนมือถือ
การออกแบบเว็บที่ตอบสนองตามอุปกรณ์เป็นทฤษฎีการออกแบบเว็บที่ส่งเสริมการใช้องค์ประกอบการออกแบบที่ลื่นไหล เพื่อให้การเปลี่ยนแปลงการออกแบบและการใช้งานข้ามแพลตฟอร์มเป็นไปอย่างราบรื่น
ขั้นตอนที่ 3 ทดสอบหน้าจออุปกรณ์มือถือโดยใช้ซอฟต์แวร์เดสก์ท็อป
มีเว็บแอปพลิเคชั่นฟรีมากมายที่ให้คุณจำลองอุปกรณ์มือถือเพื่อทดสอบความสวยงามและการทำงานของเว็บไซต์ การใช้เครื่องมือเหล่านี้ทำได้ง่ายเหมือนกับการเลือกอุปกรณ์ทดสอบที่ต้องการ จากนั้นจึงเข้าสู่เว็บไซต์เป้าหมายเพื่อดูตัวอย่าง ส่วนใหญ่จะรวมเครื่องมือสำหรับตัวแปรต่างๆ เช่น การวางแนวหน้าจอ ความหนาแน่นของพิกเซล หรือแม้แต่การเลือกเบราว์เซอร์ ตัวอย่างยอดนิยมบางส่วน ได้แก่:
- โปรแกรมจำลองโหมดอุปกรณ์ Chrome
- mobilephoneemulator.com
- screenfly (ชุดย่อยของ quirktools)
- mobiletest.me (สมาชิกแบบชำระเงิน)
