Transcript

Paul Ford Hi! You’re listening to Track Changes, the podcast of Postlight, a digital products studio at 101 5th Avenue in New York City. My name is Paul Ford and I am the co-founder of Postlight and I am joined by the other co-founder.

Rich Ziade Rich Ziade. Hello. Hi, Paul [music fades out].

PF Hey! Rich, you used to build websites before you were a big time co-founder at a digital products studio.

RZ By ‘build’ if you mean Microsoft Frontpage [sure, sure]. Yes, I built websites in the past.

PF What was the Adobe one?

RZ Oh. Dreamweaver.

PF Yeah, I wove a lot of dreams. Now, this is actually a lie, everybody—

RZ We shouldn’t mock these things. I think some of them are still around.

PF They’re probably clients and [Rich laughs] and we still do build websites, we just don’t get to build them as much as we used to. But we’re still in the code a lot.

RZ Tell me about Postlight.

PF [Chuckles] I will. Postlight is a company that builds websites, web apps, mobile apps, mobile web apps, all of those things. And we build the platforms that power them. So, there are three things that go into the modern web, Rich.

RZ Talk to me.

PF HTML which nobody talks about anymore but they used to. Used to talk about it all the time.

RZ Yeah.

PF Javascript which has become a giant, insane monstrosity that everyone is trying to wrestle and control.

RZ And which seems to have swallowed HTML.

PF It swallowed the universe. It swallowed the world of programming. We’re all just trying to live with Javascript at this point.

RZ Yeah. Separate episode.

[1:40]

PF And then there’s a third part, a third major part, there’s lots—lots and lots of things that go into the modern web, that’s CSS for Cascading Style Sheets.

RZ It’s soothing. The name is soothing.

PF They’ve been around since, I think, 1996 or so. They’ve been around for awhile, early web technology. Now makes things sing and dance and does all sorts of stuff [right]. And there a few people, not as many as you’d expect—given at how prevalent it is—there are few true experts around CSS.

RZ It’s a handful. And the person we’ve got today, I’ve seen his name bounced around for probably ten years now, almost.

PF Yeah, this is one of the people who is as fully aware and one of the most of this part of the web and one of the sort of most experienced practitioners and communicators around CSS and his name is Eric Meyer. Eric, thank you for coming on Track Changes.

Eric Meyer I am honored to be here. Thanks for having me.

PF Ok. You’ve got HTML on one side, Javascript on the other, and in the middle there’s this thing called CSS, Cascading Style Sheets, what does it actually do?

EM Cascading Style Sheets are the clothes you put on the body of your website. Which is a little—I just had an in-joke there for the technical people in the room cuz the body—

PF Ah! Cuz the body tag!

EM Right!

RZ Oh boy.

PF Ooooooh! [Sounding like robot shutting down, pitching down as it continues]

RZ Ay yay yay.

EM Ugh, exactly. But like way back in the day—

PF My head hurts.

[3:01]

EM If you wanted to—like your presentation was all in your HTML markup and so if you wanted to change the way the page looked you had to literally restructure the page—

PF Font size!

EM Right well it was kinda like saying, “I wanna change my look, I need to go for surgery.”

PF Mm hmm.

EM CSS is, “I’d like to change my look, I will buy a new outfit, I will put on clothes but I will not have to like literally structurally change myself.”

PF So tell me just like one or two things you can do with CSS for people who aren’t familiar with it.

EM Man! I mean. One or two hundred things?

PF Well, sure, but I mean I’ll give an example then you give one. One would be like there are standard sizes for a headline and standard fonts for a headline built into your browser. CSS let’s you say, “Make the headline really big, make it red, make it a totally different font, and maybe even like make it spin in and rotate.” That’s—that’s happened over the last few years.

EM Yup. Those are things you can do. You can take a thing and move it to one side so the rest of the text flows around it. I mean you can layout the whole page. We’ve got new specifications coming online just now to literally take all the pieces of your page and lay them out almost however you want. Or we’re not quite to perfection but we’re getting there. Yeah there’s ways of setting up stuff in the background, so like all those cool parallax scrolling websites that you see where everything’s scrolls at a different rate and as you scroll past an ad it looks like you—there’s this window that’s sort of like looking on a thing off in the distance. That’s all CSS.

PF You know I think it’s worth emphasizing for people like HTML is fairly straightforward to learn, especially as you’re just getting started [right] and there’s lots of little edge cases. And really the same is true of CSS, there’s an enormous body of learned knowledge but you can get the very basics down in a couple hours and [yeah]—

RZ And then there’s the deep craft, all the way through.

PF And then there’s the deep craft. And then on the other side is Javascript which you can get started with but the reality is programming is hard and it’s hard to do meaningful work quickly.

EM Yeah.

[5:03]

