1 Introduction

Many students in the world are not going to school because of coronavirus (COVID-19) disease. According to UNESCO’s monitoring, coronavirus is affecting more than half of the student population worldwide. Some countries have also closed schools locally. This has been a disruption in the education of millions of students (Unesco, 2020). Since The World Health Organization (WHO) officially declared the outbreak on March 11, 2020, the countries are continuing to control the spread and take preventive measures in students education (Global Health Security Index, 2019).

In order for students to perform education from their own mobile devices or computers off-campus, websites must be designed to be compatible with the screens used. To support screen size differences, Ethan Marcotte (2010a) published the responsive design idea and technique. The goal of responsive web design is to make a website look equally good and usable on every device, regardless of the screen size of a device (Kim, 2013). The basic concepts in websites and applications are accessibility and usability. Different accessibility standards and guidelines have been established (Masri & Luján-Mora, 2012).

The concept of usability varies according to product and service areas. The usability dimensions, such as learnability, effectiveness, mentionability, fault tolerance, and satisfaction, have been developed by Nielsen (1993). The websites should be based on usability dimensions in order to design high-availability, user-friendly websites. Thus, the usability should align the design of appropriate products with the needs, expectations, and desired features (Evcil & İslim, 2012).

Creating different designs for different screens will cause problems of cost, time, update, and increase network load. Since it is impossible to create and use websites for every new device and resolution, "One Website Design Concept" lowers design cost, provides fast updates and access, saves time and reduces device limitations (Knight, 2011).

Responsive design is a website design approach to adapt the user behavior of design and development to the environment, screen size, and orientation of used devices (Knight, 2011). The purpose of responsive design is to provide access to the content of websites from all devices. The users should be able to access the content of websites regardless of the device used. Thus, the website is made compatible with all device screens with a flexible structure, flexible images, and application of media queries (Subic et al., 2014).

In this research, the aim is to realize responsive design of university websites considering user preference and usability with its functionality. In this respect, “Evaluation of the usability of university websites designed according to responsive design in pandemic” constitutes the aim of our study. Within the scope of this purpose, the following sub-objectives will be answered in order to evaluate the usability of the academic websites through responsive design:

  • What are the effects of coronavirus on education?

  • What is the relationship between students’ demographics and the usability of the academic websites?

  • How is the relationship among usability dimensions?

  • What is the relationship between responsive design and usability?

  • What are the effects of responsive and usable academic websites in the pandemic?

2 Coronavirus and education

The World Health Organization officially declared the coronavirus as an epidemic on March 11, 2020, due to the negativities experienced.Countries continue to control the spread (Global Health Safety Index, 2019). United Nations Educational, Scientific and Cultural Organization (UNESCO) has begun providing emergency support to countries to minimize disruptions to education and facilitate continuity of learning, especially for the most vulnerable. UNESCO made recommendations for countries to continue students education with alternative communication technologies (UNESCO, 2020).

Communication technologies are used to increase the interaction in education. The interaction provides various functions in the education sector. These functions allow student control, assist in meaningful learning, facilitate program adaptation, and allow various forms of participation and communication (Fenech, 2011). For distance education, UNESCO's solutions to facilitate student learning by educational institutions and school systems are free and support multiple languages. If there is a product deemed to require that the digital learning provider be added to the resource list below, UNESCO requests that it be notified by e-mail. Sources are as follows (UNESCO, 2020):

  • Systems specially designed for mobile phones

  • Digital learning management systems

  • Systems with strong offline functionality

  • Massive Open Online Course (MOOC) Platforms

  • Self-directed learning content

  • Mobile reading applications

  • Collaboration platforms that support live video communication

  • Tools for creating digital learning content.

In addition to UNESCO's recommendations, Snelling and Fingal (2020) offer the following online learning recommendations for educators in pandemic:

Preparation:

  • Provide digital equality.

  • Use practical structure.

  • Provide clear expectations to staff and parents.

  • Take the time to plan.

  • Prepare your documents.

Implementation:

  • Create daily schedules.

  • Provide robust learning.

  • Design independent learning.

  • Act emotionally.

  • Choose the right tools and stick to them.

3 Responsive design

