Skip to content

Latest commit

 

History

History
61 lines (40 loc) · 3 KB

README.md

File metadata and controls

61 lines (40 loc) · 3 KB
Raw

Responsive Web Design Presentation


Presenter: Quang Dat Pham

Objectives

  • Understand Responsive Web Design
  • Breakpoints and @media queries technique
  • Flexbox and CSS grids for efficient layouts
  • CSS units in Responsive Web Design

COMPATIBLE Almost every business these days needs a mobile version of their website. iPhone, Android devices, iPad, Kindle, and moreover all screen resolutions.

What is Responsive Web Design?

  • Respond and adjust accordingly to the prevalence of mobile browsing from devices like laptops, tablets, and smartphones.
  • Responsive web design is a concept, which when implemented the right way can improve the UX.

Concepts:

  • Responsive Website Design (RWD): Websites that are built with responsive design use media queries to target breakpoints that scale images, wrap text and adjust the layout so that the website can shrink to fit any size of the screen.

  • Adaptive Website Design (AWD): Adaptive design typically uses multiple fixed layout sizes—when the system detects the browser size, it selects the layout most appropriate for the screen.

  • Fluid Website Design: Websites that are built with fluid design use percentages for widths.

  • Fixed Design: Websites that are built using fixed design rely on fixed pixel widths. While a design with fixed dimensions can sometimes be the quickest way to get up and running, it’ll provide a less user-friendly across multiple devices.

References