Notes for Information Architecture By Scott Granneman & Jans Carton Find the presentation at http://www.granneman.com/presentations/ ## Slide 2 Slides: https://granneman.com/downloads/web-dev/Design-Process.pdf Notes: https://granneman.com/downloads/web-dev/Design-Process.txt ## Slide 3 https://www.granneman.com/presentations/all-presentations ## Slide 4 FIXME add QR Codes ## Slide 5 Morrison, John. “Jeffrey Zeldman”. Flickr, 4 Oct. 2012, https://www.flickr.com/photos/localcelebrity/8266758945/. Web. 27 Oct. 2013. Licensed CC BY-NC-ND 2.0: https://creativecommons.org/licenses/by-nc-nd/2.0/. Black & white version provided by Jeffrey Zeldman. http://www.zeldman.com/wp-content/JZbyJohnMorrisonBW.jpg. ## Slide 6 Rosenfeld, Louis et al. Information Architecture: For the Web and Beyond, 4th Edition. Sebastopol, CA: O'Reilly Media (2015). Lynch, Patrick J. & Sarah Horton. Web Style Guide, 4th Edition: Foundations of User Experience Design. New Haven, CT: Yale University Press (2016). ## Slide 7 Wodtke, Christina & Austin Govella. Information Architecture: Blueprints for the Web, Second Edition. Berkeley, CA: New Riders (2009). Spencer, Donna. A Practical Guide to Information Architecture. Penarth: Five Simple Steps (2010). ## Slide 8 Rosenfeld, Louis et al. Chapter 5, “The Anatomy of an Information Architecture”. Information Architecture: For the Web and Beyond. Boston: O'Reilly Media, Inc. (2015). x. ## Slide 9 Rosenfeld, Louis et al. Chapter 5, “The Anatomy of an Information Architecture”. Information Architecture: For the Web and Beyond. Boston: O'Reilly Media, Inc. (2015). 82–83. ## Slide 12 Rosenfeld, Louis et al. Chapter 5, “The Anatomy of an Information Architecture”. Information Architecture: For the Web and Beyond. Boston: O'Reilly Media, Inc. (2015). x. ## Slide 13 Rosenfeld, Louis et al. Chapter 5, “The Anatomy of an Information Architecture”. Information Architecture: For the Web and Beyond. Boston: O'Reilly Media, Inc. (2015). x. ## Slide 14 Rosenfeld, Louis et al. Chapter 5, “The Anatomy of an Information Architecture”. Information Architecture: For the Web and Beyond. Boston: O'Reilly Media, Inc. (2015). x. ## Slide 17 “St. John’s Episcopal Church - Tower Grove - St. John's Episcopal Church in Tower Grove, St. Louis”. St. John’s Tower Grove, 2014, http://www.towergrovechurch.org . Web. 10 Aug. 2014. ## Slide 22 “Site Map :: ACLU of Pennsylvania”. American Civil Liberties Union of Pennsylvania, 2015, http://www.aclupa.org/site-map. Web. 10 June 2015. ## Slide 23 “Site Map :: St. John’s Episcopal Church”. St. John’s Tower Grove, 2015, http://www.towergrovechurch.org/site-map/. Web. 10 June 2015. ## Slide 27 “The Issues :: ACLU of New Jersey”. ACLU of New Jersey, 2014, https://www.aclu-nj.org/theissues/. Web. 10 Aug. 2014. ## Slide 28 Granneman, Scott. “Teaching | Scott Granneman”. Scott Granneman, http://www.granneman.com/teaching/. Web. ## Slide 29 https://en.wikipedia.org/wiki/Landing_page ## Slide 30 https://en.wikipedia.org/wiki/Home_page ## Slide 33 Gordiyenko, Svetlana. “Website Development Process: Full Guide in 7 Steps”. XB Software, 14 Dec 2015, https://xbsoftware.com/blog/website-development-process-full-guide/. Web. 27 Jan 2022. Fair use. ## Slide 34 Regina777. “File:Sitemap google.jpg”. Wikimedia Commons, 29 Oct 2006, https://en.wikipedia.org/wiki/File:Sitemap_google.jpg. Web. 27 Jan 2022. ## Slide 36 silver, david. “a part of the outline for my research narrative”. Flickr, 28 June 2008, https://www.flickr.com/photos/davidsilver/2618900427. Web. 13 Feb 2024. Licensed CC BY-NC-SA 2.0: https://creativecommons.org/licenses/by-nc-sa/2.0/. Modified by converting to the WebP format. ## Slide 37 WOCinTech Chat. “wocintech stock - 117 | Women of Color in Tech stock images t… | WOCinTech Chat | Flickr”. Flickr, 24 Mar 2016, https://www.flickr.com/photos/wocintechchat/25720964030/. Web. 18 Mar 2016. Credit: #WOCinTech Chat, wocintechchat.com Licensed CC BY 2.0: https://creativecommons.org/licenses/by/2.0/. Modified by converting from JPEG to WebP. ## Slide 38 WOCinTech Chat. “wocintech stock - 43 | Women of Color in Tech stock images t… | WOCinTech Chat | Flickr”. Flickr, 13 Mar 2016, https://www.flickr.com/photos/wocintechchat/25167658624/. Web. 23 Aug 2022. Credit: #WOCinTech Chat, wocintechchat.com Licensed CC BY 2.0: https://creativecommons.org/licenses/by/2.0/. Modified by converting from JPEG to WebP. ## Slide 39 Workflowy student discount: https://workflowy.zendesk.com/hc/en-us/articles/4415135177108-Discounts-for-education-non-profits ## Slide 45 “Subscription or One-Off Payment”. The Omni Group, https://www.omnigroup.com/omnioutliner/buy/. Web. 13 Feb 2024. ## Slide 46 “Subscription or One-Off Payment”. The Omni Group, https://www.omnigroup.com/omnioutliner/buy/. Web. 13 Feb 2024. ## Slide 47 “Welcome students and educators”. The Omni Group, https://legacy.store.omnigroup.com/edu/46c6011f656541130a00020f. Web. 13 Feb 2024. ## Slide 49 “Introduction to Checkvist”. Checkvist, https://checkvist.com/checklists/856228-introduction-to-checkvist. Web. 30 Oct 2022. ## Slide 50 “Introduction to Checkvist”. Checkvist, https://checkvist.com/checklists/856228-introduction-to-checkvist. Web. 30 Oct 2022. ## Slide 51 “Introduction to Checkvist”. Checkvist, https://checkvist.com/checklists/856228-introduction-to-checkvist. Web. 30 Oct 2022. ## Slide 52 “Introduction to Checkvist”. Checkvist, https://checkvist.com/checklists/856228-introduction-to-checkvist. Web. 30 Oct 2022. ## Slide 54 “Workflowy for Students”. Workflowy, https://workflowy.com/students/. Web. 31 Oct 2022. ## Slide 55 “Workflowy for Students”. Workflowy, https://workflowy.com/students/. Web. 31 Oct 2022. ## Slide 56 “Workflowy for Students”. Workflowy, https://workflowy.com/students/. Web. 31 Oct 2022. ## Slide 57 “Workflowy for Students”. Workflowy, https://workflowy.com/students/. Web. 31 Oct 2022. ## Slide 58 “Workflowy templates”. Workflowy, https://workflowy.com/templates/. Web. 31 Oct 2022. ## Slide 59 “2022 Goals + Review - Workflowy”. Workflowy, https://workflowy.com/s/2022-goals-review/uH4qzRJpdsXsf3y6. Web. 31 Oct 2022. ## Slide 60 “Creative brief - Workflowy”. Workflowy, https://workflowy.com/s/creative-brief/hdlJclZW6fCnl0D4. Web. 31 Oct 2022. ## Slide 61 “Video production brief - Workflowy”. Workflowy, https://workflowy.com/s/video-production-bri/7LquFcZQyhtVyP57. Web. 31 Oct 2022. ## Slide 62 “Customer journey map - Workflowy”. Workflowy, https://workflowy.com/s/customer-journey-map/Q2ced6jZPM58yuY0. Web. 31 Oct 2022. ## Slide 63 “Tactical design critique - Workflowy”. Workflowy, https://workflowy.com/s/tactical-design-crit/ezq19OTC8sgaXWuw. Web. 31 Oct 2022. ## Slide 64 “User persona - Workflowy”. Workflowy, https://workflowy.com/s/creative-brief/hdlJclZW6fCnl0D4. Web. 31 Oct 2022. ## Slide 66 Mac App Store. 31 Oct 2022. ## Slide 67 Schnaidt, Robin. “OutlineEdit 3”. OutlineEdit 3, 2022, https://outlineedit.com. Web. 31 Oct 2022. ## Slide 68 Mac App Store. 31 Oct 2022. ## Slide 69 Schnaidt, Robin. “OutlineEdit 3”. OutlineEdit 3, 2022, https://outlineedit.com. Web. 31 Oct 2022. ## Slide 80 Workflowy student discount: https://workflowy.zendesk.com/hc/en-us/articles/4415135177108-Discounts-for-education-non-profits ## Slide 81 Fulkerson, Aaron. “File:Edware Tufte giving a class.jpg”. Wikipedia, 7 Feb. 2011, https://en.wikipedia.org/wiki/File:Edware_Tufte_giving_a_class.jpg. Web. 9 Mar 2022. Licensed CC BY-SA 2.0: https://creativecommons.org/licenses/by-sa/2.0/. ## Slide 82 Wikipedia contributors. “Edward Tufte”. Wikipedia, The Free Encyclopedia, 2 Jan. 2024, https://en.wikipedia.org/wiki/Edward_Tufte. Web. 13 Feb. 2024. ## Slide 84 The Visual Display of Quantitative Information: https://www.edwardtufte.com/tufte/books_vdqi Envisioning Information: https://www.edwardtufte.com/tufte/books_ei ## Slide 85 Visual Explanations: Images and Quantities, Evidence and Narrative: https://www.edwardtufte.com/tufte/books_visex Beautiful Evidence: https://www.edwardtufte.com/tufte/books_be ## Slide 87 “best statistical graphic”: Tufte, Edward R. The Visual Display of Quantitative Information, Second Edition. Cheshire, CT: Graphics Press (2007). 40. ## Slide 88 Wikipedia contributors. “Charles Joseph Minard”. Wikipedia, The Free Encyclopedia, 17 Jan. 2024, https://en.wikipedia.org/wiki/Charles_Joseph_Minard. Web. 13 Feb. 2024. For more, see: Numberphile. “The Greatest Ever Infographic”. YouTube, 3 Apr. 2014, https://www.youtube.com/watch?v=3T7jMcstxY0. Web. 13 Feb. 2024. ## Slide 89 Wikipedia contributors. “Charles Joseph Minard”. Wikipedia, The Free Encyclopedia, 17 Jan. 2024, https://en.wikipedia.org/wiki/Charles_Joseph_Minard. Web. 13 Feb. 2024. ## Slide 90 Vazquez, Inigo Lopez. “File:Redrawing of Minard's Napoleon map.svg”. Wikipedia, The Free Encyclopedia, 3 May 2015, https://en.wikipedia.org/wiki/File:Redrawing_of_Minard%27s_Napoleon_map.svg. Web. 13 Feb 2024. Licensed CC BY-SA 4.0: https://creativecommons.org/licenses/by-sa/4.0/. Modified by converting to the WebP format. ## Slide 91 Vazquez, Inigo Lopez. “File:Redrawing of Minard's Napoleon map.svg”. Wikipedia, The Free Encyclopedia, 3 May 2015, https://en.wikipedia.org/wiki/File:Redrawing_of_Minard%27s_Napoleon_map.svg. Web. 13 Feb 2024. Licensed CC BY-SA 4.0: https://creativecommons.org/licenses/by-sa/4.0/. Modified by converting to the WebP format. ## Slide 93 Kraak , Menno-Jan. “Mapping Time: Illustrated by Minard's Map of Napoleon's Russian Campaign of 1812”. Amazon, 29 May 2014, https://www.amazon.com/gp/product/158948312X?ie=UTF8. Web. 13 Feb 2024. ## Slide 94 Numberphile. “The Greatest Ever Infographic”. YouTube, 3 Apr. 2014, https://www.youtube.com/watch?v=3T7jMcstxY0. Web. 13 Feb. 2024. ## Slide 95 Illustration: Trumbull, Todd. “The Sad Tally”. The San Francisco Chronicle, 30 Oct. 2005, http://www.sfgate.com/cgi-bin/object/article?f=/c/a/2005/10/30/MNG2NFF7KI1.DTL&object=%2Fc%2Fpictures%2F2005%2F10%2F30%2Fmn_suicide30_loc_tt.gif. Web. 22 July 2019. Description: “Suicides by location. This data is based on The Chronicle’s review of Golden Gate Bridge, Highway and Transportation District records. Chronicle Graphic by Todd Trumbull.” Guthmann, Edward. “Lethal Beauty: The Allure: Beauty and an easy route to death have long made the Golden Gate Bridge a magnet for suicides.” The San Francisco Chronicle, 30 Oct. 2005, https://web.archive.org/web/20110127162733/http://www.sfgate.com/cgi-bin/article.cgi?f=/c/a/2005/10/30/MNG2NFF7KI1.DTL#ixzz5uRaKBliC. Web. 22 July 2019. ## Slide 96 Sims, Casey. “The story of a race in one image”. Instagram, 22 Aug 2023, https://www.instagram.com/p/CwQT_iTMomZ/. Web. 6 Dec 2023. Fair use. For more information, see: Kottke, Jason. “How the Race Was Won”. Kottke.org, 1 Sep 2023, https://kottke.org/23/09/how-the-race-was-won. Web. 6 Dec 2023. ## Slide 99 https://github.com/edwardtufte/tufte-css ## Slide 100 https://github.com/edwardtufte/tufte-css ## Slide 101 https://edwardtufte.github.io/tufte-css/ ## Slide 102 https://edwardtufte.github.io/tufte-css/ ## Slide 103 https://edwardtufte.github.io/tufte-css/ ## Slide 104 https://edwardtufte.github.io/tufte-css/ ## Slide 105 https://edwardtufte.github.io/tufte-css/ ## Slide 106 https://edwardtufte.github.io/tufte-css/ ## Slide 107 https://edwardtufte.github.io/tufte-css/ ## Slide 108 https://edwardtufte.github.io/tufte-css/ ## Slide 109 https://edwardtufte.github.io/tufte-css/ ## Slide 114 https://github.com/jez/tufte-pandoc-css ## Slide 115 https://jez.io/tufte-pandoc-css/ ## Slide 116 https://jez.io/tufte-pandoc-css/ ## Slide 117 https://jez.io/tufte-pandoc-css/ ## Slide 118 https://jez.io/tufte-pandoc-css/ ## Slide 120 Paragraph 1 from Edward Tufte’s Beautiful Evidence (2006), pg. 47. Paragraph 2 from Edward Tufte’s “Sparkline theory and practice”, https://web.archive.org/web/20190716205342/https://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001OR&topic_id=1 ## Slide 121 Galileo Galilei, Istoria e dimostrazioni intorno alle macchie solari (Rome, 1613). https://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=000AIr ## Slide 122 https://web.archive.org/web/20170701000000*/www.granneman.com ## Slide 123 Burge, Blake [@blakeaburge]. “Sparklines:¶¶One of my personal favorites.¶¶Sparklines allow you to insert miniature graphs inside an individual cell to easily visualize data.¶¶•Select range¶•Insert ⇢ Sparkline¶• Choose type”. Twitter, 11 June 2022, https://twitter.com/blakeaburge/status/1535594638203035649. Web. 7 May 2023. ## Slide 125 Souppouris, Aaron. “Master Statistician Weaves Google Images Into Visual Quilts”. The Verge (November 14, 2013). https://www.theverge.com/2013/11/14/5103104/make-your-own-collages-straight-from-google-search. ## Slide 126 https://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=00041U ## Slide 127 https://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=00041U ## Slide 128 https://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=00041U ## Slide 129 https://chrome.google.com/webstore/detail/imagequilts/ceebcpbapdnfnkhfogkbhbgknhgnaoee ## Slide 130 https://edwardtufte.github.io/tufte-css/ ## Slide 132 https://www.edwardtufte.com/tufte/courses ## Slide 133 https://www.edwardtufte.com/tufte/courses-students ## Slide 139 “In the Courts”. American Civil Liberties Union of Pennsylvania, 5 Aug 2014, https://web.archive.org/web/20140805183424/http://www.aclupa.org/our-work/legal/. Web. 10 Aug 2014. ## Slide 140 “Zoo Friends”. Saint Louis Zoo, 7 June 2015, https://web.archive.org/web/20150607153033/http://www.stlzoo.org/membership/. Web. 15 June 2015. ## Slide 141 “Home :: ACLU of Pennsylvania”. American Civil Liberties Union of Pennsylvania, 5 Aug 2014, https://web.archive.org/web/20140805182530/http://www.aclupa.org/. Web. 09 Mar 2023. ## Slide 142 “Home”. Saint Louis Zoo, 4 Aug 2015, https://web.archive.org/web/20150604191802/http://www.stlzoo.org/. Web. 09 Mar 2023. ## Slide 145 “In the Courts”. American Civil Liberties Union of Pennsylvania, 5 Aug 2014, https://web.archive.org/web/20140805183424/http://www.aclupa.org/our-work/legal/. Web. 10 Aug 2014. ## Slide 146 “Home :: ACLU of Pennsylvania”. American Civil Liberties Union of Pennsylvania, 5 Aug 2014, https://web.archive.org/web/20140805182530/http://www.aclupa.org/. Web. 09 Mar 2023. ## Slide 148 Saint Louis Zoo, 10 Aug 2014, https://stlzoo.org. ## Slide 149 “Contemporary Art Museum St. Louis”. Contemporary Art Museum St. Louis, 9 Mar 2023, https://camstl.org. Web. 09 Mar 2023. ## Slide 152 “In the Courts”. American Civil Liberties Union of Pennsylvania, 5 Aug 2014, https://web.archive.org/web/20140805183424/http://www.aclupa.org/our-work/legal/. Web. 10 Aug 2014. ## Slide 153 “Home :: ACLU of Pennsylvania”. American Civil Liberties Union of Pennsylvania, 5 Aug 2014, https://web.archive.org/web/20140805182530/http://www.aclupa.org/. Web. 09 Mar 2023. ## Slide 155 http://www.stlzoo.org ## Slide 156 “Home :: St. John’s Episcopal Church”. St. John’s Tower Grove, 2014, http://www.towergrovechurch.org . Web. 15 June 2015. ## Slide 162 http://novemberlearning.com, c. 1995 ## Slide 163 https://web.archive.org/web/19980204065801/http://www.bys-kids.org/ ## Slide 164 https://web.archive.org/web/19980204065801/http://www.bys-kids.org/ ## Slide 165 https://web.archive.org/web/19980204065801/http://www.bys-kids.org/ ## Slide 166 http://isesstl.com, c. 1998? ## Slide 167 “Dog Armor”. Pitbull Armory, 23 Mar 2008, https://web.archive.org/web/20080323070746/http://www.pitbullarmory.com/dog-armor.html. Web. 12 Mar 2023. ## Slide 168 “Womens Armor”. Pitbull Armory, 7 Mar 2009, https://web.archive.org/web/20090307203312/http://www.pitbullarmory.com/womens.html. Web. 12 Mar 2023. ## Slide 172 “Adobe Systems Incorporated”. Internet Archive, 24 Jan. 2002, https://web.archive.org/web/20020124180805/http://www.adobe.com:80/. Web. 08 Mar. 2024. ## Slide 176 http://www.petfriendsstl.com ## Slide 177 http://www.prsastlouis.org, c. 2000 ## Slide 178 http://aclu-co.org/about-us/mission-history/, 2015-06-15 ## Slide 179 https://web.archive.org/web/20031018163228/http://www.bys-kids.org:80/services/artthera/index ## Slide 180 https://web.archive.org/web/20031018163228/http://www.bys-kids.org:80/services/artthera/index ## Slide 181 https://web.archive.org/web/20031018163228/http://www.bys-kids.org:80/services/artthera/index ## Slide 185 Coined in 1998 by Vincent Flanders, author & creator of Web Pages That Suck ## Slide 186 https://en.wikipedia.org/wiki/Mystery_meat_navigation ## Slide 188 Blue Bell Ice Cream, http://www.bluebell.com, 2015-06-15 ## Slide 189 Blue Bell Ice Cream, http://www.bluebell.com, 2015-06-15 ## Slide 190 Blue Bell Ice Cream, http://www.bluebell.com, 2015-06-15 ## Slide 191 Blue Bell Ice Cream, http://www.bluebell.com, 2015-06-15 ## Slide 192 British Film Institute, http://www.bfi.org.uk ## Slide 196 http://www.stlzoo.org ## Slide 197 “Home :: St. John’s Episcopal Church”. St. John’s Tower Grove, 2015, http://www.towergrovechurch.org . Web. 15 June 2015. ## Slide 198 No drop-downs for 2nd tier “The Issues :: ACLU of New Jersey”. ACLU of New Jersey, 2014, https://www.aclu-nj.org/theissues/. Web. 10 Aug. 2014. ## Slide 205 https://alumni.wustl.edu/Pages/default.aspx ## Slide 206 https://alumni.wustl.edu/Pages/default.aspx ## Slide 207 https://alumni.wustl.edu/Pages/default.aspx ## Slide 208 http://www.bonlook.com ## Slide 209 http://www.bonlook.com ## Slide 210 http://www.bonlook.com ## Slide 211 http://www.bonlook.com ## Slide 212 http://www.amazon.com ## Slide 213 http://www.amazon.com ## Slide 214 http://www.porsche.com/usa/, October 27, 2013 ## Slide 215 http://www.porsche.com/usa/, October 27, 2013 ## Slide 216 http://www.porsche.com/usa/, October 27, 2013 ## Slide 217 British Film Institute, http://www.bfi.org.uk, 2015-06-15 ## Slide 218 https://objectcomputing.com/ ## Slide 223 http://www.capitalistpigbbq.com, 2014-08-10 ## Slide 224 http://www.apple.com ## Slide 225 https://www.google.com ## Slide 226 “Google”. Google, https://www.google.com/?client=safari. Web. 13 Mar 2024. ## Slide 227 http://www.stlzoo.org ## Slide 228 https://www.aclu-nj.org/legaldocket/ ## Slide 229 https://www.clicktale.com/resources/blog/the-3-golden-rules-of-sticky-navigation/ https://usabilitygeek.com/how-to-fix-your-fixed-navigation/ ## Slide 230 “Ocean School: Dive into learning”. Ocean School, https://oceanschool.nfb.ca. Web. 21 Feb 2024. ## Slide 231 https://www.smashingmagazine.com/2012/09/sticky-menus-are-quicker-to-navigate/ https://usabilitygeek.com/how-to-fix-your-fixed-navigation/ ## Slide 232 https://www.smashingmagazine.com/2012/09/sticky-menus-are-quicker-to-navigate/ https://usabilitygeek.com/how-to-fix-your-fixed-navigation/ ## Slide 233 https://www.clicktale.com/resources/blog/the-3-golden-rules-of-sticky-navigation/ ## Slide 235 Can confuse user as to page she is currently on “The Issues :: ACLU of New Jersey”. ACLU of New Jersey, 2014, https://www.aclu-nj.org/theissues/. Web. 10 Aug. 2014. ## Slide 236 ANIMALS down side can be confusing http://www.stlzoo.org/animals/animalfoodnutritioncenter/ ## Slide 239 “In the Courts”. American Civil Liberties Union of Pennsylvania, 5 Aug 2014, https://web.archive.org/web/20140805183424/http://www.aclupa.org/our-work/legal/. Web. 10 Aug 2014. ## Slide 240 “Home :: ACLU of Pennsylvania”. American Civil Liberties Union of Pennsylvania, 5 Aug 2014, https://web.archive.org/web/20140805182530/http://www.aclupa.org/. Web. 09 Mar 2023. ## Slide 243 Hey, Paul. Hänsel und Gretel. 1939. Deutsche Märchen, by Cigaretten-Bilderdienst, GmbH, 1939, p. 15. Internet Archive, https://archive.org/details/deutschemarchen01ciga/page/14/mode/2up. Public domain. ## Slide 244 LJChicBoutique. “World's Best Dad | Office Mug | 11 oz or 15 oz”. Etsy, https://www.etsy.com/listing/1016023134/worlds-best-dad-office-mug-11-oz-or-15. Web. 9 May 2023. Fair use. ## Slide 245 Eileen, Sophie [crashbangsqueak]. “Day 109 Follow the breadcrumbs”. Flickr, 26 Apr 2010, https://www.flickr.com/photos/crashbangsqueak/4555249939. Web. 9 May 2023. Fair use. ## Slide 248 “Dog Pools in Dog Grooming”. Walmart, https://www.walmart.com/browse/pets/dog-pools/5440_202072_1980811_1472147?povid=GlobalNav_rWeb_Pets_TrendinginPets_DogPools. Web. 12 June 2023. Bremer, Leah. “4 best day trips from Cairo”. Lonely Planet, 10 Aug 2022, https://www.lonelyplanet.com/articles/best-day-trips-from-cairo. Web. 12 June 2023. “Men's Boots”. Nordstrom, https://www.nordstrom.com/browse/men/shoes/boots?breadcrumb=Home%2FMen%2FShoes%2FBoots&origin=topnav. Web. 12 June 2023. MDN contributors. “Flexbox”. MDN Web Docs, 23 Feb 2023, https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox. Web. 12 Jun 2023. “Womens Road Running Shoes (34)”. Nike, https://www.nike.com/w/womens-road-running-shoes-37v7jz5e1x6z8kwewzy7ok. Web. 12 June 2023. “OMEN 34c WQHD 165Hz Curved Gaming Monitor”. HP, https://www.hp.com/us-en/shop/pdp/omen-by-hp-34-inch-wqhd-165hz-curved-gaming-monitor-omen-34c. Web. 12 June 2023. ## Slide 249 http://www.granneman.com/teaching/web-development-granneman-way/ ## Slide 250 http://www.sloca.org/ovarian-cancer/treatment/ ## Slide 251 https://www.aclu-nj.org/theissues/ ## Slide 252 http://www.stlzoo.org/animals/abouttheanimals/ ## Slide 253 http://www.stlzoo.org/animals/abouttheanimals/mammals/pouchedmammals/redkangaroo/ ## Slide 254 “Red Kangaroo”. Saint Louis Zoo, 10 May 2015, https://web.archive.org/web/20150510125634/http://www.stlzoo.org:80/animals/abouttheanimals/mammals/pouchedmammals/redkangaroo. Web. 19 June 2015. “Connectors communicate webpage hierarchy much better than separators” ## Slide 255 Without Path Nav, you have to do a lot of cognitive work http://aclu-co.org/about-us/mission-history/, 2015-06-15 ## Slide 256 And even more work… http://aclu-co.org/about-us/chapters/boulder-county/upcoming-events/ ## Slide 257 Uh oh — now where are you on the site? http://aclu-co.org/court-cases/tattered-cover-v-brohl/ ## Slide 260 “In the Courts”. American Civil Liberties Union of Pennsylvania, 5 Aug 2014, https://web.archive.org/web/20140805183424/http://www.aclupa.org/our-work/legal/. Web. 10 Aug 2014. ## Slide 261 “Home :: ACLU of Pennsylvania”. American Civil Liberties Union of Pennsylvania, 5 Aug 2014, https://web.archive.org/web/20140805182530/http://www.aclupa.org/. Web. 09 Mar 2023. http://www.diocesemo.org, 2014-08-10 http://www.habitatstl.org, 2014-08-10 https://stlzoo.org ## Slide 265 “In the Courts”. American Civil Liberties Union of Pennsylvania, 5 Aug 2014, https://web.archive.org/web/20140805183424/http://www.aclupa.org/our-work/legal/. Web. 10 Aug 2014. ## Slide 266 “Home :: ACLU of Pennsylvania”. American Civil Liberties Union of Pennsylvania, 5 Aug 2014, https://web.archive.org/web/20140805182530/http://www.aclupa.org/. Web. 09 Mar 2023. ## Slide 268 Granneman, Scott. “Teaching”. Scott Granneman, 19 Aug 2018, https://granneman.com/teaching. Web. 12 Mar 2023. ## Slide 269 kjohnson. “Geochemical Society Publications”. Geochemical Society, 11 Sep 2020, https://www.geochemsoc.org/publications. Web. 12 Mar 2023. ## Slide 271 “Zoo Friends”. Saint Louis Zoo, 7 June 2015, https://web.archive.org/web/20150607153033/http://www.stlzoo.org/membership/. Web. 15 June 2015. ## Slide 272 https://www.njumr.org/facts/ ## Slide 273 A lot of sub-pages (children) https://www.aclu-nj.org/theissues/ ## Slide 274 So many sub-pages that you need to use a different method https://www.aclu-nj.org/legaldocket/ ## Slide 297 Proposed design for Saint Louis Zoo home page ## Slide 298 Proposed design for Saint Louis Zoo home page ## Slide 299 Proposed design for Saint Louis Zoo home page ## Slide 300 Proposed design for Saint Louis Zoo interior page ## Slide 301 Proposed design for Saint Louis Zoo interior page ## Slide 302 Proposed design for Saint Louis Zoo interior page ## Slide 304 http://www.concrete5.org/ http://help.websanity.com/cms-guide/we-jump/basic-terms-know/#pagetypes ## Slide 307 https://bussenquarries.com/ ## Slide 308 https://objectcomputing.com/ ## Slide 309 https://objectcomputing.com/expertise ## Slide 310 https://meteoritical.org/ ## Slide 311 https://meteoritical.org/meteorites ## Slide 313 ”Vibrant 10”. Death to Stock Photography, https://deathtothestockphoto.com. Free from Death to Stock Photography. ## Slide 314 ”Not Stock 2”. Death to Stock Photography, https://deathtothestockphoto.com. Free from Death to Stock Photography. ## Slide 315 Shuraev, Yaroslav. “File:Маяк Анива.jpg”. 27 May 2017, https://commons.wikimedia.org/wiki/File:Маяк_Анива.jpg. Web. 11 Dec 2019. Caption: “Aniva lighthouse on a rocky promontory in Sakhalin, Russia, with a flock of gulls circling in the surrounding mists” Licensed CC BY-SA 4.0: https://creativecommons.org/licenses/by-sa/4.0/. ## Slide 316 Whitt, Jordan. “three boys running on field”. Unsplash, 30 Dec. 2015, https://unsplash.com/photos/b8rkmfxZjdU. Web. 5 Feb 2022. Licensed from Unsplash: https://unsplash.com/license. ## Slide 317 Valenty. “Abstract Rainbow Background”. Can Stock Photo, 20 Oct 2012, http://www.canstockphoto.com/abstract-rainbow-background-11242822.html. Web. 14 Apr 2015. Available for free from Can Stock Photo on 14 Apr 2015. ## Slide 318 Granneman, R. Scott. “Country road outside Arrow Rock, Missouri 2”. 3 July 2005. Author’s personal collection. Licensed CC BY-SA 4.0: https://creativecommons.org/licenses/by-sa/4.0/. Credit: Scott Granneman • www.granneman.com • scott@granneman.com ## Slide 321 http://www.apple.com ## Slide 323 Saint Louis Zoo, 10 Aug 2014, https://stlzoo.org. ## Slide 324 Whayman, James. “WildPress - Freelance WordPress Developer in London”. WildPress, https://wildpress.co/. Web. 23 Aug 2023. ## Slide 325 “Pollen London”. Pollen London, https://pollenlondon.com/. Web. 23 Aug 2023. ## Slide 326 “Seastreak Ferries | Servicing New York, New Jersey, and Massachusetts”. Seastreak, https://seastreak.com. Web. 23 Aug 2023. ## Slide 327 “Heco”. Heco Partners, https://www.helloheco.com/. Web. 23 Aug 2023. ## Slide 328 “Ditto Residential – Fine Residential Developments”. Ditto Residential, https://stage.dittodc.com/. Web. 23 Aug 2023. ## Slide 329 “Sally Hershberger”. Sally Hershberger, https://sally-hershberger.com. Web. 23 Aug 2023. ## Slide 330 “Sally Hershberger”. Sally Hershberger, https://sally-hershberger.com. Web. 23 Aug 2023. ## Slide 331 “Downtown Chicago’s #1 Museum | The Art Institute of Chicago”. The Art Institute of Chicago, 14 May 2023, https://www.artic.edu/exhibitions/9639/van-gogh-and-the-avant-garde-the-modern-landscape. Web. 23 Aug 2023. ## Slide 333 Wikipedia contributors. “Prop”. Wikipedia, The Free Encyclopedia, 12 July 2023, https://en.wikipedia.org/wiki/Prop. Web. 24 Aug. 2023. ## Slide 336 https://www.google.com/search?q=H.+P.+Lovecraft&source=hp&ei=pageYvDUBcmkptQPrsCH-Ak&iflsig=AHkkrS4AAAAAYh62tXUfpUwhCG-UpIf3fNBtuRAdBgZx&ved=0ahUKEwiwu8SGhab2AhVJkokEHS7gAZ8Q4dUDCAk&uact=5&oq=H.+P.+Lovecraft&gs_lcp=Cgdnd3Mtd2l6EAMyBQguEIAEMgUIABCABDIICC4QgAQQ1AIyBQgAEIAEMgUIABCABDIFCC4QgAQyBQgAEIAEMgUILhCABDIFCAAQgAQyBQgAEIAEOggILhCPARDqAjoICAAQjwEQ6gI6EAguEI8BEMcBENEDEOoCEAo6EQguEIAEELEDEIMBEMcBENEDOgsILhCABBDHARCjAjoLCAAQgAQQsQMQgwE6CAgAEIAEELEDOg4ILhCABBCxAxDHARDRAzoOCC4QgAQQsQMQxwEQowI6CAgAELEDEIMBOhEILhCABBCxAxDHARCjAhDUAjoRCC4QgAQQsQMQxwEQ0QMQ1AI6CwguELEDEIMBENQCOgsILhCABBDHARCvAToOCC4QgAQQxwEQowIQ1AI6CAgAEIAEEMkDOgUIABCSAzoOCC4QsQMQgwEQxwEQowI6CwguEIAEEMcBENEDOgoILhCABBDUAhAKOgcIABCABBAKOhAILhCxAxDHARCjAhDUAhAKOhAILhCxAxCDARDHARCjAhAKOgoILhDHARCvARAKOgcILhCxAxAKOgoILhCxAxCDARAKOhEILhCABBCxAxCDARDHARCjAlDyAlirMGDLMmgGcAB4AIABgQGIAYINkgEEMTYuNJgBAKABAbABCg&sclient=gws-wiz ## Slide 337 https://marillacmissionfund.org/grant-process ## Slide 338 https://marillacmissionfund.org/grant-process ## Slide 339 https://marillacmissionfund.org/grant-process/2-create-your-online-account ## Slide 343 http://www.towergrovechurch.org/learning/ ## Slide 344 What is ANIMALS on the side? The title? http://www.stlzoo.org/animals/abouttheanimals/ ## Slide 345 Title is obvious, but it shouldn’t match navigation http://www.sloca.org/ovarian-cancer/treatment/ ## Slide 346 Navigation label should be different than page title http://www.angiefox.com/bio/ ## Slide 347 Page title is different than navigation http://www.stlzoo.org/membership ## Slide 353 https://www.aclu-nj.org ## Slide 354 http://neuro.wustl.edu ## Slide 355 http://www.sloca.org/ovarian-cancer/treatment/ ## Slide 356 http://www.stlzoo.org/animals/animalfoodnutritioncenter/ ## Slide 357 https://www.aclu-nj.org/theissues/lgbt-rights/ ## Slide 361 http://www.towergrovechurch.org/learning/ ## Slide 362 Not really a sidebar, as this is on every single page https://www.aclu-nj.org/theissues/ ## Slide 363 Combo: Action banners & social media on every page, but other content can be added on pages as needed http://www.aclupa.org/our-work/legal/ ## Slide 364 http://www.stlzoo.org/animals/abouttheanimals/ ## Slide 365 http://www.stlzoo.org/animals/animalfoodnutritioncenter/ ## Slide 366 Search should NOT go in the sidebar! http://www.stlzoo.org ## Slide 370 http://www.stlzoo.org/animals/abouttheanimals/ ## Slide 377 Craig-Wood, Nick. “Rclone syncs your files to cloud storage”. Rclone, 19 Oct. 2021, https://rclone.org. Web. 8 Mar 2022. ## Slide 378 Craig-Wood, Nick. “Rclone syncs your files to cloud storage”. Rclone, 19 Oct. 2021, https://rclone.org. Web. 8 Mar 2022. ## Slide 379 Craig-Wood, Nick. “Rclone syncs your files to cloud storage”. Rclone, 19 Oct. 2021, https://rclone.org. Web. 8 Mar 2022. ## Slide 380 Craig-Wood, Nick. “Rclone syncs your files to cloud storage”. Rclone, 19 Oct. 2021, https://rclone.org. Web. 8 Mar 2022. ## Slide 381 WebSanity. “CSS: Striped tables”. CodePen, 7 Feb. 2017, http://codepen.io/websanity/pen/VPBNQM?editors=1000. Web. 8 Mar 2022. ## Slide 382 WebSanity. “CSS: Striped tables”. CodePen, 7 Feb. 2017, http://codepen.io/websanity/pen/VPBNQM?editors=1000. Web. 8 Mar 2022. ## Slide 383 WebSanity. “CSS: Striped tables via Bootstrap”. CodePen, 12 July 2020, http://codepen.io/websanity/pen/PWBvYV?editors=1100. Web. 8 Mar 2022. ## Slide 386 “Tables Generator”. Tables Generator, https://www.tablesgenerator.com/html_tables. Web. 8 Mar 2022. ## Slide 387 “Tables Generator”. Tables Generator, https://www.tablesgenerator.com/html_tables. Web. 8 Mar 2022. ## Slide 388 “Tables Generator”. Tables Generator, https://www.tablesgenerator.com/html_tables. Web. 8 Mar 2022. ## Slide 389 “Tables Generator”. Tables Generator, https://www.tablesgenerator.com/html_tables. Web. 8 Mar 2022. ## Slide 390 “Tables Generator”. Tables Generator, https://www.tablesgenerator.com/html_tables. Web. 8 Mar 2022. ## Slide 391 “Tables Generator”. Tables Generator, https://www.tablesgenerator.com/html_tables. Web. 8 Mar 2022. ## Slide 392 “Tables Generator”. Tables Generator, https://www.tablesgenerator.com/html_tables. Web. 8 Mar 2022. ## Slide 393 “Tables Generator”. Tables Generator, https://www.tablesgenerator.com/html_tables. Web. 8 Mar 2022. ## Slide 394 “Tables Generator”. Tables Generator, https://www.tablesgenerator.com/html_tables. Web. 8 Mar 2022. ## Slide 395 “Tables Generator”. Tables Generator, https://www.tablesgenerator.com/html_tables. Web. 8 Mar 2022. ## Slide 396 “Tables Generator”. Tables Generator, https://www.tablesgenerator.com/html_tables. Web. 8 Mar 2022. ## Slide 397 “Tables Generator”. Tables Generator, https://www.tablesgenerator.com/html_tables. Web. 8 Mar 2022. ## Slide 398 “Tables Generator”. Tables Generator, https://www.tablesgenerator.com/html_tables. Web. 8 Mar 2022. ## Slide 399 “Tables Generator”. Tables Generator, https://www.tablesgenerator.com/html_tables. Web. 8 Mar 2022. ## Slide 400 “Tables Generator”. Tables Generator, https://www.tablesgenerator.com/html_tables. Web. 8 Mar 2022. ## Slide 401 https://en.wikipedia.org/wiki/Comma-separated_values ## Slide 406 “Tables Generator”. Tables Generator, https://www.tablesgenerator.com/html_tables. Web. 8 Mar 2022. ## Slide 407 “Tables Generator”. Tables Generator, https://www.tablesgenerator.com/html_tables. Web. 8 Mar 2022. ## Slide 408 “Tables Generator”. Tables Generator, https://www.tablesgenerator.com/html_tables. Web. 8 Mar 2022. ## Slide 409 “Tables Generator”. Tables Generator, https://www.tablesgenerator.com/html_tables. Web. 8 Mar 2022. ## Slide 412 https://www.saintjamescathedral.org/events/calendar ## Slide 413 https://www.saintjamescathedral.org/events/calendar ## Slide 415 https://smile.amazon.com/?sa-no-redirect=1 ## Slide 416 https://smile.amazon.com/s?k=linux+phrasebook&sa-no-redirect=1&tag=duc0c-20 ## Slide 417 https://www.aclu-nj.org/cases ## Slide 418 https://www.aclu-nj.org/cases ## Slide 423 https://www.aclu-nj.org ## Slide 424 http://www.episcopalchicago.org ## Slide 425 http://www.cityofbn.com ## Slide 426 http://www.diocesemo.org ## Slide 427 http://www.nngroup.com/articles/infinite-scrolling/ ## Slide 429 http://www.nngroup.com/articles/infinite-scrolling/