A website designed at a fixed resolution ratio may have the proper viewing and usage in the browser with the same resolution ratio, but because each device has a different view resolution, image distortions are inevitable. The reason is the difference between the code system and the way the web browsers support it. The coding method that provides solution for browser convenience is to use responsive design approach (Oyucu & Polat, 2018).

The main reason for the rapid increase in the use of mobile devices is owing to the convenience, multi-functional features, and the opportunities offered by mobile communication technologies. The Internet users want to take advantage of all the capabilities of their devices and all the blessings of the internet. The responsive web design inherently adapts the responsively designed websites with user's devices (Marcotte, 2014).

The website prepared with responsive design method does not need to reduce and enlarge the display screen and scroll the page right and left on mobile devices (Rogatnev, 2015). The website dynamically adjusts its appearance according to the size and resolution of the screen being displayed. In this way, the website created does not need to be designed in accordance with the specifications of each device and in different size ratios for mobile devices (Oyucu & Polat, 2018). Users should have the best user experience on the site. For this reason, the site does not need to resize and scroll and users should be able to use the site with a full perception of visualization (Sharki & Fisher, 2013). Benefits of responsive web design include (Baturay & Birtane, 2013):

  • Easily adaptation to the display on any device

  • The content accessibility

  • The content visibility and readability

  • No need to resize website pages on the used devices horizontally or vertically

  • Providing necessary savings without creating a separate website for mobile devices

Although responsive design requires necessity with the use of mobile phones, it is also necessary for the internet and media devices that provide improvement, such as Web-based television services and smart televisions that provide viewing, video game consoles, and so on (Fielding, 2014).

3.1 Responsive design processes

Website design needs to be fast and have efficient steps in order to get results with the responsive design. Failure to apply the design process steps makes the other process difficult. Each step that is not completed will result in the repetition of the processes or the reconstruction of the design. In this case, it will create problems such as increasing time and cost and decreasing customer satisfaction. Responsive website design processes have four consecutive steps. These steps are as follows (Singh et al., 2015):

  • Analysis

  • Structure flexibility

  • See and focus

  • Site construction

Analysis: It is required that the intended use of the site and its target audience are known. A website that meets the different specifications of the target audience and the user expectations should be considered.

Structure flexibility: The functionality of responsive design is considered at this level. The size of the objects placed in the grid changes as the screen size changes. It needs to understand how CSS should react as the screen size of the page changes. As the size becomes smaller, it is necessary to know which operations should be implemented.

See and focus: This level is the visual implementation of the flexible structure. It should focus on the placement of visual elements in the design of the site and the characteristics that should be used in terms of text type and size.

Site construction: Using HTML and CSS in the main design of the website minimizes future problems. Using visual elements as small as possible and CSS coding will increase the speed performance of the site during the loading phase. HTML5 and CSS3 can be used for seamless internet capability of understanding and responding to the qualities of digital devices (Singh et al., 2015).

3.2 Responsive design styles

There are three styles of responsive design. These are flexible structures, flexible images, and media queries (Marcotte, 2010a, b):

  • Flexible structure: The Internet website is a fluid layout that uses a flexible structure that is scaled to the screen width of the browser (Marcotte, 2009). As a different definition, it is a flexible structure platform that has the ability to be proportionally adapted to the screen, where a fixed-size layout is removed (ECAR, 2014). As explanatory, in a fixed layout, the width does not change and is set to pixels, so it is not adapted to the screen size of the user browser. Problems such as heavy data flow for small size, low-resolution screens, and free space for high-resolution screens can arise. In order to solve these problems, the browser screen with a flexible screen layout is designed on a flexible structure that is capable of expanding and shrinking in percentage (Gardner, 2011). The most widely used style in responsive design is the 960 grid system that was developed by Nathan Smith. The reason for the application of the 960 grid system is that the number 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 15, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. Thus, it is possible to adapt the website to every screen (Çatal & Kürşad, 2015).

  • Flexible images: Flexible images and videos that are scaled on the grid are to be fully displayed on the screen (ECAR, 2014). It is the resizing of media elements by adhering to the fixed width and height ratios (Harb et al., 2011). It is an adaptation of the site designed in accordance with the size of the browser screen to all media elements (Gardner, 2011).

  • Media queries: The cornerstone of responsive design is media queries. The internet uses the dimensions of websites to accommodate user browser pages by taking media queries such as width, height, orientation and color (Harb et al., 2011). The use of different text characters on the websites may cause problems in terms of readability and selectivity (Alican, 2014). On adapted websites, the size and type of the screen are too small or too large on the screen and the number of lines that are inadequate compared to the screen size is disturbing users. This problem can be solved in terms of percentage and minimum–maximum width by media queries (Harb et al., 2011).

