2.1 Content and Responsiveness Plan

Hello, and welcome back to Responsive Web Design Revisited. In this lesson, we are going to look at how you can create a content and responsiveness plan with which you can kick off your web design process. The reason we do this is, because with the content first approach, you have to change things up a little bit. If your site is going to put content first, then how are you actually going to get started, because you need to have some idea of how this site is going to form up in order to know what content to bring together. Yet, you need the content in order to build a content first site. You could use wire framing or you could do hand drawn sketches. However, often the easiest way is actually just to put together a written plan of what you intend to do. So, a written plan can cover what your content will be, how it will be arranged in the site, and it could also include notes on responsive behavior. And by writing your plan instead of creating it visually, you don't get ahead of yourself by moving into a design phase before you have your content foundation together. And this can be a very simple, but very effective, way of starting off your projects. Let's have a look at an example content plan. You've already seen the site that you're going to be creating, and this is how that site began. It's very brief, very to-the-point plan of what was going to incorporated into the site design. Now the approach that I like to take is, stacking what I like to think of as blocks on top of each other. So, I would consider the header of a website to be a block. I would consider a footer to be a block. Or a hero unit to be a block. Anything that stacks one on top of the other. So, I'll normally go through and create just a couple of brief notes on what each of these elements of the site, from top to bottom, are going to incorporate. So in this example, I know that I wanted to put the header and the menu in that top block, so I've just made a note that left aligned, there would be the logo image, and there would be the business name. And I knew I wanted to put that in a web font so that it would be SEO readable, and so that I could manipulate the size of the business name. I also need at right aligned, I would want to have the main navigation menu. Now, you'll notice that I haven't put any specific notes about how the navigation will behave responsibly, and that's because for every site, you can make a certain set of assumptions. You can assume that your going to have touch-friendly navigation menus as a rule. You can assume that you're going to have them collapsible at smaller widths when there's no room to have a fully expanded nav menu. So, you don't need to make special notes in that regard. You can assume that your heading tags are going to get smaller in a smaller view port, and you can assume that your horizontal padding amounts around your text will also reduce as there's less space to work with. So, you don't need to make special notes for things like that. Next up, I have planned the hero unit, and I know that in this section I wanna have a few words that create a two-second pitch of what is on offer. So, this is gonna be for a generic business website. It is generic, but it's also based on what I've found to be the most common elements that my own clients have wanted in freelancing projects. So, these kind of elements are things that you will run into often. Now, included in the hero unit, we're going to have two call to action buttons, one which will be a purchase button for the imaginary product, and one that will be a link to get more information. Below that we're going to have a series of selling points. We're gonna have four items, and each one will list one of the top-selling points for our business. We're going to put these, here, we have it, specified in some of our response, responsive functionality, that they will be in columns at full width, and then we're gonna be stacking them. So, rather than having four selling points one on top of the other, we are gonna start them side by side in columns. For each one, I want to have a left-aligned icon, with some headline text next to that, followed by a short paragraph and a link to more information. Below that, I wanna have an information section, where I'll have a left aligned promotional video and a right aligned welcome message with a headline and a short piece of text. Below that, I wanna have one more expanded information section with four testimonials, and that will be structured with a heading at the top of the section. And for each testimonial, we'll have comment text and below that the source of that testimonial. And lastly, the final bo, block along the bottom will be the footer. And in that footer, we'll have some left aligned copyright notices and right aligned social media icons that will be linked after each of the services. We have here enough to visualize how this site is going to come together, without doing anything that's going in nail down a specific layout or a specific style. So, from here we can start to then bring the content in to populate each one of these areas that we have started to map out. And if you're working by yourself and you're doing a project for yourself, you can jump straight in to this content planning stage. If you're working with clients, on the other hand, you might like to kick off the process with a questionnaire, which is what I used to do as a freelancer. And because you want to be focused on the content for clients as well, you wanna be focused on what they're actually trying to do. You can start by just asking them some questions like what the goals of their site will be. What the action that they want to have their audience take will be. What their message is that they're trying to convey to their visitors. And you can also ask them what type of content, in general, they'll be posting on their site. Will it be news and updates? Will it be just product and promotional content? And you can also then ask them questions about what type of feel they wanna have their, their sites convey. Do they want it to be sleek and professional? Do they wanted it to be bright and fun? Do they want it to be grungy and underground? And all these sorts of general questions will give you the overall sense of what they want to achieve with their site, and then that will let you put together a content plan like this based on that feedback that they've given you. And once you have a plan like this together, then you can move onto actually assembling the content that will enable the rest of the process to come together. Now, you can take this original content plan and you can turn it into a content template. You can then hand that off to your client, and they can fill in that content template with everything that you need to build the site. And also you can alternatively fill in that content template yourself, because it's very rare to find a client that will be able to get all the content that is needed for the project early on in the piece. So, you also need to be able to bring together placeholder content that is going to fill these slots that you have put together here. And that's what we'll be covering in the next lesson. I'll see you then.