จะสร้างการออกแบบที่ตอบสนองได้อย่างไร?

2024 ผู้เขียน: Trinity Chesterton | [email protected]. แก้ไขล่าสุด: 2023-12-16 08:24

การออกแบบเว็บไซต์แบบปรับเปลี่ยนได้เป็นระบบที่สะดวกสำหรับการแสดงเว็บไซต์เดียวกันบนอุปกรณ์ประเภทต่างๆ ทางออนไลน์ พูดง่ายๆ คือ ความสามารถในการดูหน้าเว็บหนึ่งหน้าบนแล็ปท็อป สมาร์ทโฟน และอุปกรณ์อื่นๆ

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

ลักษณะของการออกแบบเว็บที่ตอบสนอง

ความสะดวกในการออกแบบนั้นโดดเด่นด้วยเกณฑ์หลักหลายประการ

1. ขนาด. การออกแบบเว็บไซต์ที่ตอบสนองตามอุปกรณ์ควรมีความแตกต่างเล็กน้อยเมื่อแสดงหน้าบนอุปกรณ์ต่างๆ ดังนั้นขนาดของรูปภาพ ข้อความ และองค์ประกอบอื่นๆ ที่ดูควรสอดคล้องกับขนาดของอุปกรณ์เอง ในการทำเช่นนี้ นักพัฒนาเว็บได้ปรับการออกแบบเพื่อให้มีมุมมองหลายเวอร์ชัน
2. ดัดแปลงเนื้อหา. วัสดุที่เติมเต็มเว็บไซต์ (รูปภาพ, วิดีโอและองค์ประกอบมัลติมีเดียอื่นๆ) จะต้องตรงกับความละเอียดหน้าจอที่ต้องการโดยไม่สูญเสียคุณภาพของการแสดงผล
3. ความยืดหยุ่นในการออกแบบ รวมอยู่ในการพัฒนาองค์ประกอบที่ช่วยให้คุณสามารถปรับการออกแบบเว็บไซต์ได้อย่างรวดเร็วเมื่อคุณเปลี่ยนหน้าเว็บที่คุณกำลังดูอยู่ ตัวอย่างเช่น ผู้ใช้เลื่อนหน้าขึ้นและลง เลื่อนดูส่วนต่างๆ หรือเปลี่ยนตำแหน่งหน้าจอจากแนวตั้งเป็นแนวนอนและในทางกลับกัน
4. ลดความซับซ้อนของรายการตามอุปกรณ์เพื่อการใช้งานที่ดียิ่งขึ้น
5. ซ่อนบล็อกที่ไม่สำคัญบนหน้าจอขนาดเล็ก

พื้นฐาน

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

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

ในทางกลับกัน CSS เป็นเครื่องมือออกแบบที่ขาดไม่ได้ มีชุดคุณลักษณะขนาดใหญ่ที่เหนือกว่า HTML:

1. ให้ความสอดคล้องในการออกแบบในหลายหน้า ลักษณะเว็บไซต์ และควบคุมการแสดงเอกสาร HTML
2. ให้โอกาสคุณในการออกแบบและเนื้อหาในเวลาเดียวกัน
3. ใช้หลายรูปแบบและความสามารถในการดูบนอุปกรณ์ต่างๆ
4. ตัดสินใจในการออกแบบที่ซับซ้อน
5. โดดเด่นด้วยความเร็วสูง

ในการพัฒนาเว็บไซต์ คุณต้องรู้แนวคิดพื้นฐานบางอย่าง

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

ทรัพย์สินเป็นหน่วยโครงสร้าง มันกำหนดพารามิเตอร์ภายนอก (ขนาด ตำแหน่ง สี รูปร่าง ฯลฯ) และแสดงเป็นรหัสเฉพาะ

มีชุดคุณสมบัติ CSS ที่กำหนดซึ่งอธิบายวัตถุเดียวในลักษณะและตำแหน่ง

รวมองค์ประกอบเหล่านี้ในรูปแบบต่อไปนี้:

ตัวเลือก { property1: value; ทรัพย์สิน2; ค่า }.

ขนาดเค้าโครงและความละเอียด

การพัฒนาการออกแบบเริ่มต้นด้วยการเตรียมเค้าโครงใน Photoshop หรือโปรแกรมกราฟิกอื่นๆ เพื่อความสะดวกจะมีการแนะนำเครื่องหมายพิเศษของตารางโมดูลาร์ลงในผืนผ้าใบโดยสังเกตการเยื้องพิเศษ ดังนั้น ผู้ออกแบบเว็บจะแสดงให้ผู้ออกแบบเลย์เอาต์เห็นหลักการจัดโครงสร้างเว็บไซต์ในอนาคตและการจัดเรียงองค์ประกอบเว็บที่ถูกต้อง

