5 เคล็ดลับการสร้างเว็บไซต์ให้ Mobile Friendly

การออกแบบเว็บไซต์แบบ Responsive คือ?

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

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

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

วิธีการเช็คเว็บไซต์ว่า Friendly กับผู้ใช้บนมือถือหรือไม่

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

วิธีแรก

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

1. เปิดเว็บไซต์ https://search.google.com/test/mobile-friendly
2. คัดลอก URL ลิงก์เว็บไซต์ของคุณไปวางในช่อง
3. คลิก “TEST URL”

วิธีสอง

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

1. เปิดเว็บไซต์ขึ้นมาหน้าใดก็ได้
2. คลิกขวาเลือก “Inspect”  หรือ “ตรวจสอบ”

 3. จากนั้นไปที่ตัวเลือกอุปกรณ์รูปแบบต่างๆ ที่ด้านบนขวามือ ที่เป็นสัญลักษณ์มือถือและแท็ปเล็ต

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

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

5 เคล็ดลับการทำเว็บไซต์ให้เป็นมิตรกับมือถือ

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

1. ลืมเรื่องการใช้เมาส์

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

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

2. เร่งความเร็วให้กับเว็บไซต์ของคุณ

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

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

3. การถามคำถามที่น้อยลง

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

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

4. ระวังการใช้ป็อปอัป

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

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

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

5. การแบ่งย่อหน้าบรรทัด

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

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

สรุป

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

แหล่งอ้างอิง

https://www.webfx.com/blog/web-design/make-websites-mobile-friendly/