ยิ่งอุปกรณ์พกพาเป็นที่นิยมมากเท่าไหร่ เว็บไซต์ส่วนใหญ่ก็รู้สึกว่าการเลื่อนดูไม่สะดวกขึ้น นั่นคือเหตุผลที่ ตั้งแต่ปี 2012 เว็บมาสเตอร์ได้ใช้โซลูชันที่ทำให้การดูทรัพยากรบนหน้าจอที่มีความละเอียดต่ำสะดวกสบายยิ่งขึ้น - เลย์เอาต์ที่ปรับเปลี่ยนได้
กระแสนิยม
วันนี้ ผู้คนประมาณห้าพันล้านคนบนโลกใช้โทรศัพท์มือถือ โดยหนึ่งในสามมีสมาร์ทโฟน ดังนั้น ปริมาณการใช้มือถือจึงมีความสำคัญมากขึ้นสำหรับเจ้าของเว็บไซต์ มีแนวโน้มว่าแหล่งที่มาของผู้เข้าชมดังกล่าวจะเติบโตขึ้นเมื่อเวลาผ่านไปเสิร์ชเอ็นจิ้นตอบสนองต่อแนวโน้มนี้อย่างรวดเร็ว บริษัทขนาดใหญ่ "ยานเดกซ์" และ Google ได้ทำการเปลี่ยนแปลงที่สำคัญกับอัลกอริธึมสำหรับการจัดอันดับไซต์ในผลการค้นหา โดยคำนึงถึงความพร้อมใช้งานของการจัดวางและการออกแบบที่ปรับเปลี่ยนได้ พูดง่ายๆ ก็คือ ทรัพยากรบนเว็บที่ปรับให้เหมาะสมสำหรับโทรศัพท์มือถือ สมาร์ทโฟน และแท็บเล็ตจะมีข้อได้เปรียบเหนือคู่แข่งบ้าง
การกำหนดเลย์เอาต์ที่ปรับเปลี่ยนตามอุปกรณ์
Adaptive Layout คือวิธีการสร้างกรอบหน้าเว็บเปลี่ยนตำแหน่งของบล็อกโดยอัตโนมัติตามความละเอียดหน้าจอของอุปกรณ์ที่รับชม นั่นคือ ด้วยวิธีนี้ รูปแบบที่แยกจากกันจะถูกสร้างขึ้นสำหรับความละเอียดที่หลากหลาย เอฟเฟกต์นี้ทำได้โดยการเขียนไฟล์ CSS พิเศษ
ก่อนหน้านี้ปัญหาได้รับการแก้ไขแตกต่างออกไปเล็กน้อย นักพัฒนาซอฟต์แวร์ต้องสร้าง "การเคลื่อนไหวของร่างกาย" มากขึ้น โดยสร้างเลย์เอาต์และการออกแบบของเวอร์ชันหลักของเว็บไซต์ และทำเช่นเดียวกันกับเวอร์ชันมือถือ ขึ้นอยู่กับหน้าจอของอุปกรณ์ที่ใช้ดูโปรเจ็กต์อินเทอร์เน็ตด้วยแพลตฟอร์มมือถือที่พร้อมใช้งาน รุ่นที่เหมาะสมของเว็บไซต์เปิดตัว
วิธีการนี้ไม่ได้พิสูจน์ตัวเองในหลาย ๆ ด้าน และเว็บมาสเตอร์ส่วนใหญ่ไม่เคยสร้างเวอร์ชันสำหรับอุปกรณ์พกพา ตอนนี้คำสั่งซื้อนี้ถูกแทนที่ด้วยรูปแบบที่ปรับเปลี่ยนได้ ด้วยการสร้างโครงร่างไซต์โดยใช้เทคโนโลยีนี้ ผู้ดูแลเว็บได้จดจ่อกับความพยายามทั้งหมดของเขาในการสร้างโครงการเวอร์ชันเดียว และผู้เยี่ยมชมสามารถดูได้อย่างสะดวกสบายในระดับเดียวกันทั้งบนหน้าจอคอมพิวเตอร์ขนาดใหญ่และบนโทรศัพท์มือถือ สมาร์ทโฟน หรือแท็บเล็ต
ข้อดีของเลย์เอาต์ที่ตอบสนอง
ข้อดีของการจัดวางเว็บไซต์แบบปรับเปลี่ยนได้คืออะไร? ก่อนหน้านี้มีข้อสังเกตว่าข้อดีคือการแสดงบล็อกหน้าทั้งหมดบนอุปกรณ์ใดก็ได้อย่างถูกต้อง นอกจากนี้ แง่บวกของแนวทางนี้ในการสร้างเทมเพลตคือความเร็วในการดำเนินการเปลี่ยนแปลง หมายความว่ายังไง
หากไซต์มีสองแพลตฟอร์ม การเปลี่ยนแปลงที่ทำกับเลย์เอาต์จะต้องเป็นขั้นแรกให้ปรับใช้ในเวอร์ชันที่ใช้งานได้ และจากนั้นในเวอร์ชันมือถือ หากการเปลี่ยนแปลงในโค้ดค่อนข้างสำคัญ ขั้นตอนการเปลี่ยนแปลงดังกล่าวอาจใช้เวลานาน ด้วยเลย์เอาต์แบบปรับได้ การทำงานบนไซต์จะดำเนินการในไฟล์เดียว การเปลี่ยนแปลงที่ทำกับเลย์เอาต์ของหน้าเว็บจะมีผลเท่ากันในเร็วๆ นี้ทั้งเวอร์ชันที่ใช้งานจริงและเวอร์ชันมือถือ
ข้อเสียของแนวทางนี้ เว็บมาสเตอร์บางคนเรียกความซับซ้อนของการนำไปใช้ แต่ด้วยการถือกำเนิดของ CSS 3 การสร้างเทมเพลตเลย์เอาต์ที่ตอบสนองได้ค่อนข้างง่าย แม้แต่ผู้ดูแลเว็บที่ไม่มีประสบการณ์ก็สามารถทำให้เว็บไซต์ของตนเหมาะกับอุปกรณ์เคลื่อนที่ได้
หลักการและคุณสมบัติของเค้าโครงแบบปรับได้
หลักการใดที่สนับสนุนวิธีการเลย์เอาต์แบบตอบสนองในการออกแบบเว็บ
- การใช้รูปแบบของเหลว
- รูปภาพ "ยาง"
- การใช้คำค้นหาสื่อ (แบบสอบถามสื่อ)
- ความจำเป็นในการคิดเกี่ยวกับอุปกรณ์พกพาตั้งแต่เริ่มต้นเลย์เอาต์
จากหลักการพื้นฐานของวิธีการสร้างเทมเพลตนี้ ฟีเจอร์ต่อไปนี้ของเลย์เอาต์ที่ปรับเปลี่ยนได้มีดังนี้:
1. การออกแบบและสร้างการออกแบบเว็บไซต์โดยคำนึงถึงความละเอียดทั้งหมดตั้งแต่อุปกรณ์เคลื่อนที่ไปจนถึงจอไวด์สกรีน
2. เลย์เอาต์พร้อมสไตล์ชีตแบบเรียงซ้อนโดยใช้เทคโนโลยีคิวรี่สื่อที่เปิดตัวใน CSS 3
3. การเขียนโปรแกรมด้านข้างทั้งไคลเอนต์และเซิร์ฟเวอร์เพื่อส่งภาพไปยังอุปกรณ์พกพาที่มีขนาดและความละเอียดที่เล็กกว่า
สิ่งสำคัญโดยคำนึงถึงรูปแบบที่ปรับเปลี่ยนได้คือเมทริกซ์ความละเอียดของอุปกรณ์อิเล็กทรอนิกส์ยอดนิยม แนวทางในการพัฒนาการออกแบบนี้จะทำให้การท่องเว็บบนหน้าจอใดก็ได้สะดวกสบายมาก แต่คุณจะรู้ได้อย่างไรว่าควรใส่สไตล์ไหน
จะเริ่มต้นด้วยรูปแบบที่ตอบสนองอย่างไร
เว็บไซต์ส่วนใหญ่สร้างในลักษณะที่แถบเลื่อนปรากฏบนหน้าจอสมาร์ทโฟนและแท็บเล็ต ซึ่งไม่สะดวกต่อการท่องเว็บ และการออกแบบและเลย์เอาต์ของโปรเจ็กต์อินเทอร์เน็ตหลายๆ อย่างก็ "ลอย" เว็บไซต์ที่สร้างขึ้นเพื่อสอนการออกแบบเว็บประกอบด้วยความละเอียดหน้าจอที่หลากหลายของอุปกรณ์ต่างๆ ซึ่งควรค่าแก่การจัดวางหน้าในไซต์ของคุณ
รูปแบบที่ปรับเปลี่ยนได้ ตัวอย่างที่พบได้ค่อนข้างบ่อย มีข้อดีมากมาย สิ่งที่ควรคำนึงถึงเมื่อเข้าใกล้เลย์เอาต์ของหน้าด้วยวิธีนี้
เมื่อเริ่มทำงานกับเทมเพลต จำเป็นต้องทดสอบเป็นระยะว่าเนื้อหาและบล็อกเลย์เอาต์แสดงได้ดีเพียงใดบนหน้าจอต่างๆ ในการทำเช่นนี้บางครั้งเพียงแค่เปลี่ยนความกว้างของหน้าต่างเบราว์เซอร์ก็เพียงพอแล้ว ไฟล์รูปแบบได้รับแบบสอบถามสื่อและจัดตำแหน่งบล็อกใหม่ ทำให้เกิดการเปลี่ยนแปลงที่สำคัญ เครื่องมือที่ดีสำหรับการทดสอบเทมเพลตเลย์เอาต์ที่ปรับเปลี่ยนตามอุปกรณ์อาจเป็นไซต์ที่เลียนแบบหน้าจอของอุปกรณ์เคลื่อนที่ในรุ่นต่างๆ บริการดังกล่าวจะช่วยให้คุณพิจารณาอย่างรอบคอบและประเมินว่าการออกแบบมีลักษณะอย่างไรบนจอแสดงผลของอุปกรณ์มือถือต่างๆ
แม้ว่าเทคโนโลยีของเลย์เอาต์ที่ตอบสนองดังกล่าวจะไม่ง่ายนัก แต่การเรียนรู้มันให้สำเร็จในเร็วๆ นี้