PF And so these are real enabling technologies.

EM Yeah and they’re designed on purpose to be as author-friendly as possible.

PF Got it.

EM Which doesn’t mean they’re always completely transparent and intuitive but one of the core directives is to make them author-friendly, make them human-readable. So when you’re writing CSS you don’t have to like know assembly language or whatever. It’s things like element name: color red. Which turns the element red, strangely enough, right? Or you know this font size or this font face to set the typography. And one of the interesting things with CSS Grid is actually one of these new layout languages. For a long time, CSS layout was really hard because we were using stuff that was never designed for layout to do layout and it was like incredibly fragile and difficult to work with until you sort of internalized the way everything worked. You know, it was like trying to build a pattern out of various colored bars of soap floating in a bathtub.

PF Mm hmm.

EM And Grid is actually really it’s almost astonishly straightforward. And it’s interesting people who know how to layout CSS—sort of the what we will now start to think of as the old way with all the weirdness and the hacks—when you show them Grid they’re like, “Ok, that’s cool but where’s the rest of it?”

PF Sure! [Rich chuckles]

EM Like, “Where’s the stuff you’re not showing me? The difficult thing?” And you’re just like, “No, it’s actually this simple. That is literally all that I did.” And some people—I’ve been training with people where they’ve said, “Wait, you’re gonna have to do that again because I have to have missed something.” [Rich chuckles] “Ok, we’ll do it again.” So, right? That’s always been that drive to get as close to, you know, literally being able to sit someone down and within the day have them be able to do a basic layout and have the typeface look nice and the colors and the backgrounds look good and, you know, they’re not gonna get all of CSS in a day. There’s too much of it. But hopefully they don’t have to spend weeks and weeks just trying to figure out one component of it because—like layout used to be because the layout component was taking things that were never meant for layout and forcing them to that purpose because there was just nothing better.

PF And your job as a writer and speaker is to really bring people into this world and give them some tools for thinking about and understanding what they’re using when they use CSS.

[7:25]

EM Yeah. That—I mean that’s what I try to do in books and articles and tweets for that matter. I mean, occasionally I’ll come across a really cool bit of CSS that does this amazing thing and it’s like this will literally fit in a tweet. I’m just gonna put it out there.

PF Tell us what you do all day! As a CSS, I think guru is fair.

EM Ay!

PF Ha ha!

EM Eh eh. Yeah. Eh. Labels are—

PF Alright, let’s retract that: as a practitioner of the web who is a teacher of CSS, what do you do all day?

EM So actually a lot of what I do during the day is managing a company which runs An Event Apart which is a web design development UX kind of conference series that I co-founded with Jeffrey Zeldman but when it comes to the CSS, a surprising amount of what I do when I’m working with CSS is building test pages to figure out if I understand the specifications I’m reading. Which I’ve been doing for long enough now that most of the time I do but not always. Sometimes, you know, I’ll read through a specification or I’ll read an article describing something and I’ll say, “I totally get this! I will create an example for myself.” And I create the example and it fails utterly and so I have to go back [chuckles] and figure out what I got wrong.

PF Hey, I think for our audience, it’d be really good if you explained kinda what a specification is and where it comes from.

EM Yeah, so the World Wide Web Consortium, the W3C, generates specifications. It’s most of what they generate, at least from my perspective. They have a variety of Working Groups. So there’s a CSS Working Group; there’s an HTML Working Group; there’s, you know, this Working Group—they have a lot of Working Groups now. So the CSS Working Group will produce a specification which is a document that says, you know, “Here are the things that this specification is intended to address. Here are the pieces of CSS that are defined here and what they’re supposed to do.” So color is an easy one. Most people grasp color. So there’s a color and background specification and one part of it says, “Ok, if you wanna set the color of text, here’s a property called color and it takes these kinds of values.” And then later on it says, you know, “If you wanna set a background on a piece of a webpage, here’s all the ways that you can do that.” And so I mean specifications are really written for the people who create web browsers. I mean that’s at the core who they’re for.

PF And who gets to be on the Working Group?

[9:57]

EM So, if your organization is a W3C member, which is not cheap, but it, you know, if you’re Adobe or Microsoft or Google or one of those guys, you can be a W3C member, and then you can send representatives to any Working Group you like. So, if you’re Apple and you’re creating web browsers, you can send people to CSS Working Group or the HTML Working Group or whatever. Now Working Groups can also invite experts. I actually was an official invited expert with a CSS Working Group for a number of years. I gave it up when I just didn’t have time to keep up with it but there are independent folks who can be members of the Working Group and sort of be part of the discussions as to what should a specification do or not do—

PF So, it’s sort of like the corporate equivalent of academia.

EM Kinda. Yeah. I’ll go with that.

