Responsive Web Design
-
Upload
matthew-campbell -
Category
Technology
-
view
980 -
download
1
description
Transcript of Responsive Web Design
![Page 1: Responsive Web Design](https://reader036.fdocuments.us/reader036/viewer/2022070304/54c749ab4a7959272a8b45f7/html5/thumbnails/1.jpg)
DesignResponsive
Matthew Campbell@BeardedCoder
![Page 2: Responsive Web Design](https://reader036.fdocuments.us/reader036/viewer/2022070304/54c749ab4a7959272a8b45f7/html5/thumbnails/2.jpg)
What Is It?
![Page 3: Responsive Web Design](https://reader036.fdocuments.us/reader036/viewer/2022070304/54c749ab4a7959272a8b45f7/html5/thumbnails/3.jpg)
Approaches
![Page 4: Responsive Web Design](https://reader036.fdocuments.us/reader036/viewer/2022070304/54c749ab4a7959272a8b45f7/html5/thumbnails/4.jpg)
Graceful Degradation
![Page 5: Responsive Web Design](https://reader036.fdocuments.us/reader036/viewer/2022070304/54c749ab4a7959272a8b45f7/html5/thumbnails/5.jpg)
Progressive Enhancement
![Page 6: Responsive Web Design](https://reader036.fdocuments.us/reader036/viewer/2022070304/54c749ab4a7959272a8b45f7/html5/thumbnails/6.jpg)
Mobile First
![Page 7: Responsive Web Design](https://reader036.fdocuments.us/reader036/viewer/2022070304/54c749ab4a7959272a8b45f7/html5/thumbnails/7.jpg)
![Page 8: Responsive Web Design](https://reader036.fdocuments.us/reader036/viewer/2022070304/54c749ab4a7959272a8b45f7/html5/thumbnails/8.jpg)
Tip #1
let the device width rule
![Page 9: Responsive Web Design](https://reader036.fdocuments.us/reader036/viewer/2022070304/54c749ab4a7959272a8b45f7/html5/thumbnails/9.jpg)
<head>…<meta
name="viewport" content="width=device-width" /></head>
HTML
![Page 10: Responsive Web Design](https://reader036.fdocuments.us/reader036/viewer/2022070304/54c749ab4a7959272a8b45f7/html5/thumbnails/10.jpg)
Tip #2
use relative fonts (em, %)
![Page 11: Responsive Web Design](https://reader036.fdocuments.us/reader036/viewer/2022070304/54c749ab4a7959272a8b45f7/html5/thumbnails/11.jpg)
Tip #3
use relative widths (%)
![Page 12: Responsive Web Design](https://reader036.fdocuments.us/reader036/viewer/2022070304/54c749ab4a7959272a8b45f7/html5/thumbnails/12.jpg)
Tip #4
favour max- and min-width
![Page 13: Responsive Web Design](https://reader036.fdocuments.us/reader036/viewer/2022070304/54c749ab4a7959272a8b45f7/html5/thumbnails/13.jpg)
Tip #5
make your images flexible
![Page 14: Responsive Web Design](https://reader036.fdocuments.us/reader036/viewer/2022070304/54c749ab4a7959272a8b45f7/html5/thumbnails/14.jpg)
HTML
<imgsrc="panda.png"alt="A panda eating
bamboo" />CSS
img {width: 100%;height: auto;
}
![Page 15: Responsive Web Design](https://reader036.fdocuments.us/reader036/viewer/2022070304/54c749ab4a7959272a8b45f7/html5/thumbnails/15.jpg)
![Page 16: Responsive Web Design](https://reader036.fdocuments.us/reader036/viewer/2022070304/54c749ab4a7959272a8b45f7/html5/thumbnails/16.jpg)
Media Queries
![Page 17: Responsive Web Design](https://reader036.fdocuments.us/reader036/viewer/2022070304/54c749ab4a7959272a8b45f7/html5/thumbnails/17.jpg)
![Page 18: Responsive Web Design](https://reader036.fdocuments.us/reader036/viewer/2022070304/54c749ab4a7959272a8b45f7/html5/thumbnails/18.jpg)
Tip #6
use media queries to adapt your layout to devices
![Page 19: Responsive Web Design](https://reader036.fdocuments.us/reader036/viewer/2022070304/54c749ab4a7959272a8b45f7/html5/thumbnails/19.jpg)
@media screen and ( min-width: 780px ) {
.sidebar {display: block;
}
.main {max-width: 800px;margin-left: 240px;padding-left: 50px;border-left: 1px solid #999;
}}
CSS
![Page 20: Responsive Web Design](https://reader036.fdocuments.us/reader036/viewer/2022070304/54c749ab4a7959272a8b45f7/html5/thumbnails/20.jpg)
@media screen and ( min-width: 780px )and ( max-width: 1080px ) {
}
CSS
![Page 21: Responsive Web Design](https://reader036.fdocuments.us/reader036/viewer/2022070304/54c749ab4a7959272a8b45f7/html5/thumbnails/21.jpg)
@media all and ( max-width: 699px )and ( min-width: 520px ),( min-width: 1151px ) {{
}
CSS
![Page 22: Responsive Web Design](https://reader036.fdocuments.us/reader036/viewer/2022070304/54c749ab4a7959272a8b45f7/html5/thumbnails/22.jpg)
![Page 23: Responsive Web Design](https://reader036.fdocuments.us/reader036/viewer/2022070304/54c749ab4a7959272a8b45f7/html5/thumbnails/23.jpg)
BeardedCoder
@BeardedCoder
http://matthew-campbell.ca
Contact
Me:
Twitter:
Website:
GitHub: