Scribd
Upload
134 views6 pages

Introduction to Responsive Web Design

This document discusses responsive design, which is designing websites to adapt to different screen sizes. It recommends taking a mobile-first approach where the design first satisfies mobile constraints before expanding for larger screens. The foundations of responsive design include using a grid system, fluid images, and media queries to apply styles based on viewport size. It suggests starting with a UI framework that has responsive design built-in to make the process easier.

Uploaded by

Debojyoti Mukherjee
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
134 views6 pages

Introduction to Responsive Web Design

This document discusses responsive design, which is designing websites to adapt to different screen sizes. It recommends taking a mobile-first approach where the design first satisfies mobile constraints before expanding for larger screens. The foundations of responsive design include using a grid system, fluid images, and media queries to apply styles based on viewport size. It suggests starting with a UI framework that has responsive design built-in to make the process easier.

Uploaded by

Debojyoti Mukherjee
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Responsive

Design

Jogesh K. Muppala
Why Responsive Design?
• Users increasingly accessing websites from a
variety of devices of different screen sizes
• One size fits all no longer a possibility!
• Adapt to the user’s “viewport”
– Build it into the core of the site

2
Mobile First Design

Traditional

First satisfy the Mobile first


Mobile constraints

3
Foundation for Responsive Design
• Grid system
– We’ll deal with Bootstrap Grid system next
• Fluid images
– We’ll look at Bootstrap support later
• Media queries

4
Media Queries
• CSS technology to apply some styles based on the
size of the viewport
e.g.,
@media (min-width: 992px) {
/* CSS styles customized for desktop */
}

5
How do we do this?
• Start with a UI framework with responsive
design built-in

You might also like