responsive design and mobile first
DESCRIPTION
A summary of A Book Apart's excellent "Mobile First" and "Responsive Web Design" books.TRANSCRIPT
![Page 1: Responsive Design and Mobile First](https://reader035.vdocuments.mx/reader035/viewer/2022070317/5564c91ad8b42a7e178b5858/html5/thumbnails/1.jpg)
![Page 2: Responsive Design and Mobile First](https://reader035.vdocuments.mx/reader035/viewer/2022070317/5564c91ad8b42a7e178b5858/html5/thumbnails/2.jpg)
![Page 3: Responsive Design and Mobile First](https://reader035.vdocuments.mx/reader035/viewer/2022070317/5564c91ad8b42a7e178b5858/html5/thumbnails/3.jpg)
![Page 4: Responsive Design and Mobile First](https://reader035.vdocuments.mx/reader035/viewer/2022070317/5564c91ad8b42a7e178b5858/html5/thumbnails/4.jpg)
![Page 5: Responsive Design and Mobile First](https://reader035.vdocuments.mx/reader035/viewer/2022070317/5564c91ad8b42a7e178b5858/html5/thumbnails/5.jpg)
![Page 6: Responsive Design and Mobile First](https://reader035.vdocuments.mx/reader035/viewer/2022070317/5564c91ad8b42a7e178b5858/html5/thumbnails/6.jpg)
![Page 7: Responsive Design and Mobile First](https://reader035.vdocuments.mx/reader035/viewer/2022070317/5564c91ad8b42a7e178b5858/html5/thumbnails/7.jpg)
![Page 8: Responsive Design and Mobile First](https://reader035.vdocuments.mx/reader035/viewer/2022070317/5564c91ad8b42a7e178b5858/html5/thumbnails/8.jpg)
![Page 9: Responsive Design and Mobile First](https://reader035.vdocuments.mx/reader035/viewer/2022070317/5564c91ad8b42a7e178b5858/html5/thumbnails/9.jpg)
“[U]ltimately, we need to break our habit of translating pixels from Photoshop directly into our CSS, and focus our attention on the proportions behind our designs. It’s about becoming context-aware: better understanding the ratio-based relationships between element and container.”
-- Responsive Web Design, p.41
![Page 10: Responsive Design and Mobile First](https://reader035.vdocuments.mx/reader035/viewer/2022070317/5564c91ad8b42a7e178b5858/html5/thumbnails/10.jpg)
![Page 11: Responsive Design and Mobile First](https://reader035.vdocuments.mx/reader035/viewer/2022070317/5564c91ad8b42a7e178b5858/html5/thumbnails/11.jpg)
![Page 12: Responsive Design and Mobile First](https://reader035.vdocuments.mx/reader035/viewer/2022070317/5564c91ad8b42a7e178b5858/html5/thumbnails/12.jpg)
![Page 13: Responsive Design and Mobile First](https://reader035.vdocuments.mx/reader035/viewer/2022070317/5564c91ad8b42a7e178b5858/html5/thumbnails/13.jpg)
![Page 14: Responsive Design and Mobile First](https://reader035.vdocuments.mx/reader035/viewer/2022070317/5564c91ad8b42a7e178b5858/html5/thumbnails/14.jpg)
![Page 15: Responsive Design and Mobile First](https://reader035.vdocuments.mx/reader035/viewer/2022070317/5564c91ad8b42a7e178b5858/html5/thumbnails/15.jpg)
“A truly responsive design begins with a flexible layout, with media queries layered upon that non-fixed foundation.”
“[S]tarting from a flexible foundation means we have less code to produce.”
-- Responsive Web Design, p.101
![Page 16: Responsive Design and Mobile First](https://reader035.vdocuments.mx/reader035/viewer/2022070317/5564c91ad8b42a7e178b5858/html5/thumbnails/16.jpg)
![Page 17: Responsive Design and Mobile First](https://reader035.vdocuments.mx/reader035/viewer/2022070317/5564c91ad8b42a7e178b5858/html5/thumbnails/17.jpg)
![Page 18: Responsive Design and Mobile First](https://reader035.vdocuments.mx/reader035/viewer/2022070317/5564c91ad8b42a7e178b5858/html5/thumbnails/18.jpg)
![Page 19: Responsive Design and Mobile First](https://reader035.vdocuments.mx/reader035/viewer/2022070317/5564c91ad8b42a7e178b5858/html5/thumbnails/19.jpg)
![Page 20: Responsive Design and Mobile First](https://reader035.vdocuments.mx/reader035/viewer/2022070317/5564c91ad8b42a7e178b5858/html5/thumbnails/20.jpg)
![Page 21: Responsive Design and Mobile First](https://reader035.vdocuments.mx/reader035/viewer/2022070317/5564c91ad8b42a7e178b5858/html5/thumbnails/21.jpg)
![Page 22: Responsive Design and Mobile First](https://reader035.vdocuments.mx/reader035/viewer/2022070317/5564c91ad8b42a7e178b5858/html5/thumbnails/22.jpg)
![Page 23: Responsive Design and Mobile First](https://reader035.vdocuments.mx/reader035/viewer/2022070317/5564c91ad8b42a7e178b5858/html5/thumbnails/23.jpg)
![Page 24: Responsive Design and Mobile First](https://reader035.vdocuments.mx/reader035/viewer/2022070317/5564c91ad8b42a7e178b5858/html5/thumbnails/24.jpg)
![Page 25: Responsive Design and Mobile First](https://reader035.vdocuments.mx/reader035/viewer/2022070317/5564c91ad8b42a7e178b5858/html5/thumbnails/25.jpg)
![Page 26: Responsive Design and Mobile First](https://reader035.vdocuments.mx/reader035/viewer/2022070317/5564c91ad8b42a7e178b5858/html5/thumbnails/26.jpg)
![Page 27: Responsive Design and Mobile First](https://reader035.vdocuments.mx/reader035/viewer/2022070317/5564c91ad8b42a7e178b5858/html5/thumbnails/27.jpg)
![Page 28: Responsive Design and Mobile First](https://reader035.vdocuments.mx/reader035/viewer/2022070317/5564c91ad8b42a7e178b5858/html5/thumbnails/28.jpg)
![Page 29: Responsive Design and Mobile First](https://reader035.vdocuments.mx/reader035/viewer/2022070317/5564c91ad8b42a7e178b5858/html5/thumbnails/29.jpg)
![Page 30: Responsive Design and Mobile First](https://reader035.vdocuments.mx/reader035/viewer/2022070317/5564c91ad8b42a7e178b5858/html5/thumbnails/30.jpg)
![Page 31: Responsive Design and Mobile First](https://reader035.vdocuments.mx/reader035/viewer/2022070317/5564c91ad8b42a7e178b5858/html5/thumbnails/31.jpg)
![Page 32: Responsive Design and Mobile First](https://reader035.vdocuments.mx/reader035/viewer/2022070317/5564c91ad8b42a7e178b5858/html5/thumbnails/32.jpg)
![Page 33: Responsive Design and Mobile First](https://reader035.vdocuments.mx/reader035/viewer/2022070317/5564c91ad8b42a7e178b5858/html5/thumbnails/33.jpg)
![Page 34: Responsive Design and Mobile First](https://reader035.vdocuments.mx/reader035/viewer/2022070317/5564c91ad8b42a7e178b5858/html5/thumbnails/34.jpg)
![Page 35: Responsive Design and Mobile First](https://reader035.vdocuments.mx/reader035/viewer/2022070317/5564c91ad8b42a7e178b5858/html5/thumbnails/35.jpg)