RZ Eric, it sou—This is Rich, how are you?

EM Hey.

RZ It sounds to me like one of the goals of the Working Group is to have an independent body that allows—or actually enforces the idea that the various browsers and the various implementations stay in sync. Otherwise, everybody would sort of run in their own direction.

EM That’s a lovely ideal.

RZ Right.

EM And in some Working Groups that is the case. There are other Working Groups where that has not been the case, unfortunately.

RZ They just can’t agree.

EM Yeah or it becomes a technology that implementers aren’t interested in implementing. There are various reasons why a Working Group can sort of fall apart.

PF Well there is a great—Both Rich and I were XML heads in the 2000s [uh huh] and there was a huge swathe of standards that really just never found a place like XLink.

RZ Yeah.

PF Things like that where it’s like they’re useful; they show up, you know, it was a way to kind of like smarten up linking between documents and notes [yeah] and it seemed like it was a great abstract idea but nobody too motivated to really implement it.

[12:00]

RZ Yeah, well a lot of it was just in a fantasy world and not grounded in reality at all.

PF I mean a lot of it came out of old hypertext thinking and sort of old systems that people were like, “It’s not a real hypertext system unless it does this.”

RZ Now, there was a pretty dark time, if you were a web developer, in, gosh, I don’t know when I’m gonna peg this, probably late 1990s into the early 2000s when if you wanted to create a website that worked pretty much consistently across browsers, it was a job. You had to sometimes fork off and say, “Oh I’m in browser X, so I have to do it this way.” It was a mess. The web development was a lot of work just to get the thing to look right in the various places.

PF I think Eric was a light in the darkness at that moment.

RZ Yeah!

PF Remember that.

RZ Yeah, yeah, Eric if you could talk about sort of the reaction to all that misalignment.

EM Yeah so late nineties, I think is where this really got to be a problem, and you’re right, it used to be websites you would go to, you know, website.com or whatever and the homepage would be effectively a splash page that would say, “Hi! Thanks for being here, please click on the icon of the web browser you’re actually using because we built this site twice: once for Internet Explorer and once for Netscape Navigator,” because they were so incompatible that we literally—I mean, yes, you could create a website that worked in all browsers but it was a very limited experience and like, you know, so—yeah, it was a job because you had to do the job twice, in a lot of cases. And so the Web Standards Project which I did not start, I was involved in early but a number of people like Jeffrey Zeldman, Tim Bray, Glenn Davis from Project Cool, I know Jeffrey Veen was in there and other people that I’m forgetting and I will be embarrassed later when I realized who I didn’t mention but anyway they sort of got together and said, “This is ludicrous. This is like trying to film TV shows where you have to film the show once for Panasonic TVs and once for Sony TVs. This is stupid and we need to push the browser makers to actually become compatible instead of compeltely incompatible.” So, it was a community effort which pretty much everyone else outside of it, in the rest of the community, said would never work but it did. It too awhile. But it did and I think to a large extent that’s because there were people inside the actual browser teams at Netscape or Internet Explorer who agreed with Web Standards Project, they did not want their browser to be completely incompatible with other web browsers and so they were able to use this external group to say, “Hey, we’re getting back PR,” like internally cuz they were getting bad PR and, “Let’s do better.” And Working Groups did become a place where implementers could come together and work things out, rather than never talk to each other and just do whatever the hell they felt like.

[14:52]

PF There was a moral component too which is that a lot of the conversation at that point, if I remember, was about accessibility and about making pages that different systems could read, rather than just for visual display in a web browser. So, if you had limited vision, you could—it could work with a screen reader—

RZ Screen reader, right.

PF And things like that. And I’m curious to know, Eric, what’s your perspective on the accessibility discussion today? Right? Like that was a big deal and it kinda moved forward and now I feel that we’re in a world of single-page web apps that aren’t as focused on being available to all as they used to be.

EM Yeah, I think that’s fair. And some of it has to do with what you mentioned at the top of the podcast which, you know, Javascript eating the world. Javascript driven websites and web apps don’t have to be inaccessible but it’s really easy to make them inaccessible. And if you’re not thinking about it and unfortunately it’s something that a lot of people don’t think about either because they were never told that they needed to or because at some point they decided, “Oh, that’s too hard, I’m too busy trying to ship early, ship often, and I don’t wanna think about that. You know, those are edge cases. I’m designing for the 90 percent not the 10 percent,” which is, I mean, it’s great for the 90 percent but it’s really not great for the 10 percent. And it strikes me as a strangely self-limiting move. It’s sort of like saying, “I’m fine with only reaching some percentage of the people I could reach rather than reaching as many people as possible with whatever I’m creating.” I think, yeah, I mean you’re right: accessibility kinda goes through these cycles. It was a big push back then and everyone seemed to get it and now we’ve cycled back to there needs to be a big push. Fortunately, toolmakers are usually more aware. So it’s not as bad as it could be [mm hmm] but Javascript frameworks tend not to, in my experience, tend not to put any emphasis at all and so people who just use a Javascript framework to spool up something really quickly a lot of times, like, there’s no built in guide posts to say, “Hey, you should be thinking about this.”

