วิธีแปลงเว็บไซต์สำหรับเบราว์เซอร์มือถือ

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

แพลตฟอร์มทั่วไป

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

การใช้ CSS และ HTML

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

คุณสมบัติการโต้ตอบของหน้าจอสัมผัส

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

การทดสอบและการตรวจสอบ

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