ความละเอียดและขนาดการออกแบบเว็บที่ตอบสนองตามอุปกรณ์ประเภทหลัก:

• การออกแบบนี้ยึดหลักการเริ่มทำงานโดยได้รับอนุญาตจากมือถือ เลย์เอาต์สำหรับสมาร์ทโฟนถูกสร้างขึ้นในขนาด 460 × 960 พิกเซล
• ขนาดเลย์เอาต์แท็บเล็ตคือ 768 × 1024.
• ขนาดโน๊ตบุ๊ค 1280 × 802.
• พีซีขนาด 1600 × 992.

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

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

ความละเอียดปานกลางและขั้นต่ำสำหรับการออกแบบที่ตอบสนองควรคำนึงถึงความง่ายในการอ่านและดูโดยผู้ใช้

เลย์เอาต์

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

มันถูกสร้างขึ้นบน CSS เป็นหลัก ในระหว่างการพัฒนา จะมีการกำหนดจุดควบคุมของขนาดหน้าจอ ดังนั้นความกว้างของวัตถุที่เหลือจะถูกกำหนด เมื่อต้องการทำเช่นนี้ ความกว้างของหน้าถูกกำหนดโดยคุณสมบัติ css max-width ขึ้นอยู่กับเกณฑ์เหล่านี้ ขนาดขององค์ประกอบอื่น ๆ จะถูกเลือกเป็นเปอร์เซ็นต์ ตัวอย่างเช่น ขนาดบล็อกบนหลักหน้าคือ 600px และความกว้างของแถบด้านข้าง (แถบด้านข้างของไซต์) คือ 400px ตามลำดับ ความกว้างของเนื้อหาจะเป็น 60% และความกว้างของแถบด้านข้าง 40%

มีเลย์เอาต์ที่ปรับเปลี่ยนตามอุปกรณ์หลายประเภท แต่ละรายการจะถูกเลือกเป็นรายบุคคล ขึ้นอยู่กับคุณสมบัติและโครงสร้าง

เข้าชม:

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

การสร้างเลเยอร์ที่ตอบสนองเป็นเพียงส่วนหนึ่งของงาน รูปภาพที่ปรับเปลี่ยนได้นั้นเป็นกรณีที่แยกต่างหาก ซึ่งมีปัญหาและวิธีการแก้ไขของตัวเอง

ต้องแสดงภาพเดียวอย่างชัดเจนที่ความละเอียดหน้าจอต่างกัน มีปัญหาอยู่ที่นี่ - จะแน่ใจได้อย่างไรว่ารูปภาพจะเหมือนเดิมเสมอ โดยไม่คำนึงถึงการเปลี่ยนแปลงในความละเอียด การป้อนโค้ด CSS อย่างง่ายในกรณีนี้ไม่เพียงพอ

ตัวอย่าง: img {max-width: 250px;} - ที่นี่คุณควรใช้วิธีที่ขนาดของคอนเทนเนอร์ที่มีรูปภาพถูกจำกัด และไม่ใช่ตัวรูปภาพเอง มันจะมีลักษณะดังนี้: div img {max-width: 250px;} วิธีนี้แก้ปัญหาได้เลย์เอาต์ของรูปภาพขนาดเล็ก แต่ไม่เหมาะกับภาพประกอบขนาดใหญ่

ดังนั้น นักพัฒนาจำนวนมากจึงชอบใช้ภาษาจาวาสคริปต์ที่อนุญาตให้คุณปรับภาพใดๆ ก็ได้โดยไม่ต้องโหลดเซิร์ฟเวอร์มากเกินไป Javascript มีสคริปต์ทางเลือกจำนวนมาก

ข้อดีและข้อเสียของเลย์เอาต์ที่ตอบสนอง

ผลบวก:

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

เชิงลบ:

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

การสร้างเว็บไซต์

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

แท็กเสริมสำหรับเขียน:

• wrapper - แท็กที่รวมองค์ประกอบเทมเพลตทั้งหมด;
• ส่วนหัว h1 - โลโก้;
• header - ส่วนหัวของเมนูและองค์ประกอบที่สำคัญอื่นๆ
• เนื้อหา - บล็อก;
• colLeft - ขนาดเนื้อหา;
• colRight - แถบด้านข้าง (คอลัมน์ด้านข้าง);
• footer - ส่วนสุดท้ายของเว็บไซต์;
• หน้าจอสื่อ - ชุดความละเอียดที่ต้องการ

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

