Article Preview
TopIntroduction
The growth of the mobile device market, mainly due to the emergence of smartphones and gadgets of quite different sizes and resolutions, has generated new demands in the Web development industry, in which websites are automatically adjusted to these devices. Its use has become so popular that it is now a standard practice to create a consistent yet personalized experience on all devices. In fact, the emergence of different devices is so fast that it makes it difficult for web design to know all devices and resolutions. It is neither practical nor feasible for organizations to have a version of a website for each device that exists on the market. In this sense, Web companies are increasingly adopting Responsive Web Design (RWD) solutions.
RWD is a Web design technique that allows the website to automatically adapt to the accessed device. In this model, websites are designed to change their layout’s characteristics depending on the environment, device and platform with which they are accessed. RWD is based on three fundamental principles (LePage, 2018): (i) fluid grid systems, in which all elements are given in relative units; (ii) fluid image use, in which images are proportional to various screen resolutions; and (iii) media queries, which allow the creation of different styles for various screen dimensions and devices. Broadly, the practice consists of a mix of images, flexible grids, layout and Cascade Style Sheets (CSS)for media queries (Ashwini, 2017).
Several studies have reported the advantages associated with using RWD. Singh et al. (2015) group these advantages in seven domains: (i) improved Search Engine Optimization (SEO); (ii) easy maintenance; (iii) increase in visitors; (iv) satisfied user experience; (v) less investment; (vi) easy to analyze user behavior; and (vii) scalability. Arsenault (2017) adds four new groups of benefits: (i) increase mobile traffic; (ii) lower bounce rates; (iii) higher conversion rates; and (iv) less time needed to develop a website. Barron (2018) emphasizes two new benefits: (i) more social sharing; and (ii) provides better backlinks. Finally, Ohye (2015) emphasizes that a motivating factor to move to RWD is that Google’s new algorithm penalizes “poor mobile” sites down in the search results. Data obtained by Manley (2019) indicate that there are 3.5 billion of Google searches everyday and, consequently, better positioning of the company in a search engine has a high impact on the attractiveness of new customers and business profitability (Patterson, 2013).
At the same time that the concept of RWD appeared, there were also emerging frameworks that facilitated and streamlined the process of developing responsive websites. Frameworks like Bootstrap, Foundation, Skeleton, Gumby, Semantic UI, among others are compatible with RWD. According to Jain (2014), these frameworks consist of four components: (i) CSS source code to create a grid; (ii) typography style definitions for HTML elements; (iii) solutions for browser incompatibility; and (iv) creation of standard CSS classes. These frameworks speed up the mock-up process and provide solutions to common CSS problems. The developer can reuse classes provided by the framework and extend their functionality (Zea, 2015). Additionally, having a single procedure to solve common problems makes maintaining several projects more straightforward (Jain, 2014). Finally, another relevant factor that justifies the increase use of responsive design frameworks is the increase in variety of the display devices (Almeida & Monteiro, 2017).
Existing studies in literature allow us to prove that RWD has changed the paradigm as the Web development process is carried out with strong impact in the academic and business environment. Most of the existing studies focus on describing the process of Web design functionality and the advantages that this paradigm has brought to Web developers, Web companies and their customers. However, only a minority of the studies explicitly addresses the disadvantages of this Web development model, and they don’t explore the difficulties experienced by Web companies in their incorporation into larger and more complex projects. In this sense, this study intends to explore the main limitations of RWD through the use of five case studies. Furthermore, this study seeks to explore the role that responsive design frameworks have had in the Web development process, namely if their use becomes appropriate in projects of greater technological complexity. For this purpose, the following research questions were defined:
RQ1: What are the main limitations of responsive Web design?
RQ2: Do the responsive Web design frameworks help mitigate the limitations of responsive Web design?
RQ3: What are the alternative approaches to the use of responsive Web design?