Site with 8 breakpoints iphone/ipads/computers, Is that correct?

[jorgeinnami]

Hi there,

I´ve just finished creating a small web site which I am trying to "please" iphone/ipad users and some samsung users as well, not to meation computers, in general I mean. However I created these breakpoints: 320, 360, 414, 667, 736, 768, 1024 and 1200.  Fortunately it was only 4 pages, but multiplied by 8 (BPs) I have basically 32 "different" configurations.

Am I nuts doing this?

Thank You.

Jorge.

[Dandalo]

Jorge,

I don't know if there is a right answer.

It depends on a lot of the content of the site, and maybe one page of the site needs more breakpoint them other pages.

In one of my project, some pages have 7 breakpoints, others just 2.

I just think you have too much breakpoint in lower resolutions. 320 it's the standard at lowest number.  But 414 and 667.., ?

But you should always follow this rule fewer breakpoint is always better, to correct problems in the future.

[jorgeinnami]

Hi Dandalo,

Thank You for your reply. I created 414 and 667 breakpoints for iphone 6/7 and iPad respectively. It seems I have misunderstood the concept and use of breakpoints and responsive sites.

Anyway, thank you. Have a nice day.

Jorge.

[Mylenium]

Am I nuts doing this?

Yes, in a way. It's probably safe to say that any page that uses more than three breakpoints is unnecessary and perhaps might even be called bad design (no offense). If you design your page around the 360 mark, it would scale reasonably enough even up to the 540 px mark and the difference to the small 320 px screens is negligable, considering that wherever you live and the audience you are targeting there may not even be any of those old devices in circulation anymore. Similar things could be said for going bigger. A sensibly designed page should scale well enough and anythings that might get in the way like large, fixed-size widgets should be left out to begin with. Excessive use of breakpoints is also bad for SEO and cuases all sorts of mayhem for devices with odd resolutions because they can't make up their mind which layouts they use. Less is better. It's really about thinking what options you need and trying to come up with a reasonably semi-fluid design that's adaptible, at least in the mobile world.

Mylenium

[fotoroeder]

I want to add the following to Mylenium​

I highly recommend this thread:

Muse not redirecting to tablet version​

This may help a lot. The most issues come from using too many and kind of wrong breakpoints. We all want fluid width breakpoints, but the best way is it to

1)start with 1200 ( or larger, if you really think you need it, in your case you are much more into smaller, right?),

2) set your breakpoints for 960 fixed width/768 fixed width and fluid width minimum size set to 320 and go for it.

3) finish your design (all said by Pavel in the above mentioned thread) at the 1200 and then add successively breakpoint by breakpoint

    your design for the smaller breakpoints.

In rare cases you need one more breakpoint between 768 and 320 in your fluid width design. Mostly because of some logo-menu stuff.

Hope this helps additionally

Uwe

[jorgeinnami]

Hi Fotoroeder,

Thank You for your reply. Definetely I will read that thread and also I will try your suggestions. Hopefully my next website will follow a better and smarter design.

Thank You. Have a nice day.

Jorge.

[fotoroeder]

You`re welcome. One reply for each of us, wow! Have a nice weekend though.

[jorgeinnami]

Hi Milenium,

Thank You for your reply. No offense taken about bad design .. I really need to learn such things better and search about semi-fluid design.

Thank You. Have a nice day.

Jorge.