สัปดาห์ที่ 13 Responsive Web Design และ Bootstrap

สไลด์บทเรียน

วัตถุประสงค์

1. อธิบายหลักการ Responsive Web Design ได้
2. ใช้ Bootstrap เพื่อสร้าง UI ที่ตอบสนองต่อหน้าจอหลายขนาดได้
3. ตรวจและปรับปรุงหน้าเว็บด้วย Chrome DevTools ได้

หัวข้อย่อย

1. Mobile First Design
2. Viewport และ Breakpoints
3. Fluid Layout
4. Responsive Images
5. Bootstrap Grid
6. Bootstrap Components
7. Chrome DevTools Device Mode

เนื้อหา

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

Bootstrap ช่วยให้สร้าง layout และ component ได้เร็วขึ้น แต่ควรใช้ด้วยความเข้าใจ ไม่ใช่เพียง copy class โดยไม่รู้ผลต่อโครงสร้างและ UX

ตัวอย่าง

<div class="container">
  <div class="row">
    <section class="col-12 col-md-6 col-lg-4">Card</section>
  </div>
</div>

กิจกรรมในชั้นเรียน

ปรับหน้าเว็บหรือ Mini Project ให้รองรับ mobile และ desktop พร้อมตรวจด้วย DevTools

ศึกษาค้นคว้านอกเวลา

ทดสอบเว็บบน breakpoint ต่าง ๆ และบันทึกสิ่งที่ปรับปรุง

คำถามทบทวน

1. Mobile first แตกต่างจาก desktop first อย่างไร
2. Bootstrap Grid ช่วยจัด layout อย่างไร
3. ควรทดสอบ Responsive ด้วยอะไรบ้าง

กลับรายวิชา