Learning Objectives

Students should be able to:

• Explain responsive web design.
• Understand why mobile-friendly websites are important.
• Test a website on different screen sizes.
• Identify basic mobile design problems.

Lesson Content

Responsive web design allows a website to adapt to different screen sizes and devices.

A website should provide a good experience on:

• Desktop computers
• Laptops
• Tablets
• Smartphones

Common mobile design problems include:

• Text that is too small
• Images that do not fit the screen
• Buttons that are difficult to click
• Menus that are difficult to use
• Content extending beyond the screen

Students should always test their websites on different devices and screen sizes.

Practical Activity

Open the website on:

• Desktop
• Tablet
• Mobile phone

Check:

• Navigation
• Text size
• Images
• Buttons
• Page layout
• Overall readability

Identify at least three improvements that could make the website more mobile-friendly.