The Impact of Responsive Design on User Experience

1. Introduction

The growth in popularity of smartphones has changed the way people use the internet. Nowadays, users view websites from laptops, tablets, and mobile devices, each with different screen sizes and control elements. Traditional websites, which are created for desktop computers, are often displayed incorrectly on smaller screens, causing design problems and disappointing users. Research shows that bad compatibility reduces satisfaction and involvement [1,2]. To solve this problem, software developers use responsive design—designs that automatically adjust to any type of device. Changing user habits are also a key aspect. People are increasingly performing tasks on the go: shopping, reading news, learning, and interacting with government services via smartphones. This means that web interfaces must not only be responsive but also accommodate rapid interaction scenarios, such as short sessions, one-handed control, and limited user attention.

With the advancement of technology, many new interaction formats have emerged, such as hybrid apps, progressive web apps (PWAs), and gesture-based interfaces. All of these trends are based on the principles of responsiveness, making this topic particularly relevant. In today’s environment, responsive design has become an integral part of the user experience, influencing brand perception, conversion, and user trust in digital products.

2. Literature Review

2.1. Background

Before responsive design, many companies used to create separate websites for mobile and desktop versions. This approach was too expensive and difficult to maintain. Ethan Marcotte introduced responsive design in 2010 [3], using flexible grids, fluid images, and CSS media queries. This technique allows a single website to adapt to any screen size. Studies show many advantages: better readability, smoother navigation, and visual consistency [1,2,4]. However, the problem of accessibility still exists, especially for users with sight problems [5].

Modern literature also emphasizes the relation between responsive design and cognitive psychology. Well-structured responsive pages reduce cognitive load by structuring information so that users can easily locate key elements. For example, Gestalt principles such as proximity, similarity, and continuity play a significant role in the design of mobile interfaces. Furthermore, several studies compare adaptive and adaptive design. The adaptive approach uses different layouts for different devices, while the responsive design automatically adjusts to any screen width. Researchers note that responsive design is more resistant to the emergence of new devices because it does not require the creation of additional templates. However, some authors point out implementation challenges: responsive websites require higher development costs, a deeper understanding of CSS, and rigorous testing. These factors can be a barrier for small companies and novice developers.

In recent years, research has begun to focus on how responsiveness impacts interaction speed and interface perception. For example, according to Google research, 53% of mobile users abandon a site if a page takes more than three seconds to load. This underscores the importance of optimizing not only the structure but also the technical aspects of responsive websites.

Other studies examine cost-effectiveness. Companies that have implemented responsive design report a 10% to 30% increase in conversions on mobile devices. This is explained by the fact that users are more likely to complete targeted actions when a site appears user-friendly and intuitive. Conversely, fixed websites cause frustration and lead to a decrease in brand trust.

Furthermore, modern authors highlight another problem: excessive developer complexity when attempting to optimize a site for everything. Too many breakpoints, cumbersome CSS structures, and the use of heavy libraries can degrade performance and, consequently, the user experience.

2.2. Research Problem

Despite the common use of responsive design, its full impact on user experience is still not completely understood. Most research focuses on technical aspects, not on emotional factors or satisfaction. This research compares how people use responsive and non-responsive websites on laptops and smartphones. Furthermore, modern research sometimes examines the impact of responsive design on user emotional engagement. Although usability metrics such as task completion time and error rates are well-studied, emotional responses such as comfort, trust, irritation, or visual satisfaction remain understudied. Understanding these emotional aspects is important because they shape long-term user loyalty and website evaluations. Another problem with the literature is the lack of analysis of cross-cultural differences. Visual preferences, color perception, and navigation habits vary greatly between countries. What seems intuitive in one culture may be unfamiliar in another. Therefore, global websites must consider international differences when creating responsive interfaces.

Research also largely ignores the impact of adaptive design on users with low levels of digital literacy. These users often struggle with complex interfaces, and even minor changes to the page structure can significantly impact their experience. Therefore, it’s important to study the extent to which adaptive solutions simplify interaction and reduce errors for this group.

