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