Responsive Web Design Content Priority Prototype

[00:00:00]
>> [MUSIC]

[00:00:05]
>> Ben: So, in terms of priority deliverables, I'll tell you guys a little bit about a content priority prototype. [LAUGH] This sort of takes the place of your traditional wireframe for us, okay. We're not doing highly designed wireframes. As much real content as we can get, we put into these things.

[00:00:27] So it's actually our customers' content in the browser, it just happens in HTML. It's in the browser immediately, as soon as we can get it in there, okay. There's almost no style applied to these. What we're going for is something that doesn't imply at all that this has been designed.

[00:00:44] What we're really concerned with is priority, okay. It's very linear in nature, priorities kind of assumed or implied based on the the order of things. And then we do this in HTML.. It's delivered to our clients in a browser, so they literally get a URL and they get to open this thing up.

[00:01:04] The very first deliverable in the prioritization section comes to them in their browser, okay. This is actually one of the most important points here. We're trying to get them to understand that I'm not gonna give you a picture of your website, okay. We're gonna work with you In the medium of the web, HTML, CSS, JavaScript, whatever other functionality we can tack on, okay.

[00:01:31] And we actually have this built, this HTML, with a tiny bit of CSS is written by our content people, content strategists writing markup, okay. Think about this. How many of you guys have a process where you do some of that strategy and some planning, some you UX kind of stuff.

[00:01:48] And then a designer gets the UX deliverables and goes into Photoshop or whatever tool they use, designs a nice nice comp, maybe they do multiple resolutions of designs. That's great. And then that is handed to a front-end developer who's gonna write markup based on the design. How many of you guys do something like that, writing markup based on the design?

[00:02:12] When we when we started to do this, it completely changed my perspective on how we do this. Think about how wrong this actually is [LAUGH]. If I have my front-end developer writing their markup based on the design, it's almost impossible for them to write really semantic markup cuz they're completely influenced by the way the thing looks, right?

[00:02:31] We shouldn't be making decisions about markup based on the design. So what we do is we have our content people start our markup for us. These are the people who best understand the content that's being marked up. Markup, that's what we're doing. We're trying to add, we're layering on a layer of semantics on top of our content.

[00:02:50] That's really what we're doing with HTML. And so this has completely changed how we work. Let's take a quick look at one and it's not pretty, so hope you guys are okay with that [LAUGH].
>> Ben: It's actually out there, there's an example of one out in the folder there.

[00:03:09] There's a zero two plan design, there's an HTML file in there. This is it, okay, you can see it happens in the browser. Hold on a second here.
>> Ben: Happens in the browser, get rid of some of these other things.
>> Ben: All right, and you can see it's completely ugly, it's just grey boxes.

[00:03:34] No real styling other than to just indicate separation between elements is really all it's doing, okay [COUGH]. And as I adjust the width of this thing, you'll see that it's not really responsive. Things are percentage-based, but there's really no layout. I mean, it's just linear even at larger resolutions.

[00:03:53] What we're trying to do is indicate the priority of the stuff on the page, okay. This was built for a site call dressresponsively.com, which is actually out there. And I'll show you two deliverables here. They're both kind of based on this concept, which was the idea that we're gonna let people vote on t-shirts, responsive attire [LAUGH], if you will.

[00:04:16] They would vote on t-shirts and then the winner would get printed, that kind of thing. Actually, last week, United Pixel Workers ran this one. I don't know if you guys saw it or not. So the idea here is just dress responsively, navigation, the big sort of you decide 2012.

[00:04:30] We were playing on the election theme, so that was some of the direction that was given. And this is, whoops not that, this is the content priority prototype for that site. So you can see Dress Responsibly, the name of the organization, the most important thing. You Decide 2012 indicated, and if you look at the markup, you'll see how we've semantically marked this up, okay.

[00:04:54] [COUGH] Anyway, concept that we've really seen this as beneficial for us. Now, this works well on sites that are content driven as opposed to function driven, okay. If you're actually building something that's a bit more appy, a bit more interactive in nature as opposed to something that's really just displaying content.

[00:05:17] What we've done there is actually created a more static like wireframe, but we usually use Keynote or something like that. You could use whatever tool it is you're comfortable with. But we do those at smaller resolutions to try and get some of the same kind of benefit of prioritization of function in that sort of linear layout.

[00:05:35] Questions on this, ideas, is anybody doing anything kind of like this? No, okay, all right, let's move on.