วิธีทำให้ไซต์ WordPress ของคุณเป็นมิตรกับมือถือ

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

ในการทำให้ไซต์ WordPress ของคุณเหมาะกับมือถือ คุณต้อง:

1. ทำความเข้าใจว่าเหตุใดการออกแบบเว็บที่ปรับเปลี่ยนตามอุปกรณ์จึงมีความสำคัญ
2. ทำการทดสอบความเหมาะกับมือถือของ Google
3. ใช้ธีม WordPress ที่ตอบสนอง (หรือสร้างของคุณเอง)
4. พิจารณาปลั๊กอิน WordPress ที่เหมาะกับมือถือ
5. ใช้การเลือกใช้ที่เหมาะกับมือถือ
6. คิดในแง่ของสื่อที่ตอบสนอง
7. จัดลำดับความสำคัญของประสิทธิภาพของไซต์

พร้อม? มาดำน้ำกันเถอะ!

1. เหตุใดไซต์ที่เหมาะกับมือถือจึงมีความสำคัญ

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

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

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

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

2. ทำการทดสอบความเป็นมิตรกับมือถือ

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

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

หากคุณเห็นสีแดง แสดงว่าคุณมีงานต้องทำอีกเล็กน้อย (เราจะไปที่นั้นในไม่กี่วินาที!)

เครื่องมือเล็ก ๆ น้อย ๆ สวยใช่มั้ย? ดียิ่งขึ้นไปอีก

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

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

3. ใช้ (หรือสร้าง) ธีม WordPress ที่ตอบสนอง

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

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

หากการอัปเดตไม่ได้ผล อาจถึงเวลามองหาธีมใหม่หรือพิจารณาสร้างธีมของคุณเอง ลองสำรวจตัวเลือกทั้งสอง

ธีม WordPress ที่เหมาะกับมือถือที่ดีที่สุด

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

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

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

ไม่แน่ใจว่าจะเริ่มต้นที่ไหน? เมื่อคุณโฮสต์เว็บไซต์ WordPress ของคุณบน WP Engine คุณจะสามารถเข้าถึงธีม StudioPress (รวมถึง Genesis Framework!) ได้ฟรีด้วยแผนของคุณ ธีมเหล่านี้ตอบสนองได้อย่างสมบูรณ์ ดังนั้นธีมเหล่านี้จึงดูดีบนอุปกรณ์ใดๆ และคุณสามารถสลับไปมาระหว่างธีมเหล่านี้ได้อย่างง่ายดาย (แทนที่จะรู้สึกติดขัดกับธีมพรีเมียม "อันเดียว" ที่คุณตัดสินใจซื้อ)

วิธีสร้างธีม WordPress ที่ตอบสนองของคุณเอง

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

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

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

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

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

• วิธีสร้างเมนูการนำทางที่ตอบสนองใน WordPress
• 7 เคล็ดลับแนวทางปฏิบัติที่ดีที่สุดสำหรับการออกแบบเว็บที่ตอบสนอง
• การทำงานกับภาพที่ตอบสนองใน WordPress

4. ใช้ปลั๊กอินตอบสนอง

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

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

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

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

5. หลีกเลี่ยงการเพิ่มป๊อปอัปบนอุปกรณ์มือถือ

หากคุณกำลังพยายามสร้างรายชื่ออีเมลด้วยไซต์ WordPress ของคุณ ฉันเดาว่าคุณมีตัวเลือกมากมายในไซต์ของคุณ แบบฟอร์มเลือกรับอีเมลส่วนใหญ่ใช้งานได้ดีบนอุปกรณ์พกพา (สมมติว่าปรับขนาดได้และใช้งานง่าย)

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

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

6. วางกลยุทธ์สำหรับสื่อที่ตอบสนอง

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

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

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

7. จัดลำดับความสำคัญของประสิทธิภาพของไซต์

ความเร็วของหน้าเว็บมีความสำคัญมาเป็นเวลานานในแง่ของการจัดอันดับไซต์ของคุณในการค้นหาบนเดสก์ท็อปของ Google แต่ตั้งแต่เดือนกรกฎาคม 2018 เป็นต้นมา การจัดอันดับบนมือถือก็เช่นกัน เทียบเคียงกับสถิติด้านบนที่ว่ากว่า 60% ของการค้นหาทางอินเทอร์เน็ตใช้อุปกรณ์เคลื่อนที่ และประสิทธิภาพของไซต์ของคุณ (ในทุกอุปกรณ์) มีความสำคัญมากกว่าที่เคย

รูปภาพเป็นส่วนสำคัญของสมการประสิทธิภาพ แต่โค้ดและโฮสต์ WordPress ของคุณก็มีบทบาทสำคัญเช่นกัน

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

สำหรับโฮสต์ WordPress ของคุณ ตรวจสอบให้แน่ใจว่าคุณใช้พันธมิตรที่มีคุณภาพซึ่งรวมถึงบริการต่างๆ เช่น เทคโนโลยีการแคช CDN และโครงสร้างพื้นฐานที่ขับเคลื่อนโดยผู้ให้บริการที่เชื่อถือได้ เช่น Google Cloud Platform หากคุณโฮสต์ไซต์ของคุณบน WP Engine คุณก็อยู่ในส่วนเหล่านี้ทั้งหมด

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

เข้าถึงธีมพรีเมียมกว่า 30 แบบ (และเหมาะกับมือถือ!)

ประหยัดเวลา (และเงิน!) ด้วย WordPress โฮสติ้งโดย WP Engine และเข้าถึงธีม StudioPress และ Genesis Framework ธีมตอบสนองได้เต็มที่และปรับแต่งได้ง่าย ช่วยประหยัดเวลาเมื่อพยายามสร้างเว็บไซต์ที่เหมาะกับอุปกรณ์เคลื่อนที่ นอกจากนี้ แพลตฟอร์มอันทรงพลังของ WP Engine จะช่วยปรับปรุงประสิทธิภาพของไซต์ของคุณ ช่วยให้ความเร็วของหน้าเว็บเหล่านั้นคงอยู่อย่างรวดเร็วและอันดับไซต์ของคุณอยู่ในเกณฑ์ดี