7 เคล็ดลับ WordPress สำหรับเว็บไซต์ที่เป็นมิตรกับมือถือ
ไม่มีอะไรเลวร้ายไปกว่าการมีเว็บไซต์เดสก์ท็อปที่ดูดีและเว็บไซต์บนมือถือที่ทำงานไม่ถูกต้อง
การแก้ไขการออกแบบส่วนใหญ่นั้นเรียบง่าย แต่ต้องให้ความสนใจหากคุณต้องการให้ผู้เยี่ยมชมอยู่ในไซต์ของคุณต่อไปในขณะที่เรียกดูบนอุปกรณ์มือถือ
บทความนี้จะเน้นเจ็ดปัญหาเว็บไซต์ที่เป็นมิตรกับมือถือและการแก้ไขปัญหาสำหรับพวกเขา
- การเปลี่ยนแปลงที่(Are) ทำขึ้น ไม่แสดงบนมือถือ(Mobile)
- การนำทางที่ไม่เป็นมิตร
- เลย์เอาต์ที่ตอบสนอง(Responsive Layout)หยุดทำงานกะทันหัน
- รูปภาพใช้เวลาในการโหลดนานเกินไป
- เนื้อหาที่สำคัญที่สุดไม่ชัดเจน
- ข้อมูลมากเกินไป
- ข้อมูลสำหรับหน้าจอขนาดเล็ก
การอัปเดตเว็บไซต์ที่เป็นมิตรกับมือถือไม่แสดงขึ้น(Mobile Friendly Website Updates Not Showing Up)
คุณเพิ่งใช้เวลามากมายในการอัปเดตเว็บไซต์ของคุณ พวกเขาดูดีบนเดสก์ท็อปของคุณ แต่ไม่แสดงบนอุปกรณ์มือถือของคุณ
สาเหตุที่พบบ่อยที่สุดประการหนึ่งคือการแคช เบราว์เซอร์มือถือของคุณอาจแสดงไซต์เวอร์ชันเก่าที่คุณดาวน์โหลดไว้ก่อนหน้านี้ อีกสาเหตุหนึ่งอาจเป็นได้ว่าเว็บไซต์ของคุณยังคงใช้เพจเวอร์ชันเก่าและไม่แสดงการเปลี่ยนแปลงของคุณ
หากเป็นปัญหา คุณจะต้องล้างแคชเพื่อดาวน์โหลดเวอร์ชันที่แก้ไข ปลั๊กอินแคช เช่นWP Super Cache , W3 Total CacheหรือWP Fastest Cacheสามารถช่วยแก้ปัญหานี้ได้
ด้านล่างนี้คือสี่ขั้นตอนที่จะช่วยคุณล้างแคชของเว็บไซต์และเบราว์เซอร์ของคุณเพื่อเปิดใช้งานเวอร์ชันใหม่เพื่อแสดงบนไซต์ที่เหมาะกับอุปกรณ์เคลื่อนที่ของคุณ
- รีเฟรชเบราว์เซอร์ของคุณหลายครั้งบนเดสก์ท็อปและอุปกรณ์มือถือของคุณ
- ทดสอบเว็บไซต์ของคุณบนอุปกรณ์พกพาต่างๆ
- ล้างเว็บไซต์ของคุณด้วยปลั๊กอินแคช
- ตรวจสอบกับบริษัทโฮสติ้งของคุณเพื่อดูว่ามีระบบแคชอื่นบนเซิร์ฟเวอร์ของคุณที่ต้องล้างหรือไม่
การนำทางที่ไม่เป็นมิตร(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)ประสบการณ์ผู้ใช้โดยไม่ต้องเสียสละการทำงานโดยทำตามขั้นตอนด้านบน
คุณควรตรวจสอบประสิทธิภาพของไซต์เสมอและปรับเปลี่ยนเมื่อจำเป็นเพื่อปรับปรุงประสิทธิภาพและประสบการณ์ของผู้ใช้
Related posts
วิธีตั้งค่าเว็บไซต์ที่เหมือน Twitter ของคุณเองโดยใช้ธีม P2 ของ WordPress
10 ปลั๊กอิน WordPress ที่จำเป็นสำหรับเว็บไซต์ธุรกิจขนาดเล็ก
วิธีทำ WordPress Site Secure
รีวิวหนังสือ: สร้างเว็บไซต์ของคุณเอง: คู่มือการ์ตูนสำหรับ HTML, CSS และ Wordpress
Wix Vs WordPress: ไหนดีที่สุดสำหรับการสร้างเว็บไซต์ของคุณ?
วิธีติดตามการเปลี่ยนแปลงใน Word (ออนไลน์ มือถือ และเดสก์ท็อป)
7 คำแนะนำทางเทคนิค SEO Optimization สำหรับเว็บไซต์ใด ๆ
วิธีป้องกันหน้าด้วยรหัสผ่านบนเว็บไซต์ WordPress ของคุณ
เคล็ดลับในการซื้อตกแต่งใหม่ Mobile Phones และ Laptops
วิธีสร้างช่องโทรเลขบนมือถือและเว็บ
วิธีบันทึก GIF แบบเคลื่อนไหวไปยังมือถือและคอมพิวเตอร์
สร้างเว็บไซต์ส่วนตัวอย่างรวดเร็วโดยใช้ Google Sites
วิธีการรันอย่างรวดเร็ว WordPress บน Microsoft Azure
วิธีปรับปรุงเว็บไซต์ WordPress ด้วย Genesis Framework Designs
วิธีเปิดใช้งานโหมดมืดใน Microsoft Outlook (Windows, Mac และ Mobile)
19 เคล็ดลับแอป Outlook Mobile ที่ดีที่สุดสำหรับ Android และ iOS
Protect และปลอดภัย WordPress website จากแฮกเกอร์
วิธีการขับรถไปที่ Roku TV จาก PC or Mobile
วิธีการ Stop / เปิด Off Reddit Notifications บน Mobile and Desktop
8 ขั้นตอนในการปฏิบัติตาม GDPR กับเว็บไซต์ของคุณ