 So, Drupal 8, right? New Orleans. If you came in here because you wanted to see the presentation as opposed to you were hoping to find a place for an outlet, you probably know that the title of this talk is recoupling, not decoupling. It's shameless clickbait, and you are encouraged to, if you have any heckling that you would like to conduct during the course of the presentation, hashtag recoupling will be a place that I'm imagining like my various friends and associates will be heckling me as well. And if you have any disagreements, I will be happy to sit down and have some coffee and talk about them or chat on them on Twitter. But yeah, I think it should be interesting. Quick show of hands. How many people here are like Drupal developers or site builders? Oh yeah, okay, cool. How many here consider themselves digital strategists or content strategists or ontologists? Do we have any library sciences majors? Oh, cool, thank you. Okay, so I'm Eaton. I've been in the Drupal community for quite some time, nerding out in various capacities. I work for a company called Lullabot. We do strategy design and development generally for sites with large quantities of content and interesting and novel ways that they need to use and repurpose that content, whether it's education or media, broadcast, enterprise, stuff like that. So I get to play with all kinds of interesting content challenges. Before I go into the details of this presentation, I'm going to give my like two sentence elevator pitch and you can decide whether or not you disagree with me vigorously and will be growling and tweeting at me or whether you agree and will be nodding your head happily. So first, I believe that visual design, like the stuff that we wouldn't necessarily put into the content model today, but the stuff that is there on the front end, people come to your website or they look at your app or whatever, visual design actually communicates important messages. It's not just for decorative purposes. The second part is that the messages that that visual design is responsible for communicating to people, those messages do actually belong in the content model. And as someone who has been vigorously arguing for decoupled, pure content models for many years, this might sound like something slightly different than what I've been saying for a long time, but I think it's very, very consistent. This is just the next wave of what we're grappling with as we start moving into a more fully decoupled world. So let's talk about that. Decoupling and its discontents. So here did web stuff way back in the day when we just made files and we used font tags and, yeah, spacer gifts. Yeah, that's the international spacer gifts icon. It's actually recognized worldwide. So the thing is, is this whole idea of decoupling, of separating our concerns, the visual stuff that people see when they log into the site versus the meat of what we're making and we're producing the content that we're creating and trying to publish in all these different ways. The idea of trying to tease those things apart so that we can use the content more effectively in different contexts or that we can do things like execute a redesign without just killing ourselves and reproducing everything from scratch. These are not new challenges. Even as far back as when people started saying, man, wouldn't some sort of style sheets as opposed to just font tags and gifts? Wouldn't that be fantastic? This is a trend that goes way, way back. And even technically decoupling things architecturally, storing content in a database, building software that could spit out web pages using templates for us and stuff like that, these are not new developments. Did anybody use Blogger back in the day? Back when it was actually a website you logged into and then you gave it your FTP credentials and it would log into your FTP server and, I don't know, basically cause a security engineer somewhere to just weep. These are different approaches that we've been working through for web generations to try to achieve this goal of the content that we produce, the meaningful messages that we want to get out using web technologies, teasing them apart from the ephemeral transient aesthetic aspects of how the website happens to look today. And with multi-channel stuff, it's become even more complicated. Maybe you're doing responsive design. Maybe you're feeding it through a content API to a mobile app or an Xbox or a business partner that needs to consume your data. They don't want to have to deal with the vagaries of whatever your current design imposes on that underlying structured content. So we've moved into this wonderful world of using things like fields and templates to divorce the underlying meaningful semantic content from how it gets produced. Drupal is actually fantastically good at this. The fact that we're sitting on probably like 10 years of communal experience on how to build out websites using structured content, where we have content types and we have fields on them and they get pumped through templates and we build aggregate pages using things like views and panels rather than just slapping more copied and pasted stuff onto a page. That's a huge community advantage and I think as we're in the trenches of building stuff out, it's very easy to lose sight of that. So we're in a pretty awesome place. And these days there's even more excitement around even more extreme forms of decoupling. We're like the backend web content management software that we use to create and manage and maintain the actual content resources is even totally separated from the software that actually generates the markup that people see when they come in with a web browser. You know, sometimes we're just using pure front end frameworks that are built in JavaScript to turn those things into user viewable web experiences and we're just feeding APIs full of wonderful JSON and it's awesome. And it's so super cool because as we all know from like a decade of talking about this stuff, design pollutes that wonderful pure fantastic content model that we have and it's dead wrong. How many people have been in like some kind of whiteboard filled enthusiasm, nerdy meeting where something along the lines of this was said, we're going to build a wonderful content model. It's going to have no assumptions about what the design will look like. We want it to be pure. We want it to be good. The designers can just do whatever they want to later once we've made our model. They'll put the frosting on but we'll bake the cake and everyone will be happy. The problem is that can work. I've advocated for that. I've been super excited about it. Even I've said things like that and I've been on projects where that happens. There's nothing inherently wrong about utterly and completely divorcing design and presentational considerations from your content model. Like NPR's COPE model. Is anybody familiar with that? The granddaddy of all case studies about website decoupling. They sat down in 2004 and they had a bunch of long coffee fuel weeks long meetings about what is the essence of content that NPR produces. Regardless of how it looks, let's store that. They've been able to produce tons of different fascinating endpoints that are based on that and they can create bold new designs in every one of those different places without the underlying content having to know about where it's living. That can be cool. However, there are also some problems that come with that kind of an approach. They're non-trivial, especially if you're working in places where you need more variation or you need some way of communicating something that might differ from one piece of content to another. But isn't just in the text? Or is it something that you can put in the attached photo or something like that? Also there's an entire Reddit community of people who make these perfectly looping gifts. It's intriguing and fascinating and 15 minutes of your life will disappear just by going there. But there's a real problem. When the design is something that's just slathered on top of an undifferentiated content model, it can feel very assembly line. It can feel very much like just a factory line of stories getting pumped out. And even when there is interesting design variation, it's only repeating visually what's already present in the underlying content. There isn't anything more there. The flip side of that is once you've created the pure and wonderful magical content model that's divorced from all presentational considerations in all design, inevitably ugly nasty cruft starts to accumulate as requirements come in or the next redesign comes in and something just needs to be there. I am not joking. In an actual project, one of the fields attached to their decoupled content model was iPhone headline color field 2. Now there was actually, they had a perfectly good solid reason. I asked them, okay, let me explain. They needed to do branding. They needed to communicate like brand association for individual stories that were coming out. And it wasn't necessarily something that was attached to other content entities they had around in their system. But they needed to be able to say, look, this story is categorized in a certain particular way. And so what they did was they added a color field because their editors needed to be able to say, no, look, this is blue. That's this week's pop color. So they got iPhone headline color field 2. Because it was handled differently on desktop naturally. That's a talk for Karen McGrane to get angry about. But the idea is that inevitably all of those design considerations that we want to escape come back. They reassert themselves inevitably in any project where design matters. And that's not even to talk about situations like home pages and landing pages and section pages. And if you're dealing with a marketing site, any kind of page where there's messaging that's very important, like say, how to sign up for our service page. Like those kinds of things get incredibly complicated. And they're usually very unique. And they usually require a high degree of control from the people who are editing those content or from editing that content on like how we're pulling in different things. There's curation decisions that are being made. What's on the home page today? Now theoretically we could control all of those with algorithms. We could just make views and we could have complicated taxonomies that just magically intuit what ought to be in particular places on the page. But 9 times out of 10 we've got humans that are doing that stuff. And if all they have is a perfectly pure content model and then a design that just consumes stuff from it and they have no way to really communicate what they're trying to, you're back to iPhone color field number two and ugly, crufty stuff starts getting bolted on for them to try to force those messages through. This is what I'm starting to think of as naive decoupling. This process of teasing pure content messaging and content assets apart from presentational display and design concerns is a good thing. But when we do it in a naive way that doesn't account for the actual value that design brings to the table, we run into lots of problems. We start missing tone, voice and emphasis. A lot of those things that are not explicit in the content itself but turn out to live in the design on many of our websites. We often end up ignoring editorial curation and control over automated aggregation stuff that editors have long exerted on ugly, crufty, manually controlled websites. And it's fantastic because now everything's automated and everything goes through the API pipeline but they still need to control which story is in the upper left corner because that really matters. That's where we always put the important thing, right there. We can't just have it be a sorted list. And the thing is that actually starts to strip the content of important real meaning. We're not just losing something aesthetic. There's actual meaning that gets conveyed there. And again, because someone eventually notices this, a stakeholder says, no, by gosh, I want to blew back around on that. We start accumulating nasty hacks to accommodate those designs and that information ends up living somewhere. Either it turns into horrible, ugly fields that no one wants to have there but they live there anyways, sitting in that pure, wonderful model. Or we start accumulating like second systems layered on top of our pure systems. We've almost got a second CMS built-in panels sitting on top of our wonderful content model that's for the people who need to actually control that stuff. It's not okay because it's really, really painful. If we're not intentional about how those things get captured, they get lost in the next redesign, or when it goes to mobile, or when we have to do responsive stuff in the same way that those very tightly coupled decisions that we made in the bad old days of font tags and spacer gifts got lost whenever we needed to move the content somewhere else. So the core here is I want to combat the belief that content is meaningful communication and visual design is just decoration. So let's think a little more about this. These are two versions of the Apple homepage. As you might guess, they come from slightly different eras in web design trends. I'm pretty sure that's either 1994 or 1995. The one on the left, not the one on the right. You could add, you know, their design is from a purely aesthetic and a purely visual standpoint is there in both of those. But the one on the left, the old one, the terrible one, is really purely visual. It's aesthetic. What it's communicating is, hey, this is a gigantic Apple logo, and we have six colors, and then there's some links. Okay, that's cool. Everybody was excited, we were all learning. But when you start looking at the one on the other side, the one on the right, now, it uses graphics. It's probably like 98 times larger. But it's communicating a lot of important information that isn't present in that first one. It's talking about hierarchy. It's talking about priority. Today, on this page, they believe that the Apple Watch is more important for them to talk to you about than, say, the latest, you know, the latest OSX update. There are other things down below, secondary items on the page. There's navigation up there. There's not even tertiary, maybe quashiary? I don't think that's a word. But down at the bottom, you know, there's other navigation items that are ranked and grouped. It tells you these things are like each other. These things are less important, but you might find them interesting. Those messages about hierarchy and priority and emphasis are real and they're important, and they're being communicated by the visual design. There's not a label on the watch that says this is the most important piece of content. But you look at that page and you know it is. That's the most important thing they want to talk to you about. Similarly, if we look at a slightly different kind of example, these are two versions of the New York Times homepage. The one on the left is actually, I believe, the, I believe, 98, 70 something New York Times homepage. And the other one is, I think, from about two or three years ago. Now, the same kind of information is present on both of them. It's news stories. It's the New York Times. And some things have changed. We've got color printing so we can put photos on there and stuff like that, but at the end of the day, it's news stories. There's headlines. There's author, the author byline, stuff like that. But this is the opposite of extreme of that design. This is that visual monotony we were talking about. When individual stories aren't treated differently, when it's just a river of stuff that is all the same, news design has evolved a lot in the past, say, 150 years or so. And on the new homepage, you can see lots of messages about the news being communicated. What is the most important story? What things are connected to each other by being on similar topics? What things have a really powerful visual component that they want to grab your attention with and draw you in? What things are tertiary news that someone who's just passing by might want to see on the newsstand, but they don't necessarily want to dedicate a lot of space to? Those kinds of hierarchy messages, the relationships between stories, those two are all present purely in the visual presentation there. Anybody who comes from a design background is probably like, uh-huh, uh-huh, the horse is being beaten right now. I get it. But if you'll humor me a bit more, has anybody ever seen this graph before? Yeah. Edward, uh, tuft, tuft, tufty? I don't know. I was homeschooled. It's all phonics to me. This is one of his favorite illustrations of what amazingly beautiful representation design looks like. It's a graph of casualties in, I believe, Napoleon's march to Russia. It captures immense amounts of information about their path across Europe and Russia, casualties, what was the return trip, what, you know, when different groups of the army split off and went in different directions. And it tells a really grim but deep story if you are willing to take a moment to read, you know, to read the information around it and look at it. And when you compare that to, say, like a 3D projection chart in Excel that, you know, tells you three points of data and spins around six times, the amount of density, the amount of stuff that's being communicated in that is really amazing. It's not about decoration. It's about using visual design in an effective way to communicate stuff that would be really tangly and difficult to communicate in other ways. One of the things he says about this is that graphical decoration, and it prospers in technical publications, commercial and media graphics, you know, not just in, like, advertising or something like that, that graphical design comes cheaper than the hard work required to produce intriguing numbers and secure evidence. Now, he's talking about statistics. He's talking about numbers and data, but the same is true with any kind of content, even storytelling or marketing or conveying messages about products or causes that we care about. Pure aesthetic decoration always comes easier than meaningful communication. So that idea that design, when it's doing its job well, is about communicating something, is really the heart of what I'm talking about. If we start thinking about how we account, how we're going to account for that in moving back to our topic, a decoupled, structured content world, the first thing we have to think about is we need to look at our designs and ask, what is it communicating? When we looked at those news examples on the Apple Home page and how it's changed over time, we can ask things like what's being said by those design differences that we noticed. It's not simply prettier. It's not simply there's more white space. It's saying things like, what's the most important thing here? What things on this page belong together versus being different from each other? What kind of thing are you looking at? What comes next in a sequence of things? Once I'm done looking at this, what should I go to next? Those are things we can spell out textually, but they're also present in the visual design, and that can be a really important part of it. That's the what in what we're communicating with visual design. But there's also a how component. Visual design gives a lot of really basic tools that aren't about aesthetics, but are about how meaning comes through. If you look at this grid of boxes, it's pretty bland. But if you pull some things together, it starts telling you that those six boxes in the middle, in some way, they belong to each other. They belong with each other more than the other ones, because proximity is a really basic way of saying this stuff, it's a group. It's part of a single set. Repetition is another one of those key communications tools. It communicates that certain elements are at the same level as each other in a hierarchy. That group of four on that side, and the group of four in the middle, and the group of four on the right side, sets of things that are roughly equal to each other. Color is another one of those things that can be used. Regardless of what particular color you like, or let's say the VP who's reviewing a set of wireframes likes, it can communicate organizational methods and emphasis messages in addition to purely aesthetic ones. Breaking out of patterns that exist on an established page or in a design can also say something important. It can say that thing up in the corner, it's more important. It deserves your attention for a moment, or it can give us pause as we move from one group of things to another when patterns are broken or extra space gives us room to breathe. Dominance or size between elements can create focal points and create visual hierarchy where we can say what things are more important, what things should I look at first. And then you can start combining those things. You can combine size, position, pattern and repetition, grouping and stuff like that and start communicating complex like compound messages about what's there. And the funny thing is, is even though we're not really talking about aesthetics, and I'm not designing anything, I'm just using some boxes to illustrate some stuff here, once you start putting some of these basic ideas together, it starts looking weirdly similar to the kind of stuff that a web designer is going to produce and you just sort of hand them a whiteboard and a marker and start noodling around ideas for an average web page. That's because at like the level of wire framing and sketching and stuff like that, what they're talking about is generally not aesthetics, it's organizational choices and prioritization choices and what means the most. What do we want to have up here? How much space do we give to breathe before we move into other secondary and tertiary stuff? Those relationships and those interconnections between the things that we're trying to put into a design are where the really important messages of design lives. And that stuff, that's the how. Things like proximity, density, pattern, repetition, color, shape, size, ordering and placement, that's the how that design uses to communicate those important what messages. And what I think is that we need to get used to the idea that rather than just talking about separating content from design, we accept that the what that's going into that design needs to be modeled because it means something and it's really important and it gives people who are consuming the content a lot more even if we defer the how. We may say this is important but I don't care if that means if it's big or if it's got more space under it or if it gets green, we can deal with that later. So again, anybody who's ever had beers with me knows this is what I go off on endlessly. So again, bear with me. There's fun case studies in a minute. Actually, there's fun case studies right now. So the first interesting example is MSNBC. Their website is one that rolled out, I think actually a couple of years ago now, one of the fun things working with them was that they produce a lot of content and they really were wanting to take a step back and sort of revamp their web presence. They were completely replatforming, growing their editorial team and wanting to put more effort, not into just doing cable news production but to produce original web reporting. And that was super cool. But one of the things that came up was that their editors, they kept wanting to choose what template each story was going to use. You know, it's like, okay, yeah, that's great. I've written up, I've got the photo, I've got some pull quotes, but I want to choose the template. What will the layout be in the front end? Well, it's responsive. And then you've got a feed that's going to go to your mobile app. It's not like you can choose the template in that sort of way, but it kept being a really, really important thing for them. And one of the reasons, as we talked to them about the why, was that they said, well, some of the stories, well, I've got a photo and I've got a video and they're going to be part of it, but what pops about this story is this great quote. That's what I want to lead with. It's not that the video or the photo isn't there, or it's not that on this one the photo is there and the quote isn't, but I want to be able to have the flexibility to choose which thing I accentuate when this story goes out. Because, you know, that's, I'm the editor. That's the kind of decision I make. And it was easy to look at it as an aesthetic choice, but they were choosing what's the most important thing, the catchiest thing about this story. So from a technical standpoint, it ended up being shockingly simple. We just ended up adding an emphasis field onto each story. We gave them six options and, you know, in the future it could be, you know, expanded into more, but they get to choose from things like pull quote or photograph or video. And when it goes to the front end, there's a bunch of different layout choices. There's a bunch of different CSS stuff that can be done, but what they're choosing isn't from a list of six different layout templates. They're just saying, hey, as an editor, this is what's hot about this story, put it out there. And it allowed them to still make the choice that was really important to them, to capture the meaning that they wanted to convey through that layout choice, but still preserved a degree of decoupling that allowed the design teams to innovate on different platforms in different ways of presenting things rather than just trying to reinvent a particular layout to keep the editors happy or stripping it away entirely when they had to go to something that didn't support the same layout. The University of Oklahoma is another place that I've done some interesting and fun work with. They have, as it turns out, a bunch of artifacts from Galileo's life, like telescopes, desks, books that he had, notebooks that he kept. I had no idea. It's this treasure trove of Galileo's stuff. And they have this series of museum exhibits scattered around different campus locations called Galileo's World. And they're working on completely renovating all of the web presence for it so that people can actually enjoy this stuff online. The first iteration of it is actually up, and you can see it today at, I think, Galileo.ou.edu. It's super cool. But if you look at it, it's pretty straightforward stuff. If you're a site builder or a developer, you're thinking, I know that view. I can guess what fields they've got. And it was okay for a first pass, but as they started talking about, okay, so we've done the, we need to get this shipped in a month and a half, but what should the design really look like long-term is we want to really make this stuff that we've got really engaging for people. So they started working with the museum team. The museum team's first thing was, obviously, okay, we need to figure out how to get the floor plan onto the web. Because we want people to come to the website and see the floor plan and click on this corner, and then they'll go see the thing that's in that corner. It'll be awesome. And the web team sort of face-palmed and back and forth. And this is a tale as old as time, held around conference room tables the world over. But the funny thing was, through all of the frustrating, no, it's 2016. We're not going to do that on our website. And no, but it's important. This matters. A really important breakthrough was made by what came through in the conversations was that their museum team wasn't just obsessed with floor plans. But what they weren't used to communicating to the web team was that a lot of thought and care went into designing those exhibits. In a physical floor plan, the vocabulary they had to work with was where in the room is this? What things are next to each other? What is the lighting like? Those were the how in their physical museum exhibit design. And they were getting hung up on that in the early conversations. But once they broke through and started saying, well, okay, that's great, but why is it in that corner? Why does it matter that these four things are next to each other, that this thing is over there, that this has a spot on it, and that's just in ambient lighting? It really started working well for them. So now they've got a rough model that uses exhibits, individual resources, but every resource, like a telescope, a book, or whatever, they can start tagging things with themes from Galileo's life. Periods in his life, not just a point in time, but grouped periods of his life in which important things were happening. Regions that these things come from before Galileo had them or even when he was living, where was he at the time? When they tagged them with these things, they started realizing, well, now we've got enough data to capture what we were trying to say during the exhibit design process, and they're still working on the design for their next-generation version of this, but their teams now have an actual vocabulary to talk to each other about why these things matter. What might come next in a sequence of different artifacts from Galileo's life? Well, now they can think about those things. It's not just alphabetized lists of interesting objects. They can tell a story because they captured the what. This is actually a bigger project, a slightly less storied and history-filled project, but still a fun one. NBCUniversal has a lot of different brands, you know, cable channels, broadcast channels, even some web-only projects where they're doing interesting, crazy, sci-fi-related stuff and going straight to web, but one of the things that they want to do is they're in the process of moving to a fully decoupled content repository, API built on top of Drupal, that all of their websites are endpoint consumers of, that their Xbox app and their mobile app and their hand-wavy, crazy stuff from six years from now will all be able to be driven by this underlying repository that contains truth and facts and entities and fun stuff, and also each brand has to have complete design control over all their stuff. That's fun for all the reasons that we've been talking about because, you know, those kinds of design choices aren't simply skinning. It's things like, well, what do we want to put on the homepage? How do things relate to each other? How do you put that all in the brand's approach to what curating things means and why they do it differs from another brand? Well, that's complicated. This is actually a project that Four Kitchens did a lot of content modeling work on. We did a lot of design strategy work. It was super fun. Big shout out to them for waiting through huge piles of content archives to find fun patterns. But when you look at their brands, despite the fact that they're doing very interesting and different things with this, that they're firing all kinds of content up on different kinds of pages, it turns out that modeling the individual like atomic pieces was very easy. And then we started getting into this world where we had to find patterns that their different brands were using in communicating design concepts and what kinds of stuff they were trying to accomplish. We ended up building out a very simple but very flexible sort of design vocabulary, not in the sense that a designer might talk about it, but in the sense that a content modeler might talk about it. A vocabulary for what kinds of metadata they could put on things to allow their back-end editors to communicate enough information about what they meant something to be used for to those front-end API consumers so that the designs could actually capture a lot of that interesting and meaningful variation. And what we settled on was this idea of nested collections of things so that they could group together five episodes that had a similar theme that an editor came up with and wanted to put into a rotator. Individual collections could be tagged with a preferred style like this is sequential or this is pure level stuff. This is a collection of things that are pretty much all like each other but give people a lot of choices show them to them one by one. Now you might say, well why not just call it a rotator? Who knows? Maybe it's not going to be in a rotator, but we want these to be a series of things that people are taken through versus a giant wall of options. That was the kind of stuff that they could tag those collections with. Going down there, individual collections contained entities like actors, shows, episodes, seasons, stuff like that. The entities that we can make content types for in Drupal. But they actually made an enhanced version of the node reference field that in addition to the reference itself could have extra metadata hanging off of the reference. When you put a particular episode of a show into one of those collections you could say in this collection this episode is the most important thing in that particular collection. In another collection it might be the least important thing, but here in this group of stuff that I'm putting together it's important. Now that doesn't necessarily say what order it's in, but it's the most important. And that allowed them to do things like masonry style layouts where there's a big old grid of interesting episodes that have aired recently but one of them might be big and splashy and another one might be a little larger than the others and then there's a couple small ones to fill in the gaps by choosing which ones were really high priority which ones were low priority and what order they were in the front end could sort out a lot of purely aesthetic and visual variation without losing information about like yeah no, tonight's episode of this show, regardless of what things look like we really need this to pop. And then very similar to the MSNBC example those relationships also had an emphasis thing. I want to put a link to the episode in there but I want you to emphasize the guest star. Now, if they don't have enough media assets to pull that out in some specific way the front end design might ignore that but if they've got a full photo gallery to pull from and one of them is tagged guest star the design has the flexibility to say okay we're going to pull a photo of the special guest in when this gets placed in because the editor said prioritize that. The details they get pretty complicated when you go through a dozen brands hundreds of pages stuff like that but capturing a fairly simple vocabulary of important bits of choice that they needed their editors and their producers to be able to capture and letting that stuff trickle through as sort of hints to the design layer and the presentation layer allowed them to capture that meaning give lots of flexibility in how to make it happen but not pollute say their content model with iPhone color headline field too. The Guardian actually has a really really cool example that goes in a slightly different direction. They recently well recently in web terms I think it's probably about a year or two ago now did a full responsive redesign of their site and at the IA summit last year one of their head UX people gave a fascinating presentation about some of the decisions that went into that. Visually it's you know pretty standard stuff it's you know that's a newspaper you know home page you know looks nice it's responsive it's you know lots of boxes lots of headlines but one of the interesting things is that the sections that they start grouping things onto on the home page are not just the sort of topical beats that we're used to seeing they have categories like in brief in depth and highlights now what they're doing behind the scenes is actually tagging individual stories by what sort of reading mode this particular story is best suited for. They're not making assumptions about whether somebody on their phone will want to read this story or whether somebody on their desktop or somebody in a lean back versus a lean forward will want to read you know will want to read one story versus another they say you know as writers we can say this is a high level overview story this is skimmable or this is you know a top story but there's not necessarily a lot of detail or this is a really in depth well researched story that somebody cares about a topic might drill into they're tagging stories with that kind of information about the complexity in the depth and what sort of reading mode someone would be in for this to be a story that really grabs them and in addition to the usual topical groupings on there they're presenting what are you looking for do you just want to skim quick headlines do you want to really dig down into stuff they allow that to be another mode of grouping and connecting stories on the homepage so that people can be pulled into stories with similar levels of information that they're looking for and it keeps them from making ugly nasty assumptions about I'll bet if someone was on a tiny screen they only want headlines because frankly I've been on a tiny screen trapped on a train for two hours and I am happy to read a very long story regardless of how big the screen is another story that I think is really really fun because I got to actually be there like in the room when all the white words grumbling happened was capturing relevance and urgency of particular information as metadata has anybody ever heard of a company called Xlist I think they're just here in the US wow, Seth, throw something at me if I'm wrong but they basically keep track of service providers like lawn care professionals plumbers, surgeons all kinds of different people who provide services here in the US and they let people sign up for memberships and rate and review the people that they hire to do stuff and it's been a really popular popular site, it's been around for ages but one of the interesting things is that they have roughly 80 billion service provider pages that say in say the city of New Orleans what are the plumbers they generate these things automatically for locations and service providers you know they've got all the data it's all structured there so they can auto generate things like in Indianapolis who are the dog walkers they can make all of these pages and they're a really great resource because Google loves the hack out of pages like that the problem is is over time these pages had turned into something that actual humans didn't actually like that much or get a lot of value out of and so they were filled with calls to action that you know said hey you should totally sign up also would you like to see our photo gallery full of remodeling projects are you looking for a service provider the problem was it was all very undifferentiated it felt like sort of a soup of stuff being thrown at anybody who said I need a plumber in Indianapolis so there were a lot of ways to slice and dice this but in talking with them we started thinking about what kind of really meaningful assumptions could they make about what people really wanted to see when they came here to these pages and they said well it differs that's the problem we don't get there's lots of different things they could want so we went through persona exercises and stuff like that and what we found is one of the biggest most obvious differentiators and this goes to what Sarah's keynote talked about earlier today this wasn't like demographics it wasn't like oh you know how old are they one of the biggest differentiators between whether we were going to annoy and offend people and whether we were going to make them happy was how urgent is the thing they are looking at right now the difference between I need someone who can repair a gas leak in Indianapolis at 3am and who does kitchen remodeling turns out to be significant because when I'm looking for somebody who can repair a gas leak and I'm going are we sure oh god yeah no I think I don't want to die I don't want to see a photo gallery of inspiring gas leak repairs I want as few steps as possible between me and someone preferably with a wrench and you know showing up and taking care of this problem so what we ended up working with them was a technical framework for being able to reprioritize and reemphasize different things on each one of their different service provider at a particular location pages and theoretically in the future they could layer all kinds of personalization stuff on that and when their metrics were amazing and rich and wonderful they could make all sorts of decisions one or two about this kind of person probably once this button up in the corner but day one out of the gate what we said was we're going to have your team who knows your service provider is the best go through and just provide a default level of urgency on each one of the different kinds of services that you have information for this is probably super urgent this is probably someone browsing for inspirational stuff you know they could do that and as a starting point in this whole journey of crazy personalization and tailoring stuff that how urgent is this thing someone's looking at turned out to be a really really useful pivotal piece of information that they could reprioritize page elements and make design choices about how things were going to be presented based on that underlying what of how urgent does somebody need help right now when they get here so it was pretty cool and depending on what area of the country you are in if you search for that you may actually be seeing the currently A, B tested variation of that right now so across all these kinds of things there's some really common patterns that come out when you see organizations trying to tackle this you know capture the meaning that design communicates versus the how some of those patterns are A I don't have any kind of like mathematical proof for why this is important but everybody seems to settle on the idea that we need reusable collections of things probably reusable collections of things that can be put inside of other collections to make collections inside of collections and those things are content those aren't some sort of design layer on top of everything else those aren't some sort of you know config thing it's not a developer tool when an editor says these six things they belong together in this set and I'm going to call the set this and I'm going to put it inside of this other set that is an editorial decision that is essentially content even if it doesn't have words associated with it even if it doesn't have a picture the collections of things that are designed that are made by editors and have meaning that is content and treating it as such just turns out to save all kinds of pain along you know down the line the other one is this pattern of enhanced content relationships of taking you know the connection between item A and item B and adding yeah but what kind of relationship is this adding that kind of stuff on turns out to be a very common pattern in organizations that are doing fully decoupled but meaningful models it can be complicated it can be simple but the ability to tag extra stuff onto those connections can really save a lot of pain down the line the other one is whenever possible extra meaning can be inferred from things like you know metadata that we've already got on media assets or the presence or absence of certain fields and you know whenever possible you can sort of create a content model that collapses stuff like there is a photo there is not a video into flags that can inform a design layer if you're pushing it out through a you know video pipeline or something like that it can be handy but whenever you can't infer for example this is a landscape this is a portrait I'll use a different layout when you can't infer that stuff you provide explicit hints to the design layer to the front end layer in the form of metadata it could be taxonomy tags it could be custom fields could be extra things that you bolt on in some way but saying I know the editors want to capture this aspect of the message making that explicit and turning it into metadata that will get passed to the front end so that it can decide on the how it's always there and sometimes even creating new content entities from scratch to store things that are just meant to carry information to the front end so that it can decide how that that happens and the other pattern is really carefully chosen nouns you're essentially creating a shared language when you build this stuff out a language for the back end to communicate with the front end about what it means when it passes this information around it's also a language for developers and content editors and front end design teams to communicate with each other instead of just sticking things into an arbitrary field that got bolted on saying well this is the sticker that was something that came up in NBC they wanted to be able to add little bits of text and you know little you know stickers onto content that would appear in different places and you know look through all kinds of stuff is yeah but what's the right word for that what's the correct word what would a taxonomist call that because it turns out they all called it a sticker so you know what let's just call it the sticker choosing nouns that everyone on the team understands and communicate with each other with goes a long way so I promise I'll keep this short we're about we got about ten more minutes we're all friends we can do this how in an existing system when you don't have the luxury from scratch and white boarding everything how with an existing system do you begin teasing these things apart we've got a design we've got our content model how do you start pulling those things apart so that you could move to a more decoupled but you know full of rich design meeting system in the future so the first part is actually to like look at your design no matter where the information currently lives your design probably has a lot of this stuff in it looking for the visual patterns that are present there whether it's in your comps that you're trying to turn into a theme or whether it's in your existing website seeing where stylistic variations on the same type of content occurs you know hey on this type of page we're using different kinds of teasers for the same content than we are on this page why is that you know sometimes the answer is nobody knows it's totally random but often there was an intent behind that stuff and spotting where those variations are happening and going back and saying why what's going on here that's one of the first ways that you spot those kinds of meanings that live in the design the other one is what contextual clues are you basing things off of like if someone is logged in we're doing this if it's daytime we're doing this if it's nighttime we're doing this look for any places where like one thing being close to another thing or one thing being more important than another thing on the page is changing the way it looks or how it appears and call those things out anything that you think might be something you could extrapolate from the current context you know make a note of it look for ways things are being grouped and clustered visually on the page we were talking about those sort of proximity things that you know are going on they can say what's associated with each other what's at a part look for those groupings and clusters and start noting what those are meant to communicate sometimes that means talking to the designer who did the comp talking to the editor who's actually putting stuff in those boxes and saying what do you mean when you stick it there why are you sticking it there instead of there you know capture those things and one of the tips that Jared Ponchot our design director at Lullabot shared with me was turns out taking a screenshot of your website and blurring it is a really interesting way of stepping back from some of the details and looking at these visual patterns and they tend to emerge very very quickly when you just say blur it until it's all just sort of boxes and shapes and colors and forms and it's sometimes much easier to identify this stuff but after you've started teasing out the purely visual you know patterns and you know the variation points you know then that process of saying what's being communicated by these things why are people switching between one or another why are people putting it in this place or that that's the next important stage and the important thing here is again describing the purpose of those choices not necessarily the specific aesthetic implications of all those choices and once you start saying once you start looking at that you can also start brainstorming alternate treatments like you say oh okay well you put it there because it's important or you put it there because you want it to be the first thing people notice when they hit the page well what are other ways we could do that that doesn't mean you actually have to build all of those alternate treatments but it can be a great exercise to help you understand and identify what this message that's being communicated really is like if they say no no no no making it big wouldn't be good we just want it to be what they read first as they skin things okay maybe that's a priority maybe it's ordering who knows but figuring out that what alternate treatments would convey the same meaning that the people who are doing this work mean to convey that helps you narrow down what that essence is that you're trying to capture whenever possible prefer the vocabulary that's being used by the editors and the stakeholders and the content creators as they do this stuff what do they use when talking to each other talking to people to describe what this meaning is as goofy as it may sound unless it actually is inaccurate and untrue and conveys wrong information use their vocabulary because that's what will be used when they talk to each other and whether they communicate regardless the closer the matches between the model and the vocabulary they're using when communicating amongst themselves the fewer possibilities for error and weird drift there are in the future and at this point hooray you're a taxonomist pat yourself on the back you're making ontologies the final step there is mapping that to your content model the actual structural content model you know the Drupal fields and database tables and views and relationships that kind of stuff and the things you can look for is A this message that I want to capture that people are trying to do does it actually already exist as a property on our module could we just point people to that and say hey the design could just actually key off of this instead of bolting it on in some other way or instead of putting it in a template you could just switch based on this property we've already got sometimes as I mentioned earlier it could be extrapolated from context or existing properties we want to have a vertical format and we would have a more spacious format if we've got a landscape picture well it turns out you can look at a photo and ask for its dimensions and you can just say well we'll extrapolate that flag for you and we'll tell you whether it's a landscape or a portrait and you can do whatever you want to sometimes it requires adding new real properties or metadata to the model to capture those meanings and other times it requires entirely new content entities to capture basically like undiscussed stuff in your content model I'll try to keep it short but in the NBC example they actually made a new stylistic treatment content entity that captured a bunch of things like custom logo overrides you know color schemes that might be associated with a brand or a sponsor or whatever but by treating those as a piece of content that lived in and of itself well we want to change the style scheme you know the design scheme for something without having to layer color coding fields on every single entity in their model they could capture all that stuff in one place and they could live as an editorial decision even though it had design implications and the thing is this process of looking for the patterns identifying what meaning is being conveyed by them and how to model them effectively this isn't a linear one that stops and then gets shipped this is a cyclical process and teams use it to communicate this requires communication with each team you say okay this model we've made based on this stuff is this capturing what you need yeah kind of but we didn't really mean that or yeah and actually that gives us a new idea for things we could do in the design you know that kind of feedback loop that's really effective and it doesn't even have to start with those visual patterns sometimes you know it starts with pure structured content and you're waiting for somebody to give mockups while you're still working on the model but that loop of figuring out how the structure and the visual patterns that present it and the meaning and message that's coming through those visuals that's a feedback loop that can get better and better ideally rather than just sliding into chaos over time with the copious 39 seconds that we have left we'll do the 50,000 foot view the first is that naive decoupling ignores design and treats it as the next phase after the important stuff has been made and that's bad because design conveys real meaning and message to bring it back into the fold we can capture the what that lives in those design messages even though in a rightly and properly coupled system we defer the how of how those visual meanings get communicated and finally one of the biggest keys is building a shared language so that design, editorial content creators developers all have a similar language that they can talk to each other with about what these things mean and what they're trying to communicate and how it's getting carried out in the front end if you're interested in digging more there's some really cool books out there designing the editorial experience articulating design decisions and if you're a hardcore developer who wants to really dig in there's a book called domain driven design that talks about going beyond purely object oriented patterns and modeling like what the essence of a given business domain is and it has a chapter that talks about creating a ubiquitous language that stakeholders and developers can use to talk to each other that applies just as much to designers and editorial stuff like that, it's a great read. So thank you very much if you want to go and rate this session you can go to events.druble.org node 8518 if you want a party you can go to the Lullabot party at the Ace Hotel at 7pm, if you would like to argue with me you can go to twitter.com if you'd like to work with me on a project or any of the other cool Lullabots you can go to Lullabot.com and if you'd like to download this presentation you can go to lb.cm.com recoupling thank you very much