Methods for making your website responsive?

[Magic]

So as a learning web developer I often find myself coding a website which looks nice on my screen, but as soon as I view it on a different machine it has some obvious flaws to it. Now I am stuck on how to make my website responsive for the common screen resolutions. I have found that one method is to use

@media screen and (max-width: x) {
styles here
}

for each resolution and add your adjustments to that. Is there any quicker ways of making your website responsive?

 

[Markshall]

Media queries is probably the best solution to making a website responsive. Another way is to make a subdomain or something like '

You must be registered for see links

' and on the root directory of your website (

You must be registered for see links

), have a script that will redirect mobile users to '

You must be registered for see links

' so they see a mobile only version, the only bad thing about this is, you will have to code 2 versions of your website and have to keep editing 2 different files, whereas if you use media queries you can use the exact same pages but just play around with the queries to have it display in a different manner.

If you're wondering about screen/viewport sizes for different devices, CSS-Tricks has a great reference:

You must be registered for see links

There is also another that has almost every device going and it generates the code for you:

You must be registered for see links

I keep them both bookmarked because they're both great.

 

[Sysode]

Yeah, media queries are by far the best way to go (for dev purposes and UX) so I'd go with that most of the time.

For my project I am working on, I'm using percentages as much as possible in the global styles. With the media query I have selected I have set it for max-width:900px as that virtually suits a lot of mobile screens and tablet resolutions so that way it all kicks into place when needed.

I'd give examples but I'm on phone so I've done it all via text.

Also, don't be scared to use as many media queries as you want, some times it does feel like you are basically recoding it again for a smaller screen which is essentially what you are doing - that's fine. Start with some basic templates and go from there.

 

[Magic]

Media queries is probably the best solution to making a website responsive. Another way is to make a subdomain or something like '

You must be registered for see links

' and on the root directory of your website (

You must be registered for see links

), have a script that will redirect mobile users to '

You must be registered for see links

' so they see a mobile only version, the only bad thing about this is, you will have to code 2 versions of your website and have to keep editing 2 different files, whereas if you use media queries you can use the exact same pages but just play around with the queries to have it display in a different manner.

If you're wondering about screen/viewport sizes for different devices, CSS-Tricks has a great reference:

You must be registered for see links

There is also another that has almost every device going and it generates the code for you:

You must be registered for see links

I keep them both bookmarked because they're both great.

Yeah, media queries are by far the best way to go (for dev purposes and UX) so I'd go with that most of the time.

For my project I am working on, I'm using percentages as much as possible in the global styles. With the media query I have selected I have set it for max-width:900px as that virtually suits a lot of mobile screens and tablet resolutions so that way it all kicks into place when needed.

I'd give examples but I'm on phone so I've done it all via text.

Also, don't be scared to use as many media queries as you want, some times it does feel like you are basically recoding it again for a smaller screen which is essentially what you are doing - that's fine. Start with some basic templates and go from there.

Thanks a lot guys, that explained it really well. Onto media queries than.