DEV Community

Prudence97
Prudence97

Posted on • Updated on

Creating Responsive Website Design.

Making a Responsive webpage can sometime go...

went


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.

resize


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.

meta

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

image fit

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.

Img

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

picture

↓↓
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.

text


Responsive Website Design method using CSS

responsive

↓↓
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.

Image

Read more on Flex Layout

↓↓
2: Media query

With media queries you can define completely different styles for different browser sizes.

Image

Find more on media query


I know🥲

Image
See you later.

Discussion (23)

Collapse
sainig profile image
Gaurav Saini

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.
Collapse
prudence97 profile image
Prudence97 Author

I think you can also call it responsive too😂😂

Also what you said about building with the mobile first in mind is something I've also adopted.

Thank you for contributing, I'll read more on your contribution and hopefully update my post
😊 Thank you

Collapse
tzwel profile image
tzwel

why the images of code? it makes it impossible to just copy the code we are interested in

Collapse
dotnethabib profile image
dotnethabib

use blackbox chrome extension to copy code from Image, and thank me later

Collapse
prudence97 profile image
Prudence97 Author

youtu.be/ivJMSXzCvM4
This is a gem😁😁Thank you.

Collapse
prudence97 profile image
Prudence97 Author

Thank you

Collapse
prudence97 profile image
Prudence97 Author

Solid point.

Maybe, next time and if it calls for it, I'll attach written codes for those who'll love to make copies.

Collapse
yongchanghe profile image
Yongchang He

Lovely article with colorful content.Thank you for sharing!

Collapse
prudence97 profile image
Prudence97 Author

Thank youuu🫂🫂

Collapse
vulcanwm profile image
Medea

This is really helpful!

Collapse
prudence97 profile image
Prudence97 Author

I'm glad you found it helpful. Thank you for reading 😊

Collapse
andrewbaisden profile image
Andrew Baisden

Fun article.

Collapse
prudence97 profile image
Prudence97 Author

Thank you!

Collapse
rafaeldoctom profile image
Rafael Pinto da Silva

Nice article! 👍

Collapse
prudence97 profile image
Prudence97 Author

Thank you for reading

Collapse
codeystein profile image
codeyStein

Thank you, I found this very useful since I just found out I was doing responsive text wrong, again thanks!

Collapse
prudence97 profile image
Prudence97 Author

I'm really glad you found it useful ☺️☺️
Thank you.

Collapse
dovey21 profile image
Somtochukwu Nnaji

The article was really nice and also fun to read.

Collapse
prudence97 profile image
Prudence97 Author

Thank you Somtochukwu☺️☺️

Collapse
sardor_ulmasov_79e00b4adf profile image
Sardor Ulmasov

Brother, you made good publish. Thnx man!

Collapse
prudence97 profile image
Prudence97 Author

Thank you!!!

Collapse
kachiic profile image
Kachi Cheong

NICE

Collapse
prudence97 profile image
Prudence97 Author

Thank you Kachi!