4 Usability

The purpose of usability is to design products that meet user expectations and needs. The structure and general usage of the products are aimed to have the desired features for the users. Increasing the efficiency, effectiveness, and satisfaction of the products are among the objectives of usability (Gürses, 2005). The combination of elements that make it easier to work with a product or a system that benefits the user is defined as usability by Neilsen. Neilsen has defined the elements for user-friendly systems (Nielsen, 1993) as follows:

  • Ease of Learning: This is the ease of learning that allows the users who encounter the system for the first time to perform the operations they want to do quickly.

  • Effectiveness: The users who learn to use the system are effective in their usage, which provides high efficiency in the system.

  • Reminder: Users who have not worked with the system for a long time can be used by remembering the previous transactions and using the system again.

  • Fault Tolerance: The system should have a low error rate and tries to prevent user errors.

  • Satisfaction: The system should provide users with ease of use and desire.

Usability is not a static concept due to differences in human needs. For this reason, it is important to evaluate the usability features of educational institutions’ websites, such as universities, at least once a year in terms of positive user experience (Budak et al., 2017). Besides the usability, effectiveness, and efficiency of websites, usage satisfaction is important (Uğraş et al., 2016). Users who open the website are affected by the visual design of the site within the first few seconds and decide to use or leave the site. The visual design increases the reliability of the website to users.

Websites and applications are becoming compatible with mobile devices with the development of each passing day to meet user needs. Previously, mobile devices offer a wide range of possibilities. Since the day they were used, mobile devices have evolved to meet people's needs and wishes. Design, fineness, durability, speed, different usage characteristics, screen width will soon be presented with different features. In addition to hardware features, they have been developed for different devices in the applications used. The fact that websites are directed to devices that provide access to a wide range of users has increased the importance of web design suitable for mobile devices (Budak et al., 2017).

4.1 Mobile usability and compatibility

Mobile devices are personal and always accessible and benefit from the increasing importance of users. Unlike computer users, mobile users want customized and good services. W3C has developed web technologies that take into account mobile device features, such as CSS mobile, mobile XHTML, JavaScript API, widget, etc. technologies (Hazaël-Massieux, 2016). Mobile applications enable sharing of information freely without having to be connected to desktop computers and allows access to the content of the websites at the desired place and time (Desruelle & Gielen, 2013). Thus, it provides efficient and effective information from different devices by complying with responsive standards and design principles (Alsadi et al., 2017).

Mobile usability is derived from the characteristics of the mobile devices used. Mobile devices increase the life cycle of the website. Building better websites through usability helps create a positive user experience (Budak et al., 2017).The mobile devices enable to reach the desired content at any time and place and perform user transactions. General features of these devices are (Firtman, 2013):

  • Portable

  • Personal

  • Always available

  • Easy and fast operation

  • Have internet connection.

Mobile compatibility is another feature that completes usability. The goal of “access everywhere” have many restrictions. Mobile users want a good experience and like to make full use of mobile devices’ capabilities (Seward, 2011). Thus, a mobile compatible website is an essential requirement for being available on the internet. Peterson (2014) developed design, page layout, visual and interaction design, and navigation principles for mobile compatibility as follows:

Design:

  • Unnecessary items should not be on the site.

  • Desired content should be highlighted.

  • The page should indicate the hierarchical progress on the site.

  • Access to the home page and the next page should be available.

  • The contact address must be specified.

Page layout:

  • Pages should be created in a single column.

  • Horizontal scrolling should not be used on the pages.

  • Use limited vertical scrolling on pages.

Visual and Interaction Design:

  • Text input should be facilitated and reduced.

  • Use high contrast elements and text to ensure easy readability.

  • Readable font size should be used.

  • There must be space between the items and the keys pressed.

Navigating:

  • Navigation options should be kept up to date,

  • Important information should be highlighted on the homepage.

  • Signboards should be used.

  • There should be an available menu at the bottom of the page.

  • A search bar should be available on the site (Seward, 2011).

