Is there a screen resolution that would look good on all mobile devices?

[landysaccount]

Hello.

I’m looking to add “responsiveness” to our site which is 1024px width. I would like to know to how many screen resolutions should we re-create in order to become responsive.

I think this would be a great opportunity for me to learn responsive webdesign.

Looking at our google analytics we have 18% visits from mobile devices with the following width resolutions:
320, 480, 640, 768 (maybe this one is a small monitor).

Should I design for all these resolutions or is there a default width that would look good on most devices?

Thanks in advanced for your input and happy new year!

[Andy Howells]

Responsive web design isn’t about individual screen sizes, it’s about your website fitting all possible devices.

You use “break points” in the code that help reorder elements or resize them based on the screen size, usually I do these when things start to look dodgy, I.E – two columns get super close or something.

My advice would be to design using percentage based widths so that it downsizes and upsizes cleanly and efficiently.

[landysaccount]

Ok. Thanks a lot… Basically just make the content look good on different screen sizes.

How you guys approach it and how you decide on what widths to use or like mentioned: just make it look good?

[landysaccount]

@joshuanhibbert got it!

[landysaccount]

Since I have a long css file I would like to include other css files for special cases.

Is it safe to use @import in css like this:

@media only screen and (max-width: 480px) {

@import url(‘/css/styles-480.css’);

}

[Author]

Posts