แนวทางปฏิบัติสำหรับการสร้างเว็บไซต์ที่เป็นมิตรกับมือถือ

01.06.2020
Լավագույն հոստինգ 'แนวทางปฏิบัติสำหรับการสร้างเว็บไซต์ที่เป็นมิตรกับมือถือ
0 36 мин.

สร้างเว็บไซต์ที่เป็นมิตรกับมือถือ


ในปี 2558 Google นำเสนออัลกอริทึม“ Mobilegeddon” ซึ่งเป็นเว็บไซต์ที่มีการลงโทษซึ่งไม่เป็นมิตรกับมือถือ ตามอัลกอริทึมนี้การจัดอันดับเว็บไซต์ที่ไม่เหมาะกับอุปกรณ์พกพาจะลดลง.

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

การเติบโตของปริมาณข้อมูลมือถือทั่วโลก

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

เว็บไซต์ที่เหมาะกับมือถือคืออะไร?

เว็บไซต์ที่เป็นมิตรกับมือถือคืออะไร

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

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

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

หลีกเลี่ยงการสร้างเว็บไซต์ที่เหมาะกับอุปกรณ์พกพาแยก:

หลีกเลี่ยงการสร้างเว็บไซต์ที่เป็นมิตรกับมือถือแยกต่างหาก

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

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

ใช้ประโยชน์จากการออกแบบที่ตอบสนองต่อ:

ใช้เทมเพลตการออกแบบที่ตอบสนอง

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

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

ใช้ประโยชน์จากการสืบค้นสื่อ:

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

ตัวอย่างเคียวรีหน้าจอสื่อบันทึก

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

ใช้ประโยชน์จากเฟรมเวิร์กเช่น Bootstrap:

สำหรับส่วนหน้าคุณสามารถใช้ประโยชน์จากเฟรมเวิร์กที่มีอยู่ได้อย่างอิสระเช่น มูลนิธิ 3, โครงกระดูก ฯลฯ กรอบฟรีที่ดีที่สุดคือ Bootstrap ของ Twitter.

ใช้เฟรมเวิร์ก bootstrap

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

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

ใช้ประโยชน์จากแท็ก Meta เสมือนทุกครั้ง:

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

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

เป็นศูนย์ในการออกแบบที่เรียบง่าย:

ใช้การออกแบบที่ตอบสนองง่าย

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

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

อย่าเพิกเฉยขนาดตัวอักษรและขนาดปุ่ม:

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

อย่าเพิกเฉยขนาดตัวอักษร

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

ขยายขนาดภาพ:

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

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

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

กำจัดการซูมเริ่มต้น:

การย่อ / ขยายอัตโนมัติสามารถทำให้โครงสร้างเค้าโครงยุ่งเหยิงโดยเฉพาะสำหรับรูปภาพและการนำทาง อาจมีขนาดเล็กหรือใหญ่เกินไปในเค้าโครงของคุณ ในการแก้ปัญหานี้ให้ใช้แท็ก meta viewport เพื่อตั้งค่าตัวแปรที่กำหนดเองภายในเนื้อหา ตรวจสอบให้แน่ใจว่าคุณเพิ่มแท็กใน HTML ของคุณ:

ลองใช้แบบอักษรมาตรฐาน:

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

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

จำไว้ว่าทิศทาง:

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

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

นำออกไป:

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

Earleen Brown ทำงานร่วมกับ บริษัท SEO Services ซึ่งเป็น บริษัท SEO ชั้นนำของอินเดีย บริษัท นั้นเป็น บริษัท ที่ให้บริการด้านไอที บริการ SEO ของอินเดีย และช่วยเธอมากในการพัฒนาทักษะการเขียนของเธอ

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Оцените статью
    Понравилась статья?
    Комментарии (0)
    Комментариев нет, будьте первым кто его оставит

    Комментарии закрыты.

    Adblock
    detector