In order to execute mobile compatibility, Google offers practical solutions. The Google mobile compatibility test tool is run by specifying the URL. Test results are listed within one minute. The site provides a mobile screenshot to the user to see how their sites are mobile compatible (Google, 2019).

4.2 Limitations

With the technological developments, websites for mobile devices and applications bring some problems to the agenda. Website designers should consider differences in desktop and mobile devices. The operations that can be performed on desktop computers can be difficult to perform on some mobile devices. Mobile websites and applications are designed according to the screen size in order to make their content usable. The devices with large screens enable them to see the information they want to reach faster and have more efficient use but some others can have limitations (Raptis et al., 2013). The common mobile limitations are as follows (Wroblewski, 2011):

  • Screen size: The smaller the screen sizes can make browsing the website or applications difficult.

  • Performance: Limited connectivity during data retrieval affects performance. Hardware features can cause poor performance.

  • Location and Time: Mobile devices can have connection and timing problems in different ecological environments.

5 Method

The universe of this research is university students. The research is experimental. A questionnaire was used as a data collection tool. The questionnaire was distributed to 134 students and 130 students answered. The response rate of the survey was 97%.

To measure the effect of responsive design on usability, the questionnaire form consisted of A and B sections. Section A contain questions to collect demographic characteristics from the individuals including age, gender, devices used, internet connection type, use of internet rate, internet usage reason, and use of social media. Section B contains 40 questions about responsive design and usability dimensions such as Ease of Learning, Effectiveness, Rememberability, Fault Tolerance, and Satisfaction. A five Likert scale was used to gather respondent’s choices ranging from 1 being “strongly disagree”, 2 “disagree”, 3 “neutral”, 4 “agree”, and 5 “strongly agree”.

Independent group t-test was used for paired group comparisons and one-way analysis of variance (ANOVA) was used for three or more group comparisons. Correlation analysis was performed to determine the relationships between variables. Regression analysis was applied to measure the relationship between responsive design and usability dimensions.

The reliability values ​​of the scale used in the study were measured in terms of internal consistency. The Cronbach alpha reliability value of the survey was 0.79 as shown in Table 1.

Table 1 Reliability of dimensions
Full size table

5.1 Findings

The frequency analysis findings for the demographic variables included in the study are shown in Table 2.

Table 2 Demographics
Full size table

The participants data obtained from the research were firstly examined in terms of outliers. Because the outlier observation values ​​in the data significantly affected the normal distribution, extreme data analysis was performed. Table 3 provides student views on responsively designed university websites. According to this; average scores on usability, ease of learning, effectiveness, rememberability, error tolerance, usage satisfaction, and responsive design dimensions had high scores. Ease of Learning had the highest point (Avg = 3.67).

Table 3 The central tendency measures of dimensions
Full size table

5.2 Data analysis

The demographics were analyzed interpreted for usability and responsive design as follows:

  • Gender

According to the t-test findings, no significant relationship was found between gender and usability. This result means that the attitudes of the participants towards all dimensions are quite similar in terms of gender.

  • Age

According to the age of the participants, no differences were detected except in the dimensions of Ease of Learning and Satisfaction. ANOVA test was used to determine the differentiation with respect to age. The usability dimension was differentiated by age as follows:

  • In the effectiveness dimension, the participants in the 24–26 age group had a higher level of effectiveness than the users in the 21–23 age group.

  • In the rememberability dimension, the participants in the 24–26 age group had a higher level of rememberability than the participants in the 21–23 age group.

  • In the error tolerance dimension, the participants in the age group of 27 and older have higher in tolerance than other age groups.

  • Devices used

When the devices used by the participants were examined, the use of mobile devices is seen to have highest rates. Mobile phones were used significantly high (%99.2).

  • Internet connections

Developing mobile communication link technologies were indispensable for mobile device users. 93.1% of the participants were connected to the Internet via Mobile Phone/Tablet/PDA. Attitudes towards all dimensions did not differ significantly according to the use of the Internet connection.

  • Use of Internet rate

The rate of daily internet usage was the highest with 38.5% of the participants, and they used the internet for more than 4–5 h per day. For the Responsive Design dimension, there was a significant difference according to daily internet usage time.

  • Internet usage reason

