Advanced Web Design - SSS 3 Note
ADVANCED WEB DESIGN
Class: SSS 3
Term: Second Term
Week: 1
Topic: Advanced Web Design
Duration: 80 Minutes (Double Period)
Learning Objectives
By the end of the lesson, students should be able to:
- Explain the role of JavaScript in web development.
- Identify ways JavaScript can make web pages interactive.
- Add simple interactive features to a web page.
- Explain the meaning of responsive web design.
- Apply basic responsive design principles to web pages.
- Explain why websites should be designed for different screen sizes.
1. Introduction to Advanced Web Design
Web design involves creating and arranging the visible parts of a website so that users can access information and interact with it easily. Modern websites normally combine several technologies to create structure, appearance and behaviour.
HTML provides the structure of a webpage, CSS controls its presentation and appearance, while JavaScript can be used to add behaviour and interactivity.
Figure 1: HTML, CSS and JavaScript work together to create modern web pages.
2. JavaScript and Web Interactivity
Unlike HTML, which mainly describes the content and structure of a page, JavaScript can respond to actions performed by a visitor. For example, JavaScript can respond when a user clicks a button, enters information into a form or moves the pointer over an element.
Examples of Web Interactivity
- Displaying a message after a button is clicked.
- Showing or hiding information.
- Checking information entered into a form.
- Changing text or other page elements.
- Creating simple calculators.
- Creating interactive menus.
- Updating information on a webpage without manually editing the page.
3. Basic JavaScript Syntax
JavaScript statements are instructions that tell the browser what to do.
JavaScript can be placed inside an HTML document using the
<script> element.
Example 1: Displaying a Message
<script>
alert("Welcome to CMPNOTE!");
</script>
The alert() function displays a message to the user.
Example 2: Changing Webpage Content
<p id="message">Original text</p>
<button onclick="changeText()">
Click Me
</button>
<script>
function changeText() {
document.getElementById("message").textContent =
"The text has changed!";
}
</script>
In this example, clicking the button calls the changeText() function.
The function then changes the text of the paragraph.
4. Adding Interactive Elements to Web Pages
An interactive webpage responds to actions performed by its users. One simple way to introduce interactivity is to use an HTML button together with JavaScript.
Figure 2: A simple interaction cycle on a webpage.
Example: Show a Message
<button onclick="showMessage()">
Click Here
</button>
<script>
function showMessage() {
alert("Welcome!");
}
</script>
5. JavaScript Events
An event is an action or occurrence that JavaScript can respond to. Events can be caused by the user or by changes within the webpage.
| Event | Meaning | Example |
|---|---|---|
onclick |
Occurs when an element is clicked. | A button is clicked. |
onmouseover |
Occurs when the pointer moves over an element. | Displaying additional information. |
onchange |
Occurs when the value of an input element changes. | Selecting an item from a list. |
onsubmit |
Occurs when a form is submitted. | Checking form information before submission. |
6. Responsive Web Design
People access websites using desktop computers, laptops, tablets and smartphones. A webpage designed only for a large computer screen may be difficult to use on a small smartphone.
Responsive design helps a website adjust its layout so that users can read and interact with the content more easily on different devices.
Figure 3: A responsive webpage can adapt its layout to different screen sizes.
7. Principles of Responsive Web Design
7.1 Flexible Layouts
A responsive webpage should use layouts that can expand or contract according to the available screen width.
7.2 Flexible Images
Images should be prevented from becoming wider than the available area. A common CSS rule is:
img {
max-width: 100%;
height: auto;
}
7.3 Media Queries
CSS media queries allow different styles to be applied depending on characteristics such as screen width.
@media (max-width: 600px) {
body {
font-size: 15px;
}
.menu {
display: block;
}
}
In this example, the CSS inside the media query applies when the viewport width is 600 pixels or less.
7.4 Readable Text
Text should remain large and clear enough to read on different devices. Designers should avoid unnecessarily small text and layouts that force users to zoom constantly.
7.5 Easy Navigation
Navigation should remain usable on small screens. Menus may need to change from a wide horizontal layout to a more compact arrangement.
8. Designing Websites for Different Screen Sizes
A website should be tested on different screen sizes before it is published. Designers should consider how headings, images, menus, tables, forms and other elements behave when the available space becomes smaller.
| Device | Design Consideration |
|---|---|
| Desktop computer | There is generally more horizontal space for navigation, columns and larger content areas. |
| Tablet | The layout may need fewer columns and appropriately sized controls. |
| Smartphone | Content should fit a narrow screen and navigation should remain easy to use. |
9. Responsive Design Example
Consider a webpage containing three information cards. On a large screen, the cards may appear beside one another. On a smaller screen, the cards can be arranged vertically.
.cards {
display: flex;
gap: 15px;
}
.card {
flex: 1;
}
@media (max-width: 600px) {
.cards {
flex-direction: column;
}
}
The first part creates a flexible row. The media query changes the cards to a vertical arrangement on smaller screens.
10. Advantages of Responsive Web Design
- Improves usability on different devices.
- Makes content easier to read on smaller screens.
- Reduces the need for users to zoom or scroll horizontally.
- Provides a more consistent experience across devices.
- Can reduce the need to maintain separate versions of the same website.
- Helps websites adapt to changing screen sizes.
11. Common Problems in Poorly Designed Websites
- Text that is too small to read.
- Images extending beyond the screen.
- Menus that are difficult to use on smartphones.
- Horizontal scrolling caused by fixed-width elements.
- Buttons that are too small or too close together.
- Layouts that become broken when the screen becomes narrower.
12. Practical Activity
Students should create or modify a simple webpage containing:
- A heading.
- A short paragraph.
- A button.
- A JavaScript function that responds when the button is clicked.
- An image or simple content section.
- A responsive CSS rule using a media query.
Sample Practical Code
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
}
.box {
padding: 20px;
background: #f4f4f4;
}
@media (max-width: 600px) {
.box {
padding: 12px;
}
}
</style>
</head>
<body>
<div class="box">
<h1>My Webpage</h1>
<p id="message">Welcome!</p>
<button onclick="changeMessage()">
Click Me
</button>
</div>
<script>
function changeMessage() {
document.getElementById("message").textContent =
"You clicked the button!";
}
</script>
</body>
</html>
13. Summary
JavaScript is used to add behaviour and interactivity to webpages. It can respond to events such as clicks and changes made by users. JavaScript can work together with HTML and CSS to create dynamic webpages.
Responsive web design is an approach that allows websites to adapt to different screen sizes. Important responsive design techniques include flexible layouts, flexible images, media queries, readable text and usable navigation.
A good modern website should not only look attractive on a desktop computer. It should also remain readable, functional and easy to navigate on tablets and smartphones.
14. Evaluation Questions
- What is JavaScript?
- State three uses of JavaScript in web development.
- What is meant by web interactivity?
- What is a JavaScript event?
- State four examples of JavaScript events.
- What is responsive web design?
- State five principles of responsive web design.
- What is the purpose of a CSS media query?
- State three problems that may occur when a website is not responsive.
- Explain why websites should be tested on different screen sizes.
15. Assignment
Create a simple webpage containing a heading, a paragraph and a button. Use JavaScript to make the button display or change a message. Then add a CSS media query that changes at least one aspect of the webpage when the screen width is 600 pixels or less.
16. Interactive Revision Quiz
Choose the correct answer for each question and click Mark Quiz to see your score.
Comments
Post a Comment