2.2 Assemble Content

Hi and welcome back to Responsive Web Design Revisited. In the last lesson, we looked at how you can create a plan for the content and the responsive behavior of your site. In this lesson, we're gonna look at how to take that plan and turn it into the actual content that you'll design your site around. Now, ideally, you really want to get the actual site content before you begin. So if this is your own project, be sure to bring together the real content that you'll be using for your site. However, it's not always possible to do that. As I mentioned when you're working with clients, it's very rare to get complete content earlier on in the project lifetime. So you need to have another way to get some content together so that you can proceed. And there is a caveat to that. And that is, if the client has a logo that they'll be using in the design, never, ever, ever start the design without getting that logo because the whole site needs to support that logo. It needs to support its branding, its style, its colors. So let your clients know that before you actually kick off, that you will need that logo before anything else happens in the process. So to that end for our little demo site we do have a logo and we'll be using that in the process as we go along. Once you have that logo you're ready to carry on with the rest of the process. Now this is the text content for the site that we're working on. You'll see that we have the same blocks, the same sections as we had in our original content plan. So we have a header and menu, we have our hero unit, etcetera, etcetera. And what we've done here is we've made a little slot for each of the pieces of content that are required. So we know the filename of the logo. We know the wording that has to be put in the location the business name will appear. We've got a list of menu items that will be placed. And I've also gone through and made a list of the icons that will be used in the site. Now, I've done this for each of the sections of our content plan. So we've got headlines, sub-headlines, and so on. So if you could imagine that this is a site that I'm doing for a client, then I have just filled in each of these slots with generic terms and don't be afraid to do that. Sometimes clients are a little overwhelmed by the requirements of putting content together themselves. They may be business people, but they may not be too sure what wording to actually put together on their site. So, you can help them with that, as long as you're confident with content creation yourself. You can help them along the way, and sometimes, having a bit of a joke with, some placeholder content can really help them to come up with their own content. This is something that I like to do with my own freelancing clients just to provide them with some placeholder content that will give them an idea of what they should add for themselves. And if it made them laugh a little bit along the process then that typically, that greased the wheels of the whole project. So go through and don't be afraid to fill in some of your own temporary, just kind of half-joking content, but still filling the, the proper, actual role that each one of these content elements needs to perform. So we've got a headline which conveys the main perk that the, this start-up, which is our fictional company. That the, the company is offering as part of their, their product. And we've gone through and we've put together some selling points. So it takes effect instantly, works for everybody, these types of things are really great filler content. So, with shorter content pieces like that, just little lines, or labels for buttons, you can just come up with that stuff yourself. Just fill that in with anything that you think is going to sort of approximate the correct shape of the content if you will. And the reason that we want to do this is, if you just go with the old way of using lorem ipsem text you're actually going to find that when you come to put in real content the layer doesn't work in quite the way that you expected. Your font sizing isn't quite right. You need to have something that's going to be as close as possible to the real thing as you can find. Now there's a really great tool that can help you with that, and it's called Not Lorem Ipsum. Take a look at Not Lorem Ipsum, really quickly. So notloremipsum.com. And this gives you actual industry based copy. So what you can do is you can head down to the bottom here and you can have a look at the kind of industries that they provide placeholder content for. They actually have quite a few different industries. So whatever type of client you're working with, you can try and match up the closest batch of placeholder content from this site. So for example, let's say we were looking at banks. And this will give us some real content that we can just drop into our site right away. And that's another thing that I've done in our text content page. So, I needed a welcome message, so I grabbed this out of the start-up company section of Not Lorem Ipsum. [BLANK_AUDIO] And this provided me with some welcome text for the homepage and some testimonials. And that saved me a lot of time with needing to produce that content myself. So this is a really great, really helpful tool in that regard. Now, another thing you might want to consider if you are working with clients, is producing a document that's a little bit more strictly formatted than this. So giving them something with actual fields that they can fill in so they don't accidentally delete any of your headings for each section. You need, you're titles for each of the bits and pieces that are necessary. So I would also recommend having a read of this great article by James Deer named, Using Content Templates to Get Your Clients Thinking Content First. And he goes through the process of working with content templates really well and also gives you an example of how you might like to layout something like this for your clients. Now once you have your text content together and you have your logo and any videos that are gonna be incorporated, so I have a URL of a video that is gonna be placed on the site. And you'll also need any images that are gonna be used in the site. That's it. You're ready. So you have your content, you have a plan for how it's gonna be put together and now you're ready to move into the production phase. In the next lesson we'll be looking at how you can create style tiles. Now style tiles are a way that you can still work with design software, so you've still got all of those visually oriented tools that make life easier when you're putting together visual designs, but without having to worry about the specifics of responsive layout functionality. We will handle responsive layout functionality in code, which is where it really should be handled. But we'll still look at how you can use design tools for the design portion of the process. I'll see you in the next lesson.