PF It seems to come much later, right? I mean, you know, I don’t even know what the status of React accessibility is out of the box.

EM Right. I’m pretty sure that things like React endnote accessibility, when those projects got off the ground, were close to nonexistent. And there’s been a lot of work to bring that back in some projects. I don’t wanna name specific names because it’s honestly not an area that I’m super familiar with but I mean this is sort of the tragedy is that there’s this perception that, “Ok, well we’ll spin something up quickly and then we’ll do the work to add the accessibility later.” When the web by its fundamental nature is completely accessible. You actually have to work to make it inaccessible. And the last 25—20 to 25 years of web development effort seems to have been one like long, extended, recurring story of trying to mess up the fundamental accessibility of the web in as many ways as we could think of.

[18:03]

PF Don’t you think that that—that ever since Javascript showed up that paradox has been kind of inherent, right? Where it’s a tremendously effective, easy to publish document delivery platform . . . and I feel that like the accessibility story landed there and that people are still making roughly like—if you use WordPress, you’re reaching an audience that’s getting roughly accessible web pages, I think for the most part. And if you’re using, you know, a pretty standard common template. And then it splits off into this world of sort of very stateful applications that have much less to do with documents. They might display documents from time to time.

RZ I think that’s the—that’s the rub, right? It’s become an app delivery platform.

PF It’s software delivery and the priority hasn’t been on access in the same way that it was around documents.

EM Yeah and I don’t—I’m not comfortable just blaming Javascript because Flash did the same thing.

PF Right, right, of course.

EM Before Javascript was really useable for this sort of stuff. But—

PF Well, Javascript can be accessible, it’s not—it’s the—it really is—it’s a tool.

EM Yes.

PF It’s a tool and the culture is less about delivering meaning and knowledge and more about the specific kind of experience. I think like we’re working that out as a culture it’s probably gonna be another 25 years.

EM Sadly, yes. Because yes, you can use Javascript to deliver stuff that is completely accessible but most of the time, unfortunately, people don’t. They don’t think about this. The Javascript ends up being a way to just span out a bunch of class divs or spans or something. And then CSS is used to take that completely undifferentiated soup of stuff and make it look pretty. Rather than actually thinking about, “Hey, what kind of markup structure should this be represented by because once the Javascript constructs it into a document—” It, you know, even if you’ve got a quote/unquote “web app” it’s still a document. It’s still HTML and CSS and Javascript. There’s still a document tree that represents all these pieces. It’s just there are a lot of—

RZ Just dancing now [chuckles].

[20:04]

EM Yeah, I know. I’m trying not to get too technical but it’s—you can do it in a way—Well, someone who’s used Microsoft Word a fair amount probably knows there’s a little style bar where you can say, “This is a heading and this is a paragraph,” right? Or you can just literally type all your text and then you can drag select stuff and directly change the font size and the boldfacing, right? So that everything is a paragraph, it’s just you happen to have formatted different paragraphs different ways. Or you can do it structurally so that headings are headings and so on, right? Things like that.

PF Sure.

EM You can basically do that with HTML. You can have everything be the same thing and you just like slapped presentation on it and there’s no way to differentiate on the backend what the difference is or you can structure them. And you can do the same thing if you’re using Javascript to construct your pages. You can use those two approaches. And a lot of people use the undifferentiated soup approach rather than the structural approach.

RZ So we jumped around a bit.

EM We did.

RZ We talked about the late 90s where things were a mess and then how this movement got everything, not everything, but everybody lined up against standards that took hold. Talk a little bit about the last ten years and what you’ve seen happen. What’s gotten better; what’s gotten worse.

EM So, in terms of standards, pretty much everything’s gotten better. And I don’t just mean new standards, I mean standards compatibility. So, today we have situations where one browser will support a CSS thing and another browser doesn’t for awhile. Or you have two browsers that are implementing the same thing, sort of what’s called behind a flag. Sort of doing it in a private preview way. And they’re not quite the same but the thing is then everyone realizes they’re not the same and then the Chrome team and the Firefox team or the Chrome team or whoever it is they work to be consistent with each other and they go back to the Working Group and say, “Hey, we did it this, they did it this way. Both interpretations of this specification are reasonable but we need to know which one is correct so we know who has to fix what they’re doing.

RZ So there’s just implicit cooperation.

[22:16]