It’s also important to note that many studies don’t consider the impact of responsive design on long-term website usage. Most experiments are conducted over short periods of time, with the user completing one or two tasks. However, in real-world settings, users visit websites regularly, and user comfort with interactions builds gradually. The study of the long-term effects of responsive design remains an open question in the scientific community.

There is also a discrepancy between scientific research and the practical approaches of developers. Many professionals believe that responsiveness is limited to technical CSS settings, but research shows that the key issues most often lie in content structure, navigation logic, and interaction flow. This suggests the need for an interdisciplinary approach that integrates design, usability, and behavioral psychology.

Another unresolved issue is the impact of responsiveness on branding. Some companies fear that an overly flexible interface will change their corporate identity, but research shows that modern users value convenience and speed above all else. Visual brand elements should be responsive, maintaining their identity as screen sizes change.

2.3. Research Objectives

Main objectives:

Measure how responsive design affects the convenience of usability, readability, and navigation.

Compare user satisfaction between responsive and non-responsive websites.

Explore user feelings and perceptions of responsive designs.

2.4. Research Questions

The study addresses these fundamental questions:

• How does responsive design impact readability, navigation, and performance while completing tasks on different devices?
• How does the level of user satisfaction differ while using responsive and non-responsive websites?
• What are users’ perceptions and emotional responses when comparing responsive designs with fixed designs?
• Which design features correlate most strongly with positive or negative user experiences?

3. Methods

3.1. Research Design

A mixed-methods design combined statistical data and interviews to compare responsive and fixed designs under the same conditions. This approach follows the standards of usability research [1,2]. To improve the study’s reliability, a triangulation strategy was used, where quantitative and qualitative data complement each other. The experimental design controlled for variables such as lighting, browser version, and internet speed to ensure that differences were due to the design type itself, rather than external factors. Furthermore, a pilot test was conducted with six participants to verify the clarity of the instructions and eliminate potential errors. The results of the pilot phase allowed us to refine the wording and adapt the tasks to the participants’ skill level.

When selecting the sample, factors such as device type, website frequency, and preferred website categories were also taken into account. This helped to obtain a more complete picture of how responsive design is perceived by different user groups. This approach enhances the external validity of the study and allows for the application of its findings to real-world settings.

The study also employed a standardization strategy for the environment. All participants used identical browser versions, and screen brightness was adjusted before testing. This reduced the influence of external factors on the results. Furthermore, participants were prohibited from using additional tools, such as voice search or built-in magnification features, to avoid skewed task completion time measurements.

3.2. Participants

Sixty university students (ages 18-30 years, average = 22.4) participated—half used laptops, and the other half used smartphones. All were frequent internet users. Participation was voluntary and unpaid.

3.3. Sampling Method

The sampling procedure had two phases. First, we identified frequent web users from the population. Second, we randomly selected participants from this group to reduce selection bias and obtain a sample that reflects typical internet users. In order to use the sampling method, which showed the balanced amount of users of laptops and smartphones in experimental groups. The first selection was with surveys with users who spend 10+ hours on the internet. This kind of selection minimizes the selection mistake and increases the validity of the investigation.

In addition to the main steps described above, the sampling procedure included additional checks to improve the representativeness of the sample. Following the initial screening, respondents were asked to complete a short demographic questionnaire, including questions about age, internet experience, device type, and frequency of visiting various website categories. This ensured that the sample truly reflects the diversity of modern users’ habits and skills.

Device diversity was also considered: participants were required to actively use at least two types of digital devices (e.g., a smartphone and a laptop), allowing for the inclusion of more flexible users. The next step involved stratified random sampling: participants were divided into categories based on their frequency of smartphone and laptop use, after which respondents were randomly selected from each category. This approach ensured an even distribution across groups and avoided any bias toward users of one particular device type.

