Creating user-focused content for the web | Jessica Bianchi | Skillshare

Creating user-focused content for the web

Jessica Bianchi, Passionate about product, UX and content

Creating user-focused content for the web

Jessica Bianchi, Passionate about product, UX and content

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
10 Lessons (46m)
    • 1. Introduction

      1:53
    • 2. Class project

      2:19
    • 3. Setting your page's purpose

      6:47
    • 4. Conducting keyword research

      7:29
    • 5. Placing your keywords on the page

      8:27
    • 6. How people read online

      3:14
    • 7. Writing for readability

      5:02
    • 8. Writing for action

      5:38
    • 9. Understanding web accessibility

      4:34
    • 10. Conclusion

      0:29
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

39

Students

--

Projects

About This Class

By the end of this class you'll feel comfortable and confident not only creating a webpage, but scaling this framework to an entire website.  

In a nutshell, we'll be covering the following:

1. Articulating the purpose of your page.

2. Generating relevant keywords.

3. Understanding common reading patterns.

4. Writing for readability. 

5. Writing to inspire action using buttons. 

6. Applying content-specific accessibility best practices. 

Meet Your Teacher

Teacher Profile Image

Jessica Bianchi

Passionate about product, UX and content

Teacher

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

phone

Transcripts

1. Introduction: Hi, everyone. My name is just and welcome to my first ever skill shared class in this class. I'm gonna be walking you through everything you need to know to create a Web page that's easy to read, discoverable in search engines and accessible to all. Now, this is really important because people access and read content differently online than they do in print. Now, there are a lot of great classes out there that focus a little bit more specifically on the writing process of creating Web page. We're gonna do a bit of that, but really, this class serves as the step. Before you start writing, it's going to be really created, helping you organize your thoughts and ensuring that you keep your customer or reader top of mind. Now, that being said, this class is for people designers, writers of all experience levels to be a bit more specific. With what we're gonna cover, I'm gonna be taking you through a simple keyword research exercise that's going to determine what keywords you want to put on your Web page. We're also gonna talk about where you might put them in order to get the most out of them. We're gonna be covering some common online reading patterns, and we're gonna talk about how we might structure are content in order to adhere to them. And finally, we're gonna be going over some Web accessibility basics for a class project. We're gonna be filling out a simple Web page template together. Now, before we get started a bit about me, I've been creating content for business or for pleasure for nearly a decade Now. In my last roll, I worked on a user experience design team where my responsibility was content strategy. Together, we build a 200 page website from the ground up, and I learned a ton along the way that I would love to be able to share with you. So I hope you can follow along in our next video onion be going over the class project in a bit more detail to ensure that we can get the most out of our time together. I hope to see you then 2. Class project: everyone. Let's talk about the class project as mentioned in the introductory video, we're gonna be filling out a simple template that will serve as the outline of your future Web page. You can find that in the resource section below to make things crystal clear. I'm gonna be following along with an example from a recent project that I worked on. And by the end of the class, your outline will make crystal clear your pages purpose the questions you should be answering in order to fulfill that purpose he words that you should be using on the page a basic content structure, including some headlines and your primary call to action and your pages Metadata. Now, for every page on a website that you intend to create, you should have an associative page outline. So if you're building a five page website, you should have five page outlines. Now, I know this seems like a lot of upfront work, but believe me, it's gonna save you a ton of time and effort. It's gonna help you avoid creating excess content, and it's gonna ensure that every page on your website serves a specific purpose. Now, before we get too far. I want to start a bit more simply, I want you to share with the class. What product or service you intend to create a Web page or a website for In my case, I'm gonna be focusing on a retail collective based out of Lusaka, Zambia called Lusaka Collective. This website is going to serve as a place where customers would come to learn what's in store what they can buy. But also makers and creatives can learn a bit more about becoming a vendor in the store. But for the purpose of the actual template, I'm gonna be focusing on on Lee the home page. So I'd like you to do the same. I want you to once again share with the class. What product or service you're gonna be focusing on. But also what specific page you're gonna be focusing on for the duration of the class because I want you to think of this class as the perfect sounding board to share your progress and get feedback from your classmates. Writing is often seen as a solo act, but we all know that the more you sharing, the more feedback you get, The better the outcome. In our next video, we're gonna be working on defining our pages purpose and keeping that purpose in mind. We're gonna be brainstorming some questions we should be answering in order to fulfill that purpose. 3. Setting your page's purpose: Hi. And welcome back in this video, we're gonna be filling out the 1st 2 sections of our template. So open it up and let's get started. So I'm now in the Web page template and the first thing I'm going to do is just felt this first section called Page type on Just identify that we're gonna be working on the home page to keep ourselves organized as we create more of these into the future. But what we really want to focus on is this first section called Page Purpose, which is essentially s answering the question. Why does this page exist now? A couple things to know before we get started. Number one I am working on the home page for Lusaka Collective's first ever website. And so, in that respect, the purpose We're gonna three purposes. And that's not normally the case for a page. Let's say product page. But the homepage really serves as a jumping off point to deeper, more detailed pages on a larger website. So that's why you can have a little bit more in this case, like I said, three page purposes. So the other thing that makes this situation may be a bit more unique from your own is that I'm working with a client and I've had the opportunity to have multiple conversations with these clients. I actually did an entire workshop with them, so I have a clear understanding of where they want to take this website. Okay, so without further ado, let's jump into defining our purposes. So again, as a reminder, I'm working on a website for Lusaka Collective, which is a storefront in Lusaka that showcases local designers and artisans. But they also host local events and workshops. Now, while there's gonna be information on this website for customers and vendors, we agreed that the primary audience of the website is the customer. And so the purpose of the help home page will be to help customers understand in just a few seconds what Lusaka Collective is and it's going to really want TEM engage them toe learn more. So I like to think of it as a digital storefront. I can peer into the front window to get a sense of what else I might find if I decide to go inside. And so to capture that customers to know in a glance who is a less Keiko. It's just in a short form that I'll use going forward and why they should visit, slash explore more and bikes form or just mean more content on the website. Now the 2nd 1 here is going to be geared towards our vendors because, yes, our customers air primary audience. But we also need the vendors to bring in the items to sell to customers. So we want local artisans to contact Ellis Keiko about selling their items. Okay, that's our secondary purpose. And finally, through these conversations I had with the two owners, there is his historical significance to the space that they're working out of. And they want people to think of it as a tourist attraction. So understand the historical and think up space as tourists staple. Okay, that's our third goal. All right, there you have it. Next, we're gonna brainstorm some questions. If we stop and put ourselves in our reader shoes, what information would we want to know at this stage in order to make us want to dig a bit deeper? Okay, so I'm back in the web page template, and I'm ready to tackle the next section called questions. Now I know that people could be landing on your web page for a variety of contexts. Perhaps this is their first time ever visiting your website. Or maybe the repeat visitors. I'm not expecting me. Come up with every single question someone might have in every single context. I'm just asking me. Come up with a decent list of questions that can help inform our content structure. And what we want to do is we want to start with the five W's Who, what, Where, When, Why? And we want to try to link them to our pages purposes. So for the 1st 1 for example, our first pages purpose is customers should own a glance who was ls k and why they should visit our explore might. Well, there are two very simple questions right there. Okay, So who is ls Keiko and what do they do? All right, what can I find there that we know that could be in terms of products that could be in terms of events or workshops, like I stated earlier? Okay. And if I didn't want to come here, so why should I come? And if I did want to come here, You know, where are they located? And we don't need to go into too much detail at this level. We just need some of the basics. Now when I say where they located, I don't mean going into the address. I mean, at least maybe even call out a particular neighborhood within a larger city just to give people a quick sense of where they might be. Um, in the second purpose we're talking towards or talking to rather local artisans. And their main question is really how do I become a vendor? You don't have to go into application details or anything of that nature just enough to capture them to go two, perhaps a page where they would learn about the entire application process on finally the 3rd 1 Understanding the historical significance and think of the spaces Tour staple. Well, what is their mission? The owners talked a lot about their mission. It was very important to them. On speaking of the owners, who is behind yell escape rent, These guys are creatives that are embedded in the community, so I think it actually would be a value to call them a bit higher up it lends the website in the Brent more credibility. So I'm happy with this list that we have. I think it can inform a content structure, and I hope you're able to come up with some of your own questions. By now. You're paid should have a clearly defined purpose. And hopefully you were able to brainstorm some questions you should be answering once he had that writing process. Now I know brainstorming can be really tough to do on your own. So if you have a friend or partner that you can bounce some ideas off of, I highly recommend it. Better yet, sure what you have so far with the class and see if you might get some interesting feedback in our next class. We'll be going over an exercise that will help us find in prioritized keywords. That word I'm gonna want to use on our Web page hope to see them 4. Conducting keyword research: Hello again and welcome back. I'm so glad you're still with us in this video. We're going to be going over an exercise that will help you generate the key words you want to put on your Web page to optimize for content, discover ability. But before we get there, let's break down how this all works, shall we? It comes as no surprise that there is a lot of content on the World Wide Web in 2019 there just over 1.5 billion websites in the world now, lucky for us, not all of those are active. But that's kind of besides the point. So when we're looking for something online, we tend to use our favorite search engines. But how to search engines? Know what content we're looking for? Well, they use Web crawlers. Thes Web crawlers, also called spiders or bots, scan through the content on every Web page in an effort to understand it to a degree where convention categorize it that way, when you're looking for, let's say, coffee in New York, it can serve up the most relevant options to you, and that's an important idea. We want to keep in mind relevancy because Seo is not about catering your content toe Web crawlers. It's about making your content genuinely useful and usable for the people you're trying to reach. If you keep this principle in mind, you'll more than likely be satisfying S CEO best practices anyway, that being said, there are a few things to consider. So let me walk you through my method for keyword research. The first step is that we're going to go back to brainstorming questions our customers or users might have. Now, in our last video, we brainstormed a list of questions our customers might ask once they land on our Web page . But in this case, we're gonna take one step back. What questions are they asking to even get to your Web page in the first place? What words or phrases are they plugging into their favorite search engine? A great authority on the matter is a company called Mas. They offer many different S. E O. Toole's, in fact, will be using their keyword research tool later in this video. Now s Seo experts think of search queries and a search query is just the string of words you put into a search engine as falling into one of three categories. That's transactional, informational or navigational. This idea is based on some research done back in 2002. Now, transactional search queries are when it's clear that a person is looking for a website where once they get there, they intend on doing something mawr like make a purchase or sign up for a service or even download a white paper. Now, in the case of my project, on example of a search query of a transactional nature would be something like authentic souvenirs. Lusaka, in for an informational search, queries air when a person is perhaps curious about information on a broader topic, something more general like things to do in Lusaka. And finally, a navigational search. Curious when a person's intent is very clear, they're looking toe lend on a particular page, and they're looking for the most direct path there in this case there. They know the brand Lusaka collective back in the Web page template at this point, because we want to fill out our next section of the template called S E O Keywords, and I want you to think about your product or service. Are your customers likely asking more broad informational questions to get to your website or they more transactional in nature. And the way I like to tackle it is I like to think of 2 to 3 questions that reside within each of the three categories we just discussed. So these top ones here are more transactional nature than we go into something more informational, and we finally leant in the navigational search queries. Now, at this point, your keywords are merely hypotheses thes air, just brainstorming. So keep it open ended. And in our next step, we're gonna jump into a keyword research tool to see if we can validate them and actually find whether the key words we came up with have much search volume to them. Okay, so for this next section, we're going to essentially be taking the key words that we just brainstormed, and we're gonna be plugging them into a keyword research tool. I like Maazel's keyword research tool because it's pretty easy to understand, and it's a great starter tool. They actually provide you with a free 30 day trial, so it's just checking them out, and we're gonna be focusing in on the section here. Explore by keyword. Now, just as a heads up, you can use this section here called Explore by Site, which essentially, if you know your competitors are you can plug in There you are out. You can get a sense of the keywords that their ranking for, But let's get back to this part here. Now, explore by keyword. We're essentially going to be moving over to this section of the page and one by one, we're gonna be plugging in the phrases or terms that we just brainstorm. So I'm gonna go ahead and plug in my 1st 1 things too. Two in Lusaka and I'm gonna pay special attention to the country I have here. You can choose by many of them. I'm gonna keep mine us for two reasons number one because I believe the search volume in the socket to be quite low. But also, the context in which some would be searching for this phrase would likely be in a tourist scenario. So I feel comfortable keeping Mina's us. Um I'm gonna go ahead and plug that in, and I'm going to hit analyze Now what I'm getting are these four key metrics the 1st 1 which is called monthly volume, is essentially the number the term the number of searches that this term is gonna get for any given month. So it's essentially giving you a sense of the demand for this keyword difficulty is how tough it might be for my Web page to rank within the top 10. Organic CTR. The stents for Click through Rate is going to give us an idea of whether when someone is typing in this phrase and getting results, whether those results will be competing with a bunch of other things like ads or news clips , stuff of that nature. And just to make that a bit more clear, I haven't example you from Nike shoes, someone plugs and Nike shoes and they hit search and they get all of this. You're competing with all of this sponsored content. This is sponsored content. This is sponsored content, so obviously people are likely to be. Keep clicking on that sponsored content or they have to squirrel way down to get to your Web page. Finally, the priority metric is essentially taking these metrics and combining them. It's taking its trying to look at that balance of high volume and low difficulty. But the section that I really like is this keyword research section. It's giving me a sense of Okay, I search for this phrase. What are some other related terms? I forgot four, sir. I didn't think to consider. And if I click see all suggestions, I actually get a really nice list of terms that I may not have thought before. That could be very useful for me to include on my page. So essentially I would get you to go through each of your terms. One by one. I would suggest you prioritise er top 10 because you actually get 10 queries with the free trial. So I would go through each of your top 10 keywords one by one, get a sense of whether or not they'd be useful for you in terms of search, volume and difficulty. In our next video, we're gonna go over where we should be putting these keywords on your Web page in order to get the most out of them. See, then 5. Placing your keywords on the page: Hello again. Thanks for sticking with us. In our last video, we generated a list of keywords and we prioritized, um, in this video, we're gonna cover where we should be. Putting these keywords on our webpage start with heading tags, heading tags or H tags Is the code used by developers to indicate what is a heading on a Web page. But while developers are responsible for implementing this code as the creator of the Web page, you should be indicating how think of it is the structure of the page. Your each one take should tell people what information they might find if they choose to keep scrolling. The H one tag is usually the most visually prominent copy on the page, and from there you can go all the way down to H six. Now, in terms of best practices, you should aim to have only one h one tag on your Web page, so be sure to make it stand out. This isn't a hard and fast rule, but let's consider it best practice. According to S E O God, Neil Patel, H one tag should be between 20 and 70 characters in length and finally try to use the key words we just brainstormed that clearly shows the intent of the customer. Most of all make it natural. Now I like to take a look at some examples of great H one tags. There are really two tricks you can use to see the H one tag and in fact, all of the H tags on a page using the chrome browser. Now, this first example is Monceau, which is a dick digital bank out of the UK. And if we want to see what their H one take is, I suspect it's this. But let's confirm that I right click and I go down to Chrome's inspect tool. Now, what's gonna pop out on the right hand side is all of the code for this page. Now, this might look overwhelming, but will make this pretty simple. While I'm hovering in this box, I'm a Mac user. I'm gonna click control F, which is gonna help me find within all of this code and Saddam down here. I'm going to type in H one and I'm gonna click Enter, not going to get nine results, and I'm actually going to scroll through until I find the one that seems about right and hopes, I think dismissed it. What you're actually gonna find is that it's going to highlight the actual content on the Web page itself so that there is no confusion. And we were right. Banking made easy is the H one take, and I can imagine someone actually plugging that phrase into a search engine. Now, the second way of doing it, I'm gonna flip us over to trail Oh, which is a collaboration tool. One of the other great things about Mas is that they have this really great free chrome extension called the MAS bar. And once you install, it will actually show up at the top of your chrome browser. Now, when I'm on a page where I want to understand what they're each one is and a bunch of information about on page elements, I simply click on this button and down comes this bar here. From here I click on page analysis and what do you know? I get all this really great information specifically what I'm looking at here is that h one tag, which is Trela lets you work for collaboratively and get more done which is right here, and you can see that it sits between that sweet spot of 20 and 70 characters. There are a few more spots we should consider placing the keyword three brainstormed, and that's within our pages. Metadata. Now some people define metadata as data about data, but I always saw that was a little hard to wrap my head around. So I simply like to think about it as short pieces of copy or elements we create that describe or summarize what's on our page. And we're gonna cover three of them. The meta title or title tag, the meta description and alter or alternative text for. We're gonna go back to that search engine and I type in Monceau, for example. What I get back here is called a search engine Results Page, or CERP for short. And if we hone in on this result here, this bit of copy is called your title tank or metta title, and this is actually in some cases people's first impression of your website or Web page. It's also what helps Web Carlos understand what you're all about, so it is quite important if I were to click through here, you can also see that it appears on the tab of your Web browser. Another place it would appear is if someone shares a link to your Web page or website on social media. Okay, so for those reasons, you want to make sure a couple things. You want to make sure that each of the pages on your website have a unique title take or meta title. You want to make sure it's as descriptive as possible. So you're using your making good use of those keywords. Those relevant keywords be brainstormed. You want to make sure it's concise, and you want to make sure that you're putting the most relevant keywords as far left as possible. Because as you open up more tabs, this real estate get smaller and smaller, just as an example of another title take as Monceau gets As you get deeper into Models website, they actually choose to make their title take a bit more descriptive, so they're using more long term keywords, if you will. Okay, the most important thing you want, remember, is you want to keep your title tag to be no more than 50 or 60 characters in length Okay, The next thing we want to consider is the meta description. Now for going back to our search engine results page. Here's our total take for Trillo. It's quite succinct on this is their meta description. You want to keep your meta description no more than 120 to 155 characters in length. If you go beyond that, Google, simply just gonna cut it off on what you want to do is you want to communicate your value proposition as succinctly as possible. Your meta description doesn't actually influence the ranking on the search, and she results paid. What it does do is it influences your click through rates, so you want to tell people exactly why they should click through to your website. And finally, the all text or alternative text is what's used to describe the images on your page. Now consider that a WebCrawler doesn't understand an image the same way it does copy. So you want to tell them what that image is about now, just so you can see what it looks like. If I were to go back to inspect Tool, I showed you, you can see here. All two equals Alonso app and its key features. Now, for any reason, this website or Web page rather doesn't load properly on the image breaks. What people will see is this all text right here. But what's even more important is for people who use screen readers as they move over an image you'll be able to describe to them exactly what that image represents. From an S e o perspective. If for some reason you haven't infographic on your page, for example, and let's say the copy or content within that Infographic has some keywords. You're looking around for a really important information you want to be able to describe as a specifically as possible to the Web crawlers through your old text exactly what that image is about, and you want to do it in less than 125 characters. Dr. Summarize quickly. Your H one tag is the descriptive is is descriptive and is the most prominent heading on your page. Keep that between 2 2070 characters. Your meta title appears on the search Engine Results page browser tab and in social media, and you want to keep that between 50 to 60 characters. Your meta description helps with your click through rates, and it also appears on your search engine results page. Keep that between 122 155 characters. And finally you're all text describes the images you have on your Web page, and you want to do that within 125 characters. What's really great is that a lot of S E O best practices work out really well for Web accessibility. Now we're going to get into that in a little more detail in a few videos time. In the meantime, for the class project, I want you to do two things. I want you to write the title of your Web page. That's your H one tag, and I want you to write your metadata, keeping in mind all of those best practices we just covered, and please share it with the class to gets and feedback. In our next video, we're gonna be covering common online reading patterns. This is really interesting stops, so I hope to see you there 6. How people read online: Hi. Welcome back. Let's get started in this video. We're going to be covering the most common online reading patterns, which will ultimately help us understand how best to organize our Web page content. When people read online, they're looking to complete a specific task or find relevant information quickly and easily Think about it. We're constantly being distracted by emails, phone notifications, social media and at last measure, the human attention span is just eight seconds. That's actually less than that of a goldfish. That's why most people reading content online are looking for shortcuts to extracting the information that they need. This is done through a common behavior called scanning research agency. Nielsen Norman Group has some fantastic research on reading patterns that I encourage all of you guys to check out specifically their research, identifying back in 2006 what is today known as the most common reading pattern online. I'm talking about the F pattern. So what is the F pattern? Well, it's exactly what you think it is. It's when readers spent time horizontally scanning the top most content on your page. That's likely, or each one and a bit of the content just below before vertically scanning the left. Most content on your Web page, likely in search of the information that is most relevant to them. But the F pattern isn't the Onley way people scan webpages. There's also the layered cake pattern. This is when users essentially scanned down a page, focusing their attention mostly on your headlines and perhaps a bit of the content below. There's also the spotted pattern. This is when users are looking for something more specific on the page, perhaps a number or a link or particular keyword, something that is most relevant to them. And finally, there's the commitment pattern. This is when the years it goes over almost every single word on your page. Now this is very unlikely, and when it does happen, it usually means the reader is highly motivated and interested in the content. I would like for you to take a moment to think about a context in which you found yourself paying attention to every one of the small details. For me, it was when my partner and I were reading through all of the information available online about buying our first home. Naturally, we want to be so engaging, so precise and so on point with our content that readers read every word on our Web page. Just know that the likelihood is that they're going to be using one of the other three common reading patterns we talked about, and that really comes down to context. In most cases, readers don't have to pore over every detail of your Web page, so don't take it personally in her next video. We're gonna talk about some of things we can do to achieve readability. I hope to see you there. 7. Writing for readability : So in our last video, we talked about the common ways people read online. In this video, we're gonna talk about how we can organize our content to achieve optimum readability. Now, before we get started, let's just quickly defined readability. Readability is how easy it is for someone to read and understand the content on your butt page. Now, lucky for us, there are a few things that we can do to make this as easy as possible. First, we can consider how we might chunk out the content on our Web page in a way that makes most sense. We do not want our page to just be one block of text that takes way too much effort on the part of our readers. What we do want to dio is you want to break down the content into smaller paragraphs that focus on just one idea at a time, and it helps. In those paragraphs are introduced with a concise and descriptive headline. Here's a real life example of how one company called wealth simple chunks of the content on a page that describes its savings product. Another tactic for readability is called the Inverted Pyramid. This is the idea of prioritizing the most important content on your Web page, And how can you do that? Well, go back to those questions we brain stormed at the start of the class. Which of them did you place the top? The list in terms of importance. Here's where I put some of the questions I brainstorm for my own Web page. You also want to consider the story you're telling and the flow of information. The transition from one idea should feel really natural to make the content on the page a bit more digestible. You can also consider using lists. Now there are two types of lists there ordered lists and a Nord Erred lists. And a nordeste uses simple bullet points, and these points are quite concise. An ordered list is sequential. It conveys things that have to be done in a particular order. These lists are denoted by numbers for content you think is especially important on the page. Consider calling it out visually, somehow. Well, simple uses colors, images, icons and shapes to call out the different deposit levels, and you can see how this really help someone understand the difference. You could also use bold. However, I would do this sparingly because the more you use it, the more it loses effect over time. Here's some other tips I picked up along the way. Sentence case over title case I can't tell you how many times have had this conversation. Truthfully, there is not a huge difference between the two, but some studies have shown that title case slows down that scanning process. And actually, from an application perspective, it's kind of easy to stick. Teoh sentence case. I also started using digits for all numbers, overriding out numbers, and I realized this might bug some purists out there. But remember when we spoke about the spotted scatting pattern? Some people are actually looking for these numbers, and finally, I would try to avoid the use of all capital letters of possible. I know that this helps Ah, certain words pop out like the word free, for example. But know that if used too much, this actually also hinders the scanning process. Okay, let's put some of these ideas toe work. I would like for you to revisit some of the questions we brainstormed earlier on in the class. The ones that we said needed to be answered in order to fulfill our pages purpose. Now, I'd like for you to take those questions, and I would like for you to make clusters out of them or chunk them to create sections on your Web page. Now keep in mind when you're Chungking, your content the inverted pyramid. So putting the most important information up top now for these sections, I would like for you to write a sub headline for each and in your sub headlines. Maybe consider some of the key words you research towards the beginning of the class as well. Here is where I landed with my own example for Lusaka Collective. You can see I've included my H one, and I've used some of the key terms handmade local artisans Lusaka and I've decided to chunk out my Web page into four sections. The 1st 2 are geared towards that primary audience of mine. That's the customers coming in to buy stuff, and therefore it's the most important. The first content chunk is about who's in the space. The second is about those events and workshops letting people know there are things going on in the space. The third content chunk is geared towards my secondary audience. That's those of the vendors that we want to come in and sell their items in the space in the fourth is going back to that idea of letting people know that this space is of historical significance to come and visit from a tourist perspective. And so we want to talk about our mission. All right. In our next video, we're gonna be talking about how we might write in a way that would encourage the people coming to our website to take the action we want them to take see them. 8. Writing for action : in this video, we're gonna be talking about exactly what we want, the people coming to our Web page to do next and how we might be able to encourage them to take that action. In the case of Lusaka Collective, ultimately, we want customers to buy homemade items from local artisans. At the moment there is no way to shop online, So this means we want to encourage customers to visit the physical retail space to shop or to attend an event or a workshop. All of these things are offline experiences, and so it's our goal to help bridge that gap and how much we do that. Well, we can start by getting them excited about the idea of coming to the physical space by showcasing some of the interesting products, the unique workshops or telling the stories of the artisans and the owners. The point is, we want the flow of content on this home page, and all pages really toe inspire them to take those actions. What you can do is visually call out a lot of those actions you want people to take by encasing these actions in buttons. Now there are many different types of buttons you can use to do this, and it all really depends on the system or rules you create for your own website. Now, this is where you want to collaborate with the designer of possible in your Websites design system. You could have a primary button or button that helps call out your primary action. You want people to take secondary button and hyperlinks. Here are three great examples of buttons at work now The first example is skill share. I'm sure you're all familiar with them. What they do a really great job of is calling out their primary call to action, which is get started for free, Um, on their first few port. And what I mean by Vieux Port is once you open up a Web page without having to scroll at all, what you're seeing there is considered the first few port, and as a rule of thumb, you should always have your prime reaction very visible in your first few port. I should not have to school to find it, and so they do a really great job of that. They also use color on, and they make the copy in this button a bit heavier than let's say the copy appear just to add a bit more prominence to it. You can see that they're secondary. Call to action is sign in Now this is called a ghost button. That means there is no filled in background. However, when I hover over it, it tells me I could take that action. It almost comes to life innocence. The second example we're gonna look at is that of headspace headspace. It does something very similar to skill share in that it does this really neat trick of almost creating an inverted pyramid that draws my attention right down to that primary call to action. Now they choose to use all caps, which is not something I might choose for myself. But that's clearly a spell choice. They've made in their website more generally now their primary call to action again. They use color, start their free trial sign up for free. So it seems like these two actions are very similar. They just put them in different places. They make the colors different, and that third goal they have here is obviously to get people who are existing users to sign it. The 3rd 1 for good measures. Uber. Now they've obviously chosen to lay out their home page in a different way. But you're still very drawn to what their primary action is, and that is to get the supply side up. They are obviously very focused on signing up drivers. However, If I go up here to the secondary goal here, the secondary button and then click on it, I can see that I have now a choice. And this is 1/3 type of button, which is kind of like a hyperlink, but it's denoted with Nikon here. I can sign up to drive or I consign up to ride, and the third type of button they use is actually right below their primary button. It's that learn more informational call to action, which is obviously 1/3 goal, and it's a hyperlink, but you can see how they choose to visually call it out by underlining it. And once I hover over it, they built that underline. Now, when it comes to button copy, here are a few things I learned along the way. Now, in researching what some really great companies air doing out there, I notice that they typically keep their character count toe less than 24 characters. They always start with a verb, so think explore. See visits sign up. They make their buttons descriptive. Now this is an interesting one, because you want to avoid falling into the learn more trap. That's when you see a plethora of buttons on the page, all of which they learn more. Learn more, learn more. I think we can get a little bit more creative with that. And if you can try to avoid the all caps again, this is a style choice. And perhaps, if you're testing different button copy and you see this works, I'd say Go for it. I'm just saying this from a perspective of scan ability. Now here's where I landed with my own example. You can see I'm back in the content structure and the template, and I've added in the button copy for each of the content blocks that I had broken out before. Explore all creators, see all events, learn how to apply and read about our vision for the class project. I'd like for you to revisit the content structure you came up with, and I'd like for you to insert your primary and secondary Cole's toe action. Keeping in mind best practices. Please share your progress with the class to get some feedback. Now, in her next video, we're gonna be the going over Web accessibility basics. 9. Understanding web accessibility : Hi, everyone. And welcome back. We're almost there in this video. We're gonna build a big further upon what we've learned so far. Toe Look at how, considering the needs of extreme users leads to inclusive Web practices. Now, why is this even important? Well, Microsoft's inclusive design toolkit actually conveys this pretty well. What I like about this visual is that it reminds us that making our websites and applications accessible doesn't just benefit a small fraction of people coming to them. It has the potential to benefit us all at some point in our near or distant futures because , let's face it, none of us are immune to ageing. So if nothing else, consider Web accessibility as being kind to your future self. Now, the responsibility of making a website accessible doesn't sit on the shoulders of any one person. It's not just the copywriter or the designer or the developer. Each discipline needs to pull its weight. Now we're gonna focus on what we can do from a contact respective here. But first I want to give you a sense of how website is experienced by someone using assistive technology in this case, a screen reader. Easy Google Chrome Window heading level trade accounts Button. You are currently on a heading level three savings borrowing features but link get paid early. New blank visited link Visited Link. Get the Monza bank account main. You are currently on a link Press visited Link. Get the Monte Monte's oh down the 80% loaded batter Visited Link Monceau lists six items heading level three accounts Button heading level three Savings button heading level three Borrowing button heading level three Features button link Get paid early New link Help link . Sign up heading level 12 items not on your phone at a valid UK phone number and we'll tax you link to download. Manzo not on your phone at a valid UK phone number and we'll tax you link to download. Manzo had a valid UK phone number and we'll send you a text message with a link to download . The APP had a valid UK phone number and we'll send you a text me button. Now when it comes to actual best practices, the good news is that a lot of what we've done to this point already makes your Web content more accessible. But let's dive into some key considerations when it comes to copy again, we want to use descriptive headlines. You want to make them as descriptive as possible, and you can see how important that is. Now that you've had an opportunity to see how a screen reader processes a Web page, you want to avoid jargon. You want to use plain language, right it like you say it and you want to test the reading level. You can find a bunch of free tools online in using a quick Google search. But the key consideration here is that if you're writing content that is direct to consumer , you want to aim for a great eight reading level. If you're writing directive businesses, you can aim for something a bit higher in Great 12. This is not only gonna help, people will have cognitive impairments, but it's also gonna help people who don't speak English as their first language. Now, when it comes to adding additional context on your page, if you have hyperlinks, that button copy we talked about. This is the reason in the case for making it as descriptive as possible, not only to incite people to take action, but that learn more trump we talked about That is not helping people who are using assistive technology. You want to add contextual help buttons where necessary. That being said, if you have, this is something you can add as an element on the page, essentially what it is, it's a bit. It's a little icon it you can click on, and it gives you more space to be able to explain a concept more deeply. And finally, we talked about this in our S E O videos, but adding all text or alternative text two important images on your Web page. I'm not saying you have to add this for every image. If an image is purely decorative, you don't have to do that. But if an image helps add to the understanding of the user or the reader, then you should be adding that all text Okay, I'd like for you to revisit your page outline and look at it through the lens of Web accessibility. Are your headlines and sub headlines descriptive enough? Do you have an image on the page that requires an all tagger text? Better yet, if you have a Mac, you can actually use a screen reader device yourself Press Command plus F five and follow the simple instructions. If you're interested in learning more about Web accessibility, you can actually check out the Web content, accessibility guidelines or what? CAG, I'll put the link down below. 10. Conclusion: Hi, everyone. And thank you so much for making it to the end of the class. I really hope you found the content useful. I also hope that this class gave you a way of not only thinking about how to build a single web page, but how you might be able to scale that to an entire website. Now, I really do want to see the progress you made in this class. So please do share your page outline with me and the rest of the class. Thank you so much for participating. And I wish you the best of luck.