EM Yeah! Yeah they’re really is this cooperation. I liken it to, you know, word processors don’t compete on what file format they store the document in, generally. Like they can all read each other’s document formats. They compete on making it easy to do a thing. Or, you know, what features they offer, right? And browsers are the same and say, “Hey, we’ve got these technologies and we have these things that you can do. Our Javascript engine is this fast as compared to everybody else’s or our CSS is as capable as compared to everybody else’s but where we’ve done something that other people do—” They’re all consistent. It’s—like if you’ve been doing this—I’ve actually been doing this for more than 20 years now. If you came from that era, everything that’s going on, like the little inconsistencies are just like the most min—they seem like the most minor [chuckles] things.

RZ Right.

EM Right? Nobody has to do the click here if you’re using Chrome, click here if you’re using Safari. They don’t have to and almost nobody does. About the only place you ever see that is if somebody spools up like a really cutting edge experimental site, you know, it’s like, “This is a browser that just got web VR, you know, OpenGL support and nobody else has it yet but I totally wanna do this so I’m gonna put up the site and then for other browsers that haven’t done OpenGL yet it’s just gonna say, ‘Hey you, you need an OpenGL supporting our web 3D or our web VR or whatever you’ve created in a web browser.’” But they’re not looking at the browser and saying, “Oh, this is a browser I don’t recognize, you go away.” It just says, “Hey, you need this technology,” and if you don’t have it then you’ll get this little warning page and if you do have it then, “Come right in and enjoy this thing that I built.” So, yeah that’s been the biggest change, I think. And it’s been one of the biggest stories of the last ten years is that all these implementers working effectively together, you know, they don’t share code necessarily but they work together to figure out like, “How should we be doing this stuff.” You know and, “When we conflict, who’s right, who’s wrong,” and, “Let’s get that codified into the specifications.” The downside has been the stuff that we talked about with the Javascript, right? Javascript engines got so fast so quickly. It used to be that Javascript was a joke for many reasons, one of which was that if you tried to do stuff in a browser in Javascript it would take forever for it to finish. And now like people have used Javascript to completely recreate old school first person shooter 3D games just in a web browser.

RZ That’s incredible.

EM Right?

PF Right.

[24:42]

EM The speed at which Javascript engines have advanced like way outstrips CPU speeds or anything else. Just so much effort has been poured into that and so that has lured a lot of people into, “Oh, well I can create this whole thing I’m doing out of Javascript and I don’t have to think about the markup.” Even though they really should because not thinking about the markup means that there’s some set of users out there who are not getting the information and that’s—that’s kinda—it’s falling into the Flash trap. Right? That’s what Flash was. Flash was there’s this thing that promises that it will be exactly the same everybody but if you don’t have it or we didn’t go to the effort of thinking about accessibility then the door is shut. There’s no way to get at this stuff. And the web was designed from its outset to be ubiquitous. The web prizes ubiquity over consistency, right? It may not look the same in every situation but you get the content, you get the information that’s in a form that you understand. And Flash and in some cases Javascript development can go completely the other way. They try to prize consistency over ubiquity.

PF Has the growth of mobile as a platform been good or bad for the world of Cascading Style Sheets?

EM I think it’s been good. There have been a number of things that have come out of what mobile needs that desktop never really did. Media queries is a good example and the whole responsive web design movement that came out of that.

PF So tell us what are media queries and actually what is responsive web design?

EM So, a media query is a way of saying in your CSS, in your style sheet: “For these kinds of display situations, use these styles and then for these other ones, use these styles,” so at a very basic level—this is not exactly how you would do this technically but at a basic level it’s the, “Here’s my mobile stylesheet and here’s my desktop style sheet.” Usually media queries are more finegraded than that but we’ll go with that for now. So that the cool website that you have with the header across the top and the content column and the sidebar and everything on a desktop machine becomes a single column page on a mobile app with a little bit bigger text so that people can read it while they’re on the subway or the bus or whatever.

PF So depending on which platform I’m on, I get different CSS that makes the same HTML content look appropriate to the device that I’m looking at or holding in my hand.

EM Right. And it’s not exactly the platform you’re on, it’s the sort of display environment you have.

PF Mm hmm. Ok.

EM Cuz when we say depending on the kind of platform you have that sounds like, “Here’s an Android style sheet, here’s an iPhone style sheet, and here’s a this style—” And it’s not that, it’s the, “If you have a smaller screen in vertical mode, then do these kinds of styles, and if you have a smaller screen in horizontal mode, you can do these slightly different styles and then if it’s a tablet sized screen, it doesn’t matter who made the tablet, it’s just these are the kinds of styles we’re gonna give you because we can do different things in a tablet format than we can in a phone format. And if it’s desktop we can do size kinda deal we can do the other things.” I mean you can ramp it up to the point of: “And if you’re putting this up on a TV that has, you know, a zillion pixels then we can do this other thing.” So, yes, that’s what a media query and responsive web design is—