To ensure sample quality, an additional criterion was introduced: participants had to have minimal experience with online surveys. This avoided problems related to a lack of understanding of the study structure or difficulties completing the tasks. Participants who failed the pre-screening were excluded, as their inclusion could bias the data.

Furthermore, a motivation check was used: participants were asked control questions to identify disinterested respondents or those who responded randomly. Only those participants who completed all verification stages were included in the final sample.

The use of a combined sample, consisting of random, stratified, and purposive selection elements, significantly increased the accuracy and reliability of the data obtained. This approach also ensured a balanced comparison of the groups participating in the adaptive and fixed-design comparisons, making the study results more objective and valid.

3.4. Materials and Devices

Two websites were used: one with a responsive design and the other with fixed design. Devices included a 14-inch Windows laptop (1920×1080) and a 6.5-inch Android phone (1080×2400). Data were collected using Google Chrome, OBS Studio (for screen recording), and surveys with 5-point scales.

To more accurately record interactions, an additional software module was used to record touch and click coordinates. This helped identify areas of the interface where users most frequently made errors. In addition, the Lighthouse tool was used to evaluate the technical optimization of websites, including speed, accessibility, and interface stability when resizing screens.

3.5. Procedure

Each participant:

• Signed the consent form and received instructions.
• Was randomly assigned a device and a version of the website.
• Completed three tasks: learn about the main page, find a particular paragraph, and read it.
• Filled out the survey and answered short interview questions.

Participants were also asked to verbally comment on their actions while completing the tasks. This method allowed us to capture emotional reactions, moments of confusion, and indicators of satisfaction. If participants encountered difficulties, screen recordings were analyzed to identify usability issues, such as incorrect button placement, unclear hierarchy, or excessively dense arrangement of elements.

After completing all tasks, a semi-structured interview lasting 5-7 minutes was conducted. Questions focused on usability, emotional comfort, and suggestions for improvement. All responses were later grouped into thematic categories for further analysis.

After performing the main series of tasks, participants were asked to complete an additional attention test. This included searching for hidden interface elements and completing timed tasks. This allowed us to determine how adaptive design impacts users’ ability to quickly perceive elements, even those not centered on the screen.

An important stage of the study was assessing psychoemotional responses. Participants rated their emotional state on a 7-point scale, assessing parameters such as stress level, fatigue, engagement, and comfort. Comparison of these data between groups showed that the adaptive website significantly reduced stress during task completion.

Finally, participants completed a memory task: they had to reproduce the website’s structure. Participants using the adaptive version demonstrated more accurate recall of the structure, indicating a better cognitive organization of the interface.

3.6. Data Collection and Analysis

Quantitative data (task completion time, ratings, and clicks) were analyzed with SPSS using ANOVA testing. The interviews were transcribed and coded in NVivo to identify recurring themes.

4. Results

4.1. Quantitative Results

Responsive design surpassed the fixed version in all aspects. Participants completed tasks 32% faster and rated the responsive websites higher for readability and navigation (on average 4.4 versus 3.4). Statistical tests confirmed significant differences, $F(1,58)=27.48,p<.001$, with a large effect size (${\eta }^2=.41$). These results align with previous research [4,6], showing that responsive design increases usability and decreases cognitive load. In addition to task completion time, click analysis revealed significant differences. Participants on the fixed site used zoom functions 78% more often and made 25% more incorrect clicks. On mobile devices, the fixed layout forced users to scroll horizontally, making task completion more difficult. Correlation analysis showed that readability is a significant predictor of satisfaction ($r = 0.73). This means that clear copy and proper page structure directly influence website perception. Navigation clarity also correlated with perceived efficiency ($r = 0.68), confirming that responsive interfaces allow users to work faster and with less effort.

Heatmap analysis revealed that users of the responsive website spent less time in areas with high cognitive load. They were able to locate important page elements more quickly, confirming the effectiveness of the improved visual hierarchy. On fixed websites, users experienced frequent backtracking and erratic cursor or finger movements, indicating confusion and interface overload.

