คุณถามตัวเองว่า "การออกแบบเว็บที่ตอบสนองต่ออะไร" การออกแบบเว็บที่ตอบสนองเป็นวิธีการที่นักออกแบบสร้างหน้าเว็บที่ "ตอบสนองต่อ" หรือปรับขนาดตัวเองขึ้นอยู่กับประเภทของอุปกรณ์ที่ถูกมองผ่าน นั่นอาจเป็นจอภาพคอมพิวเตอร์ตั้งโต๊ะขนาดใหญ่แล็ปท็อปหรืออุปกรณ์ที่มีหน้าจอขนาดเล็กเช่นสมาร์ทโฟนและแท็บเล็ต
การออกแบบเว็บที่ตอบสนองได้กลายเป็นเครื่องมือสำคัญสำหรับทุกคนที่มีสถานะดิจิทัล ด้วยการเติบโตของสมาร์ทโฟนแท็บเล็ตและอุปกรณ์คอมพิวเตอร์พกพาอื่น ๆ ผู้คนจำนวนมากกำลังใช้หน้าจอขนาดเล็กเพื่อดูหน้าเว็บ
$config[code] not foundเว็บไซต์เหล่านี้จะต้องพิจารณาดัชนีมือถือเป็นครั้งแรกที่เพิ่งประกาศโดย Google ในเดือนเมษายน 2018 เนื่องจากธุรกิจขนาดเล็กเพิ่มการแสดงตนบนมือถือของพวกเขาเว็บไซต์อีคอมเมิร์ซหน้า Google Business หน้าสื่อสังคมออนไลน์และสินทรัพย์อื่น ๆ อุปกรณ์
ออกแบบเว็บไซต์ตอบสนองคืออะไร
วัตถุประสงค์ของการออกแบบที่ตอบสนองคือมีเว็บไซต์เดียว แต่มีองค์ประกอบต่าง ๆ ที่ตอบสนองแตกต่างกันเมื่อดูบนอุปกรณ์ที่มีขนาดแตกต่างกัน
มาใช้เว็บไซต์ "คงที่" แบบดั้งเดิมกันเถอะ เมื่อดูบนคอมพิวเตอร์เดสก์ท็อปเว็บไซต์อาจแสดงสามคอลัมน์ แต่เมื่อคุณดูเค้าโครงเดียวกันนั้นบนแท็บเล็ตขนาดเล็กมันอาจบังคับให้คุณเลื่อนในแนวนอนสิ่งที่ผู้ใช้ไม่ต้องการ หรือองค์ประกอบอาจถูกซ่อนจากมุมมองหรือดูผิดเพี้ยน ผลกระทบนั้นซับซ้อนด้วยความจริงที่ว่าแท็บเล็ตจำนวนมากสามารถดูได้ทั้งในแนวตั้งหรือหันด้านข้างเพื่อดูทิวทัศน์
บนหน้าจอสมาร์ทโฟนขนาดเล็กเว็บไซต์สามารถดูได้ยากขึ้น รูปภาพขนาดใหญ่อาจ“ แตก” เลย์เอาต์ ไซต์อาจโหลดช้าบนสมาร์ทโฟนหากกราฟิกหนัก
อย่างไรก็ตามหากไซต์ใช้การออกแบบที่ตอบสนองได้เวอร์ชันแท็บเล็ตอาจปรับให้แสดงเพียงสองคอลัมน์โดยอัตโนมัติ ด้วยวิธีนี้เนื้อหาสามารถอ่านได้และใช้งานง่าย ในสมาร์ทโฟนเนื้อหาอาจปรากฏเป็นคอลัมน์เดียวอาจเรียงซ้อนกันในแนวตั้ง หรืออาจเป็นไปได้ว่าผู้ใช้จะสามารถปัดนิ้วเพื่อดูคอลัมน์อื่น ๆ ได้ รูปภาพจะปรับขนาดแทนการบิดเบือนเค้าโครงหรือตัดออก
ประเด็นคือ: ด้วยการออกแบบที่ตอบสนองเว็บไซต์จะปรับอัตโนมัติตามอุปกรณ์ที่ผู้ดูมองเห็น
การออกแบบเว็บตอบสนองทำงานอย่างไร
ไซต์ที่ตอบสนองใช้กริดของเหลว องค์ประกอบหน้าทั้งหมดมีขนาดตามสัดส่วนแทนที่จะเป็นพิกเซล ดังนั้นหากคุณมีสามคอลัมน์คุณจะไม่พูดว่าแต่ละคอลัมน์ควรมีความกว้างเท่าไร แต่ควรมีความกว้างเท่าไรเมื่อเทียบกับคอลัมน์อื่น ๆ คอลัมน์ 1 ควรใช้เวลาครึ่งหน้าคอลัมน์ 2 ควรใช้ 30% และคอลัมน์ 3 ควรใช้ 20% เป็นต้น
สื่อเช่นรูปภาพมีการปรับขนาดค่อนข้าง ด้วยวิธีการที่ภาพสามารถอยู่ในคอลัมน์หรือองค์ประกอบการออกแบบที่เกี่ยวข้อง
ประเด็นที่เกี่ยวข้อง
เมาส์ v. touch: การออกแบบสำหรับอุปกรณ์พกพายังทำให้เกิดปัญหาเรื่องเมาส์และการสัมผัส บนคอมพิวเตอร์เดสก์ท็อปปกติผู้ใช้จะมีเมาส์เพื่อนำทางและเลือกรายการ บนสมาร์ทโฟนหรือแท็บเล็ตผู้ใช้ส่วนใหญ่ใช้นิ้วและสัมผัสหน้าจอ สิ่งที่อาจดูเหมือนง่ายต่อการเลือกด้วยเมาส์อาจเป็นการยากที่จะเลือกด้วยนิ้วที่จุดเล็ก ๆ บนหน้าจอ นักออกแบบเว็บไซต์จะต้องคำนึงถึง "การสัมผัส"
กราฟิกและความเร็วในการดาวน์โหลด: นอกจากนี้ยังมีปัญหาเรื่องกราฟิกโฆษณาและความเร็วในการดาวน์โหลด บนอุปกรณ์มือถือคุณควรแสดงกราฟิกน้อยกว่าการดูเดสก์ท็อปเพื่อให้ไซต์ไม่ต้องโหลดสมาร์ทโฟนตลอดไป อาจต้องเปลี่ยนขนาดโฆษณาที่ใหญ่ขึ้นสำหรับโฆษณาขนาดเล็ก
แอพและ“ เวอร์ชั่นสำหรับมือถือ”: ก่อนหน้านี้คุณอาจนึกถึงการสร้างแอพสำหรับเว็บไซต์ของคุณเช่นแอพ iPad หรือแอพ Android หรือคุณจะมีรุ่นมือถือสำหรับ BlackBerry โดยเฉพาะ
แต่ด้วยอุปกรณ์ที่แตกต่างกันมากมายในปัจจุบันทำให้การสร้างแอพและเวอร์ชันต่าง ๆ สำหรับอุปกรณ์และแพลตฟอร์มการทำงานนั้นยากขึ้น
ทำไมธุรกิจขนาดเล็กจำเป็นต้องเปลี่ยนมาใช้เว็บไซต์ที่ตอบสนองต่อการออกแบบ
ผู้คนจำนวนมากกำลังใช้อุปกรณ์มือถือ การศึกษา Pew เมื่อเร็ว ๆ นี้ 77% ของชาวอเมริกันตอนนี้มีสมาร์ทโฟนเป็นเจ้าของในปี 2018 ซึ่งเพิ่มขึ้นจากเพียง 35% ในการสำรวจความเป็นเจ้าของสมาร์ทโฟนครั้งแรกของ Pew Research Center ที่ดำเนินการในปี 2554
ตรวจสอบปริมาณการใช้งานและคุณอาจตกใจเมื่อเห็นว่ามีผู้เยี่ยมชมเว็บไซต์ของคุณผ่านอุปกรณ์มือถือจำนวนเท่าใด (ใน Google Analytics ของคุณเลือก“ ผู้ชม” ทางด้านซ้ายจากนั้นเลือก“ มือถือ” เพื่อดูว่าสัดส่วนการรับส่งข้อมูลจากอุปกรณ์มือถือเป็นอย่างไรคุณสามารถเจาะลึกลงไปเพื่อดูว่าอุปกรณ์ใดกำลังส่งสัญญาณเข้าชม)
เทมเพลตการออกแบบที่ตอบสนองได้ทุกที่ตอนนี้สำหรับการซื้อ ตัวอย่างเช่นหากคุณมีเว็บไซต์ WordPress คุณสามารถเยี่ยมชมแกลเลอรี่แม่แบบที่มีชื่อเสียงเช่น ThemeForest และค้นหา“ ธีม WordPress ที่ตอบสนองได้” ซื้อหนึ่งไซต์ภายใต้ $ 50 นักพัฒนาเว็บของคุณสามารถปรับแต่งโลโก้และแบรนด์ของคุณเอง
หมายเหตุบรรณาธิการ: ที่นี่ที่ Small Business Trends เรากำลังทำงานในการออกแบบที่ตอบสนองใหม่ คุณไม่ควรเหรอ
ภาพถ่ายผ่าน Shutterstock
เพิ่มเติมใน: การตลาดเนื้อหา, ความคิดเห็น 95 อะไร▼