Considering the purpose of internet usage, the majority of the participants use the Internet for social media, ranking as communication, access to information, news and shopping.

  • Use of social media

Social media has been widely used in pandemic time. Social networks such as Youtube and Instagram were widely used in communication.

5.3 Responsive design and usability correlation

In the study, the correlation was evaluated. The relationship between Responsive Design and usability is generally positive and moderate as shown in Table 4.

Table 4 Pearson Correlation Values of Dimensions
Full size table

It was found that there was a high positive correlation between Usability and Ease of Learning, Effectiveness, Rememberability, Fault tolerance, Satisfaction and Responsive design.That means The other correlations are as follows:

  • There was a moderate positive relationship between Ease of Learning and Effectiveness, Rememberability, Fault Tolerance, Satisfaction and Responsive Design.

  • There was a significant positive correlation between Effectiveness and Rememberability, Fault Tolerance, Satisfaction, and a high positive correlation between the Responsive Design.

  • There was a positive relationship between Fault Tolerance, Satisfaction dimensions and a positive correlation between Responsive Design.

  • There was a moderate positive correlation between Fault Tolerance and Satisfaction and Responsive Design.

  • There was a moderate positive relationship between Satisfaction and Responsive Design.

5.4 Effects of responsive design on usability

In order to determine the effects of Responsive Design on Usability (Ease of Learning, Effectiveness, Rememberability, Fault Tolerance, Satisfaction) regression analysis was performed. For this purpose, separate regression models were established for each dependent variable. The results of the regression analyzes performed in this context are given in Table 5.

Table 5 Regression Analysis Results
Full size table

Table 5 shows the effects of Responsive Design on Usability dimensions. The effects are as follows:

  • Responsive Design variable explains 91.5% of the change in usability (R2 = 0.915). When the adjusted beta value was examined, it was found that the responsive design (β = 0.837; p < 0.05) variable had a significant effect on usability.

  • Responsive Design variable explains 37% of the change in Ease of Learning (R2 = 0.370). When the adjusted beta value was examined, it was found that the effects of responsive Design (β = 0.608; p < 0.05) on Ease of Learning were significant.

  • Responsive Design variable explains 74.7% of the change in Effectiveness (R2 = 0.747). When the adjusted beta value was examined, it was found that the responsive design (β = 0.865; p < 0.05) variable had significant effects on the Effectiveness.

  • Responsive Design variable explains 52.5% of the change in Rememberability (R2 = 0.525). When the adjusted beta value was examined, it was found that the responsive design (β = 0.725; p < 0.05) variable had a significant effect on Rememberability.

  • Responsive Design Variable explains 33.9% of the change in Fault Tolerance (R2 = 0.359). When the adjusted beta value was examined, it was found that the effects of Responsive Design (β = 0.582; p < 0.05) on Fault Tolerance were significant.

  • Responsive Design variable explains 47.3% of the change in Satisfaction (R2 = 0.473). When the adjusted beta value was examined, it was found that the effects of Responsive Design (β = 0.688; p < 0.05) on Satisfaction were significant.

6 Conclusion

In this study, the opinions of university students were taken at the time of the pandemic with a questionnaire in order to investigate the effect of responsive design on usability. It was seen that the participants ' attitudes towards responsive design are quite similar according to gender. In the responsive design dimension, it is observed that the participants in the 24–26 age group are more careful and have more perception skills. Participants' attitudes towards responsive design do not differ significantly according to their connection point to the Internet. The daily Internet usage rate of 38% of the participants is 4–5 h. It is seen that mobile device usage has high rates. This shows that the participants, who were mostly mobile device users, were more sensitive in the responsive design dimension. Considering the purpose of internet usage, the majority of the participants mostly use the internet for social media and contact. Ease of Learning is one of the Usability dimensions that students find the most positive (Avg = 3.67/5, 73.4%). In the correlation, usability and responsive design (r = 0.92, p < 0.01) were found to be significantly correlated. The regression analysis shows that responsive design explains 91.5% of the usability and explains 74.7% of its effectiveness. In this study, 99.2% of university students were using smart phones and the level of user satisfaction with responsive design was 93% in terms of using responsively designed university web sites. With the use of mobile devices, the responsive design increases website usability. It can be concluded that responsive design increases the usability of academic websites in pandemic period.