Lesson video

Hi everyone, my name is Mrs. Welsh.

Today we'll be learning about planning a mini website.

Don't worry if this is new to you, I'll be guiding you through each step.

So let's get started.

By the end of today's lesson, you will be able to design an accessible and user-friendly three page website with clear layout and clear navigation.

So let's begin.

The keywords we'll be using during today's lesson are: website, which is a collection of web pages around a common theme, readability: this is how easy it is to read and understand the text.

Accessibility: consideration of design, so that what is created is usable by everybody.

By the end of the day's lesson, we'll be able to describe the features of an effective website and plan an effective and organised website.

So to start with, let's look at the features of an effective website.

Let's have a go at this quick task.

Can we match the tags to the definitions? If you need to pause the video, do so now.

Okay.

Shall we have a look to see how we did? So the <img> tag is used to define an image on a webpage.

The anchor tag, or the <a> is used to define a hyperlink, <li> tag is used to define a list item.

The <ol> tag is used to define an ordered list of items. <h6> tag is used to define subheadings, and this is the smallest text size.

And the <p> tag is used to define a paragraph of text.

So how did you do, did you get all those tags with their matching definitions correct? If you did, well done.

That's some really good recall from previous lessons.

So let's get started at looking at the features of an effective website.

First of all, we need to have a look at what is a website? A website is a collection of multiple webpages linked together with hyperlinks.

A website will have different webpages, each with a specific job.

Examples of webpages can include the homepage, contact pages, about pages and gallery pages.

The key features of good websites: clear navigation: this means the website has easy to use menus.

A responsive design: this means the website will work well on all devices.

So if you've ever been on a website on say a computer and then had a look at it on your phone and it hasn't worked the same way, this is because the design has not been made responsive.

So it works well on one web browser but not on another.

Accessibility: the website includes things like alternative text for images, readable fonts, and it also has a good colour contrast.

A consistent design: the layouts, fonts, and colour scheme look the same across all the pages.

Quality content: the information on the website is relevant, useful, and interesting.

And finally, minimal distractions: There aren't too many adverts or animations or flashy colours, so it keeps everything to the point.

If we have a look at the example website on the slide, we can see that it follows the good features of a website.

It has clear navigation for the different parts of the lesson, but also so we can get back to the main content page.

It works on different devices as we can see the two different images.

One is from a web browser on a computer, and the other is a web browser from a mobile phone.

We can see that it has a subtle colour scheme, it has relevant content, and there's no distractions from this, and it is using readable fonts.

So why are all these features important? The clear navigation.

By having simple menus, it helps users to get to the right page quickly.

And a clear layout also means less confusion.

By having a responsive design, it means that it will automatically adjust to different screen sizes on different devices.

And the responsive design also makes the website easier to read and use.

If we have a look at accessibility.

Using things like alt text helps visually impaired users understand the images and by utilising readable fonts and having a good colour contrast, helps visually impaired users access the website content.

By having a consistent design, using the same fonts and colours across the website makes it easy to read.

And the consistent layout helps users know where things are.

So if we think about the example website we've seen, each lesson will have the same layout.

So it means that when you navigate to a different lesson, you know what to expect.

And quality content, content that is clear, it's is short and to the point.

It is easy to read, it is correct and up to date, and it keeps the website relevant.

And the engaging content makes users want to stay longer.

And minimal distractions.

The design is clean and simple.

Therefore it makes it far easier to find that important information.

If a webpage has too many moving things, it can be quite frustrating for the users.

So a good website is easy to use, it looks good and works for everybody.

Let's see what we can remember.

What is the main purpose of a responsive design? A: it ensures that the website works on different devices.

B: it improves the website's colour scheme.

C: it adds more images to the website.

D: it makes the website harder to access.

If you need to pause the video so you can read through an answer, do so now.

Okay, so shall we see what the answer is? Did you get A: it ensures the website works on different devices.

If you did, well done.

That's a really good recall of what a responsive design is.

So let's have a look at a second question.

Why is a consistent design important? A: it makes every webpage look different and unique.

B: it ensures that the website looks professional and is easy to use.

C: it allows random fonts and colours to be used on each webpage.

Or D: it removes all images from the website.

If you need to pause the video, do so now.

Okay, so have you got an answer? Let's take a look.

Which one do you think it was? The answer is B.

