1.3 “Content First” Methodology: Why You Should Use It and How

Hi, welcome back to Responsive Web Design Revisited. In this lesson, you'll learn why focusing on content first will let you create the best possible responsive sites and how you can go about employing a content-first workflow. Before we get into that, let's take a quick look at how we got to where we are today. So back in the old days, the first phase web design when desktop computers were pretty much the only internet capable technology was to build all of your websites for desktop only. Like this very first iteration of Google or like this early Apple site. As you can see, things have changed a lot. So, and as mobile phone and tablet based browsing came onto the scene and became more popular, we added a, an extra step of downgrading our desktop-oriented designs, so that they would also work on mobile devices as a second stage. But this process often led us to a lower grade experience for mobile device users. So to remedy this the next widely accepted methodology that came along was to start by creating a mobile design first and then progressively enhance it with features that are suitable for desk top devices. This is the approach that became known as mobile first. Now however, the line between mobile and desktop devices is becoming more and more blurred. We're seeing mobile tablets that are larger and higher resolution and more powerful than desktop machines. Additionally, devices that don't really fall into either category are on the rise, like browsing the internet on your TV or via consoles. So this makes it increasingly difficult to work solely with the idea of mobile first, as the term mobile can no longer consistently mean smaller display. Lower resolution, lower power and desktop doesn't always mean higher display, higher resolution, higher power. However, the core underlying principle of that mobile first approach should still be adhered to and what is that core underlying principle. It's full user base support. It's ensuring that every type of user of your size has a first rate experience regardless of the technology they're using. And what exactly does it mean to have a first rate experience? Well, all websites are designed to do one thing and that is to deliver content. That could be text content, image content, video content, whatever type of content the website is delivering, that's its primary purpose. So therefore, your goal as a web designer is to create sides that do a great job of delivering content to all users, whether they're on tablets, phones, notebooks, desktops or anything else. That's what building responsive websites today is all about. And the way to do that is to always put content first, making it your number one point of focus and working off solid methodology that ensures every element of content on a side is delivered well on all known platforms. So rather than choosing to design for one type of device over another or one size over another, we can now simultaneously plan for all our design elements to work well everywhere they need to. So what does all that mean in practical terms? What are you actually going to do when you start designing a website to make it content first? Well, there are five stages that we're gonna be working through in this course. And the first stage unsurprisingly is Content. So we're gonna begin by creating a content and responsiveness plan and then we're gonna look at how you can assemble content, even if you find yourself waiting on bits and pieces from a client that you might be working with. The second stage is gonna be creating Style Tiles. Now this is a way that you can still employ your favorite design software, but without doing it in a way that's going to tie you into a pixel perfect design. The third stage is going to be creating your Foundational Code. Now there are gonna be certain things you wanna do in your code. Every site you make, regardless of what type of site it is. And as part of that, we're going to start adding in your unstyled content elements. So, at this point, you'll already know the content that you're gonna be working with. And before you even think about making a site look nice, you're going to get the content in there as the foundational layer. And you're going to add in monochrome CSS, so that everything has great typography and great responsiveness as an underlying layer below how the actual look and feel of the site comes together. The fourth stage will be actually adding in your Style Codes. So we'll take those Style Tiles that you created and then we'll turn them into CSS and apply them to your already content populated responsively functional website and then the fifth stage will be the Optimization. Now normally, you'll actually optimize your sites as you go along. However, to keep things simple to follow with, we will cover optimization techniques at the end of the site building process. Okay. So now you have seen everything that you're gonna be building and we've given you a heads up on the steps that you are going to be working through. We're now ready to jump in and get started on the practical processes. And the next lesson, we're going to get into that content and responsiveness plan. I'll see you in the next lesson.