Scribd
Upload
6 views8 pages

Responsive Web Design Lecture Notes

The document discusses Responsive Web Design, emphasizing the need for web applications to adapt to various screen sizes without creating multiple versions. It highlights the use of CSS techniques such as grid layouts, media queries, and relative sizing for images and videos to achieve a fluid design. The mobile-first approach is recommended to optimize designs for smaller screens before expanding to larger devices.

Uploaded by

dittu802
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
6 views8 pages

Responsive Web Design Lecture Notes

The document discusses Responsive Web Design, emphasizing the need for web applications to adapt to various screen sizes without creating multiple versions. It highlights the use of CSS techniques such as grid layouts, media queries, and relative sizing for images and videos to achieve a fluid design. The mobile-first approach is recommended to optimize designs for smaller screens before expanding to larger devices.

Uploaded by

dittu802
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 Web Design

CS353 Lecture Notes - Responsive Web Design


Web App Challenges: Screen real estate

768x1024
1920x1028
320x64

640x320 768x1024
0

Cell Phones Tablets Desktops

● Do we need to build N versions of each web application?

CS353 Lecture Notes - Responsive Web Design


CS353 Lecture Notes - Responsive Web Design
Responsive Web Design
● Content is like water!
○ The web app should flow into and fill whatever device you have.

● Possible with CSS extensions:


○ Add grid layout system with relative (e.g. 50%) rather than absolute (e.g. 50pt) measures
■ Specify element packing into columns and rows
○ Add @media rules based on screen sizes
■ Switch layout based on screen size
○ Made images support relative sizes
■ Autoscale image and videos to fit in screen region
img { width: 100%; height: auto; }
video { width: 100%; height: auto; }

CS353 Lecture Notes - Responsive Web Design


Example of Responsive Web Layout
Menu #1 - 25% Menu #2 - 25% Menu #3 - 25% Menu #4 - 25%

Nav #1 - 25%

Nav #2 - 25% View component - 75%

Nav #3 - 25%

Footer - 100%

Menu #1 - 25% Menu #2 - 25% Menu #3 - 25% Menu #4 - 25%

Nav #1 - 25%

Nav #2 - 25% View component - 75%

Nav #3 - 25%

Footer
CS142 Lecture Notes- -100%
Responsive Web Design
CSS Breakpoints
Menu #1 - 100%
CSS Rules: Menu #2 - 100%

@media only screen and (min-width: 768px) { Menu #3 - 100%


/* tablets and desktop layout */ }
Menu #4 - 100%
@media only screen and (max-width: 767px) {
/* phones */ } Nav #1 - 25%

@media only screen and (max-width: Nav


View#2 - 25% nt - 100%
compone
767px) and (orientation: portrait) {
Nav #3 - 25%
/* portrait phones */ }
Footer - 100%

CS353 Lecture Notes - Responsive Web Design


Responsive implementation
● Build components to operate at different screen sizes and densities
○ Use relative rather than absolute
○ Specify sizes in device independent units

● Use CSS breakpoints to control layout and functionality


○ Layout alternatives
○ App functionality conditional on available screen real estate

● Mobile first popular


○ Expand a good mobile design to use more real estate

CS353 Lecture Notes - Responsive Web Design

You might also like