R. Kiran Khan

How the need for websites to be ‘responsive’ have impacted on web design?

The impact of how the websites have to be ‘responsive’ with regards to the usage on mobiles, it is important to understand certain concepts such as responsive website, native apps, hybrid apps, and the difference between both the designs along with their impact on user experience. But in this article, I am going to discuss mainly on responsive websites.

Image Source Unsplash

The current advancement of technology, the popularisation of mobile devices and the access to the Internet has made it possible to carry out various activities, from access to the electronic commerce to the use of banking services or making purchases through online store. All this can be done quickly and comfortably at anytime and anywhere.

These devices, however, have some peculiar constraints, such as the reduced dimensions of the screen, the minimum capacity of memory and the low rates of connection to the internet. Thus, it is necessary that there be an evaluation of the behaviour and suitability of the sites to this new medium.

An adaptive web design

A bit of history about adaptive web design can be traced back to the year 2000; John Allsopp poses the differences between printed design and web design along with the difficulties of controlling the design when working in a medium like the web.

Different sizes of screen and capabilities of the device make the users unable to face a design project with the same conceptions with which the users were facing a project whose purpose was printing. There is no longer control of size, colours or fonts. Designing for the web there is a need to adapt. Concepts that culminated in adaptive web design began to work.

The Fluid Design

Then comes the fluid design in 2009; the concept of fluid design (also referred as liquid layouts) with accuracy as a solution to adapt to the screen of each device the layout of a web page. One could say that this design philosophy is one of the previous steps to adaptive web design or responsive web design. The idea is to flee the design with fixed sizes defined in pixels and use relative measures in percentages so that they adapt to the dimensions of each screen.

Furthermore, in the year 2010, ‘Responsive Web Design’ was introduced; it was an unravelling the birth of this new technique in response to the problems posed by fluid design. The responsive design is based precisely on adapting the usability of the design to each device.

Collapsing, adapting and even hiding content are the techniques that make adaptive design the best response to the multitude of devices capable of surfing the internet. Scaling the content to “occupy” the screen width as did the “fluid grids” was no longer enough.

Responsive Design Evolved from Fluid Design (Source: Speckyboy, 2017).

This was followed by “One Web” in 2011; adaptive design is considered as a solution to the “mistakes” made so far in terms of designing websites. One must be clear, when web is designed that is not for a particular device, there is no web for a desktop computer or a web for a mobile device.

There is a single content, a single web, on which one has to work to adapt its usability, adapting it to the characteristics of each device. So far, the solution to create sites adapted to each device was to develop independent developments that conform to the characteristics of each device (desktop, tablet or mobile).

The cost of development and the growth of “connected” devices make this way of conceiving a project become unsustainable in the present and is banished in a future in which the users will see an exponential growth in the field of use of web pages.

In addition to that, the adaptable design of the Boston Globe caused a great sensation in the world of web design because it showed that it was useful no matter what type of site was being designed. The perfect realisation and careful design did more than the evangelistic work of avant-garde designers.

The Boston Globe development team explains how they set out their adaptive design and what the steps were to adopt it as a solution in a small presentation that one cannot miss. It is in these years when web designers became aware of adaptable web design as a response to the evolution of the internet in recent years in a massive way.

Difference between a Responsive Website and Native Mobile App

Responsive website or layout, or otherwise known as flexible website is when the site automatically fits into the user’s device (desktop, tablet, mobile).

In a responsive website the appearance or view along with the layout of the site changes in accordance with the screen resolution of the gadget on which the website is being displayed.

Thus, if the user has a small screen, the elements reorganise to show the main things first. In smartphones navigation and user experience becomes difficult and limited having to use zoom in and out features to read the page in its entirety. Other details like buttons and menus are deformed because they were not made for this device or resolution (Kim 2013: 30).

Responsive Web Design (Source: Vrsfoto, 2016)

The concept of responsive design is not a big breakthrough, but has attracted a lot of attention in recent times with the growth of the mobile device market, mainly due to tablets and mobile phones of varying sizes and resolutions.

In this new context of browsers and various resolutions, responsive design emerges as a logical evolution of website design, also known as web design; before much of the internet was accessed by very similar resolutions and browsers.

Until recently it was enough to make a website that worked in Internet Explorer with a maximum resolution of 1024 × 768 pixels that everything was solved, of course there were other features, but the vast majority was in the same group — at most there were users of Mozilla Firefox.

Today everything has changed, there are 50 “inch TVs accessing the internet, there are phones that have 2” to 5 “screens, 5” to 7 “ tablets, 6” to 14 “(or even more) tablets and not counting the computers themselves, which has netbook screens up to Apple’s iMacs, putting the 11 “edge up to over 26” inches.

All of these screen sizes and still do not enter the question of resolution, which further increases the range of possibility. According to Google Analytics, there had been 1841 different screen resolutions accessing the site in 2014 (Lane et al. 2015).

This feature demonstrates that a site can be viewed in a variety of ways and in a variety of contexts, and that is what sites should be prepared for. The responsive design, as the name already indicates, can respond to the size of the screen to suit the best. An example of the layout change of a responsive website can be seen from the image.