PF Or printing! Printing as well. Like paper.

[28:02]

EM Yes. Although printing gets very little consideration these days, sadly.

PF I spent many, many a day thinking about the printy style sheet [yeah] but—

RZ Yeah.

PF Nobody—I haven’t heard print style sheets mentioned in about 15 years.

RZ It’s just not priority.

PF Who’s printing web pages these days?

RZ Who’s printing these days?

PF It’s true.

EM Right. And so we don’t really think about it but responsive web design is the practice of thinking about all of those display environments and actually writing the style sheets and media queries to do that. Before responsive web design we didn’t really do that. People were actually starting to go towards the click here for mobile, click here for desktop which was completely a throwback to click here for Internet Explorer, click here for Netscape Navigator. Then responsive web design was, “Wait, we can take the same content, rather than having a completely separate for mobile and a separate website for desktop, we can have the same content sent to everybody and just the way it’s presented changes based on the parameters of their current environment.”

RZ From what we’ve seen, the term and the concept around responsive has lept over to the business side.

EM Yeah!

RZ We get people who are nontechnical and I think this has been the case for a few years now, say, “Hey, you know, we need a new x and we need to make sure it’s responsive.” Like that’s—they’ve gone ahead and read that article [yup] to understand the value of it and to understand—

[29:22]

PF I think they also had the custom app built, you know, eight years ago and—

RZ Yeah, a lot of people have stepped in shit to get to where they need to be.

PF And then four years later you’re like, “What do we do with this atrocity?”

RZ Yeah, yeah.

EM Well and they might not have even read the article so much as seen the TV commercial where some, you know, Esurance or I think I remember Esurance was like, “Our new responsive website,” right?

PF Hmm!

RZ Did they say that on TV?

EM So if you’re on the business side and you see one of your competitors bragging about their new responsive website, you’re gonna go into the office the next day and say, “Do we have one of those? Why don’t we have one of those? We need a responsive thing.”

RZ Also—

PF Insurance needs something. They gotta get out there.

EM Yeah.

RZ Well the word responsive has—it’s almost like you’re saying, “This is gonna be a much more empathetic experience than [laughs] [yeah] you’re used to.” Without knowing definition, it sort of resonates in a weird way.

EM Yeah, no, it was a brilliant piece of labelling. Ethan Marcotte, that’s actually the one who applied that label. And it’s kind of like Ajax—

RZ He should’ve trademarked that, he should’ve said—

EM If you remember Ajax back in the day.

PF Mm hmm!

RZ Oh yeah!

EM Right?

[30:22]

RZ Ajax is kinda gone now, right?

EM Well, I mean [you still hear it] most of these progressive web apps and web apps—you know quote/unquote “web apps” that are—they’re actually using Ajax we just don’t ever call it that anymore [yeah]. But the thing about Ajax was those technologies have been lying around were usable for like three or four years before Jesse James Garrett coined the term Ajax.

RZ Yeah. Inner HTML, I remember.

EM Right?

PF Yeah—

RZ It was a way to sort of—

EM HTML, HTTP request or—

PF It was—no,  it was a specific Microsoft call to—with XML in it. It was like Remote XML Request or something like that.

EM Right but then like Netscape was supporting it. You could use it [right] but—

PF That was the ‘x’ in Ajax.

EM Right and it didn’t have a term.

PF That’s right.

EM That resonated and Jesse James Garrett said—wrote his article that’s like, “We call is Ajax,” and everyone’s like, “We must do Ajax.” And it was kind of the same with Ethan. It wasn’t that same buildup. But there were—those of us who were in CSS had been talking about media queries for a year or so maybe. And then Ethan was just—he published this article and said, “Responsive Web Design,” and you’re right, I mean that word it just—it resonates.

RZ It didn’t sound technical, it didn’t sound—

EM Yeah.

RZ Yeah.

EM Totally.

[31:38]

RZ He shoulda trademarked it.

EM Yeah.

RZ You know the Crossfit guy?

EM Right.

RZ He doesn’t do anything. He just—you pay I think like six grand and you can use the term Crossfit because he’s taken control of the term.

PF I hope to—I imagining he does Crossfit.

RZ He’s actually—he’s not in great shape. [Paul groans] I’ve seen him. [Eric giggles] So, here’s a funny thing: all you get is the right to use the name.

PF So you—

RZ He’s got 70 lawyers.

PF And you go out and buy a big tire.

RZ You can do whatever you want! He’s really not policing it. He doesn’t have a logo, he doesn’t have anything but if you wanna use the name Crossfit and you don’t wanna be sued, you give him six grand. It’s like a racket.

PF So wait, can we open up Crossfit Ice Cream?

