Scribd
Upload
25 views6 pages

3 Responsive Design

This document discusses responsive design, which adapts the layout of a website to different screen sizes and devices. It notes that users increasingly access websites from a variety of devices, so a one-size-fits-all approach is no longer sufficient. The document recommends following a mobile-first design where the site is first designed to satisfy mobile constraints before expanding for larger screens. It identifies grids, fluid images, and media queries as foundations for responsive design, with media queries using CSS to apply styles based on viewport size.

Uploaded by

aleksandarpmau
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
25 views6 pages

3 Responsive Design

This document discusses responsive design, which adapts the layout of a website to different screen sizes and devices. It notes that users increasingly access websites from a variety of devices, so a one-size-fits-all approach is no longer sufficient. The document recommends following a mobile-first design where the site is first designed to satisfy mobile constraints before expanding for larger screens. It identifies grids, fluid images, and media queries as foundations for responsive design, with media queries using CSS to apply styles based on viewport size.

Uploaded by

aleksandarpmau
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
You are on page 1/ 6

Responsive

Design
Jogesh K. Muppala

Why Responsive Design?


Users increasingly accessing websites from a
variety of devices of dierent screen sizes
One size ts all no longer a possibility!
Adapt to the users viewport
Build it into the core of the site

Mobile First Design


TradiMonal

First saMsfy the


Mobile constraints

Mobile rst

FoundaMon for Responsive Design


Grid system
Well deal with Bootstrap Grid system next

Fluid images
Well look at Bootstrap support later

Media queries

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

How do we do this?
For beginners, start with a UI framework with
responsive design built-in
Once you get sucient experience, then you
can tweak the framework segngs to suit your
needs

You might also like