Breakpoint protocol for various devices

[jarvis393]

I am building a website for my cabinetshop.

To simplify processes all of my photography is saved in photoshop for web-legacy at  2000 pixel wide images.

They seem to load very fast and are very high fidelity.

Rather than optimize each breakpoint according to content I have chosen to organize content according to breakpoint.

I am basically dumber than a sack of hammers when it comes to website management so recognize this might not be the best path.

I did, however, have to start somewhere.

My thumbnail gallery for kitchens will consist of an image grouped with a kitchen number.

Each image on a particular kitchen page will also be grouped with an image number.

This creates a sort of Dewey Decimal system for navigatin whereby customers and I can talk about Kitchen Number 3 - Image Number 5. etc.

In order to add kitchens to the gallery I plan to create a template then duplicate a kitchen page and replace images.

This way the formatting will stay essentially the same and I won't to go through all the acrobatics of massaging the text fields on the various breakpoints

I want to have the minimum number of breakpoints but want to cover iPhones & iPads in portrait and landscape mode as well as typical desktop monitors up to 27 inch wide iMacs.

I have two basic questions:

1) What would be good breakpoints for iPhone & iPad in both horizontal & vertical mode and what would be logical desktop device breakpoints.

2)  Are there any apps or browsers that would display how many pixels wide a given device is displaying.

My third question is:  Where does my logic breakdown?  What should I be doing differently.

[Günter Heißenbüttel · Accepted solution]

I wouldn’t primarily bother about screen/device sizes. How many real devices do you intend to take into account? 10? 100? 1000? 10000? You see: No chance!

Layout your page at the widest breakpoint, let’s say 1400 px.

Use the scrubber (this small vertical handle top right to the breakpoint bar) and look, where your layout runs out of the place (images too small, elements overlapping, …). At this point create a new breakpoint.

Rethink your layout, if you need more than 4 breakpoints. A good choice would be something about 1400, 1200, 960, 768. But – as I said – not the expected devices, but you layout determine the amount and position of breakpoints.

Have a look at this short video:

One most important hint at the end:

When layouting a page, be absolutely sure, that in no situation no element on master or layout page is placed outside, overlaps or „bleeds“ outside your respective breakpoint width. This is very important, because mobile browsers respect every element on your page (even invisible ones). This causes either a zoomed-out presentation of your page or causes horizontal shifting.

[jarvis393]

Thanks  Günter.

That was a real useful video. 

I have seen that one before but the dixie cup in my brain was not big enough yet to hold all the information.

Also thanks for the tip about paying attention to where (invisible) elements lie within breakpoints.

That would have taken me some time to stumble onto.

[Günter Heißenbüttel]

You are welcome! If you run into issues — you know, where to ask!