30 บทแนะนำการออกแบบเว็บไซต์ที่ตอบสนองต่อประโยชน์

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

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

เราจะเริ่มต้นด้วยบทแนะนำเบื้องต้นใน 'Breaking the Ice' บางอย่างเช่นคลาส RWD: 101 ที่คุณควรเข้าร่วมเพื่อรับแนวคิดนี้ก่อนที่เราจะเริ่มทำแบบฝึกหัด 'Start Building'.

สุดท้ายเราจะจบลงด้วยส่วน 'ทำเพิ่มเติม' ซึ่งเราจะนำเสนอบทช่วยสอนที่เล่นกับเลย์เอาต์แนวนอน, วิดีโอ 'ยืดหยุ่น', เมนูแบบเลื่อนลงและการนำทางหีบเพลงแบบเลื่อนขึ้น - ลง - บน, รูปขนาดย่อและปัญหาเหนียว ๆ.

แต่แรก…

นี่คือบทสรุปของบทเรียนสองบทที่นำเสนอเมื่อต้นสัปดาห์โดยผู้เขียนของเรา:

การนำทางเว็บไซต์ที่ตอบสนอง

โดย Thoriq Firdaus - [ดูบทแนะนำ]

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

ตอบสนองต่อประวัติย่อ

โดย Jake Rocheleau - [ดูบทแนะนำ]

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

ทำลายน้ำแข็ง

ตอนนี้เราอยู่ที่ไหน ใช่แล้วเรามาเริ่มต้นการทำลายน้ำแข็งกันดีกว่า!

คู่มือเริ่มต้นของการตอบสนองต่อการออกแบบเว็บ

โดย Nick Petit - [ดูบทแนะนำ]

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

การออกแบบเว็บตอบสนองเบื้องต้น: วิดีโอ

โดย Nick Petit - [ดูบทแนะนำ]

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

วิธีการเปลี่ยนเว็บไซต์ใด ๆ ให้เป็นเว็บไซต์ตอบสนอง

โดย Rochester Oliveira - [ดูบทแนะนำ]

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

การออกแบบที่ตอบสนองใน 3 ขั้นตอน

โดย Nick La - [ดูบทแนะนำ]

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

การออกแบบสำหรับเว็บที่ตอบสนอง

โดย Max Luzuriaga - [ดูบทแนะนำ]

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

การออกแบบเว็บไซต์ที่ตอบสนอง: คำแนะนำแบบเห็นภาพ

โดย Andrew Gormley - [ดูบทแนะนำ]

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

เริ่มสร้าง

เอาล่ะเรามาเริ่มสร้างการออกแบบที่ตอบสนองเริ่มต้นด้วย ...

กริดของไหล

โดย Ethan Marcotte - [ดูบทแนะนำ]

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

รูปภาพของไหล

โดย Ethan Marcotte - [ดูบทแนะนำ]

ในตอนท้ายของบทความนี้คุณควรรู้ว่าใครคือ Ethan Marcotte นี่คือคำใบ้: เขาเป็นคนหนึ่งที่คิดค้นแนวคิดและคำศัพท์สำหรับการออกแบบที่ตอบสนองต่อเว็บ ชื่อของเขาจะปรากฎในบทช่วยสอนอื่น ๆ ในรายการนี้ดังนั้นทำไมไม่ลองใช้คำแนะนำเกี่ยวกับรูปของเหลวโดยตรงจากอาจารย์เอง?.

รูปแบบการนำทางที่ปรับขนาดได้ในการออกแบบเว็บที่ตอบสนอง

โดย Michael Mesker - [ดูบทแนะนำ]

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

ตอบสนองการออกแบบเว็บไซต์ด้วย CSS3 Media Queries

โดย Nick La - [ดูบทแนะนำ]

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

เอฟเฟกต์ CSS: เว้นช่องว่างรูปภาพเพื่อจับคู่ความสูงของข้อความ

โดย Zoe Mickley Gillenwater - [ดูบทแนะนำ]

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

ปรับเลย์เอาต์กับ Media Queries

โดย Aaron Gustafson - [ดูบทแนะนำ]

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

รูปภาพตอบสนอง: การทดสอบด้วยการกำหนดขนาดรูปภาพตามบริบท

โดย Scott Jehl - [ดูบทแนะนำ]

นี่คือบทแนะนำที่ใช้วิธีการ build-from-mobile-first เทคนิคนี้ระบุขนาดที่ใหญ่ขึ้นสำหรับภาพที่จะใช้กับความละเอียดหน้าจอที่ใหญ่กว่าลบการร้องขอภาพเช่นเดียวกับการสูดดม UA.

ทำมากขึ้น

วิดีโอยืดหยุ่น

โดย Nick La - [ดูบทแนะนำ]

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

การซ่อนและเปิดเผยส่วนต่าง ๆ ของรูปภาพ

โดย Zoe Mickley Gillenwater - [ดูบทแนะนำ]

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

เนวิเกเตอร์เนื้อหาที่ตอบสนองกับ CSS3

โดย Mary Lou - [ดูบทแนะนำ]

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

สร้างเทมเพลตการออกแบบเว็บที่ตอบสนอง

โดยแฮร์รี่แอตกินส์ - [ดูบทแนะนำ]

นี่คือการสอนสั้น ๆ เพื่อสร้างการตอบสนอง แม่แบบเว็บ ใช้งานได้ทั้งบนเดสก์ท็อปและบน iPhone.

เค้าโครงแนวนอนตอบสนอง

โดย Mary Lou - [ดูบทแนะนำ]

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

แปลงเมนูเป็นรายการแบบหล่นลงสำหรับหน้าจอขนาดเล็ก

โดย Chris Coyier - [ดูบทแนะนำ]

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

หีบเพลงแบบเลื่อนขึ้นลงได้อย่างยืดหยุ่น

โดย Mary Lou - [ดูบทแนะนำ]

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

วิธีใช้การค้นหาสื่อปฐมนิเทศ CSS3

โดย Ryan Seddon - [ดูบทแนะนำ]

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

ตารางข้อมูลที่ตอบสนอง

โดย Chris Coyier - [ดูบทแนะนำ]

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

สไลด์โชว์ CSS3 ของไหลพร้อมเอฟเฟกต์ Parallax

โดย Ring Wing - [ดูบทแนะนำ]

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

วิธีการสร้างคลังภาพย่อที่ตอบสนอง

โดย Joshua Johnson - [ดูบทแนะนำ]

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

เพิ่มประสิทธิภาพอีเมลของคุณสำหรับอุปกรณ์มือถือ

โดย Ros Hodgekiss - [ดูบทแนะนำ]

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

ใช้กรอบ

สร้างเว็บไซต์ที่ตอบสนองต่อมือถือด้วย Skeleton

โดย Joshua Johnson - [ดูบทแนะนำ]

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

ออกแบบเว็บไซต์ที่ตอบสนองได้ด้วย HTML5 และ Framework น้อย 3

โดย Louis Simoneau - [ดูบทแนะนำ]

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

ข้อสรุป

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

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