Join James Williamson for an in-depth discussion in this video Content planning, part of Applied Responsive Design.
- View Offline
One of the biggest changes to the design process when designing responsive sites is also one of the most overlooked. Everyone tends to focus on the techniques necessary for repurposing content over multiple devices, while ignoring what this does to the process of actually planning the sites. In this chapter, I want to take a brief look at some of the considerations necessary for properly planning responsive designs. I want to start with the most important component of the entire process, and that is examining the content. So what you're looking at on my screen right now--I've opened this up in Word--is a content survey document, and you can find this in the Chapter 1 Exercise Files directory, the 01_01.
I've two versions of this. I have the survey_desolve.doc, which is what you're looking at, and that's going to serve as our exercise files. And then I've sort of a blank one that you can use as a template. If you've never used one of these before and you want to start creating your own, you can use this as a starting point. Now, this is a really simple example. It's not as robust as a lot of the content surveys that I've seen, but what this does is it's going to help us present the idea of what a content survey is and what type of things you're going to need to start thinking about once you start planning responsive designs. Okay. So one of the things that you can see with my content survey here is I have four columns.
I have the content itself; the type of content that it represents; the section of content, meaning is it site-wide, is it unique to this page, that sort of thing; and then a priority, meaning how important is this content to the success of this page, how important is it to the user that wants to take a look at this content? Now, I've got some footnotes down here at the bottom of this that sort of go over these a little bit more. So I just want to take just a moment before we get into the example itself, of talking about what each of these sections is describing. So in terms of type, there are a couple of ways that you can approach this.
One is to use some existing schemas or taxonomies or microformats that are out there that describe a certain industry or type of content. This is especially helpful if you're going to use these types all of microformats later on to make your content a little bit more accessible or to make more semantically rich content, because you can sort of already have those in place. Now, I'm not using anything quite that complex. I'm basically using sort of a custom content type that allows me to categorize my content and sort of place it into silos.
Is this part of my branding, is it more informative for the user, is it a type of media, that sort of thing. Now, the section column to the right of that, this is again a little custom thing that I use that tells me, what type of content is this? Is it content that is site-wide, which would be SW? Is it content that goes in a specific section of my website? So, for example, if I have a Products section where I have a lot of pages in that that describe different products, does it go in that section of the website? Or is it page specific, meaning unique to this page? Next to that I have a priority level, and of all the things that you do within a content survey, the listing of all the content on the page, really just going through it is an important part of the process, because it gives you an idea of exactly how much content is on that page and whether you need that much content or whether you have gaps in your content.
But probably the second most important part of this process would be the priority level. How important is this content? So it allows you to really take a moment to rank the content by level of importance and develop sort of a hierarchy of the content, and you can start to think about, okay, as I'm molding a responsive design, what content do I need to keep in the forefront? What considerations do I need to make for this content when I go down to a smaller screen, and am I making sure that the highest-priority content is easily accessible to the user? So this is something that helps clarify and focus a content strategy for designing all of your responsive designs.
Now, in terms of a priority level, again, I have my own way of doing this. If I scroll down, you can see I have five levels. I have Critical, Important, Top-level, Secondary, and Extraneous. Critical is just highly critical content. It has to be easily accessible to the user regardless of screen size and/or device. So that's content that I'm always going to try to put to the forefront of the page to make sure there is not a lot of scrolling or clicking that goes into somebody discovering that content. The Important level is still a very high degree of importance. It should be very easily discoverable, probably the first thing that people see if there's no critical content on the page.
The third level is a Top-level, which is solid page content. It's important, but it doesn't rise to the level of critical importance. So it's something you want people to see, you want them to discover easily, but it's not something that absolutely positively has to be towards the top of the page or immediately visible. Then I have Secondary Content. Now, this would be content that's related to the top-level content or secondary content that I'm just passing along, good information for people to have, but maybe not something that absolutely positively has to be front and center. A lot of times this might be ads, this might be sidebar content, that sort of thing.
And then the last category that I have is Extraneous Content. Now, this is content that once I do a survey of the page and I take a look at it, I really can't rank it anywhere. It's content that's like, well, it's kind of nice that it's there, but it doesn't have to be there. And one of the things that having this type of a priority level will do for you is it will force you to take a look at content and say, does that content really need to be on the page? Can I get rid of that content, and if I do, does my page suffer for it or are the users going to be upset about that content being gone? Now, I'm definitely not of the mind that for small screens you need less content.
I don't believe that at all. I believe there are lots of ways to make sure that people on smaller screens are getting the content that they came for. So I'm not an advocate of pulling content out of a page just because it's going to go to a smaller screen. However, I am an advocate of really taking a look at your content, focusing on it, and making sure that what you're putting on the page has a reason for being there, because if it doesn't, then you're just making more work for yourself when you start redesigning the layout for smaller screens. So I'm going to go back up to my table here, and I'm just going to run you through the thought process of going through a survey like this.
So on the left-hand side I have a list of all of the pieces of content that are going to be on my index page. This is something that you can do as content is being assembled. You can just start filling this out. You can do a survey after you've sort of thought about the original structure of the page, but you want to do this really early on in the process. This actually could be the very, very beginning of your planning process, is thinking to yourself, okay, what does need to go on the index page, and just start listing things. Ranking them can give you an idea of whether it really needs to go on the page or not. Okay, so the first thing I'm going to take a look at is this section right here for latest galleries.
Now, latest galleries, in terms of types of content, it's going to be a section. And then I have city name, which is informative, because it's basically telling people what city they're looking at; the date, which is informative--when was this gallery uploaded; a teaser image, that's basically just decorative media. Now, here is something that's interesting again. Now, this is my own categorization, so you can come up with what works for your website or you can use some existing schemas that are out there, but I actually do differentiate between media and decorative media. And let me tell you what the difference means to me.
A media would be like either an image or a video that if somebody were viewing this on a screen reader, or if somebody were just to see the HTML and not any of the styles applied to it, that that image really needs to be seen. This is a figure that's like a chart or something like that, something that actually needs to be part of that content. Decorative media would be, it's an image that represents the gallery, but it doesn't have to be there. It's just decorative. And that allows me a lot of times to think about what's best served by using a background image and what's best served by using an actual image tag, that sort of thing.
The gallery tagline, that's going to be informative. Now, I'm going to go down to my site search, down here at the bottom, and social media connect. I actually list search as being its own type of category. And for social media connection, that's going to branding, so that might be your, "like us on Facebook," "connect with us on Twitter," that sort of thing. All right! So now that I've got all the types of content listed, I can actually start categorizing that content and grouping them into silos of content and taking a look and saying, okay, do I have too much in this area, do I have too little here, have I not included a category that I need? It gives you a nice way of sort of skimming your content without having to get into the nuts and bolts of it.
Now, in terms of sections, this latest galleries is just going to be unique to the page. This is a teaser to get people to click into the latest or the most featured galleries, so all of those guys are going to be unique to this page. However, the search and the social media connect, that's going to be on every single page, so that needs to be site-wide. Now, that allows me to filter the content a little bit more and say, okay, for my entire site, what content is site-wide, and let's rank that content. And that really helps me establish my basic page templates. How should the page layout look? Where should the content be presented that's going to consistent all the way across the site? Now I have to go in and think about ranking this. Where does this content fit priority-wise? Now, I've already got some of the content ranked.
So when I come back in and look at the latest galleries, it's going to be on the homepage. It's going to let people know which galleries have been uploaded recently. If they are a frequent visitor to the site, it's going to let them know if there's new galleries available for them, that sort of thing. So it's important content, but it's not critical. It's not going to help them navigate the site. It's not going to pass along the branding of the company, who is this, that sort of thing. So in that sense I'm just going to go ahead and rank that with a 2, which means that it's very important, but it's not critical. So it's definitely something I want towards the top of the page. It's definitely something that I want easily accessible, but it's not absolutely critical that the user be able to see it at first glance.
I'm going to get some strong disagreement from some folks for what I'm about to do down here for site search and social media connect. For both of those, I'm going to go ahead and rank them a 3. Now, that means that they're important, but it means that they're not critical. It means that they don't absolutely have to be at the top of the page or easily accessible. Now, I know there is going to be a lot of disagreement with me in terms of the search, maybe not the social media connect, but in terms of search. Especially for mobile devices, there's a big trend in deemphasizing navigation and emphasizing the site search over that, because mobile users a lot of times want to do a search rather than look through a menu.
So you would think that that would rank a little bit higher, but in terms of this site, in this site alone, this site is very small. There are only four main sections, and inside each of those sections there might be one or two pages. So it's very easy for people to discover what they want simply going through a very, very simple menu. So in my opinion, for this particular site, search isn't quite as important. Now, if this was a much larger site, with a blog component and a really robust product section, then I would probably move search a little bit higher up in the priority level.
And that just sort of illustrates that every single site is different and you'll really need to carefully consider this before you start working on mockups and layouts and wireframes. Really start thinking about how this content is going to interact with each other. So this is obviously a really simple example, but this is actually what I do. It works for the majority of my personal projects. If I was working on a much larger site, or if you guys are going to be working on sites run by a content management system or some collaborative process, if you guys are working on a team together, you're probably going to need to develop a content survey that fits your site's format and workflow.
Regardless, I cannot stress enough how important it is to start any responsive design by first examining the content and then developing a strategy for how that content is going to work across multiple devices.
- Creating mockups
- Structuring page regions
- Defining default styles and media queries
- Building desktop, tablet, and mobile layouts
- Structuring and styling menus
- Dynamically replacing menus
- Creating a responsive image gallery
- Adding phone functionality
- Testing responsive sites