7 เคล็ดลับ WordPress สำหรับเว็บไซต์ที่เป็นมิตรกับมือถือ

ไม่มีอะไรเลวร้ายไปกว่าการมีเว็บไซต์เดสก์ท็อปที่ดูดีและเว็บไซต์บนมือถือที่ทำงานไม่ถูกต้อง

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

บทความนี้จะเน้นเจ็ดปัญหาเว็บไซต์ที่เป็นมิตรกับมือถือและการแก้ไขปัญหาสำหรับพวกเขา

  • การเปลี่ยนแปลงที่(Are) ทำขึ้น ไม่แสดงบนมือถือ(Mobile)
  • การนำทางที่ไม่เป็นมิตร
  • เลย์เอาต์ที่ตอบสนอง(Responsive Layout)หยุดทำงานกะทันหัน
  • รูปภาพใช้เวลาในการโหลดนานเกินไป
  • เนื้อหาที่สำคัญที่สุดไม่ชัดเจน
  • ข้อมูลมากเกินไป
  • ข้อมูลสำหรับหน้าจอขนาดเล็ก

การอัปเดตเว็บไซต์ที่เป็นมิตรกับมือถือไม่แสดงขึ้น(Mobile Friendly Website Updates Not Showing Up)

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

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

หากเป็นปัญหา คุณจะต้องล้างแคชเพื่อดาวน์โหลดเวอร์ชันที่แก้ไข ปลั๊กอินแคช เช่นWP Super Cache , W3 Total CacheหรือWP Fastest Cacheสามารถช่วยแก้ปัญหานี้ได้

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

  1. รีเฟรชเบราว์เซอร์ของคุณหลายครั้งบนเดสก์ท็อปและอุปกรณ์มือถือของคุณ
  2. ทดสอบเว็บไซต์ของคุณบนอุปกรณ์พกพาต่างๆ
  3. ล้างเว็บไซต์ของคุณด้วยปลั๊กอินแคช
  4. ตรวจสอบกับบริษัทโฮสติ้งของคุณเพื่อดูว่ามีระบบแคชอื่นบนเซิร์ฟเวอร์ของคุณที่ต้องล้างหรือไม่

การนำทางที่ไม่เป็นมิตร(Unfriendly Navigation)

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

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

ด้านล่างนี้(Below)คือวิธีแก้ไขปัญหานี้สำหรับเว็บไซต์ที่เหมาะกับอุปกรณ์เคลื่อนที่:

  • เปลี่ยนการนำทางของคุณให้เป็นเมนูดรอปดาวน์สำหรับอุปกรณ์มือถือ
  • แสดงเมนูการนำทางของคุณเป็นองค์ประกอบบล็อก เพื่อให้ปรากฏในแนวตั้ง
  • ใช้ไอคอนเมนูที่สามารถสลับไปใช้พื้นที่น้อยลง
  • สร้างเมนูการนำทางมือถือโดยใช้ jQuery
  • ใช้ เมนู แฮมเบอร์เกอร์(Hamburger) (มีหลายธีมรวมถึงตัวเลือกนี้ หรือคุณสามารถใช้ปลั๊กอิน( use a plugin) )

เลย์เอาต์ที่ตอบสนองหยุดทำงานกะทันหัน(Responsive Layout Stops Working Suddenly)

หากไซต์ที่เหมาะกับอุปกรณ์เคลื่อนที่ของคุณหยุดทำงานกะทันหัน อาจเป็นเพราะปลั๊กอินในไซต์ของคุณ

การติดตั้งปลั๊กอินใหม่หรือการอัปเดตปลั๊กอินที่มีอยู่อาจทำให้เกิดข้อขัดแย้งกับผู้อื่นที่ส่งผลต่อรูปแบบการตอบสนองของคุณ

เริ่มต้นด้วยการปิดใช้งานปลั๊กอินทีละตัวเพื่อดูว่าเป็นสาเหตุหรือไม่ อย่าปิดการใช้งานทั้งหมดพร้อมกัน มิฉะนั้น คุณจะไม่รู้ว่าปลั๊กอินตัวใดเป็นตัวการ

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

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

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

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

ไซต์ที่แสดงจะเป็นขนาดของวิวพอร์ต (ขนาดของพื้นที่ของหน้าเว็บที่ผู้ใช้มองเห็นได้)

หากต้องการแก้ไขไซต์ที่เหมาะกับอุปกรณ์เคลื่อนที่ ให้เพิ่มบรรทัดโค้ดต่อไปนี้ในส่วนหัว:

<meta name=”viewport” content=”width=device-width”>

บางครั้งเมื่อมีการอัปเดตธีม โค้ดนี้อาจหายไปได้

รูปภาพใช้เวลาในการโหลดนานเกินไป(Images Are Taking Too Long to Load)

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

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

หากคุณใช้ WordPress(WordPress)เวอร์ชันล่าสุดอยู่แล้วแต่เว็บไซต์ของคุณยังโหลดไม่เร็วพอ คุณสามารถ:

  • ติดตั้งปลั๊กอิน เช่นSmush Image Optimization, Compression และ Lazy Load( Smush Image Optimization, Compression, and Lazy Load)เพื่อปรับขนาดและปรับแต่งภาพของคุณ
  • ใช้เครื่องมือบีบอัดและเพิ่มประสิทธิภาพก่อนที่จะอัปโหลดภาพไปยังไซต์ ของคุณ เช่นTinyPNG , Compress JPEGหรือOnline Image Optimizer

เนื้อหาที่สำคัญที่สุดไม่ชัดเจน(Most Important Content Isn’t Obvious)

บางเว็บไซต์โหลดเนื้อหาที่ไม่จำเป็นจำนวนมากเพื่อเติมพื้นที่ว่างเมื่อเปิดบนเดสก์ท็อป

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

หากหน้าเว็บไม่ได้ออกแบบมาอย่างเหมาะสมสำหรับอุปกรณ์เคลื่อนที่ เนื้อหาบางส่วนอาจไม่ปรากฏบนอุปกรณ์เคลื่อนที่หากไม่มีการเลื่อนมากนัก

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

ตัวอย่างเช่น หน้าการกำหนดราคาที่มีสามคอลัมน์จะแสดงเคียงข้างกันบนคอมพิวเตอร์

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

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

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

ข้อมูลมากเกินไป(Too Much Information)

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

องค์ประกอบเหล่านี้มีข้อมูลมากเกินไปที่อาจทำให้หน้าจอมือถือแน่นและรบกวนผู้ใช้ในการค้นหาข้อมูลที่ต้องการ

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

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

ข้อมูลสำหรับหน้าจอขนาดเล็ก(Data For Small Screens)

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

ปลั๊กอินเช่นWP Responsive Tableสามารถทำให้สำเร็จได้ง่าย

เช่นเดียวกับตารางราคาด้านบน เมื่อดูบนอุปกรณ์เคลื่อนที่ คอลัมน์ต่างๆ จะเรียงซ้อนกันเพื่อให้พอดีกับหน้าจอที่เล็กกว่า

วิธีอื่นๆ ในการแสดงข้อมูลบนอุปกรณ์เคลื่อนที่ ได้แก่:

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

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

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



About the author

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



Related posts