Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.
Start a free Basic trial
to watch this video
Atomic Content: The Key to Every RWD Project
37:57 with Steve FisherA website is a black hole without its content, and finding the nucleus, that atomic piece that describes the essence of your message, saves us from being sucked into the gravitational pull of building fancy buckets for mysterious future content. While the nucleus is pretty small and can be difficult to find, you shouldn't worry. Steve has been going atomic for awhile and has a great process for tracking it down to practically communicate the atomic piece of content. Going atomic is the key to creating a successful responsive design project!
-
0:00
[BLANK_AUDIO]
-
0:01
Often people when I talk to them about this,
-
0:03
I talk to all the clients I work with.
-
0:05
This is something I do on every single project now.
-
0:07
I can't even imagine not going atomic.
-
0:09
You know?
-
0:10
When we think about responsive or just web design, you know, we think
-
0:14
about how our content is gonna start to live across all these devices.
-
0:19
Well, that's a bit about what I'm gonna talk about today.
-
0:21
also, I'm Canadian, so I'm going to say about, and
-
0:25
I'm gonna say process cuz that's the way it's spelled.
-
0:28
>> [LAUGH]
-
0:29
>> I was mean making fun of America basically just so you know.
-
0:31
>> [LAUGH]
-
0:32
>> [LAUGH] this is probably a safe city to do that in, right?
-
0:35
Anyways, I am now at the Republic of Quality.
-
0:37
I left, the that company I was at over the last three years, I
-
0:40
was User Experience Director at a place called Yellow Pencil, they do great work.
-
0:44
But I started to do this type of work, more,more
-
0:46
and more until I still work with them and other companies.
-
0:50
But this is just a user experience and content strategy duo, its
-
0:53
my wife and I helping to make the web a better place.
-
0:56
So, this is me.
-
0:58
I forgot to bring my on brand tie.
-
1:00
But, you can find me on Twitter.
-
1:01
Twitter is by far the best way to get a hold of me at any time, honestly.
-
1:06
Just reach out to me.
-
1:07
If, if, for some reason, I don't follow you back right away,
-
1:09
just send me a really angry message, and that will work, for real.
-
1:13
Okay, so, first thing you should know is, I'm a great designer.
-
1:17
Yeah, that's funny.
-
1:18
no, but I am not good at this.
-
1:20
[LAUGH] Now it just gets better.
-
1:24
[LAUGH] And my daughter, we just bought this for her.
-
1:26
This is the first thing she did.
-
1:28
Hey.
-
1:28
[SOUND] Yeah.
-
1:32
>> Go!
-
1:32
>> It was, it was kinda this moment of huh, you know what?
-
1:38
And often we forget that the clients, the people
-
1:40
that we're working with if you're here as a
-
1:42
web designer, developer, agency, or maybe you are someone
-
1:46
that's looking to hire a web designer, developer, or agency.
-
1:50
That it's not always easy to just do these things, you know.
-
1:53
It doesn't always just make sense.
-
1:55
Sometimes we have to go through these things together.
-
1:57
I'm a big believer in collaboration and collaborative processes.
-
2:01
Cause that's a bit what we can talk about.
-
2:02
You need to know a little bit about me in case you don't.
-
2:06
This is my wife Shannon, she's the other half of Public with Quality.
-
2:09
She's fantastic, and she's got a great personality.
-
2:13
This is my daughter.
-
2:14
I occasionally put her to work as well.
-
2:16
That's not legal, but I do it.
-
2:18
She also has a fantastic personality.
-
2:20
She, she was just one of the photographers at the Dare Conference in
-
2:24
London, because one of the photographers said, here's a camera, and she loved it.
-
2:29
That was her first connection to a conference in the digital industry.
-
2:33
I also have a dog that comes to work with me.
-
2:35
This is how I wake up to her in the morning.
-
2:37
She's a puppy still.
-
2:38
She looks like a deer basically, and she also
-
2:40
has a personality of her own as well [LAUGH].
-
2:45
This is where I live and work.
-
2:46
So if you look, there's kinda this building with a
-
2:49
weird top on it way over there in the right.
-
2:52
That's really close to my office.
-
2:53
This is Vancouver, British Columbia.
-
2:56
It is a beautiful, beautiful place.
-
2:58
We can go snowboarding and skiing, hiking, you know, this is what it
-
3:03
looked like as I was looking for my home there two years ago.
-
3:05
I loved it, and then I moved there.
-
3:06
>> [LAUGH] >> Yeah.
-
3:08
It's actually in a rain forest.
-
3:10
It's in the Pacific Northwest, there.
-
3:11
But I, I love it.
-
3:13
I love to cycle camp.
-
3:14
I had very serious commuter bike that became a
-
3:17
bit more of a hipster commuter bike that became
-
3:19
a little bit more And then it became this
-
3:22
and I take very dangerous photos while I cycle.
-
3:25
I've never dropped my iPhone.
-
3:27
I was hit by an SUV once though, so I don't necessarily recommend that.
-
3:32
But, I love Vancouver so much that I created a website just for you.
-
3:37
So, it's haveaproblem.com.
-
3:38
Please visit it on your own time here.
-
3:40
but, enough about me.
-
3:41
Let's get back to work.
-
3:43
So, why, why are we here?
-
3:46
Like what, what is this thing, this atomic content?
-
3:49
Well, this past year, I had a conversation with Brad Frost at
-
3:53
South by Southwest, and later he wrote this piece on atomic web design.
-
3:58
I don't know if you've read it or not.
-
3:59
If you haven't, this is the URL.
-
4:00
It's really easy to find if you look up atomic design.
-
4:03
First you get kind of the technical atomic design like as in nuclear
-
4:10
but then you get his article [LAUGH], which
-
4:11
I thought was an interesting contrast but it's great.
-
4:13
He talks about all these pieces.
-
4:14
How we start with the smallest and work our
-
4:16
way up and, and the process that goes through there.
-
4:20
But there's this little bit of a problem that I have, not with his article, it's
-
4:24
great, but if I did a search for connection or humanity or heart or people
-
4:31
or anything like that, those terms don't exist in his blog post anywhere, right.
-
4:36
This is about the system, and that's great, but do you know what?
-
4:38
This is not the web.
-
4:39
The web is not machines.
-
4:41
Now technically that's where is hosted, but the web is us connecting with people.
-
4:46
The web is with people connecting to people.
-
4:49
So we need to remember that.
-
4:51
So when we start to think about web design, and thinking
-
4:55
about a multi device world, what, what does that actually mean, right?
-
5:01
How many of you are in the process
-
5:04
of redoing your sites so that it'll be responsive?
-
5:06
You just raise your hands real high.
-
5:08
I totally can't see you anyways.
-
5:10
How many of you are want do that but not quite there yet?
-
5:15
How many of you, your site is responsive, and you
-
5:17
feel like it's, like, exactly what you wish it could be.
-
5:19
Yeah, you're hadn went down after [UNKNOWN].
-
5:23
[LAUGH] You know, there's so
-
5:24
many complicated issues around responsive design.
-
5:28
How many of you don't care about responsive
-
5:29
at all, and are just in the wrong room?
-
5:32
No, that was another awkward Canadian joke.
-
5:34
Okay.
-
5:36
Well, I think that the problem is sometimes is we just jump
-
5:39
into these projects thinking about technology,
-
5:41
and we forget about the people.
-
5:42
The why, the why are we doing this, the how are we gonna connect?
-
5:47
One of my favorite TED talks is, it was
-
5:49
actually a TEDx talk, in 2009, by Simon Sinek.
-
5:52
Has anyone here, listened to the Golden Circle by Simon Sinek?
-
5:57
Few people.
-
5:58
Not very many.
-
6:00
Well here.
-
6:00
Here's your opportunity to learn about it.
-
6:02
This is basically what I base a lot of my work on.
-
6:06
And I get hired to help people connect to people
-
6:08
really, even though I'm a user experience designer content strategist.
-
6:12
So you've got these three concentric circles, and the outside circle is a what?
-
6:16
Everybody knows what they do.
-
6:19
Someone shout out what you do.
-
6:20
Like, what's your job title?
-
6:21
>> Event producer.
-
6:23
>> Even producer, [LAUGH], thank you.
-
6:27
what, what do you do?
-
6:28
>> Special events coordinator.
-
6:30
>> Special events coordinator, wow.
-
6:31
Okay.
-
6:31
You guys are sitting together.
-
6:33
You know it's easy to say what we do.
-
6:35
That's very easy.
-
6:35
It's easy for me to say I am an experienced architect, right.
-
6:39
100% of us can say that.
-
6:41
How it gets a little fuzzier, right.
-
6:43
Because how many of you have been in
-
6:44
a meeting, I think someone else talked about this.
-
6:46
Where your listening to a client or someone
-
6:48
else on your team say we really need
-
6:50
to do this and you just kind of nod and say oh that's a great idea.
-
6:52
We'll definitely do that, and as you walk away from that meeting and go
-
6:54
home that night you're thinking oh shit I have to learn how to do that.
-
6:58
Yeah that's happened so many times to me.
-
7:00
We need to figure out the how.
-
7:02
The how is kind of this bit of a fuzzier thing but then
-
7:04
there's the why, the central core that is fuzzy for almost all of us.
-
7:10
You know, and Simon Xena gives us great example, he gives a lot of examples.
-
7:13
He's got a website and a book on this now, too.
-
7:17
But when we think about this, this inner core, this why of a computer company.
-
7:21
So if you compared like a PC computer company with Apple computers.
-
7:25
I'm not saying that because I use Apple computers, I use everything.
-
7:31
But, you have the PC company saying what are we gonna do?
-
7:34
We're gonna produce a computer so that people can use it, you know.
-
7:36
How are we gonna do that?
-
7:37
Well we're gonna source parts from wherever we can, they're the
-
7:39
best parts we can acquire, they're a great cost, all these things.
-
7:42
Maybe we'll have a manufacturing place of our own, or, we won't.
-
7:45
Why are you gonna do it?
-
7:47
So people can use our computers so we can make money, right?
-
7:49
That may not be the whole story, but that's a bit of a summary that he gives.
-
7:52
He talks about Apple computers, and whether
-
7:54
you believe this or not about Apple computers.
-
7:56
But, how they start off by saying, we want to think differently.
-
7:59
We want to change the world.
-
8:01
Right, just give me a little bit because I was just thinking about that.
-
8:04
And then the how.
-
8:05
Well we are gonna start, you know, really thinking about computing from the
-
8:09
human perspective, you know, how is this device going to work for people.
-
8:13
And why or what, these things there are all around us, you know.
-
8:18
What if the iPhone hadn't come out, I'm sure another phone was on its way and
-
8:21
there, there were, but there are devices like
-
8:24
that that they produce that change the world.
-
8:27
Right?
-
8:27
And all of a sudden you connect that vision of the why to that.
-
8:30
And I'm far more compelled, suddenly, to buy an
-
8:33
Apple computer, because I wanna be part of that.
-
8:36
Now it may never have been more obvious that the
-
8:37
why may be missing a little bit in the now.
-
8:39
But we need to focus on the why of all of
-
8:45
our projects, and then build out to the how and the what.
-
8:50
So what is a responsive site?
-
8:52
You know.
-
8:53
I think we need to see the web differently, okay?
-
8:56
We need to put on different lenses that allow us to see the human web.
-
9:01
So a zombie alert.
-
9:02
I'm gonna show a zombie clip, I always do this, I always show something there.
-
9:05
It it's a little graphic, but that's okay.
-
9:08
Have any of you ever watched or know of The Walking Dead, the show?
-
9:13
Yeah, even though I can't see your hands, I'm assuming a few are up.
-
9:16
My wife and I watch it, which means I watch it and tell her about it afterwards.
-
9:20
Cause she watched the first few episode and she was like, oh this is too gross.
-
9:23
But, we both love it.
-
9:25
But here, here's something that I love.
-
9:27
I love that zombie movies tell the same story every single time.
-
9:31
Just variations of it.
-
9:32
They tell it in there own way.
-
9:34
You know?
-
9:34
Someone.
-
9:34
So if you've never seen a zombie show, movie,
-
9:37
never heard anything about it, probably someone will wake up
-
9:40
in a hospital, you know, maybe let's say 28 days
-
9:43
later, and there'll be no one around on the streets.
-
9:46
They'll somehow have survived whatever apocolypse has happened
-
9:49
that it caused everyone to evacuate, they're all gone.
-
9:51
They'll start wandering the streets and
-
9:52
then they'll encounter the undead, the zombies.
-
9:55
And they won't know what to do but, for some freakish way, they'll
-
9:58
like knock off one of their heads, and if they're that's how I survived.
-
10:01
They'll meet up with some other humans, they'll make friends.
-
10:04
They'll be in this together, probably most of them will die.
-
10:07
The hero will survive, and we don't know exactly how it will end after that, right.
-
10:10
But this is popular.
-
10:11
It's the same story over and over and over.
-
10:13
But it's told just a little differently each time.
-
10:16
[MUSIC]
-
10:24
[MUSIC]
-
10:36
[MUSIC]
-
10:54
[MUSIC]
-
11:07
So that's an alternate opening, from Great Arts if you go to
-
11:10
that link on Vimeo just search for it you'll find it very easily.
-
11:14
But it's so easy for us to focus on this.
-
11:19
What is happening around them, right?
-
11:21
This zombie apocalypse, and, you know what,
-
11:23
this is true about any disaster, right.
-
11:27
As a kid, I lived through a horrific
-
11:29
tornado, in the city of Edmonton in Canada.
-
11:33
It was a class five tornado, if
-
11:34
you know much about tornadoes, that's insane, right?
-
11:37
It, threw these giant oil drums that were hundreds and hundreds of feet across.
-
11:40
We would just pick em up and throw em across the city.
-
11:43
And it was terrifying.
-
11:46
but, and it was easy to focus on the disasters
-
11:48
of it, the destruction, the horror, and the death, right?
-
11:54
But, what, we start to see in the zombie
-
11:55
genre, and then these disasters is not this, it's this.
-
12:01
This is what zombie movies are about.
-
12:03
Humanity, our reaction to the apocalypse.
-
12:06
This is why I think they're beautiful,
-
12:08
even though they're a little disgusting too,right.
-
12:11
Is it that we see how, as people, we
-
12:15
will react in these dire circumstances and come together.
-
12:18
You see that all over the world when disasters happen, not to say
-
12:21
that they aren't horrific and awful, but is about our human interactions, you know.
-
12:26
When we think about the web we to think about
-
12:28
the humanity the face that we're putting on it right?
-
12:32
So really, its all about rocks.
-
12:38
Not this guy though, but maybe this, sorta.
-
12:46
So I'm gonna do something that I've never done before.
-
12:50
And this is actually a new talk, so this is interesting for me.
-
12:53
But I'm gonna do a physical demonstration.
-
12:55
So we need to start with the right stuff.
-
12:56
So if we can get the camera on the table, that would be great.
-
12:59
hopefully, yeah, look at that.
-
13:02
Power pose.
-
13:03
'kay, [SOUND].
-
13:04
Has anyone here read Steven Covey's book,
-
13:09
The Seven Habits of Highly Effective People?
-
13:15
You know I'm always surprised to how few people have read this book.
-
13:19
And it's not because I think that Steven Covey is a great, great author.
-
13:23
Or because, people must read this book.
-
13:26
But because of how impactful it was on my life.
-
13:29
And how whenever I interact with people that
-
13:31
are leading organizations and successful, they've read this book.
-
13:35
You know?
-
13:35
So he talks about, these four quadrants that are the I'm not about to
-
13:41
drink like a big cup of something here, this is, this is sand actually.
-
13:44
He talks about these four quadrants.
-
13:46
They are the urgent important, right?
-
13:49
And so, if this thing, if we don't do this thing someone will die, right?
-
13:53
The non urgent important.
-
13:54
See these are things in our life like
-
13:56
exercising, eating well, where they are really important
-
14:00
and they will transform us, but they don't
-
14:03
seem urgent because they don't transform us that day.
-
14:06
And then we've got the, urgent non-important, right.
-
14:12
So that may be you know, someone comes in
-
14:14
and says, hey there's doughnuts in the conference room.
-
14:16
Well its urgent, cuz those donuts will go bad, but I don't really need them.
-
14:21
And then the last quadrant is the non-urgent, non-important, right?
-
14:26
And that's probably wasting time on, like a television show, or something like that.
-
14:32
It's not to say that we shouldn't have things in all these
-
14:34
quadrants, but he talks about the
-
14:36
importance of focusing on the non-urgent, important.
-
14:40
The training ourselves, the taking care of ourselves.
-
14:43
So but there's this problem.
-
14:45
Right.
-
14:46
So let's say this pitcher is our web project okay.
-
14:49
And we're gonna put in, I think I'll even put in a little bit more sand.
-
14:52
I've got this giant Home Depot I was surprised
-
14:55
to find a Home Depot in Manhattan, that was awesome.
-
14:57
It wasn't fun carrying 10 pounds of sand around though.
-
15:02
So let's say we put the sand in first.
-
15:03
So maybe this is this is some of the RFP that's
-
15:08
come to us, you know, and all the features that might be
-
15:10
turned on on an Oracle site, and all these things that
-
15:13
aren't really all that important, but they start to take over, right?
-
15:18
And then we've got, maybe some smaller
-
15:20
colorful rocks that will go in here, right?
-
15:22
And so we've got other things that start to come up, you know,
-
15:25
different personalities, working their way out that allow us to start to think
-
15:31
about other features like the carousel on the homepage or how important the
-
15:35
homepage is to different people, even though
-
15:38
somehow we feel like it isn't important.
-
15:39
And then we get to slightly bigger rocks again.
-
15:43
Alright.
-
15:44
That's probably good enough.
-
15:47
Where, you know, these are the things that start to really matter.
-
15:50
You go, oh, okay.
-
15:51
Yeah, you know, we've got this messaging from
-
15:53
our marketing department but we also have this
-
15:55
messaging you know, for this core part of
-
15:58
our product that needs to make it out there.
-
16:00
oops, we gotta get those in there.
-
16:02
And then [SOUND], fresh from this street look who's here.
-
16:08
We've got our big rocks okay.
-
16:13
So these could be things like I don't know our content.
-
16:18
You know, our maybe it's actually how we're connecting to our users.
-
16:23
So we're gonna talk to our user research.
-
16:25
We decided to do testing at the end of the
-
16:26
project for some reason and forgot to do it all throughout.
-
16:28
You'd see my problem here, right.
-
16:30
I have run out of room for things in my web
-
16:34
project, and so somehow I need to reshuffle or maybe, maybe the
-
16:39
content needs to totally change, or maybe we don't talk to
-
16:41
our users at all, and we'll just leave that one over there.
-
16:44
It's a bit of bullshit, isn't it?
-
16:47
What if we took another jug, and instead of putting the sand in first,
-
16:53
[LAUGH] which I almost did, we'll grab some of the big rocks.
-
16:59
We think about our content, our message, and plop it in.
-
17:03
You know maybe this one is talking to our users
-
17:04
early and often, and for that a few different presentations.
-
17:08
What else, here we'll grab this one.
-
17:13
You know and maybe this is the vision of the project.
-
17:17
Alright, so we start to have these things and then
-
17:20
we can go back to our other rocks we say okay,
-
17:24
so we have our design principles our fundamentals that are coming
-
17:27
out of this, where we're trying to interact with people [SOUND].
-
17:31
You can see what's starting to happen here.
-
17:33
Alright.
-
17:33
I'm going to put a few of these in, [SOUND] they start to fit their way
-
17:38
around, oops, these big rocks in here, and then we start to get some of the features.
-
17:44
Some of the other things that we know are gonna be important.
-
17:47
You know but we've dealt with the vision, the
-
17:49
content, the users, maybe revisiting some of the user testing.
-
17:53
[SOUND] I hope you can see this.
-
17:57
And again the level hasn't gone above the top, big row yet.
-
18:04
Not even once.
-
18:07
What if we were to take some of these other things now, these things that
-
18:10
we knew at the start somehow didn't feel
-
18:12
right when we're putting into our web project.
-
18:14
[SOUND] You know, let's pile a little bit more
-
18:20
of these features, and some scopes on some of the stuff that we want in our project.
-
18:25
But weren't sure could fit, but because we had
-
18:28
this strong vision, first, we talked to our users.
-
18:32
We talked to people, we made our project human.
-
18:35
Hell, let's not stop at the sand, is what makes everyone nervous.
-
18:41
Let's get right into the water now.
-
18:43
Read into all these other things, you know,
-
18:45
that we can start to enhance our project with.
-
18:48
I recently was working with the government in Canada.
-
18:51
I'll let that settle a little bit.
-
18:56
And their IT manager was on the stakeholder group.
-
18:58
I don't know if you've ever worked with an IT
-
19:01
manager but often they see things in a particular light.
-
19:04
They're thinking about the technology.
-
19:06
And we're going through this process of atomic content modeling, and he started to
-
19:11
kind of laugh at one meeting and I thought oh-oh, [LAUGH] this is going horribly.
-
19:15
And I believe in addressing things right away, within
-
19:18
the meeting, you know, not letting elephants sneak around.
-
19:20
And so we talked about it and said well, well, what's funny right now?
-
19:23
And he looked at me, and no joke he was giggling like a little kid.
-
19:26
He said, I love this process so much.
-
19:29
My project suddenly makes sense to me, right?
-
19:31
And it was because he could see how people could connect to it.
-
19:35
So I could keep going here.
-
19:36
The water could keep sinking and settling in, and
-
19:39
it's because we started with the big rocks first.
-
19:43
I am not gonna leave, well, maybe I will.
-
19:44
Hopefully, I don't knock any of this over.
-
19:47
We can go back to the slides, though, now.
-
19:51
Thank you for that.
-
19:52
That was seamless.
-
19:55
So this was really powerful for me the first time I read about it.
-
19:57
And then I saw it, and I wanted to share it with you because sometimes
-
20:00
when we see these things physically they stick in our head, and we don't forget.
-
20:04
Maybe you won't have time to read that book, but you have a
-
20:06
bit of an understanding of why we start with the first things first.
-
20:09
You start with the right stuff.
-
20:11
So for that same government, we're looking at
-
20:13
their site and, my work is often quite messy.
-
20:16
I'm a big believer in digital prototypes, designing in the browser all these things.
-
20:21
But I also am a big believer in this, in us being together, sketching.
-
20:25
That it is not my job to do all the sketching, either.
-
20:28
That is everyone's job on the team.
-
20:30
So this is that same municipalities.
-
20:31
See, they want it to be a web first organization that empowered [INAUDIBLE].
-
20:36
right, but in the middle there, is a bit
-
20:38
of an example of a content model that failed.
-
20:43
And initially.
-
20:45
So, let's take a look at that one.
-
20:49
So this is loosely based off of
-
20:51
Starbucks when they relaunched their responsive site initially.
-
20:54
Right?
-
20:54
And so they had, if you haven't heard the
-
20:56
blob versus chunk argument from Karen McGreen please look that
-
20:58
up, but blobs are these giant blobs of HTML
-
21:02
content, where as junks are more discrete pieces of content.
-
21:05
And that's the way to go.
-
21:06
But let's say this is their initial site.
-
21:07
And we have a logo, site ID, navigation, you know, a
-
21:11
big blob of HTML content where their main body of stuff is.
-
21:16
What they call the sidebar, unless your using
-
21:18
WordPress please don't call that a sidebar though, footer.
-
21:22
And then they have this really important call-to-action, buy this product, right.
-
21:26
And it was right there.
-
21:27
And it's in a great spot for, a desktop or a large screen type like this, right.
-
21:33
But because they had these blobs of content, how do we thought about it.
-
21:35
Like how many of you use your phones when you're in Starbucks?
-
21:38
I see everyone that goes to Starbucks, we're on our phones.
-
21:41
So this what we call action, when I was
-
21:43
refactored, all of a sudden they have this giant
-
21:46
blobs, they haven't thought about pulling this out of
-
21:49
there, and so we've got this lost call of action.
-
21:53
It's so sad.
-
21:58
And then, what if we thought about it from chunks
-
22:00
instead of blobs, we still have our side idea logo.
-
22:04
Now were still over navigation, but maybe we've got
-
22:05
a title here, and maybe we've got a bit of
-
22:07
intro copy, clarity copy, debt copy, whatever you call it,
-
22:10
you know, maybe there is the rest of the body.
-
22:12
We've got this call to action, is a discreet piece of content,
-
22:15
but we have this secondary area and the reason why you shouldn't call
-
22:18
it a sidebar is because it won't live on the side on the
-
22:21
majority of devices accessing it because the majority of devices are now mobile.
-
22:26
And then we have this tertiary area, which is the footer.
-
22:29
If we refactor this, where the call action
-
22:31
was there, suddenly we can have this successful
-
22:33
call to action closer to the top, that allows us, I don't believe in the fold.
-
22:39
I think its just its so weird that we continue to use
-
22:41
terminology like that, although I get it, the sun doesn't rise and set.
-
22:45
you know that's old language but it makes sense to us now.
-
22:48
But we do see more conversions when we have this call
-
22:51
to action on the first screen if it's an important one.
-
22:54
You know so it's this happy moment.
-
22:55
This genuine surprise of how successful we can be.
-
22:59
So when I get in with a client, and then working on a project, this
-
23:02
is a, this is basically what the start of this atomic content molding process is.
-
23:08
Now I've done all the content audits, or someone has.
-
23:11
There's been inventories.
-
23:12
I know where the content lives.
-
23:14
We've actually talked through, at this point, the user experience
-
23:17
vision, or the vision for the project, we've designed principles established.
-
23:22
But when we get to here, we start to list out all the discrete pieces of content
-
23:26
that will live on every unique view, right, and
-
23:30
so, like this site had about 10,000 pages, right?
-
23:34
And we did not do this 10,000 times.
-
23:36
We did this 12 times, they had 12 unique
-
23:38
views that would handle the content across the entire site.
-
23:41
So we list out things like the navigation
-
23:43
the site ID, everything that was gonna be here.
-
23:45
Even if some of them, the related content thing, it got scratched off.
-
23:48
We realized, what, we don't need that, but we listed everything off.
-
23:52
Everything is then grouped, oops, you know what
-
23:54
I'm gonna come back to that, that's right.
-
23:59
Because often, I skipped a step here.
-
24:01
Often we think about what system is best for content like this.
-
24:07
I spent quite a few years working with Open Source Systems.
-
24:10
I helped work on some of the stuff for Drupal 7.
-
24:14
I, I loved working with Drupal.
-
24:16
So what system is best?
-
24:17
Well recently I saw this.
-
24:18
And and a client had forwarded it to me because
-
24:20
they said this is what I want where I work.
-
24:22
There's can't be anything
-
24:28
out there better than this.
-
24:35
[MUSIC]
-
24:38
[MUSIC]
-
24:57
[MUSIC]
-
25:12
[MUSIC]
-
25:27
[MUSIC]
-
25:32
>> So basically that's magic, right.
-
25:34
It's amazing, it looks great.
-
25:35
What about this?
-
25:36
If you thought about.
-
25:37
>> My name is John.
-
25:38
>> Web design and there's a zom, zombie.
-
25:40
>> Making what was once impossible.
-
25:41
>> My name is Anna, and this is my world.
-
25:45
>> Possible.
-
25:46
>> My name is Umico, and this is my world.
-
25:50
>> With technology advancing so rapidly today.
-
25:53
>> My name is Faye, and this is my world.
-
25:55
>> Imagine what our world would look like [SOUND] tomorrow.
-
26:03
[NOISE] [SOUND]
-
26:08
>> My name is Alice, and this is my world.
-
26:12
[MUSIC]
-
26:26
>> Okay.
-
26:27
No system is perfect.
-
26:27
That's all I'm saying.
-
26:29
[LAUGH] I'm actually not promoting nor saying you shouldn't use Squarespace.
-
26:32
I actually think it is a great system.
-
26:34
But, we need to know the limitations of our system, right?
-
26:38
And I have worked on so many projects where it's
-
26:40
brought in as an Oracle project, or a Drupal project.
-
26:43
And that's okay.
-
26:43
Those can still be successful.
-
26:45
But you know what the ones that inspire me are?
-
26:47
And they're usually a lot more successful?
-
26:51
Is when we start with the content.
-
26:53
Is when we start with the people, the humanity, and find what's going to
-
26:56
work with what messaging we need to get out there, how we're gonna connect.
-
27:00
So no system is perfect and we need
-
27:03
to understand how our content will live within it.
-
27:08
But many are great.
-
27:10
There are many great systems [INAUDIBLE] so if
-
27:11
you're not familiar with it, there is Squarespace.
-
27:13
You've probably seen this on Hulu, or something, as
-
27:16
a commercial You know, they've got really interesting commercials, Squarespace.
-
27:20
There's also Virt, you know, another similar type of, of system.
-
27:23
These are low cost, where you could do something on
-
27:26
WordPress.org, right, if you're doing a blog or something like that.
-
27:29
You could install your own version of
-
27:31
WordPress, and really customize and go with it.
-
27:34
You know, you can use Drupal.
-
27:35
I've worked on many enterprise, level client projects on Drupal.
-
27:40
A lot of your government sites here in the
-
27:41
United States run on Drupal, it's a great system.
-
27:44
You could also use Oracle.
-
27:47
They're sort of opposite of each other in philosophy but, you
-
27:51
know, Oracle like it or not is an incredibly powerful system.
-
27:55
And Iron Man uses it, so you know, that's pretty good.
-
28:00
But here's the thing.
-
28:02
A
-
28:05
website is a black hole without its content.
-
28:07
So I think that those people that build those system have one
-
28:09
of the hardest jobs out there cause they're trying to think of every
-
28:12
possible scenario, and they're trying to create an interface that would work for
-
28:15
you to build a new scenario even though they don't know your content.
-
28:19
And that's where this comes in, we're looking at the atomic piece.
-
28:22
So we're looking for that one piece that everything else will revolve around.
-
28:29
So on a food site, you know, that may be a recipe.
-
28:33
Sarah Waktabooker, really hope I got her name right, talks about this
-
28:37
in her book, and how there's this food site and they decided
-
28:41
that the recipe was for this central core piece of the content
-
28:43
modeling, and that everything else related to it, like the different ingredients.
-
28:47
So you could go to this food store to buy this ingredient, you go
-
28:51
to this recipe cause this or this
-
28:53
restaurant because this chef prepares this food.
-
28:55
And it became this community that's founded around recipes, not around
-
28:58
ingredients not around chef's that prepare these things, but the recipes themselves.
-
29:02
So we go back to this municipality and we zoom in a
-
29:05
little bit on this, we can see there's red and green stuff here.
-
29:09
So everyone on the project team at this point,
-
29:11
that's in this room, and there were six of us
-
29:15
had to prioritize everything into three different groups.
-
29:18
First group is essential, right.
-
29:20
The, this view can not exist without these things.
-
29:22
So we see things like navigation, you know,
-
29:24
the site ID, search falling into that group.
-
29:28
You know, but other things like audio, and social channels are not.
-
29:33
And then the second group is, this would be great to have.
-
29:36
This will enhance the experience This should be there if possible.
-
29:40
And the third group is, these are nice to haves, you know.
-
29:42
And we noticed that some of those get scratched off after a while, cause
-
29:46
we realize it's nice to have, but it actually takes away from the experience.
-
29:49
That's the easy part in putting those three groups up there.
-
29:52
Then everyone is forced to agree upon
-
29:55
the prioritization of everything within those groups.
-
29:59
So something in group number one is number one.
-
30:02
In this, where did they set it as?
-
30:04
Do we see it up there even?
-
30:08
it's, must be off the screen.
-
30:13
oh, set ID logo.
-
30:15
That's what they decided as a group there.
-
30:18
You know, but from that, we then start
-
30:20
to sketch out the possibilities within an interface.
-
30:23
Now, this is where I'm a huge believer that you
-
30:26
need to get into the browser as soon as possible.
-
30:29
If you can't do that on your own, team up with someone that can.
-
30:31
Because there's no way for me to fully represent in the, in sketches
-
30:35
like this, every scenario, because the site
-
30:37
responds at every different screen-size resolution, everything.
-
30:42
It's not just about the break points, right.
-
30:44
That's just where it totally breaks, and we need to
-
30:46
refactor to present our content properly and keep those priorities.
-
30:50
But, a good exercise to do is to just simply do
-
30:52
small screen and large screen, and start to think about those possibilities.
-
30:56
The amazing part is how this moves you into the next bit of your process.
-
31:00
So what we do is, we find this one piece of, for their site, for this
-
31:03
government site, it became the page title and
-
31:06
clarity copy was their atomic piece of content throughout.
-
31:11
Because people were looking for services.
-
31:13
You know, governments are, are service providers essentially.
-
31:17
They're connecting us to our services.
-
31:19
You think about a city and its website.
-
31:21
Like cities are content wide, and miles wide
-
31:24
and inch deep cuz they provide everything to everyone.
-
31:27
But you're coming to find that particular piece of content
-
31:30
you may be saying, I wanna find my dog laces.
-
31:32
Right?
-
31:32
And so, knowing that you're on the right page, the
-
31:35
right view, with a little bit of clarity copy became important.
-
31:38
So that all seems really great but how
-
31:41
does this help us fully on a responsive project.
-
31:43
Well it's interesting that Jacob mentioned this but this
-
31:46
is that Wikipedia page that he talked about in his.
-
31:50
So this is for just Android phones, this is actually from nine months ago now.
-
31:54
The first column is the name, second column is the
-
31:56
release date, then the Android version, then the screen size.
-
31:59
And so we're in HTC right now, if we start to scroll through this you can see
-
32:04
that every almost everyone is slightly different combination
-
32:08
of screen size and, and version of operating system.
-
32:13
Okay now we're in LG.
-
32:13
I don't know, can we see the scroll bar on the right?
-
32:16
See that's the problem If you look at the scroll bar, there's so much to this page.
-
32:20
We're in Motorola.
-
32:21
And, again, this is just Android.
-
32:24
Samsung devices, I'm using a Samsung phone today.
-
32:27
I love to use it when I travel.
-
32:29
Sony Ericsson, let's, we better get going really fast
-
32:31
here though, I don't wanna stay on this too long.
-
32:33
Let's get down further.
-
32:35
So we're getting into different kinds of devices and almost
-
32:37
now so e-readers netbooks, smart watch, future devices, oh interesting okay.
-
32:44
Future Android smart phones, tablets, rumored tablets.
-
32:48
Other future devices my favorite category of all of them.
-
32:52
You're like what do you do with this, right?
-
32:53
Can you start with a hm and you end up with a oh shit.
-
32:58
Because there are hundreds of android devices that have different options.
-
33:03
Right?
-
33:04
Different screen sizes, different versions of the operating system.
-
33:07
People could be using different browsers on those devices
-
33:09
if they wanted to, and that's just one platform.
-
33:12
Right.
-
33:14
What if we start to think about other things, where our content could live?
-
33:17
I've a couple other people were talking about
-
33:19
Google glass and different devices like that, you know.
-
33:21
We were caught off guard in 2007 when the iPhone came out, because we had started to
-
33:26
think about every year we'll get a little
-
33:28
bigger with our resolution, and it was like boom!
-
33:31
Totally changed.
-
33:32
You know, the real web is existing on smaller devices.
-
33:34
What about Google glass?
-
33:36
Or this even?
-
33:38
What would delivering your content to a
-
33:39
pebble watch, or something like that, smart watch.
-
33:42
Anything that's hooked up to your phone, or standalone device.
-
33:44
We don't know, we could be delivering our content
-
33:46
to a billboard, to a screen this size, right.
-
33:48
I was in a presentation and my site came up and
-
33:51
I got to see how it worked on a low resolution, projector.
-
33:56
Cause it needed to be responsive to work with that.
-
33:58
What if we are using a smart watch, which is too hard maybe
-
34:02
to read a lot of content on, but we have an audio device.
-
34:06
And so we can go, oh, I wanna hear that
-
34:07
email and we just have this little audio device, right here.
-
34:10
And so it reads our email to us and we can respond back and forth that way, right?
-
34:15
This is where we need to start to really document these models.
-
34:19
These are where these things start to help us.
-
34:20
If we understand what that discrete piece of content is, we can deliver it first.
-
34:24
We can prioritize it.
-
34:25
We can say, for them to understand this
-
34:28
particular view, we're gonna send out priority one, one.
-
34:31
And if we can, one, two, right.
-
34:33
These things start to get out there, they start to make sense.
-
34:35
So, how it helps you process, won't help you process though.
-
34:40
is, you could start to document these out this is
-
34:43
the notes that we took during that session for that
-
34:46
same city and I, I removed the city's name because
-
34:48
the project isn't done, they're okay with me sharing this.
-
34:50
I'm not like doing this without permission.
-
34:52
But these documented models become the annotations within
-
34:57
the wireframes, or at least some of them, right?
-
34:59
And we see these sketches, and we can start to build this system out, right?
-
35:03
And so there's in-browser wireframes.
-
35:05
I don't, I used OmniGraffle for years, and I have not touched it in two years.
-
35:12
I had to open it up at one point, it just
-
35:14
like, you know what, I can do this better in the browser.
-
35:17
So, this is that same government, that same municipality.
-
35:21
You know, representing their
-
35:26
there should be real content in here.
-
35:27
This is kind of the mistake with this
-
35:28
one, but their annotations, their content modeling is here.
-
35:31
They can start to see it and touch it and live with it and bring it up
-
35:34
on their phone, their tablet, you know, their computer,
-
35:37
whatever it happens to be, a movie theater screen.
-
35:39
They can see how it's going to respond.
-
35:43
Now the truth is only web designers stretch their screen back and forth.
-
35:46
right, cuz we think it's cool.
-
35:48
But, they can actually live with this and, and there's so many ah-hah moments that
-
35:53
I didn't experience doing things in a
-
35:55
static environment of Omnigraph or something like that.
-
36:00
So, these things begin to speed up my process because I spent more time
-
36:05
on the content and the Atomic Content
-
36:07
modeling at the start, and understanding it.
-
36:09
Everything else has gone faster for me.
-
36:12
I come in under budget on most things, allowed us
-
36:15
to do more, to fit more into our jug, right?
-
36:20
The big rocks went in first.
-
36:21
So what about the future?
-
36:23
Hm?
-
36:24
What is the future?
-
36:25
How does this impact our future?
-
36:26
This is great, this is practical, this is now actually.
-
36:29
And we've got this idea of this atomic content,
-
36:31
finding this nucleus that builds out everything else around it.
-
36:34
But then we also have this idea of heart, of humanity, of connection.
-
36:42
All right.
-
36:42
We wanna create this experience that goes beyond the technology,
-
36:47
beyond our content management systems, and connects with you and me.
-
36:51
[BLANK_AUDIO]
-
36:56
So what's the future of the web?
-
36:58
What are people wanting, needing, going to hear, was this atomic piece.
-
37:04
I think the future of the web is all of us
-
37:05
taking responsibility for the web, and building a whole hearted web.
-
37:09
I was just at another conference where they talked, or every speaker talked
-
37:14
in that way where they were talking about people as holistic Individuals, right?
-
37:19
Brune Brown does this great talk, which this phrase is from.
-
37:22
She talks about us being wholehearted.
-
37:24
But she also says that our stories, are data with a soul.
-
37:28
If you find all these databases, all these pieces
-
37:30
of content, all these things that live up there.
-
37:32
But they come out, and they tell the soul of who we are.
-
37:35
Alright?
-
37:35
That's why I get so excited about what I do, and why I
-
37:39
hope that you'll get really excited about doing some of what I do.
-
37:43
We start to connect people to people.
-
37:45
And we see the future of the web as being a wholehearted web.
-
37:47
Thanks.
-
37:51
[SOUND]
You need to sign up for Treehouse in order to download course files.
Sign up