Going In-Depth With Web Pioneer Jeffrey Zeldman Part 1

Going In-Depth With Web Pioneer Jeffrey Zeldman: Part 1 🔗 **Source:** [Going In-Depth With Web Pioneer Jeffrey Zeldman: Part 1](https://www.youtube.com/watch?v=VkMwcdS0ZAg) > [!note]+ Document Notes > tags: #web-standards #css #accessibility #web-design #html #netscape #internet-explorer #automatic > author: WP Minute > source: YouTube > reference: https://www.youtube.com/watch?v=VkMwcdS0ZAg > date created: 2024-12-19 14:30 > > # 🏷️ Title: Going In-Depth With Web Pioneer Jeffrey Zeldman: Part 1 >  ## 🧰 Action Inbox - [H1] Study the evolution from browser-specific sites to standards-compliant design — 05:23 #web-standards - [H2] Research the Web Standards Project's collaborative approach to industry change — 15:45 #collaboration - [H3] Examine CSS Zen Garden as educational tool for demonstrating separation of content and presentation — 28:30 #css ## 🧭 Table of Contents - [[#📝 Summary]] - [[#📖 Main Content]] - [[#🗒️ Notes]] - [[#📚 References]] - [[#🗣️ Paraphrase]] - [[#📰 Newsletter]] - [[#✅ Action Items]] - [[#🧪 Hypotheses]] - [[#📊 Methodology]] - [[#❓ Questions]] - [[#🔮 Future Research]] - [[#💡 Implications]] - [[#🧠 Learning Styles Assessment]] - [[#📊 Accessibility Assessment]] - [[#🌍 DEIB Assessment]] - [[#✅ Logical Validity]] - [[#🛡️ DARVO Analysis]] - [[#🎯 Conclusion]] ### 🔗 References - [CSS Zen Garden](http://csszengarden.com) - [Web Standards Project](http://webstandards.org) - [A List Apart](https://alistapart.com) ## 📝 Summary - Jeffrey Zeldman discusses his accidental entry into web design through a Batman Forever website project in the mid-1990s - The Web Standards Project emerged from developer frustration with having to create four different versions of websites for different browsers - CSS represented a revolutionary shift from browser-specific hacks to universal, accessible design standards - Collaborative knowledge sharing through newsletters and mailing lists drove the early web standards movement - Bottom line: Web standards succeeded through grassroots developer advocacy that convinced major browser makers to adopt universal standards ## 📖 Main Content Jeffrey Zeldman's journey into web design began reluctantly in 1995 when working on advertising for Warner Brothers' Batman Forever. Despite initially dismissing the web compared to AOL's polished interface, he discovered the creative potential in building interfaces for a medium not yet ready for them. The mid-1990s web landscape required developers to create separate versions of websites for Netscape Navigator and Internet Explorer browsers. This fragmentation frustrated the development community and led to the formation of the Web Standards Project (WSP) around 1998. The WSP used grassroots advocacy tactics, including coordinated announcements across multiple influential websites and mailing lists. By positioning themselves as representatives of hundreds of thousands of frustrated developers, they gained leverage with major browser vendors like Microsoft and Netscape. CSS adoption represented more than just technical standardization—it enabled designers to apply centuries-old principles of typography and layout design to web interfaces. The CSS Zen Garden project later demonstrated the power of separating content from presentation by showing dramatically different designs using identical HTML. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/VkMwcdS0ZAg?t=0) — [H2] Introduction and early web career parallels - Key idea: Both Zeldman and host started with HTML in 1995, showing common early web adoption timeline - Evidence: "I started playing with HTML in 1995. I know that you were a journalist and copywriter before going to the web" #### ⏱️ [02:15](https://youtu.be/VkMwcdS0ZAg?t=135) — [H1] Initial resistance to the web and AOL comparison - Key idea: Early web appeared inferior to polished proprietary platforms like AOL - Evidence: "This will never catch on. Like AOL is so pretty... beautifully designed space optimized for computers" #### ⏱️ [03:30](https://youtu.be/VkMwcdS0ZAg?t=210) — [H1] Batman Forever project as gateway to web design - Key idea: Client demand for Batman Forever website led to accidental career pivot - Evidence: "Batman doesn't talk. I don't know why I said it... My the client looked at me... 'Oh, this guy gets it'" #### ⏱️ [05:23](https://youtu.be/VkMwcdS0ZAg?t=323) — [H2] Creative constraints drove innovation in early web - Key idea: Technical limitations forced creative problem-solving and custom interface development - Evidence: "We had just gotten the ability to embed a GIF image... we had to start from scratch creating an interface" #### ⏱️ [08:45](https://youtu.be/VkMwcdS0ZAg?t=525) — [H1] Browser fragmentation problem emergence - Key idea: Multiple browser versions required creating four separate website versions - Evidence: "Netscape 4 and IE4 had come out... people were making four versions of their website" #### ⏱️ [11:30](https://youtu.be/VkMwcdS0ZAg?t=690) — [H1] Web Standards Project formation through mailing lists - Key idea: Frustrated developers collaborated through newsgroups to create coordinated advocacy - Evidence: "George Olsen and Glenn Davis... we started talking about how frustrating it was to have four different models" #### ⏱️ [13:15](https://youtu.be/VkMwcdS0ZAg?t=795) — [H2] WASP name choice and small group leverage strategy - Key idea: Small annoying group metaphor reflected grassroots power against large corporations - Evidence: "Wasps are small little annoying bugs but if enough of them are stinging you, you're going to feel it" #### ⏱️ [15:45](https://youtu.be/VkMwcdS0ZAg?t=945) — [H1] Roadblock strategy for coordinated messaging - Key idea: Simultaneous publication across multiple influential platforms amplified impact - Evidence: "We all published our announcement on the same day... nobody could miss it" #### ⏱️ [18:20](https://youtu.be/VkMwcdS0ZAg?t=1100) — [H2] Browser vendors eventual cooperation - Key idea: Microsoft and Netscape engineers recognized standards aligned with their interests - Evidence: "After about a year Microsoft and Netscape came around... yes we want to support these standards" #### ⏱️ [21:10](https://youtu.be/VkMwcdS0ZAg?t=1270) — [H1] CSS as bandwidth-efficient design solution - Key idea: CSS enabled visual design while respecting limited bandwidth constraints - Evidence: "I knew that it was really important to respect bandwidth and CSS did that" #### ⏱️ [23:45](https://youtu.be/VkMwcdS0ZAg?t=1425) — [H2] CSS enabled traditional typography principles - Key idea: CSS allowed designers to apply centuries-old layout and typography knowledge - Evidence: "You could start to use what designers have known about for centuries... use color relationships" #### ⏱️ [26:30](https://youtu.be/VkMwcdS0ZAg?t=1590) — [H1] Collaborative relationship with W3C - Key idea: WSP provided W3C with industry leverage they couldn't achieve directly - Evidence: "We depend on contributions from our members... if you represent 200,000 developers, that's their customer base" #### ⏱️ [28:30](https://youtu.be/VkMwcdS0ZAg?t=1710) — [H1] CSS Zen Garden demonstrated separation of concerns - Key idea: Same HTML with different CSS showed power of standards-based design - Evidence: "I don't have to recode all my content if I redesign the layout... just the power of that simple CSS was pretty amazing" #### ⏱️ [31:15](https://youtu.be/VkMwcdS0ZAg?t=1875) — [H2] Evolution from technical tricks to broader web topics - Key idea: A List Apart expanded beyond CSS techniques to cover UX, copywriting, and strategy - Evidence: "I don't want to be CSS trick of the week anymore... Let's talk about usability... user experience" ## 📚 References - [Web Standards Project](http://webstandards.org) - [CSS Zen Garden](http://csszengarden.com) - [A List Apart](https://alistapart.com) - [WP Minute](https://wpminute.com) ## 🗣️ Paraphrase - The early web required developers to create multiple versions of sites for different browsers, creating massive inefficiency and frustration that led to the Web Standards Project advocacy movement - CSS represented a breakthrough that allowed designers to apply traditional typography and layout principles while respecting bandwidth limitations and browser capabilities - Grassroots developer advocacy succeeded by positioning themselves as representatives of a large frustrated constituency, giving them leverage with major browser vendors who depended on developer adoption ## 📰 Newsletter Jeffrey Zeldman's interview reveals how the modern web emerged from developer frustration with browser fragmentation. In the late 1990s, developers had to create four different versions of every website to support various browsers—an unsustainable approach that sparked the Web Standards Project. The key insight for today's WordPress community: collaborative advocacy works. When developers united around shared standards, major corporations listened. This same principle applies to WordPress's open source development, where community voices shape the platform's direction. Zeldman's emphasis on accessibility and universal design principles remains crucial for WordPress developers. CSS enabled separation of content from presentation—the same principle behind WordPress themes separating content from design. Resources: [Learn WordPress](https://learn.wordpress.org/), [Developer Docs](https://developer.wordpress.org/), [WP-CLI](https://wp-cli.org/) ## ✅ Action Items #### WordPress - Core: Examine how web standards principles apply to WordPress block editor development - Community: Document early WordPress adoption of web standards for historical context - Documentation: Create educational content showing CSS Zen Garden principles in WordPress theme development - Accessibility: Reference Zeldman's advocacy approach for promoting WCAG compliance in themes and plugins #### Community - Maintainers: Study Web Standards Project coordination tactics for cross-project standards adoption - Contributors: Learn from mailing list collaboration models for distributed development - Ecosystem: Apply collaborative messaging strategies for promoting best practices ## 🧪 Hypotheses - Developer advocacy groups achieve more influence when they coordinate messaging across multiple platforms simultaneously - Technical standards adoption accelerates when positioned as business benefits rather than technical features - Educational platforms like A List Apart succeed by evolving beyond narrow technical focus to broader industry concerns - Browser vendor cooperation increases when standards align with their competitive interests rather than opposing them ### 📊 Methodology - Historical analysis of Web Standards Project archives and member contributions - Comparative study of advocacy success rates between coordinated vs. individual efforts - Content analysis of A List Apart evolution from CSS techniques to broader UX topics ### ❓ Questions - How do modern web platform advocacy efforts compare to the Web Standards Project's grassroots approach? - What role should WordPress community play in emerging web standards like Web Components or CSS Container Queries? - How can historical lessons from browser wars inform current platform competition between WordPress, Shopify, and proprietary CMSs? ### 🔮 Future Research - Analyze current W3C working group participation from WordPress/Automattic representatives - Document WordPress adoption timeline for modern CSS features like Grid and Flexbox - Study community coordination mechanisms in other open source projects ### 💡 Implications - Practice: WordPress developers should prioritize web standards compliance for long-term sustainability - Education: Historical context helps developers understand why certain practices became standard - Community: Coordinated advocacy efforts can influence platform direction more effectively than individual requests - Accessibility: Universal design principles remain as relevant today as during initial web standards push ### 🧠 Learning Styles Assessment Reading level estimate: 9th grade (Flesch-Kincaid) #### 👀 Visual learners - Present: None in audio format - Improve: Timeline diagram of browser wars, before/after CSS examples, Web Standards Project member network visualization #### 🔊 Aural learners - Present: Full interview audio with conversational format - Improve: Chapter markers for key topics, audio summary highlights #### 🗣️ Verbal learners - Present: Clear explanations of technical concepts, historical analogies - Improve: Glossary of technical terms, comparison tables between browsers #### 🧩 Kinesthetic learners - Present: None - Improve: Interactive CSS Zen Garden recreation, browser compatibility testing lab #### 🧠 Logical learners - Present: Chronological narrative, cause-and-effect relationships - Improve: Timeline visualization, decision tree for standards adoption #### 🧑‍🤝‍🧑 Social learners - Present: Collaborative development stories, community building - Improve: Discussion prompts for web standards impact, group projects recreating historical sites #### 🧘‍♀️ Solitary learners - Present: Individual reflection on career transitions - Improve: Self-assessment questions about personal web development journey #### 🌿 Naturalistic learners - Present: Ecosystem metaphors for web platform evolution - Improve: Web platform evolution as ecological succession analogy ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Audio content accessible, but lacks structured transcript - Improve: Timestamped transcript with proper heading structure #### Keyboard navigation - Present: Standard video player controls - Improve: Chapter navigation shortcuts, transcript search functionality #### Contrast and readability - Present: Video player meets minimum contrast - Improve: High contrast mode for video player interface #### Text resizing and reflow - Present: Video player responsive design - Improve: Scalable transcript text, reflow at 200% zoom #### Media and captions - Present: Full transcript available - Improve: Synchronized captions, speaker identification #### Forms and interactions - Present: Basic video controls - Improve: Accessible chapter selection, playback speed controls ### 🌍 DEIB Assessment #### Cultural breadth - Present: US-centric web development history - Improve: Global perspectives on web standards adoption, international browser market context #### Inclusive language - Present: Technical jargon explained in context - Improve: Plain language summary, defined technical glossary #### Neurodiversity support - Present: Conversational pace allows processing time - Improve: Visual chapter markers, content structure preview #### Representation - Present: Two male voices, industry veteran perspective - Improve: Include diverse voices from web standards era, underrepresented contributor stories #### Psychological safety - Present: Respectful discussion of past disagreements - Improve: Acknowledge barriers faced by underrepresented groups in early web development ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Strong connection between browser fragmentation and developer frustration leading to advocacy - Inductive strength: Good examples supporting broader patterns of technical standard adoption - Causal reasoning: Clear cause-effect relationships between advocacy efforts and browser vendor responses - Analogical strength: Effective analogies (wasps, roadblock advertising) illuminate abstract concepts #### Fallacies - Appeal to authority: Minimal, mostly justified by Zeldman's documented contributions - Survivorship bias: Focus on successful advocacy without examining failed efforts #### Tone of voice - Overall tone: Conversational, respectful, historically reflective with appropriate technical depth ### 🛡️ DARVO Analysis - Deny: No denial patterns detected - Attack: No attacks on accusers present - Reverse victim/offender: No victim/offender reversal present - Emotional cues and rhetoric: Nostalgic tone appropriate for historical reflection, collaborative framing emphasizes shared success ## 🎯 Conclusion Zeldman's account demonstrates how grassroots developer advocacy successfully transformed web development from fragmented, browser-specific coding to universal standards. The Web Standards Project's coordinated approach—combining technical expertise with strategic messaging—offers valuable lessons for modern open source communities. The emphasis on collaboration, education, and positioning standards as business benefits rather than technical requirements remains relevant for WordPress community advocacy today. ## 🧱 Refactor Appendix ### 📚 Literature Split Pad Purpose: Stage CEE units that become Literature notes. Split level: H3 ### [H1] Web standards emerged from developer frustration with browser fragmentation > [!quote] [Going In-Depth With Web Pioneer Jeffrey Zeldman: Part 1](https://youtu.be/VkMwcdS0ZAg) by [[Jeffrey Zeldman]] via [[WP Minute --- ## Full Transcript [00:00] Hi everyone and welcome to the WP [00:02] Minute. I'm Eric Caravac. [00:05] So today's guest is someone I've wanted [00:07] to interview for a very long time, [00:09] Jeffrey Zelman. You may know him as the [00:11] co-founder of Alysa Part and the Web [00:13] Standards Project. He's been blogging [00:16] since 1995. [00:18] His accomplishments may be too numerous [00:20] to list here, but it's safe to say that [00:22] he's made a huge impact on the web. [00:25] These days, he's an executive creative [00:27] director at Automatic. [00:30] Jeffrey, welcome to the WP Minute and [00:32] thank you for being on with me today. [00:34] >> Thanks for having me. This is great. [00:36] Hey, Eric. How are you doing? [00:38] >> I am well. I'm I'm so excited to talk to [00:41] you because I I feel like now obviously [00:43] you're you're so well known in the web [00:45] space, but I I feel like we have [00:47] parallels in our careers a little bit [00:49] because we both started around the same [00:50] time. I started playing with HTML in [00:53] 1995. [00:54] Um, I know that you were a journalist [00:57] and copywriter before going to the web. [01:00] My first my first gig was actually in [01:03] web design was as a uh web master for my [01:06] local newspaper making five bucks an [01:08] hour. [01:11] >> Wow. [01:12] >> Hey, eventually they bumped me up to [01:14] six. [01:16] I didn't stay there that long though. [01:20] But I I I want to ask, what drew you to [01:23] web design back in those days? [01:25] >> Well, at first I hated it to be honest. [01:28] Uh my friend uh a friend showed me the [01:31] web and I was like, "This will never [01:33] catch on." Like AOL is so pretty and you [01:38] know, Apple had a thing and it was all [01:40] pictures and you went into I forget what [01:42] it was called. Um, AOL, you know, [01:45] beautifully, it was like beautifully [01:48] designed space optimized for computers. [01:52] Um, [01:54] and [01:56] I had a client, I was working in [01:57] advertising. I had a client, Warner [02:00] Brothers, Don Buckley, their VP of [02:04] marketing, uh, said he wanted to do a [02:07] website for Batman Forever. [02:11] We lied and said, "Oh, yeah, we know [02:12] what that is." And my colleagues and I [02:14] uh made a website. We we we barricaded [02:17] ourselves in Steve McCarron's office, [02:18] worked on it for three months, uh [02:21] launched it. And um how we got the [02:23] account, we had the account as [02:24] advertisers. [02:26] Warner Brothers had an in-house team [02:28] that was already doing online stuff, [02:30] mainly for AOL, but they were getting [02:32] ready to do it for uh for the web. And [02:38] they presented first. They presented [02:40] their idea first and um they said this [02:44] is the bat trove. T R O V E. Batman [02:48] swings out on a rope and says, "Hi, I'm [02:50] Batman." And I just went, "Batman [02:52] doesn't talk." [02:55] I don't know why I said it. It was very [02:56] rude. I was interrupting another [02:58] company's pitch. I wasn't trying to be [03:00] rude. It was just like uh [03:03] an emotional moment or an you know, but [03:07] but here's the thing. My the client [03:09] looked at me, looked me in the eyes [03:10] like, "Oh, this guy gets it." And I knew [03:13] at that moment that we were going to win [03:14] like like and we did. Um, we didn't know [03:17] what we were doing. There was almost [03:19] nothing you could do on the web. So, we [03:21] invented a bunch of stuff. All of which [03:24] I would later recant when the web [03:26] standards movement started because it [03:28] was like it wasn't, you know, it wasn't [03:30] accessible. It was browser specific. you [03:34] had to use Netscape 1.1 to see it [03:36] properly like um but I mean websites [03:42] they we had we had just gotten the [03:44] ability to embed a a a GIF image. I [03:48] don't I think JPEG was years away and uh [03:51] I don't know it was just once I started [03:54] doing it I loved it so much. Uh, I got [03:58] into it by accident because a cl because [04:00] of a client request, but I didn't love [04:04] advertising the way I came to love web [04:07] design. And I was okay at advertising. [04:11] I'd done some halfway decent stuff, but [04:15] uh I really struggled. I I didn't [04:21] I loved the idea because I was sort of [04:24] mentally childish. I love the idea of [04:26] making little films that would make [04:28] people go, "Oh, great." and then buy [04:30] Doritos or whatever. But it but it [04:35] I didn't love the idea of being an [04:38] assistant to sales, even though that's [04:40] what half the websites ended up being [04:42] anyway. But I it just felt so creative. [04:45] We had to start from scratch creating an [04:48] interface in a medium that wasn't really [04:50] ready for interfaces yet. [04:52] >> Yeah. you know, uh, we use a whole bunch [04:56] of weird lowfi tricks to create an [04:58] animated bat flying toward the camera [05:00] when you first got there. And we had [05:03] videos that were 300 by 200 pixels and [05:07] it took all night to download on a 144 [05:09] modem and people were downloading them. [05:13] So, it was really fun. I really got into [05:16] writing the copy for it. [05:18] uh that setting the tone and uh I just [05:23] loved it and I I quit advertising soon [05:26] afterwards and just went [05:29] well first I went to uh [05:33] by the time actually we'd already [05:36] started the web standards project and uh [05:39] I was working I worked for five months [05:41] at a dot firm and quit just before the [05:44] bust because I said I can do this [05:46] myself. [05:47] >> Good deal. we don't we don't need all [05:49] these people [05:51] and I can probably live on it and that's [05:54] what I did. [05:56] >> Well, I'm I'm glad you brought up uh [05:58] just how much you kind of had to invent [06:01] on that on that site because [06:04] for those of you watching and listening [06:07] who maybe weren't around in the early [06:09] web, there was like there were no [06:11] standards at that point, right? I mean, [06:13] we were just making it up as we went [06:15] along. [06:16] There was HTML. [06:18] >> There was HTML [06:19] >> there, but that was it. [06:21] >> Yeah, we didn't have [06:22] >> it wasn't about visuals [06:24] >> and we didn't have uh CSS yet. Um [06:27] >> not for another two years and then [06:29] usefully not for probably another 10 [06:31] years. [06:32] >> Exactly. Yeah. The the initial CSS was [06:34] kind of [06:36] low. [06:36] >> It was awesome but not predictable [06:39] because the browser supported only parts [06:41] of it and not necessarily correctly. [06:45] Exactly. And so how did you start [06:48] getting involved in web standards? Like [06:50] what what drove you to that decision and [06:52] say that this isn't working. We're [06:54] building stuff that is too proprietary, [06:57] maybe too uh you know too buggy. [07:01] >> Um Netscape 4 and I4 had come out. [07:06] IE3 had come out with the first support [07:09] for CSS and even though it was limited [07:11] and not entirely correct [07:15] per the specification [07:18] which to be fair to Microsoft when the [07:20] people made the specification they [07:22] didn't have any way of testing it [07:25] and they weren't thinking like designers [07:29] they were thinking like scientists so [07:32] some of the defaults [07:34] actually didn't make sense and whether [07:36] padding got added or not and all that [07:39] stuff. But um [07:42] so we had these four browsers [07:45] and people were making four versions of [07:47] their website. You couldn't even say [07:49] just optimized for IE because which one [07:52] or just optimized for Netscape because [07:54] which one? the market was about well [07:57] Netscape had dominated but now it was [07:59] about 5050 [08:02] and people who were doing this work were [08:05] like I make so much money by knowing the [08:07] four different ways to make something. [08:09] Um and I was on a bunch of we had a [08:11] bunch of mailing list and news groups [08:13] back then. I'm sure you participated in [08:15] that too. [08:16] >> Oh yes. And um I was in one I don't [08:20] remember the name of the news group but [08:24] um George Olsen and Glenn Davis were [08:26] also in that group. Steven Champion uh [08:30] was in that group. [08:32] And what we started talking about how [08:35] frustrating it was to have four [08:37] different you know models none of which [08:40] were permanent. [08:42] And uh [08:46] we just in that newsletter or in in that [08:51] series of mails, which I don't have [08:52] anymore because I don't have Odora [08:54] anymore. I used to download my mail, not [08:57] leave it in the cloud because there [08:58] wasn't a cloud. Udora was awesome. It [09:02] was a great tool, but it was for system [09:04] 7. Uh, I was still using system 7 back [09:08] then, but uh, anyway, [09:11] I wish I still had it. I wish it wasn't [09:13] in a landfill or on a jazz drive [09:16] somewhere in a a storage unit in Shbboan [09:19] or wherever it this stuff ended up. I [09:22] wish because for historical reasons, it [09:24] would be interesting to see who [09:26] contributed the different ideas. But [09:27] >> yeah, [09:29] >> uh I think Wasp I think Glenn Web [09:33] Standards Project was one of the names [09:34] we kicked around for like let's let's [09:37] make a group and just try something. I [09:39] think Glenn Davis talked about the W [09:41] wasp. It was like well WSB could be Wasp [09:44] and Wasps are small little annoying bugs [09:47] but if enough of them are stinging you, [09:49] you're going to feel it. And that's [09:51] where we are as developers. We're going [09:52] up against two huge companies, Microsoft [09:55] and Netscape. [09:57] They're huge and we're nothing, but we [10:00] represent, if we position the message [10:04] right, we represent hundreds of [10:05] thousands of developers who are [10:07] frustrated right now and designers who [10:08] are frustrated right now. So that gives [10:11] us power. We It's like democracy, you [10:14] know, it's one senator, but [10:16] theoretically they represent, [10:19] you know, many constituents. [10:22] We're not going to go into whether that [10:24] is working at the moment or not. We're [10:27] just going to go with uh that's how [10:29] things seem to be then. So, we we called [10:32] it Wasp. And uh I sort of took over a [10:36] lot of the writing and I designed the [10:39] website and I made it orange because I [10:40] thought wasps were orange. I'm a city [10:42] boy. [10:44] I was surprised when I actually made the [10:47] wasp logo that wasps really don't look [10:50] like bugs in cartoons. They really look [10:52] more like butterflies. [10:53] >> Yeah. [10:54] >> Right. With like [10:56] But anyway, [10:58] we got uh we did another thing that was [11:00] affected which is in advertising. [11:04] There's a thing called there used to be [11:05] a thing called a roadblock, [11:07] Eric. And a roadblock was where [11:11] well in America there were three [11:13] networks CBS, NBC and ABC. You'd buy a [11:16] commercial on all three networks and you [11:18] tell them I want this to run [11:21] at in the first commercial break of the [11:23] 6:00 news. Let's say there were three [11:25] news networks. Everybody watched one of [11:27] them. And in advertising, if your [11:31] commercial was going was, you know, [11:33] playing on CBS and you're like, I don't [11:34] want to see a commercial, you switch to [11:36] NBC. same commercial, you'd switch to [11:38] ABC, same commercial. So, you'd see the [11:41] message. It's kind of a gross thing. It [11:43] can't be done anymore because we no we [11:46] no longer have a not a duopoly, but a [11:50] triop, I guess. We no longer have three [11:52] big networks that everybody watches. [11:54] >> So, but but we used that idea. I had [11:58] started a list apart with a with a a [12:01] colleague from that newsletter. Um, [12:05] Jeff Bean was working at Hotwired. [12:08] Um, Glenn Davis was running Cool Sight [12:11] of the Day or maybe it was Project Cool [12:14] back then. He might have already left [12:15] Cool Sight of the Day. Anyway, he was [12:17] running either the first that first site [12:20] that said, "Hey, there's cool stuff to [12:22] look at on the web. Here's a site we [12:23] like today." or his second one which he [12:26] might have started to get out of a maybe [12:30] maybe uh I think he started the first [12:32] one as an employee and they were like [12:35] trying to take editorial control away [12:37] from him or they weren't uh he was you [12:40] know he realized that there was more [12:41] that he could do if he did it [12:42] independently so he did anyway and and [12:45] Steve Champion's web design L mailing [12:48] list had like 2,000 developers on it but [12:51] they were like the smartest developers [12:53] on the web at Anyway, we had a bunch of [12:56] us who were in this informal group. We [12:59] all published our announcement on the [13:00] same day. Our our demand that you know [13:04] we said standards exist for a reason. Um [13:08] it is folly to keep [13:12] bowserizing the web. There what's [13:16] I can't think of the word. Alec Alec [13:18] Pollock was my partner. Alec I'm very [13:21] sorry. I'm an old man and I forgot your [13:23] name for a second. I'm really sorry. [13:25] Alec Pollock and Steve McCarron were the [13:28] uh huge huge uh collaborators on uh the [13:34] Batman site, the Batman Forever site, [13:36] and they were the two art directors. [13:39] I mostly concerned myself with content [13:41] and HTML, [13:43] but um [13:45] yeah, so we announced it and nobody [13:48] could miss it. Jeff Bean wrote his [13:50] thing, Steve wrote his and we all each [13:53] of us wrote a passionate plea why this [13:56] mattered to us and we got a lot of [13:59] designers to join. The amazing thing was [14:02] that after about a year [14:05] Microsoft and Netscape came around their [14:07] engineers started saying yeah we want to [14:09] work with you yes we want to support [14:11] these standards it's in our interest [14:12] too. They were initially competing [14:16] like if you remember Photoshop had [14:19] competitors before Adobe owned [14:21] everything in that space. [14:22] >> Yes. [14:23] >> And software designers would [14:26] uh would differentiate their products, [14:30] right? Uh be in in order to make them [14:33] marketable. kind of like only the [14:35] Cadillac gives you power steering or you [14:39] know only the Lexus has [14:42] double [14:44] I'm not a car guy. I haven't owned a car [14:46] in like 30 years so if you can imag I [14:49] live in New York where [14:51] >> Well that might be a little hard. [14:53] >> Yeah, [14:54] >> but browsers were like that though, [14:56] right? [14:57] >> I mean IE was very uh very proprietary [15:00] with a lot of the things that they had [15:01] at that time. I I still remember [15:03] inheriting a a client's site that was [15:05] built specifically for IE and when you [15:07] looked at it in Netscape, it was [15:09] terrible. None of the effects worked and [15:10] and they were like [15:11] >> right [15:12] >> beside themselves as to why that was [15:14] happening and I had to explain. [15:15] Microsoft, you know, has this certain [15:18] stand thing that they do that [15:19] >> and Netscape did too. [15:20] >> Yeah. Yeah. [15:22] >> They introduced JavaScript [15:24] uh which wasn't standardized for at you [15:28] know Microsoft had JScript. They were [15:31] similar but worked differently. Finally, [15:33] ECMA ECMA engineering consortium of [15:39] Mid America. I have no idea. I I I'm [15:41] blanking on that too. But but ECMA, a [15:43] standards body like the W3C but older um [15:47] standardized [15:49] uh JavaScript which for a while because [15:52] we were pushing on standards so hard we [15:53] we'd call it ECMAScript. Um Glenn Davis [15:56] called it throat clearing script because [15:59] uh [16:01] I guess is what he was thinking. But [16:03] anyway, yeah. And and we would have [16:06] arguments with friends. Like I would [16:08] have a friend says, "Do you know how [16:09] much money I make by knowing the four [16:11] ways to make this website?" And I said, [16:13] "Yeah, but if the client's willing to [16:16] pay that, they're probably equally [16:18] willing to pay the same amount, but in [16:21] you make one version of the site and now [16:22] you have money for photography, for copy [16:25] editing, for, you know, proofreading. [16:28] you have uh illustration maybe like [16:31] there's so many things you can do with [16:33] that money besides make four versions of [16:35] the same boring website. Um Flash was [16:40] already coming out had just come out [16:42] too. So that was another sort of stream [16:45] in this chaos of how things were netting [16:48] out because people would say I just use [16:50] flash and flash was amazing in its [16:54] capabilities [16:56] but it wasn't accessible by default [16:59] and [17:01] I came in I think I started out of [17:05] laziness. [17:06] I'm not going to memorize these four [17:08] different ways to make a, you know, to [17:10] make a paragraph space correctly. I want [17:12] to have one way. I was thrilled by CSS [17:16] when I saw it in 1996. Microsoft made [17:18] this gallery and even though it wasn't [17:21] great CSS and it wasn't accurate [17:25] necessarily, it was still amazing. I [17:27] knew because we start, you know, when [17:30] people take all night to download a 300 [17:31] by 200 pixel video, they don't have a [17:34] lot of speed. So I knew that it was [17:36] really important to make you know to [17:38] respect bandwidth and [17:42] CSS did that. CSS you could fill the [17:46] page with green and then have giant red [17:49] letters and you could create a double [17:52] impression of the letters so that they [17:53] had a faint, you know, blue background [17:55] behind the red letters or what terrible. [17:58] You're probably picturing something [18:00] really ugly. [18:01] >> Something like I would have made in the [18:02] 90s. Exactly. And I made two and I made [18:06] in the 90s too. But also [18:09] a really good designer [18:12] could do amazing things with CSS. And I [18:15] set about becoming a good designer which [18:18] was you know so like the education and I [18:22] I if you started as a web master you [18:24] probably you know the same thing like [18:26] you knew some basic things about the [18:29] code. Now let's find out about [18:32] lettering. let's find out, you know, how [18:34] to lay out a page. Again, very limited [18:37] at the time because CSS wasn't a page [18:39] layout. [18:40] >> Yeah, [18:41] >> it was uh, you know, I want my headline, [18:46] my headline level one to be this big and [18:48] my headline level two to be that big. [18:52] >> And my link colors, that was a big thing [18:53] back in the day. I remember [18:56] >> David Seagull hated the blue link, blue [18:59] underlined link choice and said red [19:01] would be better because your eye [19:03] responds to red and you know where to [19:04] click there. I mean these are the kind [19:06] of weird conversations we had back then [19:08] like as if links could only be one color [19:10] but um CSS meant the links could be any [19:12] color and uh [19:17] you could actually start to use what [19:21] designers have known about for [19:23] centuries. You could, you know, use [19:25] color relationships just and size [19:28] relationships to communicate the meaning [19:31] of the document, you know, so that [19:34] people could tell uh this paragraph goes [19:37] with this subhead [19:39] because it's closer to it and there's [19:41] more space under this under the last [19:43] paragraph there before the next subhead. [19:45] could start to do what type designers, [19:48] I'm sorry, not what what typographers [19:52] and art directors have done again for [19:54] centuries and [19:57] create a a layout that showed you how it [20:02] worked so you didn't have to read [20:04] instructions because I don't know about [20:06] you, but didn't your first websites have [20:08] like [20:09] you utilize the navigation bar? click on [20:13] the navigation bar to find a topic or [20:16] you know [20:17] >> oh yeah [20:18] >> we stop we you know so we were stopping [20:20] having to do that it it evolved quickly [20:22] nowhere near as quickly as AI now [20:27] but the slowness [20:29] of the web standards movement was good [20:34] because we broke fewer things and we had [20:37] time to experiment with each thing and [20:39] go okay now we have this capability [20:42] what is it mean? And we would discover [20:44] all the bugs that the browser makers [20:46] didn't know about. Like if I atalicize [20:49] this word in IE for Windows, it pushes [20:52] through the the border of the containing [20:55] block and now the layout's broken. It's [20:58] broken because I atalicized something. I [21:00] can bold it, but I didn't want it bold. [21:02] I wanted itallic. What can I do? It was [21:05] just like, well, you could talk to the [21:07] browser maker. So, it started. I think [21:10] one of the things our movement was [21:11] successful in besides getting standards [21:14] into browsers was it started what now [21:17] goes on what should have always been [21:19] going on which is that designers and [21:20] developers work with standards bodies to [21:23] experiment to say here's what I can't do [21:26] why is it impossible to do a masonry [21:29] layout like like or why do I need [21:32] JavaScript to control how things lay [21:35] down on a page that's silly so I'm proud [21:39] of what we achieved and it was all of [21:41] us. It wasn't me. It was all of us. [21:42] Everybody in that group. You can go to [21:44] webstandards.org. It's still up. And you [21:47] view the history of who contributed [21:49] what. And after a few years, [21:52] Glenn and uh George left early [21:56] and I was like, well, somebody's got to [21:57] keep this going. And it felt like me. I [22:01] felt like it was like driving by and you [22:02] see a car crash and there's no hot [22:05] there's no ambulance. So, you park your [22:08] car, get out, and try to help the person [22:10] until an ambulance arrives. Uh, it was [22:13] like that. I was like, I'm not the most [22:15] qualified person to talk about web [22:16] standards. I barely know what I'm doing, [22:20] which was a benefit because that meant I [22:22] had to figure it out. So, I really [22:23] understood it and explain it in the [22:26] simplest language possible. And because [22:28] of my advertising background, I know you [22:30] don't sell features, you sell benefits. [22:33] Nobody cares about features. by make one [22:36] version of your site and it works [22:38] everywhere was a huge promise. [22:41] uh even blind people can use it if you [22:44] do this was a huge promise when people [22:47] said I sell televisions I don't have [22:49] blind users and be like yeah you do yeah [22:51] you do blind people buy things for their [22:54] family blind people use the web all the [22:56] time just like everybody else yeah you [22:58] do and there's blindness and then [23:00] there's all kinds of low vision you know [23:02] there's [23:03] >> you know again we started out with [23:04] really basic crude ideas of what we were [23:07] achieving and gradually we learned more [23:09] and more and We empowered the W3C. [23:13] In fact, [23:16] I haven't met Tim Berners Lee, but I met [23:19] um Hok Lee several times, the co-author, [23:24] co-creator of CSS, and uh he told me, [23:28] "We love what you're doing. We depend on [23:32] contributions from our members to exist. [23:35] So, if we say Microsoft, do this or [23:37] screw off, uh, that's not going to be [23:40] helpful. But if you do it and you say [23:43] you represent 200,000 developers who [23:45] have signed a petition, that's their [23:48] customer base. That's one of their [23:50] customer bases. [23:51] >> They have to work with agencies and [23:53] developers that make stuff for the end [23:56] users and for the companies that depend [23:59] on their software. So yeah, we were able [24:02] to and once I took over, I was able to [24:05] gent make the tone gentler and talk like [24:08] we're colleagues and I respect what you [24:10] do and I could never do what you do. I'm [24:12] talking to [24:14] people like um [24:16] Tantuk Chelik, [24:18] friend of mine, lives in San Francisco, [24:22] brilliant guy. Uh he was he made IE5 for [24:27] Mac. he made the the I forget the name [24:30] of the rendering engine, but it was the [24:32] first engine to really seriously try to [24:34] support a great deal of CSS accurately. [24:37] Um, I was talking to these much more [24:38] brilliant people than me just uh [24:42] I would listen to their brilliant [24:44] conversations that were sort of [24:45] abstract, theoretical, academic, [24:48] uh, to some degree or just expressed in [24:51] the language of academics and I would [24:53] go, they're trying to make it so this [24:55] will work for everyone. That's a good [24:57] thing. I just I just basically [24:59] translated the thoughts of smarter [25:02] people than me into [25:05] benefit oriented copy that you could [25:09] present to your boss when he said we [25:12] don't have time for that or we don't [25:13] have time for accessibility. So a lot of [25:15] it was persuasion. And then of course [25:17] once the standards were in the browsers [25:19] the last thing that we set out to do was [25:21] make designers want to use them. help [25:23] designers realize flash wasn't [25:26] necessarily going to stay around [25:28] forever. Flash could be made accessible [25:31] with a great deal of work because Adobe [25:33] cared about that or Macromedia cared [25:36] about that. [25:36] >> Yeah. [25:37] >> But uh [25:39] yeah, so I I'm and then I I quit so you [25:43] know younger people could take over and [25:46] new people could take over. I sort of [25:48] handed it over to um [25:52] I'm just going to be hitting my guest [25:53] like a sad old man who can't remember [25:55] people's names. Molly Hull and Aaron [25:58] Gustoson took over the the uh you know [26:02] one after the other took over the it [26:06] became more of an educational project [26:08] like get [26:09] >> you you know um we've convinced [26:12] designers to do this now how do they do [26:15] it and you know Molly had like 50 books [26:18] on that she'd written on HTML and she [26:22] was brilliant and I think [26:24] underappreciated [26:26] I hope that if there's ever a history of [26:28] this thing, it will, you know, [26:31] record the many and everyone I've [26:33] mentioned so far is like I don't know. I [26:36] feel like because I was the voice of it [26:39] for a while and because I wrote the book [26:41] designing with web standards, people [26:43] think that I somehow came up with this [26:45] stuff myself. I didn't. I was working [26:48] with many much smarter people and [26:51] basically just almost translating or [26:54] being an account executive, you know, uh [26:57] just [26:58] >> Yeah. [26:59] >> Well, that's the beauty of the web, [27:00] right? It's collaborative [27:02] >> and that's that's what I love about this [27:04] industry even today is that we we share [27:06] knowledge and it [27:08] >> I know I learned a lot from a list a [27:10] part. Um, and I think is was that kind [27:13] of the next step for you then to just [27:15] kind of bring in the educational [27:17] component because there were so many [27:19] great articles in there that showed you [27:21] exactly how to do something that was uh [27:24] standards compliant that because let's [27:27] face it, the educational system wasn't [27:29] really there in those days for web [27:30] designers. We all learned on our own, [27:33] >> right? [27:35] Absolutely. I think uh [27:39] so it came out of the newsletter [27:40] tradition of sharing knowledge. The [27:42] first thing I loved about the web [27:44] besides I could publish and nobody could [27:46] stop me [27:48] and if I did it right, people would [27:50] actually come and read or come and look [27:53] or download these little p background [27:55] patterns I made or something. You know, [27:57] I could make entertainments. [28:00] It appealed to the part of me that's an [28:02] artist, the part of me that's a writer, [28:04] the part of me [28:07] that [28:10] appreciates code, which and [28:14] you and back then you didn't have to be [28:16] great at any of those things. You just [28:18] had to be willing to put in the work. I [28:20] loved that. And I again I came out of [28:22] advertising where you could get fired if [28:24] you told if you went if you went out for [28:26] a beer with your friend who all worked [28:28] at another agency and they said, "Hey, [28:30] I'm pitching Pepsi." And you went, "Hey, [28:31] we're pitching Pepsi, too." You'd both [28:33] be fired. [28:34] >> You could never share any information. [28:36] And in the newsletters of the early web [28:39] design community, [28:41] people were sharing, "Here's how I use [28:44] JavaScript to do X." [28:47] uh CSS uh I'm you know Eric Meyer made a [28:50] te was another super important member of [28:53] web standards project made the acid test [28:56] for CSS even before there were browsers [28:59] supporting CSS he was making [29:02] you know today it would be an app but he [29:04] was making websites that would test how [29:06] compliant a browser was and [29:10] the immensity of that it was a lot it [29:12] was like it was like the open- source [29:14] movement we didn't call web standard [29:16] It's open source but it was the same in [29:19] that we were doing a bunch of work for [29:21] free. We were making tests and we were [29:23] writing articles and that still [29:25] continues and I just published a new [29:28] article in a list part today but I [29:30] publication has slowed way down there [29:32] for many reasons but smashing magazine [29:35] is publishes all the time CSS dis uh CSS [29:41] discuss [29:44] it's funny there's a CSS site that [29:47] everybody uses now there was a period [29:50] where I felt at list apart. We've said [29:52] enough about web standards now for a [29:55] while. Everybody's on board. Let's talk [29:58] about usability. Let's write about uh [30:01] user experience. How do we how do we [30:03] improve that? Let's talk about [30:05] copywriting for the web. Let's talk, you [30:07] know, all that. Let's talk about how do [30:09] we sell this to our clients? How do we [30:11] sell this to our internally? How do we [30:14] do product design on the So, I started [30:16] branching out. I said, I don't want to [30:18] be CSS trick of the week. That was it. I [30:20] said, I don't want to be CSS trick of [30:22] the week anymore because for a while it [30:24] was, you know, Dan Cedar Holmes, uh, [30:28] make a background that would last to the [30:30] bottom of the screen, even though that [30:31] was impossible in CSS. Douglas Bowman [30:34] was like, [30:35] >> give curved edges to a box, even though [30:37] CSS couldn't do that at the time, right? [30:40] Like here's [30:41] >> all the hacks, [30:42] >> all the all the hacks. um using sprites [30:46] for image image animation which was Dave [30:50] um [30:52] >> Dave who did the CSS garden. I apologize [30:54] Dave. I'm an old man. I forget people's [30:57] last names. I know who you are. I see [30:59] your face before me. 20 minutes from now [31:02] I'll blurt out your last name. I'm sorry [31:04] Dave. [31:04] >> Well if you remember everybody go ahead. [31:07] >> The CSS the CSSN gardens. [31:10] >> I remember that. Yeah. [31:11] >> Okay. Do you remember Dave the the guy [31:13] who wrote it created it? [31:15] >> I I remember visiting that site and just [31:18] playing around with it. But I do not [31:20] remember Dave himself [31:23] >> of all these things. That thing was [31:25] huge. [31:25] >> It was [31:26] >> people who didn't [31:27] >> people who weren't persuaded by the web [31:29] standards project saw that and went, [31:31] "Oh, I get it. [31:33] I don't have to recode all my content if [31:37] I redesign the layout of this website. [31:40] If I read his if my client changes brand [31:42] colors, I mean that stuff's obvious, but [31:45] if they say we're go we want a nature [31:46] theme for this issue, I can do that. [31:49] Like just the power of that even simple [31:52] CSS was pretty amazing. So [31:55] >> we'll have to link to that in the show [31:56] notes. And for those that don't haven't [31:57] ever visited that, it was a uh basically [32:00] you could you could click a link and [32:02] completely change the stylesheet for [32:04] that site and it would have a completely [32:06] different layout and look, color scheme, [32:08] fonts, all that stuff. It was like at [32:10] that time early 2000s I guess [32:12] >> early 2000s [32:14] >> it it was like a light bulb went off for [32:16] a lot of people at that time [32:19] >> and I found freelance collaborators too [32:21] like Mike Pic made this thing where [32:23] everything was he illustrated uh the [32:27] ground that you could walk on and [32:28] beneath it were like skeletons of [32:30] decaying dead animals and stuff and that [32:34] was the p that's what he did with the [32:35] page. He made a picture out of and like [32:40] I wor with he ended up um redesigning a [32:43] list apart several years ago. But just [32:46] you know the creativity they doesn't it [32:50] doesn't have to be boxes and arrows. It [32:52] doesn't have to be columns. [32:55] That's often very useful is great for a [32:58] lot of things. Great for newspapers. [32:59] Great for blog posts. But you don't have [33:02] to like CSS can pretty much do anything [33:05] now. And of course, it was very heavy [33:09] CSS back then if you wanted to do [33:11] because you had to catch so many images, [33:14] have images off screen that would [33:16] suddenly glide in, but you couldn't [33:19] control the the speed at which things [33:21] loaded. So it might take two minutes for [33:23] your page to show up for somebody with a [33:25] slow access before they could see them. [33:27] Now we have control over all those [33:29] things. [33:30] I'm going to preload [33:33] when the user goes to the homepage. I'm [33:35] going to preload the top three articles [33:37] on the homepage in the background so [33:39] that when if they click through it'll [33:41] just happen. But we figured all that [33:43] stuff out. We had 20 or 30 years to [33:45] figure all that stuff out. [33:47] >> Yeah. [33:47] >> And of course now we're Yeah. Go ahead. [33:49] >> I was going to say the web would not be [33:51] where it is today. I mean, just the [33:54] ability to to do all these things all in [33:58] a browser without plugins, you know, we [34:00] don't need to download Flash. We don't [34:02] need to bring anything special. Just [34:04] bring your browser. No matter which one [34:05] you're using. [34:07] >> No matter which one you're using [34:09] >> or if you're not using Yeah. [34:11] >> Yeah. Or bring links and it'll still [34:15] work and you'll still be able to [34:17] navigate. like that was those things [34:19] were really we still struggle. [34:22] Accessibility is still an afterthought [34:24] for so many businesses which is tragic [34:27] and foolish [34:29] but so we I got tired of doing that [34:32] fighting right but but we still have to [34:35] do that fighting in a nice way. [34:40] >> Yeah. I see it in my business every day. [34:42] >> It's something that you have to educate [34:44] on. [34:46] >> What do you do now? Well, I besides [34:48] this, [34:48] >> well, I am a freelance developer. I've [34:50] been doing this for, you know, 30 years [34:52] now. This is my 27th year on my own. [34:56] I've worked at home for 27 years, so I [34:58] don't want to leave the house, but [35:01] >> I know the feeling. [35:02] >> But yeah, I mean, so I I I still run [35:04] into it. Um, what the wise of [35:07] accessibility. Well, this is our color. [35:09] We can't change our color. Well, if you [35:11] want it as a background, you probably [35:13] should because otherwise people can't [35:14] read it and you might get sued, [35:15] >> right? That still happens. [35:18] >> This concludes part one of my [35:20] conversation with Jeffrey Zeldman. Be [35:22] sure to check out our next episode when [35:24] Jeffree talks about his role at [35:26] Automatic and his thoughts on the future [35:28] of the open web. In the meantime, visit [35:31] us at the wpmin.com/subscribe [35:34] to receive our newsletter and support [35:36] the work we do at the WP Minute. Thanks, [35:39] and we'll see you again next