It ensures that the website looks professional and is easy to use.

Get that right? If so, well done and moving on.

So what we're gonna have a look at now is the example of the website on the slide.

If you want to look at this in more detail, you can open the Raspberry Pi Foundation's Code Editor using the link on the slide.

To run the code, and what it will do is create the website that you can see displayed on the slide.

What I want you to do is think about what are the problems with this website, and what improvements would you make? If you need to pause the slide so you can go and do the task, do so now.

Okay, so shall we take a look at what we've got? What did you think the problems were with this website? For this website, the good features: it does have a readable font, so the font is quite clear on there; and the content is structured into sections.

So those are a couple of the good features that we can think about.

Areas for development: the navigation is quite basic and it doesn't really stand out on the webpage.

The colour contrast makes it quite hard to read the text.

So although the font used is a very readable font, the colour scheme makes it quite difficult to read the text.

And the lack of images and videos does make the content less engaging.

Did you get anything else? If so, you might want to share that with your class.

If you got all those and more, great job on that one.

So moving on, we are gonna be looking at Task A.

For this task, what I would like you to do is fill in the blanks to complete the following sentences: A website with poor navigation can make it blank for users to find information.

A responsive adjusts its layout based on blank.

To improve accessibility, a website should include blank for images.

And consistent colour schemes and fonts help with blank.

So you need to fill in where the gaps are to complete those sentences.

If you need to pause the video so you can read through the slide and find the answer, do so now.

Take a look.

Let's see what we got.

Question one: A website with poor navigation can make it difficult for users to find information.

So if you have a word that is similar to difficult, well done.

Question two: a responsive website adjusts its layout based on the device's screen size or the device being used.

So again, if you've got something that talks about the different devices, well done.

To improve accessibility, a website should include alt text for images.

So if you've used the phrase alt text or alternative text or description for images, excellent job.

And four: Consistent colour schemes and fonts help with readability, making the website more professional-looking and easier to use.

So if you've used words such as readability and making it so all the webpages look the same, well done.

So did we get all those? If you did, that's some really good recalling of what we've talked about during this lesson.

Moving on to the second part of the lesson, which is looking at how to plan an effective and organised website.

A well-planned website is structured, easy to navigate and meets the user needs.

How do we actually make a plan for a website? Before building a website, a plan needs to be created.

The plan needs to include the following information: The purpose: what is the website for? Target audience: those who will use the website.

And a site map: the webpage that the website will have and how they'll be linked.

On the slide, you can see an example of a site map there we have right at the top, the homepage or the index page.

And underneath it we can see a list of the other webpages that are gonna exist on this website.

And for the example shown, it is our GCSE Computer Science revision website.

So we have our homepage, we have then got our theory topics webpage, we have our programming and algorithms webpage, and then we are gonna have a revision links webpage as well.

In terms of these key features are navigation, so that's the menus that will be used on the website, the layout and design: so we need to think about the colours, the fonts, and the structure that will be used.

The content: so this is the information that will be shown on the website, the accessibility features: so things that are gonna make the website more accessible such as the alt text, readable text, and good colour contrast.

And we need to think about the file structure: so this is the way the files of the website will be organised.

What is a file structure? A website has many files.

It has HTML files for webpage structure, CSS files for the style, layout, colours and font, image and media files for video and images to be used on the website, and other assets such as documents.

A file structure that is well organised helps keeps the webpage, images, style sheets, and other assets in the right place.

Let's have a look at a good file structure.

It ensures faster loading times, as a good file organisation helps web browsers retrieve the content quickly.

It's easier to update, as finding and modifying files is simpler.

There are fewer errors, as it reduces the likelihood of a broken hyperlink or any missing files.

It ensures an easy understanding of the website's structure by the team creating and maintaining the website.

Without an organised file structure, a website can have difficulty loading and can also be prone to errors.

Let's have a look at the following question.

True or false: A site map helps you plan how webpages will link together? If you need to pause the video so you can read through the question and answer, do so now.

Okay, so what did we get? The answer is true.

If you remember, the site map has a list of all the web pages that we are planning to create and shows how they are all linked to each other.

As it says at the bottom, a site map is an important part of planning because it shows the structure of a website and how users will navigate between the web pages.

And looking at the next question: Before building a website, designers must consider who will use it.

Is this true or false? Again, if you need to pause the video so you can read through the question, do so now.

