Creating Responsive Website Design.

#react #webdev #codenewbie #prudyopensourceseries

Making a Responsive webpage can sometime go...

The goal of a Responsive web design is about making web pages look good on all devices.

A responsive web design will automatically adjust or adapt to different screen sizes and viewports.

In my little research to creating a responsive webpage,
I found some gems to help us create responsive designs😂😐

Responsive Website Design method using HTML

↓↓
1. Using the <meta> tag
You can achieve responsiveness by adding <meta>tag to all your html web pages.

The <meta>tag forces the web page to follow the screen-width of the device.

This will set the viewport of your page. In order words, it'll give the browser instructions on how to control the page's dimensions and scaling.

↓↓
2. Using the <picture> tag

If the CSS width property is set to 100%, the image will be responsive and scale up and down.
That is, If the image max-width is at 100%, the image will scale down if it has to, but never scale up to be larger than the original size.

The HTML element allows you to define different images for different browser window sizes.

↓↓
3: Responsive Text Size
The text size can be set with a "viewport width" or"vw" unit.

In that way, the text size would follow the size of the browser window.

Responsive Website Design method using CSS

↓↓
1: Flex Layout
Establishing a simple <display:flex;> layout in our main container and further styling with media query for mobile and desktop can easily create a responsive webpage.

Top comments (23)

Gaurav Saini • May 22 '22

Nice article! 👍

Few things that I’d like to mention

The responsive text size point seems a bit odd. I don’t think it would be ideal for mobile and large desktop screens, but maybe that’s just me and my past experiences. I prefer the clamp() approach
The second item is more of a philosophical thing - following the mobile first process when building web pages. Ever since I started using it in my designs, life has been a breeze.
Lastly(I think this is going to be a bit longer), gone are the days when being responsive meant only adjusting the layout of the page elements based on screen sizes(at least for me 🥲). I would define modern responsiveness as the ability to adapt to user preferences and choices in addition to the screen size, and with the introduction of new for factors for mobiles like folding phones, it’s another layer of complexity. Stuff like dark mode preference, reduced motion, device orientation, touch input handling, also kind of fall under the category of responsive design features. Now, you could say that it’s related to accessibility and you’d be right, I guess there’s no correct answer. I just call them responsive because you can do it using media queries.