introduction to responsive web design
DESCRIPTION
TRANSCRIPT
![Page 1: Introduction to Responsive Web Design](https://reader030.vdocuments.site/reader030/viewer/2022020105/547e9f875806b5a95e8b46a8/html5/thumbnails/1.jpg)
22-3376 Web Design 2 // Columbia College Chicago
RESPONSIVE / BOOTSTRAP
![Page 2: Introduction to Responsive Web Design](https://reader030.vdocuments.site/reader030/viewer/2022020105/547e9f875806b5a95e8b46a8/html5/thumbnails/2.jpg)
What is Responsive Web Design?
![Page 3: Introduction to Responsive Web Design](https://reader030.vdocuments.site/reader030/viewer/2022020105/547e9f875806b5a95e8b46a8/html5/thumbnails/3.jpg)
Responsive web design (RWD) is a web development approach that creates dynamic changes to the appearance of a website, depending on the screen size and orientation of the device being used to view it
![Page 4: Introduction to Responsive Web Design](https://reader030.vdocuments.site/reader030/viewer/2022020105/547e9f875806b5a95e8b46a8/html5/thumbnails/4.jpg)
![Page 6: Introduction to Responsive Web Design](https://reader030.vdocuments.site/reader030/viewer/2022020105/547e9f875806b5a95e8b46a8/html5/thumbnails/6.jpg)
<head>! <link rel="stylesheet" type="text/css" href="stylesheet.css">! <link rel="stylesheet" type="text/css" href="print.css" media="print">!</head>
The media attribute specifies what media/device the target resource is optimized for. The most common usage is for overriding styles for printing.
Media Types
![Page 7: Introduction to Responsive Web Design](https://reader030.vdocuments.site/reader030/viewer/2022020105/547e9f875806b5a95e8b46a8/html5/thumbnails/7.jpg)
@media print {! p {font-size: 20px;! color: red;! }!}
The @media rule allows different style rules for different media in the same style sheet.
Media Types
![Page 8: Introduction to Responsive Web Design](https://reader030.vdocuments.site/reader030/viewer/2022020105/547e9f875806b5a95e8b46a8/html5/thumbnails/8.jpg)
![Page 9: Introduction to Responsive Web Design](https://reader030.vdocuments.site/reader030/viewer/2022020105/547e9f875806b5a95e8b46a8/html5/thumbnails/9.jpg)
Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone screen vs. computer screen). !
A media query consists of a media type and one or more expressions, involving media features, which resolve to either true or false.
Media Queries
http://www.w3.org/TR/css3-mediaqueries/
![Page 10: Introduction to Responsive Web Design](https://reader030.vdocuments.site/reader030/viewer/2022020105/547e9f875806b5a95e8b46a8/html5/thumbnails/10.jpg)
Media Queries
@media print {! p {font-size: 20px;! color: red;! }!}
![Page 11: Introduction to Responsive Web Design](https://reader030.vdocuments.site/reader030/viewer/2022020105/547e9f875806b5a95e8b46a8/html5/thumbnails/11.jpg)
<meta name=“viewport” content=“width=device-width, initial-scale=1.0>
Many small devices will automatically scale up or down your website to around 960px. This header tag tells the browser to scale the content to the actual window size of the device.
Viewport
![Page 12: Introduction to Responsive Web Design](https://reader030.vdocuments.site/reader030/viewer/2022020105/547e9f875806b5a95e8b46a8/html5/thumbnails/12.jpg)
Breakpoints
![Page 13: Introduction to Responsive Web Design](https://reader030.vdocuments.site/reader030/viewer/2022020105/547e9f875806b5a95e8b46a8/html5/thumbnails/13.jpg)
A simple version from the framework ‘Base’:
@media only screen and (min-width: 740px) and (max-width: 959px) { }
@media only screen and (max-width: 739px) { }
Breakpoints
http://matthewhartman.github.io/base/
![Page 14: Introduction to Responsive Web Design](https://reader030.vdocuments.site/reader030/viewer/2022020105/547e9f875806b5a95e8b46a8/html5/thumbnails/14.jpg)
@media only screen and (min-width: 740px) and (max-width: 959px) { !
When viewed on a screen
AND
Minimum width of screen is at least 740px but not more than 959px
!
Breakpoints
![Page 15: Introduction to Responsive Web Design](https://reader030.vdocuments.site/reader030/viewer/2022020105/547e9f875806b5a95e8b46a8/html5/thumbnails/15.jpg)
Breakpoints
@media only screen and (min-width: 740px) and (max-width: 959px) {}
@media only screen and (max-width: 739px) {}
(default)
![Page 16: Introduction to Responsive Web Design](https://reader030.vdocuments.site/reader030/viewer/2022020105/547e9f875806b5a95e8b46a8/html5/thumbnails/16.jpg)
Tutorial !
1 Responsive Test
![Page 17: Introduction to Responsive Web Design](https://reader030.vdocuments.site/reader030/viewer/2022020105/547e9f875806b5a95e8b46a8/html5/thumbnails/17.jpg)
What is Mobile First?
![Page 18: Introduction to Responsive Web Design](https://reader030.vdocuments.site/reader030/viewer/2022020105/547e9f875806b5a95e8b46a8/html5/thumbnails/18.jpg)
What is Mobile First? !
It Mobile up,not Desktop down.
![Page 19: Introduction to Responsive Web Design](https://reader030.vdocuments.site/reader030/viewer/2022020105/547e9f875806b5a95e8b46a8/html5/thumbnails/19.jpg)
![Page 20: Introduction to Responsive Web Design](https://reader030.vdocuments.site/reader030/viewer/2022020105/547e9f875806b5a95e8b46a8/html5/thumbnails/20.jpg)
![Page 21: Introduction to Responsive Web Design](https://reader030.vdocuments.site/reader030/viewer/2022020105/547e9f875806b5a95e8b46a8/html5/thumbnails/21.jpg)
Mobile-first approach from Bootstrap 3.0:
@media (min-width: 768px) { } @media (min-width: 992px) { } @media (min-width: 1200px) { } !
Breakpoints (Mobile-First)
http://getbootstrap.com/
![Page 22: Introduction to Responsive Web Design](https://reader030.vdocuments.site/reader030/viewer/2022020105/547e9f875806b5a95e8b46a8/html5/thumbnails/22.jpg)
Breakpoints: Mobile First (Bootstrap)
@media (min-width: 768px) @media (min-width: 998px) @media (min-width: 1200px)(default)
![Page 23: Introduction to Responsive Web Design](https://reader030.vdocuments.site/reader030/viewer/2022020105/547e9f875806b5a95e8b46a8/html5/thumbnails/23.jpg)
![Page 24: Introduction to Responsive Web Design](https://reader030.vdocuments.site/reader030/viewer/2022020105/547e9f875806b5a95e8b46a8/html5/thumbnails/24.jpg)
![Page 25: Introduction to Responsive Web Design](https://reader030.vdocuments.site/reader030/viewer/2022020105/547e9f875806b5a95e8b46a8/html5/thumbnails/25.jpg)
![Page 26: Introduction to Responsive Web Design](https://reader030.vdocuments.site/reader030/viewer/2022020105/547e9f875806b5a95e8b46a8/html5/thumbnails/26.jpg)
![Page 27: Introduction to Responsive Web Design](https://reader030.vdocuments.site/reader030/viewer/2022020105/547e9f875806b5a95e8b46a8/html5/thumbnails/27.jpg)
Tutorial !
2 Bootstrap Simple
![Page 28: Introduction to Responsive Web Design](https://reader030.vdocuments.site/reader030/viewer/2022020105/547e9f875806b5a95e8b46a8/html5/thumbnails/28.jpg)
![Page 29: Introduction to Responsive Web Design](https://reader030.vdocuments.site/reader030/viewer/2022020105/547e9f875806b5a95e8b46a8/html5/thumbnails/29.jpg)
![Page 30: Introduction to Responsive Web Design](https://reader030.vdocuments.site/reader030/viewer/2022020105/547e9f875806b5a95e8b46a8/html5/thumbnails/30.jpg)
![Page 31: Introduction to Responsive Web Design](https://reader030.vdocuments.site/reader030/viewer/2022020105/547e9f875806b5a95e8b46a8/html5/thumbnails/31.jpg)
![Page 32: Introduction to Responsive Web Design](https://reader030.vdocuments.site/reader030/viewer/2022020105/547e9f875806b5a95e8b46a8/html5/thumbnails/32.jpg)
Tutorial !
3 Bootstrap Nav