RZ I think that’s gonna fall outside the domain he’s goin’ after but Ethan shoulda done this.

EM Yeah—

PF Ethan shoulda done Crossfit?

RZ [Laughs] He shoulda done Responsive and put a little [no, no] ™ next to it.

PF Put it into the world. Put it into the world.

[32:28]

RZ I’m being slightly silly but it was a stroke of brilliance.

EM It was a stroke of brilliance and here’s the thing: Ethan, like many of us in the field, is not—I mean is somebody who—the only reason that he would’ve trademarked it was to make sure nobody could do that thing that you just described.

RZ Right.

EM Right? He only would’ve done it defensively. Like stuff I’ve created and, you know, many other people have created and we just like literally—like when I created a CSS reset which we don’t probably wanna get into the technical details but it’s a way of sort of levelling the playing field across browsers when you’re starting out with your CSS. I explicitly had to give it a public domain license because people would write me and ask, “Hey, what are the licensing terms on this?” I was like, “What are you talking about licensing terms?!?” It’s like two dozen lines of CSS. This is not [Rich laughs]—this is not a thing that anyone should be able to patent.

PF No, but the boss will tell ya. No, I’ve met Ethan a few times and I would say predatory business man are not the two—

RZ That’s not in his mindset? [Laughs]

PF Not really where I’d put him.

EM No.

RZ I wanna come up with one. I wanna come up with like Compassionate Nav Bar or something.

PF And then trademark it.

RZ Forget the trademark, I just wanna write that article that’s like, “Oooooh!” Everybody pauses [laughs].

PF Crossfit Style Sheet [laughter].

RZ Yeah, I mean so we’ve talked about—we sorta drew a little timeline, it’s a big timeline uh since the web kinda got—

PF It’s a quarter century!

[33:51]

RZ That’s depressing and exciting all at once [laughs].

PF No, I mean it’s not crazy that in a quarter century and like a new platform emerged that billions of people have access to and that more and more people are having—I mean it’s—

RZ Yeah, no doubt. And—

PF It’s pretty good.

RZ It’s actually—you know what’s great is that we got the house in order within a few years. Like people had the foresight to see, “Ok this is going in a bad way, there are standards out there but commercial motivations has everybody sorta hiding and doing their own thing, and if we sync it up it’s gonna be that much more valuable to everyone,” and that happened five, six years out. Rather than [yeah]—Otherwise, it woulda just—they would’ve gotten even more entrenched in the commercial—

PF A diplomatic instinct took over—

RZ Very early!

PF Given the early players like Microsoft which was not a diplomatic company by anybody’s definition [that’s right, that’s right]. That was a very positive outcome, it’s easy to remember cuz back in the moment and even now you’re just like, “Woof, boy, you know?” Everybody was fightin’ for their share. But sooner or later a kind of easing took place and people were like, “This really should be for everybody.”

RZ And you could see that the advancement that happened after that, we positioned ourselves so that we could continue to grow and advance and make things more and more sophisticated.

PF If the web had been locked down, we would not be as far along as we are now. I think that’s really obvious.

RZ We could get into a debate about what’s happened in terms of the app ecosystems and multiple stores—by stores I mean places to shop for apps in multiple platforms is almost a step back in a way but that’s us just getting sentimental about the web.

PF Yeah, let’s not talk about—

RZ Let’s not do that. I’m gonna get misty.

[35:32]

PF We’ve got Eric on the line here, let’s not waste our opportunity.

RZ Eric! Where are things going? We’ve gotten to here. The web’s incredibly sophisticated at this point, where are things headed and what’s in danger? Lemme ask both of those at the same time.

EM Well. That is a good [laughing] question. I mean where we’re going, at least from a standards perspective, I expect more of the same that we’ve seen in the last several years which is figuring out what developers want, what designers what, you know, what authors want. And delivering more of that in a universally compatible way. As an example, people are getting super excited about augmented reality recently [mm hmm]. I would expect W3C augmented reality effort [interesting] to, you know, I’m—they probably got one going already but that one that takes the best practices and codefies them. See the W3C when it started out had to be, by its nature, “Let’s try to guess what people want and then write down how to do that,” and in a lot of ways it’s shifted more towards, “Let’s see what people want. You know float out a trial specification with some trial implementations, see if that works out, and if it doesn’t, adjust. And then eventually get to the point of write down what people did.” Which is more what industry groups like the IEEE [pronounced ‘i’ triple ‘e’, Institute of Electrical and Electronics Engineers ] does. It’s more of a write down what people did rather than write down what people want to do.

PF That’s true, the web is no longer as prescriptive in the standards as much as descriptive of overall practice [yeah]. And that’s very different than the way it used to be.

