What is responsive website design?

Why website responsiveness become so important and everyone has is talking about website responsiveness? What features and advantages do responsive sites have that separate them from non-responsive sites? I will answer these important questions in web design in this article. Let me give an example to clarify the importance of sites being responsive or not.

I don’t know about you, but I have a problem with the online payment portal of some sites. When I want to use the electronic services of this site with my laptop, there is no problem. But if I want to log in with my mobile and do something, it’s torturous. Nothing appeared on my mobile screen. I constantly have to enlarge the page, which causes other problems. It seems that this site was designed only for 13-inch desktops.

I think you also have this bitter experience. Because most of us do work online on mobile phones or tablets. It has happened to you that you open a website on your mobile and you say to yourself: I wish I hadn’t opened this page! Because everything is messed up and no element on the page is in its place. Do you know the reason for this confusion? The site is not designed to be responsive.

Responsive Web Design

If we look at the history of web design, it is clear that website design started when there were no mobile phones, tablets, and smart TVs. Web design was done for desktops with specific sizes and that’s it. But we all know that today’s users do not only connect to the Internet with a computer. Different devices (TVs, laptops, tablets and mobile phones) with different dimensions allow users to connect to the Internet.

So the site designer and developer should pay attention to the very important point that the site he builds must be displayed on different devices with screens of different sizes and resolutions. How can a web designer design a site that is displayed correctly and completely on any screen (very large to very small)? It means that the size of the photos and texts should be proportional to the size of the screen and nothing will be messed up on the screen?

One solution is to design multiple versions of the same site for different devices. That is, for example, one version for the desktop and one version for mobile with different URLs. It goes without saying that this solution is expensive and not very practical. Of course, other solutions have been proposed, each of which creates other problems and does not solve the problem completely. It was in 2010 that Ethan Marcotte introduced a new idea to the web design world: Responsive Design. He got the idea of responsive website design from a similar concept in architecture (Responsive Architecture). Responsive web design or action-oriented site is the most complete and best solution.

“The concept of responsive web design (RWD) appeared, a set of practices that allows web pages to alter their layout and appearance to suit different screen widths, resolutions, etc.”

Website Responsiveness

It was clarified that the meaning of site reactivity is that the site (structure and all its visual elements) reacts to the environment (device) in which it is to be displayed and the specific characteristics of that environment and adapts itself to it. The basic principle in responsive design is flexibility. In fact, the first step in responsive design is flexibility. The web designer and developer should think that everything should be designed as flexible as possible.

The second principle is that the designer and developer should look for best practices and techniques that contribute to responsive design. The point is that from 2010 to today, there have been many developments in web design and the techniques required for a responsive site. It is true that the set of basic techniques in responsive design are 3 techniques, but each designer and developer can and may use other techniques based on their project.

In order for the web design to be action-oriented, at least the following 3 techniques must be observed in the design and development of the site:

1-Fluid Grids

On each page of the site, different elements such as photos and texts should be placed together. The way these elements are placed together is very important because it should be in such a way that the textual content of the page has the necessary readability and clarity. The Grid system is a set of columns and rows (in which containers are defined to place different elements) that defines the main structure of the layout of different parts of the site for the designer. In website design, there are different systems for grading pages. But whatever system the site designer uses for grading, it deals with sizes.

The important question is how to set the font size of the texts and other expressions on the page as well as the paragraphs in the page grid so that they are displayed correctly and clearly on any device? Different units (pixel, percentage or ems) can be used to specify sizes in website design. In responsive design, a fixed size should not be used in grading. Instead of a fixed size, you should use ratios and convert ratios into percentages. That is, first we have to see what the element we want to determine its size is in relation to the container it is placed inside. Then we convert that ratio into a percentage and give it an element.

2-Fluid Images

Every photo placed on the site has a size. The web designer sizes the photos according to various factors. In responsive design, photos should be sized so that their size is reduced or enlarged on different screens. Different techniques can be used to make website photos responsive. The most popular and convenient technique is to use a simple CSS code for each image.

In this technique, a fixed size is not used to size the photos. Instead, the site designer sets the maximum width for each image to 100%. This code means that the width of each photo should be 100% of the screen or browser width. So, when the width of the screen or browser is reduced, the width of the photo will also be reduced in the same proportion.

3-Media Query

The most important technique in responsive website design is Media Queries in CSS. This possibility was introduced in CSS2 and became more complete in CSS3. With the help of the @media tag in CSS, the designer can test the features of different devices (media) and define a value for German based on the test result. The width and height as well as the Viewport (the amount of the web page that the user sees) are specific on each device. For example, on a TV, computer or laptop screen, the minimum Viewport is a specific number, i.e. 800 pixels. The web designer can write the CSS code in such a way that the width and height of the device or its resolution is checked first, and if it is at least 800 pixels, then it finds a specific value.

Advantages and features of responsive web design

I think the advantages of responsive sites are pretty well established. As mentioned, web designers design in a world where a device with new features is launched every day. In addition to devices, users use different browsers (Google Chrome, Microsoft Edge, Mozilla Firefox, Safari …). Each browser has its own CSS settings, and if the site is not designed responsibly, it may not display correctly in some browsers. So, responsive sites react to the browser environment.

Responsive design is a type of design thinking in web design. It is the approach and looking at web design that guarantees the efficiency of the site. So, responsive design has advantages for the user, site owner (especially store sites) and developer:

• Improving site user experience: Sites are designed for specific purposes. Sites with whatever purpose they are designed and built need users to visit them. If the site doesn’t have a good user experience, it won’t get any visits and, as a result, it won’t reach its goal.
• Helping the SEO of the site: For search engines, the reactivity of the site is also important because it is related to the user experience. Therefore, a site that is not responsibly designed will have problems with SEO.
• Saving time and money: if different versions of each site are to be designed and developed, it is as if the site owner has to pay for the design of several sites. And the web designer should spend time designing several sites.

 

Responsive website design frameworks and tools

If you take a closer look at the techniques that are necessary for responsive design, you will realize that it involves a lot of calculations and ratios. Finding all the right proportions and coding them, especially if there are a lot of photos and elements on the site, is not an easy task. Different devices and different browsers and many details should be considered.

For this reason, many software companies have released frameworks to make responsive website design easier. The front-end designer can choose one based on the type of project he has to design and also his familiarity with frameworks. But definitely the most famous and best framework for responsive web design is Bootstrap. Bulma.io is another free and open source framework for fully responsive design that frees the designer from coding CSS.

Along with the frameworks, there are also tools for testing the reactivity of the site. With these tools, you can easily understand whether the site is responsive or not. The first and best tool is Google Mobile-Friendly Test. Just give the website address to this tool and it will give you the answer in a few minutes. The second tool is Chrome Dev Tools (Developer Tools). Chrome has a set of tools for web developers that can be easily added to Chrome as Extensions.