Instead of creating two separate sites, one for mobile (cell phones and tablets) and one for desktops, the designer can only make one website that will fit nicely on any screen it loads on. Almost 20% of the 10,000 largest sites in the world use responsive design. Either a responsive website is made or ten different websites are to be made.

Responsive Web Design (Source: Caktus Group, 2017)

One of the key advantages of responsive design also becomes a major problem for digital agencies. If there is a need of the site to be tailored for mobile phones, smartphones, tablets, notebooks, desktops and TVs, the designer would probably have to make at least 5 different websites.

The evolution of responsive design has greatly changed this, bringing the advantages of having several sites to one place. But this ease of adaptation also creates a problem for digital agencies and all those professionals who work on website development.

Mobile platforms have become important tools for marketing products via e-commerce, and so the entrepreneur must have a responsive website. Responsive sites are those that adapt the size of the pages (layout change) to the size of the screens that are being displayed, such as the screens of mobile phones and tablets. Its advantages derive from adapting to any tool that users are using to make their viewing easier. In addition, responsive sites can also expand to view page details by zooming in.

Basically, responsive sites are adaptable with all the screen sizes, not only for mobile phones, tablets or desktops, but also for internet browsers that are not screen-maximised. In summary, they are sites that fit the viewing area.

A responsive website fits the screens and repositions the elements and images of the website in order to keep a vertical scroll only, and make it not have the scroll bar horizontally. The sidebar with menu or login of the website are repositioned automatically.

The three main ingredients of Responsive Web Design (Source: Verve Search, n.d.)

Content Management System

In many cases, depending on the CMS (Content Management System) or CSS coding, one can specify which “modules” should appear on a smaller version of the screen, for example, for mobile do not display the site search icon and so on. Based on CSS3 and using HTML5 (see Figure 6) features today a responsive website can be viewed comfortably for most screens and the best while keeping the visual features of the website open in full screen.

An exclusively mobile site, like some large news portals, are those that have a very short layout, loading few images, this is because they aim to be loaded faster and make it more accessible to most people (even those who have a Cell phone, as long as it has the browser function).

The unique version of a mobile site, such as a separate site, a site made especially for mobile phones and small devices, with different URLs address, can create issues with site’s placement in search results.

Since 2012, Google has recommended website design to be responsive for smartphones, because it makes better user experience and allows Google’s site crawler to retrieve content from websites. So basically, it means that changes to websites will be updated in search results more quickly.

Conclusion

The impact and the concept of websites to be ‘responsive’ has changed the overall dynamics of user experience. It is evident from the discussion that the change in the responsive website has mainly due to the user experience.

The user does not tend to visit or spend much time on the websites that are not responsive to the device that a particular user is visiting the website. It is also evident that this has impacted on the businesses as the landing of users or customers is heavily affected by the kind of website that is being designed.

In conclusion, it is evident that the impact of increased technological advancement and the conversion of visiting users on the website through different devices and gadgets have impacted profoundly on web designs. This has changed the dynamics of web designing which resulted in responsive websites.

Furthermore, it is also recommended that the websites must be designed in ways that are user-friendly and easy to handle such as native apps. This will increase the attention of users from apps to responsive websites.

The reason is that responsive websites can be more informative and user-friendly as compared to apps and a lot of hindrances can be handled on websites as compared to applications.

Also, the access of users is easier as compared to searching for the right app. Therefore, if the websites are made according to the current technology and market trends, the possibility of an increase in the usability of websites is easier.

References

Albert, W., & Tullis, T. (2013). Measuring the user experience: Collecting, analysing, and presenting usability metrics. Newnes.

Baird, D.E, & Fisher, M. (2005–2006). Neomillennial user experience design strategies: Utilising social networking media to support “Always on” learning styles. Journal of educational technology systems, 34(1), pp.5–32.

Frain, B. (2012). Responsive web design with HTML and CSS3. 1st ed. Birmingham, UK: Packt Pub.

Frost, B. (2012). Separate Mobile Website Vs. Responsive Website — Smashing Magazine. [online] Smashing Magazine. Available at: https://www.smashingmagazine.com/2012/08/separate-mobile-website-vs-responsive-website-presidential-smackdown-edition/ [Accessed 7 Apr. 2017].

Gardner, B. S. (2011). Responsive web design: Enriching the user experience. Sigma Journal: Inside the Digital Ecosystem, 11(1), 13–19.

Harb, E., Kapellari, P., Luong, S., and Spot, N. (2011). Responsive Web Design. [Online] December 2011. Available from: http://courses.iicm.tugraz.at/iaweb/surveys/ws2011/g3-survey-resp-web-design.pdf. [Accessed: 14 Apr. 2017].

Lane, J., Barker, T., Lewis, J. and Moscovitz, M. (2012). Foundation Website Creation with HTML5, CSS3, and JavaScript. 1st ed. Berkeley, CA: Imprint: Apress, pp.147–158.

© All rights reserved. R. Kiran Khan