Hi,
It would be great if the breakpoint containers had some pre-set sizes for known devices. i.e Iphone 10 [371x812] etc.
This would greatly reduce the confusion when setting up sizes for screens etc.
This is something we could potentially look into as browsers do something similar in DevTools, however, it comes with a set of drawbacks.
- We would be responsible for maintaining an ever-changing list of popular devices which includes not only mobile phones and tablets, but popular display screens in use throughout the industry.
- We would then have to provide values for those same devices and displays in landscape mode, as we expect users to design with both layouts in mind.
To be clear, I’m not declaring we will or will not do this, but there are reasons for why we’ve kept away from doing something similar already.
I’m not sure this is the right approach, because you really shouldn’t need that many different breakpoints. Usually making flexible versions of a small and a big design or small/medium/big is a better approach than making specific designs for each separate device’s exact size.
1 Like
I’m going to have to agree with Carl here. When building the ICC demo app for mobile, our breakpoints were just intended to differentiate between mobile and desktop / tablet. Beyond that, Flex containers or views were used to auto-resize for all mobile devices. I’d suggest exploring that route to see if it might work for your needs. (If you were to set up breakpoints for all device resolutions, you’d end up essentially designing a separate view for each device, which would certainly be a lot more work than configuring a single mobile flex layout properly.)
Hi,
Do you guys have any recommondations regarding breakpoint settings for browser/tables/phone?
For example: 1500px/800px ?
It depends on your devices you are going to target. My initial post was from the Beta period and was very much a naive way of designing. But as they have mentioned above the best way to handle this is to use the right make up of containers. This could be a good starting point to see the dev sizes for apple products. And in all honesty there isnt a right answer and each view might be a bit different.
Hope that helps.
Great info, and thanks for the link.
I understand how to build a mobile responsive application (i think). I try to make everything 100% responsive, but some “cards” need to have a minimum size to avoid overflowing with the optional scrollbar…
With regards to apple products, it looks like mobile responsive views should be no wider than 375 pixels.
https://developer.android.com/training/multiscreen/screensizes defines a medium typical screen as 320.
If I need a breakpoint (for designs that a Flex or another style isn’t ideal) I’ll often design things with a single breakpoint at around 425px, letting web browsers and tablets render the same way, and having a smaller view for mobile devices. Inside the smaller and larger views, I’ll normally use a Flex container to make sure the page will resize for whatever width of phone or width of web browser the user is using.
Keep in mind that on mobile devices, it’s the Viewport, not the native resolution, which determines how many “pixels” it counts the screen as.
The tables on this page have a nice run-down of popular devices and their Viewports.
1 Like
I did not know of the concept of Viewport before now. Also, that link is great, thank you!
I aswell use flex views and containers for most of my views.
Below is an example of a motor control view where I really would like the buttons to stay like that for the smallest viewport.
The top card is built like this:
, does anyone have any comments regarding the wayI have built the card?
It’s pretty hard to tell how it’s built just based on the component tree, since the properties for each component and flex container make a big difference for how it renders.
Can you either attach a copy of the view or create an animated gif (with something like ShareX) of you dragging the corners to resize it so we can see how it renders when small and when bigger? Either way should give us details to understand how it changes and how the settings are set to make it responsive.