Grow your CSS skills. Land your dream job.

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

  • # January 1, 2013 at 6:39 pm

    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!

    # January 1, 2013 at 7:01 pm

    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.

    # January 1, 2013 at 7:46 pm

    Yeah, @andy_unleash touched on what you have to keep in mind: design for the content, not for devices.

    # January 1, 2013 at 9:05 pm

    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?

    # January 1, 2013 at 9:09 pm

    @landysaccount Let the content dictate the breakpoints, rather than the devices.

    # January 1, 2013 at 9:28 pm

    @joshuanhibbert got it!

    # January 2, 2013 at 10:24 am

    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’);

    }

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".