Responsive Designs


Have you ever read an article online? I’m sure you did. Was it instructed to read on mobile only? No, that’s your wish, right? You will decide, whether you want to view it or read its content on mobile, tablet or laptop. But have you ever wondered, how these websites fits everywhere?

Today, we’ll get to know, step by step, about the magic which front-end developers do to make these site ready for you at any device you want to view at and will also learn to use their stick for a while. ๐Ÿ˜€

Let’s begin!

There are 4 types of layout architectures:

  1. Fixed Layout Designs
  2. Fluid Layout Designs
  3. Adaptive Designs
  4. Responsive Designs

To understand the difference in these four, we’ll be viewing a video. The lady explained really well ๐Ÿ™‚

If you understood, what she just said, let’s just experience designs behavior with simple examples and get your hand dirty with the code a bit.

  1. Fixedย : Can you see the 3 boxes? If yes, Drag the browser screen and see their behavior, if you notice that the boxes are getting away from your sight due to smaller screen size and you have to scroll horizontally to see them, this example played its role well. Yes, this is how fixed sites work, actually doesn’t work at different device sizes. Now, change the view from top right button to Editor and see the code. In CSS, section, I have given 800px width to the container and 200px to each box. These widths remain fixed no matter what is the size of the device screen.
  2. Fluidย : Now, if you reduce the screen size, you’ll notice that boxes get shrunk to fit themselves into the screen. There is no horizontal scroll bar anymore. Now if you change the view to Editor and see the code, you’ll notice that I have given 100% width to the container and 30% to each box. Yes, this % unit for width did all the magic to make the design fluid.
  3. Adaptiveย : Again, reduce the screen size gently and you’ll notice that it’s not fluid anymore. But at certain size of screen, the layout structure changed from 3 boxes in a row to 1 box in a row. So, how did I do that. Again look at the code, where I have given the width in pixels (px) but at the bottom of CSS code, there is Media query
    @media screen and (max-width: 600px) {
    .box{
    display:block;
    width: 600px;
    }
    }

    Now what this media query did? I make the width of each box to 600px if the maximum width of screen size is 600px i.e. each box will take 100% of screen width, yes, you are right, we can also write

     width: 100%; 
  4. Responsiveย : Responsive designs are best in both worlds. It uses the % as unit to make your website layout adapt to the size of screen as well as change its structure at certain breakpoints using media queries. You will notice I have use both in the code.

So, I hope you have just cleared the confusions about these terms if you ever had ย or will have in future and if you think, I missed something, share your views in comments.

Have a good luck. See you again ๐Ÿ™‚


Introduction to SASS Coding period begins