OIM3690 - Web Technologies

Responsive Web Design

Responsive Web Design

• Responsive Design
  • A method of designing websites to adapt to different devices,
  • Allowing users to have an optimal viewing experience regardless of device.
• Responsive Web Design Approaches:
  1. Media Queries: MDN, W3Schools
  2. Flexbox: MDN, W3Schools, Flexbox Froggy game, Flexbox Defense
  3. Grid Layout: MDN, W3Schools, Grid Garden game
  4. Frameworks such as Bootstrap / Tailwind
• Other learning resources:
  • web.dev

Frameworks

Bootstrap

• "The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web."
  • twbs/bootstrap
• Bootstrap Documentation
• Bootstrap Expo

Bootstrap Features

• Really good looking UI
• Mobile first
• Multi-screen support (responsive design)
• Powerful grid system for design

Tailwind and shadcn/ui

• Tailwind CSS is a utility-first CSS framework for creating custom designs without having to leave your HTML.
• Tailwind
  • Website
  • Components
  • Playground.
• shadcn/ui is a UI component library built on top of Tailwind CSS and Radix UI.

Questions?