Modern Methods in Responsive Front-end Development

Before diving into the details, let’s introduce the concept of “responsive design.” Responsive design is a technique that ensures your website or web application is displayed correctly on devices with different screen sizes and resolutions, such as computers, tablets, and phones. It allows the page to maintain proper display and usability when accessed from different screen resolutions. This ensures that your website or web application can be easily viewed on devices of various screen sizes, with content presented in an organized manner. With this brief introduction, we can now focus on responsive front-end development.

Whether you are creating a website or a web application, many modern front-end development techniques can help solve potential problems before they arise without requiring extra effort. Below are some solutions for common issues often encountered in time-sensitive projects by those new to front-end development or those curious about the field.

1 – Defining Responsive Font Size:

There are some CSS properties where you must define new values for desktop and mobile. However, using “clamp,” we can set the font size for both mobile and desktop in a single line without needing a separate definition for mobile. Let’s explore how to use “clamp” to determine the font size:

Let’s say we have a very large heading, for example, font size 140px.

If we use a fixed font size like 140px, the text will overflow as the browser width decreases and does not fit within its container. To solve this issue, we need the clamp property.

The clamp function works like this:

font-size: clamp(minimum value, preferred value, maximum value)

One of the best uses for this scenario would be:

“Font-size: clamp(75px, 10vw, 140px;) “

We have defined the minimum and maximum values. In the preferred section, we used a unit in vw (viewport width). 1vw equals 1% of the viewport width. This way, we defined a font size proportional to the page width, eliminating the need for additional definitions for mobile and desktop.

Font-size: clamp(75px, 10vw, 140px;)

When we define it in this way:

<!doctype html>
<html lang="en">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
 <h1 class="sabit">Fixed Font Size Heading</h1>
 <h1 class="clamp">Responsize Font Size Clamp</h1>
 </body>


 <style>
   .fixed {
     font-size:140px;
     color:rgb(8, 58, 143);
   }
   .clamp {
     font-size: clamp(75px, 10vw, 140px);
   }
 </style>
</html>

When the screen width is 2000px, the font size would be 10vw = 200px, but since our maximum value is set to 140px, it will stay at 140px. On mobile devices, such as those with a width of 400px, 10vw would equal 40px, but since the minimum value is set to 75px, it will remain at 75px.

2) Setting Responsive Margin, Padding, and Gap Values:

The method we described above for font size is also applicable to the following properties:

gap: clamp(5px, 5vw, 50px); 

padding: clamp(5px, 2vw, 30px);

margin: clamp(5px, 2vw, 30px);

font-size: clamp(75px, 10vw, 140px);

This way, we write less and cleaner code for commonly used CSS properties like gap, padding, margin, and font size.

3) Adding Images Responsively

We can add images to our project in a responsive manner, adapting to different screen sizes, using several methods:

First Method: Using the <picture> tag allows for multiple image files as needed.

<picture>
  <source media="(min-width:700px)" srcset="tabletimage.jpg">
  <source media="(min-width:465px)" srcset="desktopimage.jpg">
  <img src="mobileimage.jpg"  style="width:auto;">
</picture>

The media query here works similarly to a CSS media query.

How It Works: If the condition given in the media attribute of the source tags defined within the picture element is met, the corresponding image will be displayed. If the condition is not met, the image specified in the img tag will be shown instead.

This lets you define different resolutions for different breakpoints within the picture element.

Second Method: Use CSS media queries to hide the image on specific screens with “display: none;” For example:

<style>
@media only screen and (max-width: 600px) {
.desktopImage{
display:none;}
}
@media only screen and (min-width: 600px) {
.mobileImage{
display:none;}
}
</style>

<img class=”mobileImage” src=”mobileimage.jpg>

<img class=”desktopImage src=”desktopimage.jpg>

Or, if you are using the Bootstrap framework, you can do it without extra CSS:

<img class=”d-block d-lg-none” src=”mobilresim.jpg>

<img class=”d-none d-lg-block” src=”desktopresim.jpg>

You can also use the class method to avoid using JavaScript for videos. For example:

<video class=”d-none d-lg-block” controls>
  <source src="dekstopvideo.mp4" type="video/mp4">
</video>
<video class=”d-block d-lg-none” controls>
  <source src="mobilevideo.mp4" type="video/mp4">
</video>

This way, we have hidden the relevant objects at the defined breakpoints.

4. Aspect Ratio, Proportions, Equality, and Alignment in Multiple Images

What is the Aspect Ratio?

Aspect ratio refers to the width-to-height ratio of an image and is often encountered when working with visuals.

For example, in a 16:9 aspect ratio, the width should be 16 units while the height should be nine.

A 4:4 ratio would be square because the width and height are four units.

Here’s how to use aspect ratio in CSS:

<style>

aspect-ratio:16/2;

</style>

You can directly reference the image’s resolution. For example, if an image has a resolution of 800×600 pixels, you can use “aspect-ratio:800/600;”.

Let’s use the aspect ratio as an example.

One of the challenges when defining a multi-card structure is ensuring that all elements have the same scale because the images often have different resolutions, causing elements to appear differently.

In our example below, we have images of different sizes, but we want all of them to appear in the exact dimensions. How can we solve this problem?

Fig. 1

Let’s define the aspect ratio in the class.

“Aspect-ratio: 2/2;” makes the width-to-height ratios of the img elements equal, as shown in Figure 2. However, since the images have different resolutions, their heights do not appear equal. (Due to the HTML structure, the img heights should be equal, but they don’t look like they are.)

Fig. 2

We have completed the first step. If we want it to look even more consistent, we move on to the second step.

When we apply “object-fit: cover;” to the relevant images, the result is as follows:

Regardless of the image resolution, this method ensures that the web page design is not disrupted, and users uploading images are not required to adhere to a specific resolution or proportion, which is advantageous. However, the downside of an object-fit cover is that it maintains the image’s aspect ratio while cropping it. For example, in an image with a resolution of 350×150 titled “Card Title 7,” we can’t see about 40% of the area on the left and right sides.

Fig. 3

You can also apply this technique to Slider or Carousel components, which will help solve the aspect ratio issue.

To access the code for the card example provided above, you can visit the Codepen link.

5. Low-Resolution Image Issue

Let’s consider a banner image that covers 100% of the page’s width with a resolution of 1000×500 pixels. If the monitor resolution is 2000px, the image may appear stretched or pixelated because it needs to scale up beyond its original resolution to fit the screen width.

Fig. 4

Photo: Pixabay: https://www.pexels.com/tr-tr/fotograf/mavi-dizustu-bilgisayar-265631/

In Figure 4, the keyboard image below will look pixelated and poorly quality because we set the width to 100%. The solution to this issue is to use max-width: max-content. (Figure 4 is the keyboard image above.) Since the image’s width is set to 1000px and its height to 500px, the maximum width becomes the image’s actual width.

In other words, if the image width is 1000px:

The actual rule applied by max-width: max-content is equivalent to 1000px.

This ensures that the image remains sharp and clear and does not exceed its original resolution.

Modern Methods in Responsive Front-end Development – 1