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

หากคุณสมัครใช้บริการจากลิงก์ในหน้านี้ Reeves and Sons Limited อาจได้รับค่าคอมมิชชั่น ดูของเรา คำสั่งจริยธรรม.

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

แนวคิดของ responsive การออกแบบเรียบง่าย แต่ความเรียบง่ายทำให้ผู้คนทำผิดพลาดได้ง่าย นักออกแบบที่มีประสบการณ์หลายปีเริ่มคุ้นเคยกับการออกแบบสำหรับ desktopและโดยปกติแล้วพวกเขาจะวางแผนการออกแบบตาม 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 แบบลากและวางก็คือ ปกติแล้วคุณจะไม่สามารถกำหนดลำดับที่ div จะซ้อนกันได้ และในกรณีที่เกิดขึ้นไม่บ่อยนักที่คุณสามารถทำได้ การทำงานหนักของคุณจะถูกเลิกทำทุกครั้ง คุณทำการแก้ไขเพียงเล็กน้อย และคุณจะต้องกลับเข้าไปแฮ็กซอร์สโค้ดอีกครั้ง

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

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

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

8.ใช้ดีที่สุด responsive ภาพ

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

มารยาทภาพส่วนหัวของ

บ็อกดานแรนเซีย

บ็อกแดนเป็นสมาชิกผู้ก่อตั้งของนิตยสาร Inspired Mag ซึ่งสะสมประสบการณ์เกือบ 6 ปีในช่วงเวลานี้ ในเวลาว่างเขาชอบเรียนดนตรีคลาสสิกและสำรวจทัศนศิลป์ เขาค่อนข้างหมกมุ่นอยู่กับ fixies เช่นกัน เขาเป็นเจ้าของ 5 คนแล้ว

ความคิดเห็น 1 การตอบสนอง

  1. เอ็มพี พูดว่า:

    อันดับแรกมือถือหมายความว่าในฐานโค้ด "ค่าเริ่มต้น" css มีไว้สำหรับมือถือและคุณสร้างการเปลี่ยนแปลงให้กว้างขึ้น formatจากที่นั่น ฉันไม่เข้าใจประเด็นแรกของคุณจริงๆ

เขียนความเห็น

ที่อยู่อีเมลของคุณจะไม่ถูกเผยแพร่ ช่องที่ต้องการถูกทำเครื่องหมาย *

อันดับ *

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