คู่มือฉบับสมบูรณ์ในการแก้ไข Responsive ปัญหาการออกแบบในปี 2023

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

แนวคิดของ responsive การออกแบบเรียบง่าย แต่ความเรียบง่ายทำให้ผู้คนทำผิดพลาดได้ง่าย นักออกแบบที่มีประสบการณ์หลายปีเริ่มคุ้นเคยกับการออกแบบสำหรับ desktopดังนั้นพวกเขาจึงมักจะวางแผนการออกแบบตาม a desktop แบบ

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

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

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

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

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

1. “ Mobile First” เป็นเรื่องปัญญาอ่อน

ขออภัย แต่มันเป็น ทุกคนต่างพาดพิงถึงสิ่งนี้ แต่ตามแนวคิดแล้ว มันไม่ได้มีประโยชน์มากนัก เพราะถ้าคุณออกแบบ "มือถือมาก่อน" อย่างแท้จริง มันจะเป็นฝันร้ายที่พยายามจะย่อขนาดกลับเป็น desktop การออกแบบเว้นแต่คุณจะยึดติดกับเค้าโครงคอลัมน์เดียวล้วนๆ

แนวทางที่ดีที่สุดคือการออกแบบโครงร่างที่แตกต่างกันอย่างน้อยสาม (และสูงสุด 11) รูปแบบ ขั้นต่ำที่คุณสามารถพิจารณา ได้แก่ :

• Desktop
• ภูมิทัศน์มือถือ
• มือถือแนวตั้ง

หากคุณต้องการละเอียดให้ละเอียดยิ่งขึ้นคุณควรพิจารณา:

• แท็บเล็ตแนวนอน
• แท็บเล็ตแนวตั้ง

และรายการเต็มรูปแบบหากคุณต้องการที่จะสมบูรณ์อย่างแน่นอนจะเป็น:

• ใหญ่ Desktop
• สามัญ Desktop
• แท็บเล็ตแนวนอนขนาดใหญ่
• แท็บเล็ตภาพบุคคลขนาดใหญ่
• แท็บเล็ตแนวนอนขนาดเล็ก
• แท็บเล็ตภาพบุคคลขนาดเล็ก
• แนวนอนขนาดใหญ่มือถือ
• มือถือแนวตั้งขนาดใหญ่
• ภูมิทัศน์ขนาดเล็กมือถือ
• มือถือแนวตั้งขนาดเล็ก
• เล็ก / สวมใส่สบาย

ด้วยความเป็นไปได้ที่แตกต่างกันมากมายจึงเห็นได้ชัดว่าทำไมแนวทาง "หนึ่งขนาดเหมาะกับทุกคน" ที่ขี้เกียจจึงน่าดึงดูด แต่ก็เห็นได้ชัดว่าเหตุใดจึงมีหลายวิธีที่จะทำลายมัน

2. เชื่องส่วนท้ายของหน้าเหยียดยาว

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

3. ยอมรับนิสัยใจคอเล็กน้อยในอุปกรณ์ปิดบัง

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

4. คุณสามารถซ่อนเนื้อหาที่ไม่เกี่ยวข้องกับข้อความหลัก

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

นอกจากนี้สิ่งต่าง ๆ เช่นรูปภาพที่ตกแต่งอย่างหมดจดหรือสวยงาม แต่ไม่ได้มีส่วนสำคัญต่อข้อความหลักคือผู้สมัครเพื่อลดหรือซ่อนตัวทั้งหมด

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

5. คุณสามารถใช้พื้นหลังทางเลือก

เมื่อเร็ว ๆ นี้ฉันได้รับงานที่ไร้สาระซึ่งเจ้าของไซต์ได้จ่ายเงินให้กับพื้นหลังเฉพาะและต้องการให้เนื้อหาทั้งหมดได้รับการปรับแต่งให้เหมาะสมกับพื้นหลังนั้น รายการสัญลักษณ์แสดงหัวข้อย่อยต้องเป็นจำนวนอักขระที่แน่นอนจำนวนบรรทัดทั้งหมดต้องเป็นจำนวนที่แน่นอนและอื่น ๆ

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

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

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

6. ควบคุมลำดับการยุบด้วยตนเอง (หรือหลีกเลี่ยงการอ้างอิงเชิงพื้นที่ภายในเนื้อหา)

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

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

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

7. คุณอาจต้องการขนาดตัวอักษรที่แตกต่างกันสำหรับรูปแบบที่แตกต่างกัน

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

8. เป็นการดีที่สุดที่จะใช้ responsive ภาพ

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

มารยาทภาพส่วนหัวของ อาร์ตูร์ มาร์ตีนอฟสกี้