EM Yeah, I mean, like I say when it started out it had to be that way because hardly anyone was using it, so the Working Groups had to guess. Like if they just wrote down what people did, there was hardly anything to write down [chuckles].

RZ Right, sure.

EM So it shifted and there’s a little bit of prescriptiveness but it’s not nearly the way it used to be.

PF I’m trying to think of augmented reality CSS and all I can think is that you’ll be able to add padding to a room [Rich laughs].

EM Cool.

RZ Make your house a little bit bigger.

[37:40]

EM Yeah and I don’t know that CSS will necessarily be the heart of augmented reality, I think it might be, it might be used to describe the little modules that pop up.

PF Mm hmm.

EM In your augmented reality but then again, maybe not, I don’t know. It’ll sort of depend on what the people who are working in augmented reality sort of discover that they need. Like do they need a way to create themes for their—the little panels that pop up? And if so, maybe style sheets are the easiest way to make that happen. And if not then not.

RZ I wanna close with a question: tell me a little bit about the—since you were on a Working Group for a few years—

EM I was.

RZ—tell me about the after parties.

EM Well [exhales sharply], I mean, the ones you can remember are the ones you weren’t at, right?

RZ [Laughs] Just wild.

EM No, honestly, I’ll tell you from my memory of the Working Groups is that we would sit in a conference room at our host organization like all day [mm hmm], talking about whatever was being discussed at that point, and then we would all go to dinner where we would keep talking about it [Rich laughs]. But less formally. And sort of like make fun of—this is the point where we can sort of rib each other for the, like, “You said that thing!”

RZ Right, that attribute.

EM Right, exactly. [Rich laughs] And then the next day we’d all get up and go back into the conference—

PF That sounds accurate.

EM Yeah. I mean, like you said it’s sort of academics for business.

RZ There’s gotta be some scandal in there!

EM Oh!

RZ You don’t have to share that with us.

EM I mean there was a CSS specification at one point where it gave example I think font names and it said things like rattlesnake and apparently that was—that referred to an event that I was not present for.

RZ Oh boy.

[39:26]

EM There was apparently rattlesnake or maybe rattlesnake meat involved. I’m not sure.

PF Hidden messages in—

RZ [Laughs] By the way, real quick, are there hidden—is there hidden stuff that’s just not documented anywhere that the browser people put in?

EM By ‘hidden’ do you mean not in the specification?

RZ Not defined anywhere but will cause the whole page to shake?

EM Umm.

RZ Or it’ll play like a—I dunno—

PF Easter eggs.

RZ A Moody Blues song if you [laughing] drop it—

EM Google does that. If you Google the word askew, [yeah] if people listening to this haven’t tried that [it starts messing with things, yeah], if you literally go to Google.com and type askew then it will—you’ll see what happens. But that’s more the programmer’s type. I can’t think of anything in a specification that—The only easter eggs in a specifications are like in-jokes in the examples where you’ll like see [got it] this and wonder what the hell it was about and it turns out it was from an after party or whatever.

RZ Right.

PF Well, it’s probably for the best [Rich laughs].

EM Probably.

[40:23]

PF Well, Eric, I wanna say thank you.

EM Thank you.

PF Yeah, it’s great to talk to you.

RZ This was really interesting to see—

EM Cool.

RZ—the guts of this stuff as it all came together.

EM Always a pleasure to nerd out with people about specifications.

PF It’s great.

RZ Thank you.

PF Well! You know, Rich, it is one of the three pillars of the web, no way around it.

RZ It is.

PF It’s also one of the accessible things which I think we—like it’s one of the things that’s easy to learn which I think the way the modern web is going people don’t think about it and talk about CSS the way they used to.

RZ Yeah, it’s considered dated in some circles.

PF Yeah, but it’s important to remember that most of the people coming up are going like, “Oh wow! I can format and style this headline. This is power.”

RZ Yeah. Also, you still gotta use it.

PF You do.

RZ Even though you’ve chopped it up and put every bit of the code inside of other code, you’re still using it.

PF CSS Styles are what make all your things look like they look.

RZ Yes.

PF Facebook or whatever.

RZ Yes.

PF Thank [music fades in] you to Eric Meyer. We better go back to work.

RZ We better.

PF So if people wanna reach us, they can send us an email: hello@postlight.com.

RZ Mm hmm.

PF And they’ve been listening to Track Changes, the official podcast of Postlight, a digital products studio at 101 5th Avenue. Who are you? Across the table?

RZ In New York City. I’m Rich Ziade, co-founder of Postlight.

PF I’m Paul Ford, the other co-founder of Postlight. hello@postlight.com if you need anything. Give us a good rating on iTunes if you are so in the mood and we’ll talk to you next week.

RZ Take care.

PF Bye [music ramps up, plays alone for 12 seconds, fades out to end].