Okay, what do you think? Is it true or false? It is true.

When designing the layout and content of a website, designers should consider the target audience to ensure it meets their needs.

Did you get both of those correct? If you did, excellent job.

Moving on, let's have a look at this organised file structure.

At the top we have got the main folder that is gonna contain all of the website files, and that is our website project folder.

Inside there we have got the individual webpages.

So you can see index.

html, memory storage.

html, data_representation.

html.

Underneath that we've got a folder called css.

And this is where all our style sheets are going to go.

And you can see inside there there is one file called styles.

css.

Underneath that we've got a folder, which is called images.

And in there, it's gonna store all the image files and potentially the video files that we are gonna use on our website.

And then the final folder down at the bottom is called assets.

And this is where we may put any other documents that we are going to use.

And the example there is a knowledge organiser that is A PDF.

So we can see there, it's really easy to locate any of the files we may want to use.

And we also know where everything is located.

So as it says there, all the files for the website are stored in a folder.

The homepage is usually called index.

html.

Each webpage has a HTML file.

The css folder stores all the style sheets for the website.

The image folder holds all the media and the asset folder holds all the other resources for the website.

Moving on to Task B, you have been asked to create a website for a new school club.

The website should provide important information for students who may be interested in joining.

It needs to include the following: One, identify the target audience.

Two, the website will have four web pages.

Decide the content that will be on each webpage.

Three, draw out a site map and explain how you'll navigate between pages.

And four, describe two ways you'll make your website accessible and two ways you'll make its design consistent.

If you need to pause the video there so you can read through the task, do so now.

Everyone's work's gonna be slightly different, but let's have a look at a possible solution and you can compare it to your work.

One, the target audience will be secondary school students.

So aged between 11 and 16.

So hopefully we've all got that one because it says that in the scenario.

The second one is thinking about the different pages that we could include.

On this example, we've got the homepage and the purpose of this is to provide an introduction to the club, including what it does and its key activities.

It may have some images and a welcome message.

The next page is an About us page, and this describes the club's history, its objectives, who runs it, and it also includes information about who can join and why you would want to join.

The next page is the events, and this lists the upcoming coding competitions, workshops, meetings, and any dates and details that are needed.

And the final page is the contacts page.

And this provides a way for students to ask questions or sign up.

And this will have an email form with links to social media.

So you may not have exactly the same pages, but as long as you've got four web pages that you have identified and you've provided the reason for them, really well done.

The third part of this was to create a site map.

So we need to show that the website will have a clear navigation menu at the top of each page with links to the homepage, the About us page, Events and Contact us pages.

And it includes a diagram of the site map.

So again, we have the home page right at the top with the About us, Events and Contact page underneath it, showing the little grid of how the pages are linked together.

So for question four, we were looking at ways to make the website accessible.

We can use alt text for images.

This will help visually impaired users to understand the pictures.

Use high contrast colours to improve readability, use easy-to-read fonts.

Again, this also improves readability and sans-serif fonts like Arial are always good options; and allow for keyboard navigation.

So allowing users with limited mobility to browse without a mouse.

So did we get those website accessibility? So we're gonna be moving on to looking at the design.

So ways in which we can make a website's design consistent.

We can use the same font, colours and layout on every webpage.

We can ensure that the navigation bar stays in the same place across all the webpages.

Ensure that headings and subheadings follow a clear structure.

So for example, using H1 for main titles and H2 for sections.

We can ensure that button styles and spacing remains uniform across all the web pages as well.

Did you get anything else? If you did, you might want to share that with the class.

How did you do? Did you manage to get all the questions right? Question four was quite tricky because it was asking you about website accessibility and also about keeping a design consistent.

So if you managed to all of that correct and justify why you are going to include those things, you've done really well.

Okay, so that's an excellent job on understanding how to plan an effective and organised website.

To summarise today's lesson on planning a mini website: A well-planned website is easy to use.

Web pages should be organised clearly so users can find information quickly.

Websites need an organised file structure to work efficiently.

Websites should be designed for the people who will use them with relevant content and a clear layout.

Websites should be accessible by everybody.

They should use readable text, clear colour contrast, and alt text for images so all users can access their content.

So thank you for joining me for today's lesson on planning a mini website.

I hope you will take the things you've learned away and be able to implement them in your own planning of a website.

So I hope to see you next lesson.