Notes for Responsive Web Design By Scott Granneman & Jans Carton Find the presentation at http://www.granneman.com/presentations/ ## Slide 4 Marcotte, Ethan. “Responsive Web Design”. A List Apart, 25 May 2010, http://alistapart.com/article/responsive-web-design. Web. 15 May 2014. ## Slide 5 Emphasis added Wikipedia contributors. “Responsive web design”. Wikipedia, The Free Encyclopedia, 8 July 2022, https://en.wikipedia.org/wiki/Responsive_web_design. Web. 24 Aug. 2022. ## Slide 6 leonardo255. “Modern Computer, Laptop, Mobile Phone And Digital Tablet Pc”. Can Stock Photo, https://www.canstockphoto.com/modern-computer-laptop-mobile-phone-56268057.html. Web. 11 May 2023. Licensed from Can Stock Photo on 11 May 2023. Credit: © Can Stock Photo / leonardo255 ## Slide 7 “Home | Saint Louis Zoo”. Saint Louis Zoo, 20 Apr 2016, http://www.stlzoo.org. Web. 20 Apr 2016. ## Slide 8 The Saint Louis Zoo, before becoming responsive “Home | Saint Louis Zoo”. Saint Louis Zoo, 2 Feb 2014, https://stlzoo.org. Web. 4 Feb 2014. ## Slide 9 The Saint Louis Zoo, after becoming responsive “Home | Saint Louis Zoo”. Saint Louis Zoo, 2 Feb 2014, https://stlzoo.org. Web. 4 Feb 2014. ## Slide 14 MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Web. 18 Apr 2023. MDN contributors. “Using media queries”. MDN Web Docs, 28 Feb 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries. Web. 18 Apr 2023. ## Slide 17 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Web. 18 Apr 2023. MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Web. 18 Apr 2023. ## Slide 18 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media Web. 18 Apr 2023. MDN contributors. “Using media queries”. MDN Web Docs, 28 Feb 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries. Web. 18 Apr 2023. ## Slide 19 Deveria, Alexis [@Fyrd]. “CSS at-rule: @media”. Can I use…, , https://caniuse.com/mdn-css_at-rules_media. Web. 18 Apr 2023. MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Web. 18 Apr 2023. Deveria, Alexis [@Fyrd]. “CSS3 Media Queries”. Can I use…, , https://caniuse.com/css-mediaqueries. Web. 18 Apr 2023. ## Slide 25 MDN contributors. “Using media queries”. MDN Web Docs, 28 Feb 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries. Web. 18 Apr 2023. ## Slide 30 MDN contributors. “Introducing the CSS Cascade”. MDN Web Docs, 15 Apr 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade. Web. 18 Apr 2023. ## Slide 33 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Web. 18 Apr 2023. MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Web. 18 Apr 2023. ## Slide 34 Browsers do not support speech Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Web. 18 Apr 2023. MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Web. 18 Apr 2023. ## Slide 35 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Web. 18 Apr 2023. MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Web. 18 Apr 2023. ## Slide 36 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Web. 18 Apr 2023. ## Slide 42 Larsen, Rob [roblarsen] & Damian Szczypka [sthiepaan]. “html5-boilerplate/style.css at main”. GitHub, 3 Dec 2021, https://github.com/h5bp/html5-boilerplate/blob/main/dist/css/style.css. Web. 18 Apr 2023. ## Slide 45 Larsen, Rob [roblarsen] & Damian Szczypka [sthiepaan]. “html5-boilerplate/style.css at main”. GitHub, 3 Dec 2021, https://github.com/h5bp/html5-boilerplate/blob/main/dist/css/style.css. Web. 18 Apr 2023. ## Slide 46 Larsen, Rob [roblarsen] & Damian Szczypka [sthiepaan]. “html5-boilerplate/style.css at main”. GitHub, 3 Dec 2021, https://github.com/h5bp/html5-boilerplate/blob/main/dist/css/style.css. Web. 18 Apr 2023. ## Slide 49 Confusing, because min is bigger than & max is smaller than! Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Web. 18 Apr 2023. MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Web. 18 Apr 2023. ## Slide 51 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Web. 18 Apr 2023. ## Slide 52 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Web. 18 Apr 2023. ## Slide 53 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Web. 18 Apr 2023. MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Web. 18 Apr 2023. MDN contributors. “Using media queries”. MDN Web Docs, 28 Feb 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries. Web. 18 Apr 2023. ## Slide 54 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Web. 18 Apr 2023. ## Slide 56 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Web. 18 Apr 2023. ## Slide 57 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#mf-dimensions. Web. 18 Apr 2023. MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Web. 18 Apr 2023. ## Slide 58 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Web. 18 Apr 2023. MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Web. 18 Apr 2023. ## Slide 62 https://en.wikipedia.org/wiki/File:Grid2aib.svg ## Slide 63 https://en.wikipedia.org/wiki/File:Grid2aib.svg, modified to remove the white lines ## Slide 64 Vinh, Khoi. Ordering Disorder: Grid Principles for Interaction Design. Berkeley, CA: New Riders (2010). ## Slide 66 Wikipedia contributors. “Rule of thirds”. Wikipedia, The Free Encyclopedia, 1 Nov. 2023, https://en.wikipedia.org/wiki/Rule_of_thirds. Web. 14 Nov. 2023. ## Slide 67 Wikipedia contributors. “Rule of thirds”. Wikipedia, The Free Encyclopedia, 1 Nov. 2023, https://en.wikipedia.org/wiki/Rule_of_thirds. Web. 14 Nov. 2023. ## Slide 68 Image aligned according to Rule of Thirds User:Moondigger. “File:Rivertree thirds md.gif”. Wikipedia, The Free Encyclopedia, 23 Aug 2006, https://en.wikipedia.org/wiki/File:Rivertree_thirds_md.gif. Web. 14 Nov 2023. ## Slide 69 Image aligned according to Rule of Thirds User:Moondigger. “File:Rivertree thirds md.gif”. Wikipedia, The Free Encyclopedia, 23 Aug 2006, https://en.wikipedia.org/wiki/File:Rivertree_thirds_md.gif. Web. 14 Nov 2023. ## Slide 70 Image cropped without & with the Rule of Thirds Pir6mon & Teeks99. “File:RuleOfThirds-SideBySide.gif”. Wikipedia, The Free Encyclopedia, 4 Dec 2010, https://en.wikipedia.org/wiki/File:RuleOfThirds-SideBySide.gif. Web. 14 Nov 2023. ## Slide 71 Image cropped without & with the Rule of Thirds Pir6mon & Teeks99. “File:RuleOfThirds-SideBySide.gif”. Wikipedia, The Free Encyclopedia, 4 Dec 2010, https://en.wikipedia.org/wiki/File:RuleOfThirds-SideBySide.gif. Web. 14 Nov 2023. ## Slide 75 Wikipedia contributors. “CSS framework”. Wikipedia, The Free Encyclopedia, 17 Jan. 2023, https://en.wikipedia.org/wiki/CSS_framework. Web. 20 Apr. 2023. ## Slide 76 https://en.wikipedia.org/wiki/Software_framework ## Slide 79 https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework) FIXME update ## Slide 80 Wikipedia contributors. “Bootstrap (front-end framework)”. Wikipedia, The Free Encyclopedia, 9 Apr. 2023, https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29. Web. 20 Apr. 2023. “As of May 2015, [Bootstrap 3] was the most-starred project on GitHub, with over 81,000 stars and more than 32,000 forks.” ## Slide 82 Alibaba, Bloomberg, Coursera, Docker, Intel, Mint, Spotify, Twitter, Udemy, Walmart Tripathy, Ashutosh. “What companies use the Bootstrap framework?”. Quora, 2019, https://www.quora.com/What-companies-use-the-Bootstrap-framework/answer/Ashutosh-Tripathy-10. Web. 20 Apr 2023. Apache, BBC, CDC, CNN, Creative Commons, DigiCert, IEEE/IETF, Nginx, Spotify, Wikimedia, World Bank, Zoom “Usage statistics and market share of Bootstrap for websites”. W3Techs, https://w3techs.com/technologies/details/js-bootstrap. Web. 21 Apr 2023. Docker, Envato, JetBrains, Red Hat, Trello, Visual Studio Code “Lead Lists”. Wappalyzer, https://www.wappalyzer.com/lists/?technologies=bootstrap. Web. 20 Apr 2023. Apple, Duolingo, Instacart, LinkedIn, Lyft, MasterCard, Reuters, Snap, Spotify, Udemy, Upwork, Vogue Samuel, Ajayi Abimbola. “Top 10 Big Companies Using Bootstrap”. Career Karma, 5 Aug 2022, https://careerkarma.com/blog/companies-that-use-bootstrap/. Web. 20 Apr 2023. Accenture, Coursera, Duolingo, ROBLOX, MasterCard, Upwork, Docker, SAP, Riot Games, GrubHub, LinkedIn, Lyft, Robinhood, Snap, Spotify, Udemy “Bootstrap - Reviews, Pros & Cons | Companies using Bootstrap”. stackshare, https://stackshare.io/bootstrap. Web. 20 Apr 2023. ## Slide 83 Bootstrap 4 released 18 January 2018 Bootstrap 3 released 19 August 2013 Bootstrap 2 released 31 January 2012 Bootstrap released 19 August 2011 Wikipedia contributors. “Bootstrap (front-end framework)”. Wikipedia, The Free Encyclopedia, 9 Apr. 2023, https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29. Web. 20 Apr. 2023. ## Slide 84 http://getbootstrap.com ## Slide 85 https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework) ## Slide 88 http://en.wikipedia.org ## Slide 89 http://en.wikipedia.org ## Slide 90 http://en.wikipedia.org ## Slide 91 http://en.wikipedia.org ## Slide 92 6 margins: 3 left, 3 right ## Slide 97 6 margins: 3 left & 3 right ## Slide 107 https://www.youtube.com/watch?v=-3gw1XddJuc ## Slide 110 http://codepen.io/websanity/pen/toiHp ## Slide 115 Dark gray columns are the hidden layout grid; light gray boxes are the elements spanning multiple columns (except in the bottom one) ## Slide 118 Based around breakpoints: viewport widths (defined by media query declarations) that change the layout & appearance of the webpage once the viewport is within the range defined by the media query ## Slide 119 Bootstrap 3 is pretty old, but it is also simpler than newer versions of Bootstrap, which is why I used it here FIXME add screenshots for lg, sm, xs ## Slide 120 4 (Bootstrap 3), 5 (Bootstrap 4), & 6 (Bootstrap 5) ## Slide 123 Fontbonne University ## Slide 138 Otto, Mark, Jacob Thornton, and Bootstrap contributors. “Introduction”. Bootstrap v5.1, 5 Oct. 2021, https://getbootstrap.com/docs/5.1/getting-started/introduction/#starter-template. Web. 19 Apr 2022. Licensed CC BY 3.0: https://creativecommons.org/licenses/by/3.0/. ## Slide 140 FIXME This should go first ## Slide 141 http://www.stlzoo.org ## Slide 142 http://www.granneman.com ## Slide 147 FIXME spacing on 3 ## Slide 151 Otto, Mark, Jacob Thornton, and Bootstrap contributors. “Bootstrap · The most popular HTML, CSS, and JS library in the world”. Bootstrap, 18 Apr 2023, https://getbootstrap.com. Web. 20 Apr 2023. ## Slide 152 Otto, Mark, Jacob Thornton, and Bootstrap contributors. “Download · Bootstrap v5.3”. Bootstrap, 18 Apr 2023, https://getbootstrap.com/docs/5.3/getting-started/download/. Web. 20 Apr 2023. ## Slide 172 https://jquery.com ## Slide 174 https://www.akamai.com/us/en/cdn/, accessed 2020-07-28 ## Slide 176 Akamai Newsroom > Media Resources https://www.akamai.com/us/en/about/news/media-resources.jsp ## Slide 181 Bootstrap 3 CDN template: http://chnsa.ws/1b2 ## Slide 192 FIXME give quick example ## Slide 196 Bootstrap 3’s bootstrap.css was ~7000 lines; Bootstrap 4’s was ~9000 ## Slide 197 http://getbootstrap.com/ FIXME: Update all these screenshots for Bootstrap 5!! ## Slide 198 Get Bootstrap showing dropdown for versions 2.3.2, 3.3.7, & 4.x.x as of 2018-10-30 http://getbootstrap.com/ ## Slide 199 http://getbootstrap.com/docs/4.1/getting-started/introduction/ ## Slide 200 http://getbootstrap.com/docs/4.1/examples/ ## Slide 201 https://themes.getbootstrap.com/ ## Slide 202 https://expo.getbootstrap.com/ ## Slide 203 https://blog.getbootstrap.com/ ## Slide 204 http://getbootstrap.com/docs/4.1/getting-started/introduction/ ## Slide 205 http://getbootstrap.com/docs/4.1/layout/overview/ ## Slide 206 http://getbootstrap.com/docs/4.1/content/reboot/ ## Slide 207 http://getbootstrap.com/docs/4.1/components/alerts/ ## Slide 208 http://getbootstrap.com/docs/4.1/utilities/borders/ ## Slide 209 http://getbootstrap.com/docs/4.1/extend/approach/ ## Slide 210 http://getbootstrap.com/docs/4.1/migration/ ## Slide 211 http://getbootstrap.com/docs/4.1/about/overview/ ## Slide 213 http://getbootstrap.com/docs/4.1/content/images/ ## Slide 214 http://getbootstrap.com/docs/4.1/content/images/#image-thumbnails ## Slide 215 http://getbootstrap.com/docs/4.1/content/images/#image-thumbnails ## Slide 216 http://getbootstrap.com/docs/4.1/utilities/borders/ ## Slide 217 http://getbootstrap.com/docs/4.1/utilities/borders/#border-radius ## Slide 218 Get Bootstrap showing dropdown for versions 2, 3, & 4 as of 2017-11-28 ## Slide 220 http://getbootstrap.com/css ## Slide 221 http://getbootstrap.com/css/#images ## Slide 222 http://getbootstrap.com/css/#images-shapes ## Slide 223 http://getbootstrap.com/components/ ## Slide 224 http://getbootstrap.com/javascript ## Slide 225 http://getbootstrap.com/customize/ ## Slide 228 http://getbootstrap.com/css/#images-shapes ## Slide 234 https://getbootstrap.com/docs/4.5/utilities/borders/#border-radius Note: .rounded-lg & .rounded-sm have been changed in Bootstrap 5 & don’t work right anyway, so don’t use them ## Slide 235 FIXME ## Slide 244 http://getbootstrap.com/components/#breadcrumbs ## Slide 252 https://getbootstrap.com/docs/4.5/components/breadcrumb/ ## Slide 256 http://www.fileformat.info/info/unicode/char/search.htm Or go to http://www.fileformat.info & click on Characters on the left next to Unicode ## Slide 257 http://www.fileformat.info/info/unicode/char/search.htm ## Slide 258 http://www.fileformat.info/info/unicode/char/27a4/index.htm ## Slide 259 http://www.fileformat.info/info/unicode/char/27a4/browsertest.htm ## Slide 260 http://www.fileformat.info/info/unicode/char/27a4/browsertest.htm ## Slide 274 https://getbootstrap.com/docs/3.4/css/#grid ## Slide 275 https://getbootstrap.com/docs/3.4/css/#grid https://getbootstrap.com/docs/4.6/layout/overview/ ## Slide 276 https://getbootstrap.com/docs/4.6/layout/overview/ https://getbootstrap.com/docs/5.1/layout/breakpoints/ ## Slide 277 http://codepen.io/websanity/pen/toiHp FIXME change to Bootstrap 4 screenshots ## Slide 278 http://codepen.io/websanity/pen/toiHp ## Slide 279 http://codepen.io/websanity/pen/toiHp ## Slide 280 http://codepen.io/websanity/pen/toiHp ## Slide 281 http://codepen.io/websanity/pen/toiHp ## Slide 282 Anderson, Shaun. “What are the best screen sizes for responsive web design?”. Hobo SEO Consultancy, 27 Mar 2023, https://www.hobo-web.co.uk/best-screen-size/#:~:text=Design%20for%20desktop%20displays%20from,962%20through%201280%C3%97800. Web. 17 May 2023. ## Slide 283 Anderson, Shaun. “What are the best screen sizes for responsive web design?”. Hobo SEO Consultancy, 27 Mar 2023, https://www.hobo-web.co.uk/best-screen-size/#:~:text=Design%20for%20desktop%20displays%20from,962%20through%201280%C3%97800. Web. 17 May 2023. ## Slide 298 http://codepen.io/websanity/pen/pJNvyQ?editors=100 ## Slide 299 http://codepen.io/websanity/pen/pJNvyQ?editors=100 ## Slide 300 http://codepen.io/websanity/pen/pJNvyQ?editors=100 ## Slide 306 http://codepen.io/websanity/pen/aOBzKN?editors=100 ## Slide 308 http://codepen.io/websanity/pen/aOBzKN?editors=100 ## Slide 311 “Grid system”. Bootstrap, 19 May 2023, https://getbootstrap.com/docs/5.3/layout/grid/. Web. 19 May 2023. ## Slide 313 https://getbootstrap.com/docs/4.5/layout/grid/ ## Slide 314 https://getbootstrap.com/docs/4.5/layout/grid/ ## Slide 315 https://getbootstrap.com/docs/4.5/layout/grid/ ## Slide 322 http://codepen.io/websanity/pen/OVbVmG?editors=100 ## Slide 323 http://codepen.io/websanity/pen/OVbVmG?editors=100 ## Slide 324 http://codepen.io/websanity/pen/OVbVmG?editors=100 ## Slide 325 http://codepen.io/websanity/pen/gpLpxE?editors=100 ## Slide 326 http://codepen.io/websanity/pen/gpLpxE?editors=100 ## Slide 331 http://startbootstrap.com ## Slide 333 http://startbootstrap.com/template-overviews/agency/ ## Slide 335 https://wrapbootstrap.com ## Slide 338 http://themes.getbootstrap.com ## Slide 339 http://themes.getbootstrap.com/collections/all ## Slide 340 http://themes.getbootstrap.com/collections/all ## Slide 341 http://themes.getbootstrap.com/collections/all ## Slide 342 http://bootstrap-themes.github.io/marketing/ ## Slide 343 http://bootstrap-themes.github.io/marketing/ ## Slide 344 http://bootstrap-themes.github.io/marketing/ ## Slide 345 http://bootstrap-themes.github.io/marketing/ ## Slide 346 http://bootstrap-themes.github.io/marketing/ ## Slide 347 http://bootstrap-themes.github.io/marketing/ ## Slide 348 http://bootstrap-themes.github.io/marketing/ ## Slide 349 http://bootstrap-themes.github.io/marketing/ ## Slide 350 http://themes.getbootstrap.com/collections/all ## Slide 353 http://lab.maltewassermann.com/viewport-resizer/ ## Slide 354 http://lab.maltewassermann.com/viewport-resizer/ ## Slide 355 http://lab.maltewassermann.com/viewport-resizer/ ## Slide 356 http://www.stlzoo.org ## Slide 357 http://www.stlzoo.org ## Slide 358 http://www.stlzoo.org ## Slide 359 http://www.stlzoo.org ## Slide 360 http://www.stlzoo.org ## Slide 363 http://chnsa.ws/wj ## Slide 370 https://www.browserstack.com/accounts/subscriptions ## Slide 371 https://www.browserstack.com/responsive ## Slide 372 https://www.browserstack.com/responsive ## Slide 373 https://www.browserstack.com/screenshots ## Slide 374 https://www.browserstack.com/start ## Slide 375 https://www.browserstack.com/start ## Slide 376 https://www.browserstack.com/start ## Slide 377 https://www.browserstack.com/start ## Slide 378 https://www.browserstack.com/start ## Slide 385 Larsen, Rob [roblarsen] & Damian Szczypka [sthiepaan]. “html5-boilerplate/style.css at main”. GitHub, 3 Dec 2021, https://github.com/h5bp/html5-boilerplate/blob/main/dist/css/style.css. Web. 18 Apr 2023. ## Slide 386 Larsen, Rob [roblarsen] & Damian Szczypka [sthiepaan]. “html5-boilerplate/style.css at main”. GitHub, 3 Dec 2021, https://github.com/h5bp/html5-boilerplate/blob/main/dist/css/style.css. Web. 18 Apr 2023. ## Slide 390 Atkins, Tab et al. “CSS Values and Units Module Level 4 [Editor’s Draft]”. W3C, 6 April 2023, https://w3c.github.io/csswg-drafts/css-values-4/#ratios. Web. 18 Apr 2023. MDN contributors. “”. MDN Web Docs, 21 Feb 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/ratio. Web. 18 Apr 2023. ## Slide 392 Deveria, Alexis [@Fyrd]. “types: ”. Can I use…, 17 April 2023, https://caniuse.com/mdn-css_types_ratio. Web. 18 Apr 2023. ## Slide 393 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Web. 18 Apr 2023. MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Web. 18 Apr 2023. MDN contributors. “Using media queries”. MDN Web Docs, 28 Feb 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries. Web. 18 Apr 2023. ## Slide 394 MDN contributors. “”. MDN Web Docs, 21 Feb 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/resolution. Web. 18 Apr 2023. ## Slide 395 MDN contributors. “”. MDN Web Docs, 21 Feb 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/resolution. Web. 18 Apr 2023. Deveria, Alexis [@Fyrd]. “types: ”. Can I use…, 17 Apr 2023, https://caniuse.com/mdn-css_types_resolution. Web. 18 Apr 2023. Deveria, Alexis [@Fyrd]. “types: : dppx unit”. Can I use…, 17 Apr 2023, https://caniuse.com/mdn-css_types_resolution_dppx. Web. 18 Apr 2023. Deveria, Alexis [@Fyrd]. “types: : dpi unit”. Can I use…, 17 Apr 2023, https://caniuse.com/mdn-css_types_resolution_dpi. Web. 18 Apr 2023. Deveria, Alexis [@Fyrd]. “types: : dpcm unit”. Can I use…, 17 Apr 2023, https://caniuse.com/mdn-css_types_resolution_dpcm. Web. 18 Apr 2023. Safari: “Bug 78087 - Enable the 'resolution' media query by default”. WebKit Bugzilla, 26 May 2022, https://bugs.webkit.org/show_bug.cgi?id=78087 As of 18 Apr 2023 ## Slide 396 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Web. 18 Apr 2023. MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Web. 18 Apr 2023. MDN contributors. “Using media queries”. MDN Web Docs, 28 Feb 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries. Web. 18 Apr 2023. ## Slide 397 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Web. 18 Apr 2023. MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Web. 18 Apr 2023. MDN contributors. “Using media queries”. MDN Web Docs, 28 Feb 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries. Web. 18 Apr 2023. ## Slide 398 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Web. 18 Apr 2023. MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Web. 18 Apr 2023. MDN contributors. “Using media queries”. MDN Web Docs, 28 Feb 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries. Web. 18 Apr 2023. ## Slide 399 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#changes-2012. Web. 18 Apr 2023. MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Web. 18 Apr 2023. MDN contributors. “Using media queries”. MDN Web Docs, 28 Feb 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries. Web. 18 Apr 2023.