5

Do we have standard sizes for responsive design. Generally I thought it would be a size for mobile, tablet, iPad, laptop, desktop. But now I'm getting into so many problems with my clients they are complaining that the design is not good in 4.5" screen and design is not good in Samsung note mobile etc., Is this my mistake? Do we have standard sizes for responsive design.So that I can explain that to my clients. Please suggest.

Toni Toni Chopper
  • 1,833
  • 2
  • 20
  • 29
Amirtharaj
  • 77
  • 3
  • 4
    It's difficult. There aren't really any standard sizes, as there are too many devices. – Rich Bradshaw Dec 11 '13 at 09:56
  • you could have a look here to get an idea of "sizes to design for" : http://www.zingdesign.com/responsive-website-design-cheatsheet1/ – web-tiki Dec 11 '13 at 09:58

4 Answers4

8

I'm always starting with this mediaquery template:

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Frank Hofmann
  • 241
  • 1
  • 11
0

Perhaps you could consider using Restive Plugin. It's built to solve your kind of challenge with building Web sites for multiple devices.

You could also check out the Getting Started with Restive Plugin blog post which provides an intro into how to use it in a real-life Web design scenario.

Full disclosure: I developed the Plugin.

ObiHill
  • 11,448
  • 20
  • 86
  • 135
0

There's no real standard sizes for responsive design. The best method is to design for your content, not for devices. And design mobile-first.

By mobile-first, the default CSS will automatically target smaller screens, and from there build up what you need for progressively larger screens.

And development wise, use @min-width(insert px) to build your stylesheet up in a mobile-first way.

jpostdesign
  • 2,548
  • 2
  • 15
  • 15
-1

If you use Bootstrap then will get a problem it will be automatic adjust in all mobile devices and resolution.

Go to this link and download bootstrap you will get bootstrap css and js file it will work in your app or web.

http://getbootstrap.com/getting-started/#download

Use it it will work properly if you need any help then ask to me

Thanks

Kamran
  • 111
  • 1