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

อัพเดทล่าสุดเมื่อ 22 พฤษภาคม 2020

การสร้างความเป็นมิตรกับมือถือ มีบางครั้งที่ความกังวลที่ใหญ่ที่สุดของฉันในฐานะนักออกแบบกราฟิกและนักพัฒนาเว็บคือการทำให้ฟังก์ชัน CSS ของฉันใน Internet Explorer IE ไม่เพียงแต่จะทำให้เกิดปัญหาที่ด้านหลังเท่านั้น แต่ตอนนี้เรายังต้องกังวลเกี่ยวกับขนาดหน้าจอและระบบปฏิบัติการจำนวนมาก

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

http://www.smartinsights.com/wp-content/uploads/2017/03/Mobile-share-of-online-time-percent-2017.png

ทั่วโลก อุปกรณ์มือถือคิดเป็นมากกว่าครึ่งของนาทีที่ใช้ออนไลน์ ตาม comScore

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

นับจากนี้เป็นต้นไป เว็บไซต์ออกแบบมีคลาส CSS และ ID สำหรับทุกอย่าง ครอบคลุมทุกอย่างตั้งแต่นี้เป็นต้นไป และฉันหมายถึงทุกอย่าง

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

CSS Media Queries ใช้งานง่ายกว่าที่คุณคิด

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

Media Queries นั้นเป็นกฎของ CSS หากหน้าจอของคุณกว้างขนาดนี้ ให้ใช้ CSS นี้กับองค์ประกอบเหล่านี้เท่านั้น ลองดูด้านล่าง

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

Css-tricks.com แสดงความกว้างของมือถือจำนวนมากสำหรับเราเพื่อเป็นข้อมูลอ้างอิงอย่างรวดเร็ว

ตัวอย่างโค้ด CSS

/* ———– HTC One ———– */
/* แนวตั้งและแนวนอน */

@หน้าจอสื่อ

และ (ความกว้างของอุปกรณ์: 360px)

และ (ความสูงของอุปกรณ์: 640px)

และ (-webkit-device-pixel-ratio: 3) {

/*****รหัสของคุณที่นี่*****/

}

มีรหัสแบบสอบถามสื่อมากขึ้นสำหรับโทรศัพท์ Galaxy, HTC และ Apple นอกจากนี้ยังมีการระบุความกว้างสำหรับความกว้างของแท็บเล็ต Ipad, Galaxy และ Nexus สิ่งที่คุณต้องทำคือใส่รหัสนี้ลงในไฟล์ CSS ของเว็บไซต์ของคุณ และกรอกในวงเล็บ CSS เปล่าด้วยรหัสของคุณเอง! เสร็จแล้ว!

เว็บไซต์ของคุณตอบสนอง แต่ก็ยังรู้สึกไม่ถูกต้อง

คุณอาจเริ่มสังเกตเห็นว่าองค์ประกอบบางอย่างในไซต์ของคุณใช้พื้นที่บนอุปกรณ์มือถือค่อนข้างมาก เช่น เมนูหลักของคุณ ในการทำให้ตอบสนอง คุณมักจะใช้ "float: none" กับแท็ก <li> ในเมนูของคุณ แต่ตอนนี้เมนูนี้กำลังกินพื้นที่ส่วนใหญ่ของอสังหาริมทรัพย์ที่ด้านบนของไซต์ของคุณ คุณจะต้องแปลงเมนูหลักของคุณเป็นเมนูดรอปดาวน์ด้วยข้อความค้นหาสื่อ jQuery และ CSS Css-tricks.com ยังอธิบายวิธีการทำเช่นนี้

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

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

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

<a href=”#skip”>คลิกที่นี่เพื่อข้ามไปยังเนื้อหาหลัก</a>

<a id=”skip”></a>เนื้อหาหลักเริ่มต้นที่นี่

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

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

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

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

-Izzak Hale นักออกแบบกราฟิกอาวุโส