DEV Community

Cover image for Web-Responsive-Design
haneulab
haneulab

Posted on

Web-Responsive-Design

Responsive Design Paradigm

Modern websites are designed to be responsive. What does responsive mean though?

A website being responsive can largely have two traits

  • flexibility to stretch and shrink in size when screen sizes change.
  • ability for elements to change its position and structures when screened in different devices.

Flexibility to stretch and shrink

Browse on internet my personal site haneulab both in your desktop (or laptop) and your mobile device.

The landing page should look a bit different in its width size and the gap size it has from the main content to the ends of the screen. This is because I used @media screen and (min-width 768px) {} when designing the site in the stylesheet (CSS).

Here, I performed the flexibility of my site to stretch and shrink depending on viewer's device sizes, more specifically called, the size of viewport width.

Ability of an element to change its position

Taking flexibility in mind, each element in the site has ability to change its position or local positions (cannot control the parent element but can control its children elements). The example is below.

Browser a coffee shop site Almond Haus which I built for my friend. Go to the gallery section. Here, try to shrink the width of the browser, you will see that each of the pictures will structure self in columns rather than shrinking the ratio of each pictures size. This, too, can be done using media query mentioned above.

conclusion

In web design & development, media query is fundamental technology we can use to make the site more dynamic and engaging for the users. Not only that, it has a huge impact on users behavior. If your website is not responsive, users might not want to stay there long enough to learn about your product or you because it is hard to look at and clear enough to figure out the contents.

Written by HaenuLab on Aug 20, 2021
visit my social github, linkedin

Discussion (0)