Another important indicator was the number of backtrackings. On the fixed site, users backtracked an average of 2.3 times per session, while on the responsive site, this figure dropped to 0.8. This indicates that users navigated the content structure more quickly and were less likely to get lost during navigation.

An analysis of the time intervals between clicks also showed that decisions were made faster on the responsive pages. This indicates less cognitive strain during task completion.

4.2. Qualitative Results

The interviews revealed four main themes:

Consistency: Participants liked that the responsive websites looked the same on both devices, supporting Technologies [7].

Reduced effort: Fixed websites required scrolling and zooming, whereas responsive ones were easy to use [4].

Positive emotions: Words such as "smooth" and "modern" described responsive designs, while fixed ones were called "tiring".

Accessibility: Some participants with sight problems had difficulties using screen readers, confirming Nogueira et al. [5].

Participants frequently emphasized the importance of visual balance. Many noted that responsive websites create a sense of "order" and "consistency," making interactions enjoyable. In contrast, fixed websites were perceived as "chaotic" on small screens due to overlapping elements and compressed text.

Trust was another theme. Users reported that responsive interfaces look more professional and reliable. This is consistent with research showing that visually modern websites inspire more trust.

Some participants also suggested improvements: dark mode, increased line spacing, a simpler menu interface, and improved contrast. This demonstrates that responsiveness must be combined with accessibility and personalization.

Some participants noted that responsive websites create a more natural interaction because elements "move as expected." This highlights the importance of interface predictability. Several respondents also stated that fixed websites reminded them of "old" versions of websites, which negatively impacted trust in the resource. Thus, responsiveness is also associated with the perception of a website’s modernity and relevance.

Many participants noted that a responsive website creates a sense of a "live" interface that responds to their actions. This sense of interactivity increases engagement and the desire to reuse the site. At the same time, a fixed website was perceived as static and unadapted to the modern environment, which reduced trust and ease of use.

Participants also noted the importance of optimized text: on a responsive website, lines do not extend beyond the screen, making it easier to read and reducing eye fatigue during prolonged use.

5. Discussion

5.1. Interpretation of Results

Responsive design clearly improves usability and satisfaction. It reduces effort, improves readability, and makes users feel more comfortable. These conclusions are supported by Li [4], Bhanarkar et al. [6]. Combining responsive design with constant feedback, as suggested by Ismailova and Ermakov [8], might improve the user experience even further. The findings demonstrate that responsive design has a comprehensive impact on user experience, from cognitive load to emotional engagement. This supports the idea that design is not just a matter of aesthetics but also a means of creating a comfortable environment for decision-making and task completion. Thus, responsiveness becomes an important factor in shaping the overall user experience of a website.

Furthermore, the study’s results show that responsive design reduces task errors, which is especially important for users with limited internet experience. This suggests that responsive design promotes cognitive economy: users expend fewer mental resources understanding the website’s structure, allowing them to focus directly on the content. Thus, a responsive interface not only improves technical comprehension but also contributes to higher levels of user productivity.

The findings also demonstrate that users of responsive websites form a mental map of the interface more quickly. This means that such websites have a more predictable structure, reducing uncertainty and increasing confidence during interaction. While fixed websites resulted in chaotic browsing movements and more backtracking, responsive websites ensured smooth and consistent execution of actions.

Another important aspect concerns emotional response. Study participants reported more positive feelings when interacting with responsive interfaces: a sense of modernity, ease of interaction, and aesthetic harmony. Emotional responses are an important component of user experience, as they determine a user’s willingness to return to a website in the future. Therefore, responsiveness influences not only the functional but also the emotional and psychological components of UX.

It is also worth noting that responsive websites demonstrated higher levels of engagement. Users spent more time on such pages not out of necessity, but because they found the experience convenient. This supports the hypothesis that a well-adapted interface contributes to longer user sessions and improved on-site behavior.

Taken together, the study’s results demonstrate that responsive design is a comprehensive solution that improves not only basic usability indicators but also impacts perceived product quality, website trust, and overall satisfaction. This makes responsive design an important strategic element that directly influences the success of digital products in a highly competitive environment.