• viewport - แท็กที่ให้คุณบันทึกขนาดของข้อความในรูปแบบที่เล็กกว่าของการออกแบบ มันอยู่ระหว่างแท็ก.
• max-width - เพื่อเพิ่มประสิทธิภาพเว็บไซต์เพื่อหลีกเลี่ยงการยืดที่ความละเอียดเกิน 1,000 พิกเซล

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

การตอบสนองและการออกแบบบนมือถือแตกต่างกันอย่างไร

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

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

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

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

ผลประโยชน์

การออกแบบที่ตอบสนองดีกว่ามือถืออย่างไร

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

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

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

ง่ายและเรียบง่ายทั้งในการดำเนินโครงการและในการใช้งาน

อัตราการแปลงที่ดี เนื่องจากการออกแบบที่ปรับเปลี่ยนได้ทำให้มีโอกาสในการแสดงผลมากขึ้น การแปลงจึงเพิ่มขึ้น

เศรษฐกิจ. ค่อนข้างถูกกว่าการสร้างและโปรโมตเวอร์ชันมือถือแยกต่างหาก

ข้อดีและข้อเสียของเวอร์ชั่นมือถือ

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

การออกแบบที่ตอบสนองต่อมือถือมีข้อดีและข้อเสียบางประการ

ข้อดี:

1. หากคุณมีไซต์สำเร็จรูป ไม่จำเป็นต้องพัฒนาการออกแบบสำหรับเวอร์ชันมือถือตั้งแต่เริ่มต้น เปลี่ยนแปลงได้เพียงเล็กน้อยเท่านั้น ทำให้เลย์เอาต์นี้ว่างจากฟังก์ชันที่ไม่จำเป็น
2. เนื่องจากความง่ายทุกประเภท เวอร์ชันมือถือจะถือว่าเร็วกว่าเมื่อดาวน์โหลด
3. ผู้ใช้เห็นข้อมูลที่สำคัญที่สุดในเนื้อหาทั้งหมด
4. การนำไปใช้อย่างรวดเร็ว มีปลั๊กอินที่คุณสามารถปรับใช้การปรับมือถือได้ แม้ว่าคุณจะไม่รู้จักแท็กและรหัส
5. ตัวเลือกเสิร์ชเอ็นจิ้นชอบเวอร์ชันดัดแปลงเพราะใช้เวลาวิเคราะห์น้อยกว่า

ข้อเสีย:

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

วิธีการนำไปใช้

วิธีการใช้งานหลัก:

• หลังจากสร้างการออกแบบเลย์เอาต์และเลย์เอาต์ มันจะถูกโหลดไปยังขนาดที่ต้องการโดยใช้เว็บไซต์โอเปอเรเตอร์และรหัสหลัก นี่เป็นวิธีคลาสสิกที่ใช้ในการสร้างเวอร์ชันขนาดกลางและขนาดเล็ก (แท็บเล็ต สมาร์ทโฟน ฯลฯ)
• BootStrap คือชุดเครื่องมือดัดแปลงที่เรียบง่ายและชัดเจน เหมาะสำหรับการสร้างเวอร์ชันสำหรับ Landing Page และโครงการเว็บอื่นๆ ที่ไม่ซับซ้อนมากนัก เป็นโอกาสที่ดีในการใช้สไตล์ต่างๆ มากมายในฟังก์ชันอินเทอร์เฟซ
• Responsive Grid System คือชุดเครื่องมืออเนกประสงค์ยอดนิยม สมัครง่ายและไม่ต้องใช้ความรู้อย่างลึกซึ้ง รวมอินโฟกราฟิกที่หลากหลาย
• GUMBY - เฟรมเวิร์ก CSS ที่มีการตอบสนองที่ยืดหยุ่นและเครื่องมือที่ยอดเยี่ยม
• Cookies - ให้คุณปรับใช้รูปภาพที่ตอบสนองได้ มาพร้อมกับไฟล์ที่เบราว์เซอร์ร้องขอโดยอัตโนมัติ
• ExpressionEngine เป็นอีกวิธีหนึ่งในการสร้างภาพที่ตอบสนอง กำหนดว่าอุปกรณ์นั้นเป็นอุปกรณ์เคลื่อนที่หรือไม่ โดยสามารถเปลี่ยนภาพเป็นความละเอียดที่ต้องการได้
• ProtoFluid - ให้การสร้างต้นแบบอย่างรวดเร็ว เหมาะสำหรับอุปกรณ์ทุกประเภท