Post
Ask Question

Elements Of Responsive Web Design

Introduction

Responsive web design is de-facto a standard of developing web pages and nowadays is one of the minimal requirements of web applications. The idea behind it was popularized approximately a decade ago by Ethan Marcotte.

As a full-stack or front-end developer, you must understand the idea and principles of responsive web design to design better applications.

The purpose of the current article is to explain what is responsive design, how you can achieve it, and provide examples of its elements.

The idea behind the responsive design was to support different devices with different viewports as much as possible. After mobile devices started to enter our lives, the whole idea of web page design also changed on behalf of supporting these devices and making web pages render on them with a better view.

And today, users (auditory) from mobile are more than from desktop applications.

desktop applications.

To make a web page responsive, you need the following “ingredients.”

  1. fluid images
  2. media queries
  3. flexible layout

But before that, we need to understand the basic idea of viewport in web pages.

To explain things in practice, let's create a simple html file with the following content.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Investigating responsiveness</title>
        <meta name="description" content="KAFKA topic replication factor" />
    </head>
    <body>
      <h1>KAFKA Topic replication factor.</h1>
      <article>
        <header>After learning about topics and partitions in theory and practice, I believe the final piece of the puzzle should be the "Topic Replication Factor"</header>
        <p>When one broker goes down, KAFKA should continue processing. Because it has in high-level concept called "cluster"
             and the broker is only the part of cluster. Losing a broker doesn't mean that we completely lost our cluster. So clusters somehow should continue
             living and be consistent without data loss. Replicas are reserved copies and help us not to lose information.</p>
            <figure class="replication-factor">
           <img class="repfactorimg" src="./KAFKA.gif" alt="kafka replication factor image" />
           <figcaption class="repfactorcaption">
              Here is how replication factor looks like in visual exmaple
             </figcaption>
            </figure>
      </article>
    </body>
</html>

Note. The purpose is not to use better HTML markup but to show how responsiveness can be archived using HTML and CSS. In our next article, we will dive into the details of better HTML markup.

Almost all popular browsers support device-oriented view(device emulation), and from the drop-down menu, you can select “responsive view” and check what the web page looks like in the responsive mode.

To explain the ideas, I’ll use Microsoft Edge. Follow the below steps to open responsive mode.

  1. Right-click in and place of the browser window and select Inspect ( or just click F12).
  2. Press “Ctrl+Shift+M” or the mobile-table combined icon.
  3. From the top of the page, select “responsive” for the dimensions.

Now let and single line of HTML code support the viewport.

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

As you can see, only one single line of code changes the whole view of the web page.

What exactly does viewport mean in Web pages?

The viewport is the visible area of a web page in a browser window. It does not include the browser's UI elements, such as the toolbars and URL bar.

The idea of a viewport meta tag was introduced by Apple, and it is not a standard but stays as a de-facto rule for “highlighting” the visible area of a page.

All web pages, as a default meta tag, contain a viewport. It is a classic way of starting to develop a responsive view.

By using the viewport meta tag, we made a big step forward in responsive, but from the page, it doesn't even look responsive because of the image we have. So, how to deal with that?

Of course, using a fluid image technique to adapt the image to the view.

First, let's check the image’s properties to understand why we have such an anomaly when rendering it.

properties

The image is “not configured” for our content, and that is the reason why we have a scroller on our page.

scroll page

To “adapt”/”configure” the image, we’ll use CSS style for it.

In our CSS folder, we have a responsive.css file, and using the link tag, we added “the reference” to that CSS file to be used on our page. The only thing we have here is max-width:100% to fluid the image.

img {
    max-width: 100%;
}

Here is the result after adding the above lines to the CSS file.

CSS file.

It is better to understand the difference between setting “width:100%” and “max-width:100%” before moving forward.

  1. First and foremost, 'width' is used to define the specific width of an element, whereas 'max-width' serves to restrict the maximum size an element can attain.
  2. In the case of 'width: 100%', it relies on the parent's width to compute the current width, potentially making the element larger than its original dimensions by scaling it relative to the parent's width. On the other hand, with 'max-width: 100%', the element is constrained from surpassing its original size, never scaling beyond its maximum valid width. This distinction is what gives rise to the term 'fluid image.’

What are Media queries and flexible layouts in CSS?

Media queries and flexible layouts in CSS are used to apply different styles or rules to elements based on the characteristics of the viewing device, such as screen size, orientation, resolution, and so on. They don't directly "manipulate" elements, but rather they allow you to define different styles or layout rules that are applied when specific conditions are met.

Media queries are commonly used to make web pages responsive, meaning they adapt to different screen sizes and devices. For example, you can use media queries to change the font size, layout, or the visibility of certain elements based on the screen size. This helps in creating a better user experience on various devices, such as desktop computers, tablets, and smartphones.

@media screen and (min-width:900px) {
    article {
        display: flex;
        flex-direction: row; /* Horizontal alignment */
        align-items: center; /* Center vertically */
    }
    
    header {
        flex: 1; /* The header takes 100% of the available width */
    }
    
    p {
        flex: 1; /* The p tag takes 30% of the available width */
        padding: 20px; /* Optional padding for the p tag */
    }
    
    .replication-factor {
        flex: 1; /* The image takes the remaining available width */
    }
    
    .repfactorimg {
        max-width: 100%; /* Ensure the image doesn't overflow the article */
    }
}

Writing media queries typically begins with the '@media' keyword. The following word, 'screen,' indicates that we are targeting all types of screens, and by using 'min-width' and 'max-width,' we define specific breakpoint sizes. These breakpoints represent the screen sizes at which our design starts to adapt to different layouts or styles.

layouts or styles.

What is Flexible layout?

Creating flexible layouts in CSS can be achieved through various techniques and properties. Here are some common ways to create flexible layouts.

  1. Fluid Widths (Percentages): Use percentage-based widths for elements to make them fluid and responsive.
    Example 
    .container {
  width: 100%;
}
.column {
  width: 33.33%;
  float: left;
}
  2. CSS Flexbox: Flexbox is a powerful layout model for creating flexible and responsive designs. You can use the display: flex; property on a container to control the alignment and distribution of items within it.
    Example 
    .container {
  display: flex;
  justify-content: space-between;
}
  3. CSS Grid: CSS Grid is another layout system that allows you to create flexible grids. It's well-suited for complex layouts.
    Example 
    .container { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

Conclusion

Responsive web design is a must-have for any website. By using fluid images, media queries, and flexible layouts, you can create a website that looks great and works well on all devices, from desktop computers to smartphones.

Here are some tips for creating responsive web designs.

  1. Start with a fluid grid layout. This will allow your website to adapt to different screen sizes without breaking.
  2. Use media queries to apply different styles to your website based on the screen size. For example, you could use media queries to make the font size larger on smaller screens or to hide certain elements on smartphones.
  3. Use fluid images. Fluid images will scale to fit the container they're in, so they'll always look good on all devices.
  4. Test your website on different devices and screen sizes to make sure it looks good and works well on all of them.
  5. Responsive web design is a powerful tool that can help you create a website that is accessible to everyone.


Similar Articles