5.2. Cross-Device Experience

Although both laptop and smartphone users benefited, mobile users experienced the most improvement. This supports the "mobile-first" design approach [1,4]. Interestingly, even laptop users have experienced the benefits of responsive design, especially when resizing their browser window. Many desktop users open multiple windows simultaneously, reducing the page width. A responsive layout adapts to these changes, while a fixed layout becomes inconvenient even on larger screens.

This demonstrates that responsive design is not only a mobile-first approach but also a tool that supports flexible computer usage scenarios.

It’s interesting to note that laptop users also experienced inconvenience on a fixed website when working in split-screen mode. This suggests that responsiveness is essential not only for mobile devices but also for flexible desktop workflows. Even on widescreen monitors, users don’t always use the browser in full-screen mode, and the interface must respond correctly to changes in available width.

5.3. Accessibility

Responsive design alone is not sufficient for full accessibility. Developers must also use semantic HTML, ARIA labels, and test keyboard navigation [5,9]. True inclusivity should be part of the design process, not an afterthought.

Furthermore, accessibility requires the implementation of elements such as adjustable font sizes, high-contrast mode, keyboard accessibility, and adaptive hit targets for touchscreens. Without these features, even a visually appealing responsive design may be inaccessible to users with disabilities.

Implementing WCAG 2.2 guidelines significantly improves accessibility. For example, scalable typography allows text to be enlarged up to 200% without disrupting the page structure, and ARIA tags help screen readers correctly interpret interface elements.

An important aspect of accessibility is also adapting the interface for users with cognitive impairments. For these users, an overly complex interface or a large number of elements can lead to overload. Responsive design allows for the gradual hiding of non-essential elements, making the interface cleaner and more logical. This approach is especially useful for older users who value simplicity and structured display.

It’s also important to consider that accessibility isn’t limited to users with visual, hearing, or motor impairments. It also includes temporary limitations: for example, a user may be traveling on public transportation, experiencing stress, or using a device with a damaged touchscreen. In such scenarios, adaptive design improves the interface’s resilience to external conditions.

Furthermore, the ergonomics of an adaptive interface reduce the likelihood of errors. For example, the optimal size of interactive areas reduces the risk of accidental touches, which is especially important on small screens. For users with large fingers or poor motor dexterity, this is critical.

Thus, adaptive design is one of the foundations of accessibility, ensuring correct content display and convenient interaction in any environment.

5.4. Limitations and Future Work

This research used only two types of devices and one category of websites (news). Future studies could test more platforms, include older adults, and use instruments such as eye-tracking and emotion detection. Cultural differences in design perception could also be explored.

Another limitation is the homogeneity of the sample: the participants were university students, and their behavior may differ from that of older adults, children, or users with low digital literacy. Future research could compare different age groups and user categories.

Furthermore, the study did not examine dynamic elements such as animations, interactive blocks, and microinteractions. These components significantly influence interface perception and may behave differently on different devices. A promising direction for future research is to study the impact of animations on responsiveness and usability.

6. Conclusion

In my opinion, responsive design significantly improves the user experience, making websites faster, cleaner, and better on all devices. However, developers still must solve accessibility problems to make the digital space inclusive for all users. The results of this research show that investment in responsive design directly correlates with key business indicators: decreasing bounce rate, increasing time spent on a website, and improving user satisfaction. Overall, responsive design is not just a technical solution; it is a user-centered philosophy.

In conclusion, the study’s findings confirm that responsive design is a key element of modern web development. It improves not only usability but also emotional comfort, trust, and overall user engagement. The rapid increase in mobile traffic means that companies that ignore responsive design risk losing a significant portion of their audience.

The future digital environment will demand even more flexible and intelligent interfaces. Technologies such as AI-powered personalization, automated responsive layout generation, and scalable typography may represent the next stage of development, improving the user experience across all devices.