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 วางสายหรือแสดงความคิดเห็นด้านล่าง.