Start PL

Responsiveness – How to Design a Website that Looks Good on Any Device?

Project "Innovations in VET education" is co-funded by the European Union

Introduction to the Web Quest Topic
Information for the Teacher

Introduction to the Web Quest Topic

The modern internet is a place where users use a variety of devices, such as desktops, laptops, smartphones, tablets, and televisions. Each of these devices has a different screen size, resolution, and aspect ratio. Therefore, designing websites that look good on all these devices has become an essential element of modern web design. In this context, the term "responsiveness" (responsive design) has emerged, referring to designing websites in such a way that they automatically adjust to different screen sizes, providing an optimal user experience regardless of the device used.

Responsive websites have become crucial with the growing popularity of mobile devices. According to data, more than half of internet users worldwide browse websites on mobile devices. This means that if a website is not responsive, users may have difficulty reading and navigating it, leading to higher bounce rates and lower search engine rankings.

Responsive design is an approach that uses flexible layouts, images, and CSS to ensure the best quality display and performance across all devices. With the right techniques, designers can create websites that adjust to screen resolution, maintaining full functionality and readability on different devices. This means that a website will look appropriate both on desktops and on smartphones, tablets, and even televisions.

Responsive design not only improves user experience but also impacts SEO (Search Engine Optimization). Google promotes websites that offer a good user experience across devices, and responsiveness is one of the key factors affecting a website's ranking in search results. Websites that are well-designed for mobility are visited more often, and users spend more time on them, which directly impacts their success online.

In today's web design process, the right tools and techniques enable designers to quickly create websites that automatically adjust their layout to different devices.

The most important techniques used in responsive design include:

• Flexible grids and layouts – using relative units (e.g., percentages, rem) instead of fixed units (e.g., pixels), which allows elements of the page to automatically adjust to screen sizes.

• Media queries – CSS queries that allow styles to change depending on screen resolution, enabling different layouts for desktops, tablets, and phones.

• Image optimization – compression techniques and adjusting image resolution to be appropriate for display on devices with different screen resolutions.

• Mobile First design – an approach that involves designing the site first for mobile devices, then adjusting it for larger screens.

• Responsiveness is not just about aesthetics, but also usability. A properly designed website not only looks good on every device but is also easy to use, has fast loading times, and provides an optimal experience for the user, no matter the platform.

Information for the Teacher

The web quest is intended for vocational school students training in fields such as IT technicians, computer graphic designers, or programmers. Its goal is to introduce students to the basics of designing responsive websites and teach them how to design websites that look good and function correctly on various devices.

Students will work in teams, and each group will prepare a presentation on a chosen approach to designing responsive websites, describing its structure, features, advantages, and disadvantages, while comparing it to other web design technologies.

Through the implementation of this Web Quest, students will:

• Learn what responsiveness means in the context of web design

• Learn how to adjust the layout of a website to different screen resolutions

• Understand the principles of designing with mobile devices in mind

• Discover the tools and techniques used for creating responsive websites

Students will work both individually, collecting information, and in groups, creating presentations on various aspects of responsive website design. The work will be done under time pressure.

Suggested time for the completion of the Web Quest:

3.5 Content:

Students will work for 12 hours.

Evaluation criteria will include:

• Degree of topic coverage (maximum grade: 5, exceeding this knowledge: grade 6)

• Aesthetics of the presentation and the way information is presented

• Engagement and ability to cooperate

Evaluation:

• The teacher will help students analyze the content together until they fully understand it. The teacher will offer guidance, advice, and explanations, not ready-made solutions. This method will be a good way to encourage independent work and creative thinking.

• The teacher should analyze the content with students until they understand it. The teacher should offer guidance, advice, and explanations, not ready-made solutions. This method will help foster independent work and creative thinking.

• Group division can be based on various criteria, e.g., students' cognitive abilities, skills, or interests, to balance the strengths in each group.

• The teacher can help students while working in groups by asking guiding questions. It’s important to remember they are learning a new work process.

• The teacher should provide students with specific information about how their achievements will be evaluated, both during group work and at the conclusion of the task.

• The time for project completion should be adjusted to the students' abilities. It is not predetermined. The time frame for each stage should be treated as an approximation.

Task

You will divide into four groups. Each group will prepare a presentation on one of the selected techniques or tools for designing responsive websites. During the presentation, one member of the group will take on the role of the expert, providing a detailed explanation of the method, while the other members will play the role of listeners, ask questions, and lead discussions on the applications and properties of this technique in creating responsive websites.

Group 1: Media Queries – How to apply different CSS styles for different screen resolutions.

Group 2: Flexible grids (Flexbox and CSS Grid) – tools for creating flexible layouts.

Group 3: Mobile-first design – optimizing websites for mobile devices.

Group 4: Frameworks for creating responsive websites – e.g., Bootstrap, Foundation.

Why work in groups?

The complexity of responsive web design covers various technologies, tools, and approaches. Working in groups allows students to focus on a specific part of the topic (e.g., media queries, responsive frameworks), facilitating a deeper understanding of the chosen aspect and enabling a division of labor for more efficient knowledge acquisition. Collaborative work on a project also develops teamwork skills that are crucial in the professional world, particularly in the IT industry.

Stage 1: Introduction to the task

• The teacher will introduce the concept of responsiveness, explaining what it is, why it's important, and how it affects the quality of website design.

• During this stage, students will learn key concepts related to responsive design, such as flexible grids, media queries, viewport, and breakpoints.

• The teacher will also present tools that can be helpful in completing the project.

Stage 2: Working on presentations

• Each group will gather information on one of the selected techniques or tools used in responsive web design.

• The teacher will assist students by pointing out key issues and helping them analyze and understand the practical applications of these techniques.

Stage 3: Presentation and discussion

• Each group will present their work to the class. The presentation should include: a brief explanation of the topic, tips on how to apply the discussed technique or tool in practice, examples of websites that have used the design method discussed.

• After the presentations, there will be a discussion in which the rest of the class can ask questions and join the conversation about the use of different techniques and tools in creating responsive websites.

Stage 4: Evaluation

• The teacher will evaluate the presentations based on their content.

• Group collaboration will also be assessed, focusing on the quality of materials prepared, engagement, and the method of presenting information.

Stages of work and time

2h

Stage 1

4h

Stage 2

4h

Stage 3

2h

Stage 4

Points	2	3	4
Content Quality	Work is weak in terms of content. Missing elements.	Work is good in terms of content. Minor or no errors.	Work is excellent in terms of content. Correct, engaging information.
Presentation of Work	• Presentation is unclear, superficial, and not engaging. • Lack of participation in discussion.	• Presentation is clear, good, and interesting. • The student participates in discussions but with limited input.	• Presentation is attractive, thorough, and engaging. • The student actively participates in discussions and contributes significantly.
Aesthetic Impressions	• Work is unclear, untidy, and poorly executed. • Poor arrangement of elements on the page.	• Work is clear, neat, and carefully done. • Good arrangement of elements on the page.	• Work is aesthetically pleasing, clear, and highly polished. It stands out visually. • Excellent arrangement of elements on the page.
Group Work	Lack of involvement of all group members in work and creative collaboration.	Good involvement of all group members. Satisfactory collaboration skills.	Full engagement of all group members. Excellent cooperation and motivation within the group.