@xphstos
Posted
Hey there! First of all, great work on your solution!
My approach on using the "correct" unit is based on accessibility. That's why I usually go for rem / em. I never mess with the default rem to pixel value and that leaves me with 16px to be equal with 1rem. That also helps me because in all of my design I use the 8point grid system. You can read more on that here. Not only I have a better/easier way to calculate all my margins/paddings but it's also pretty much accessible. As I mentioned in most browsers the default value of 1rem is 16px. A visually impared user it's pretty much likely to change that value to a bigger one, like 18 or 20. That change immediatelly reflects in all aspects of my design not only in fonts. Every padding and margin will scale up and I get to keep my design's cohesion.
Percentages are useful in many cases, in this example a case for percentages would be the graph bars. You set the chart's height to a fixed value like 12.5rem or 200px and then use percentages in bar's height. Based on max value in dataset being the 100% height and the rest are calculated accordingly...
As for what's the lowest screen resolution you need to test your design, a safe option is to go as low as 320px. The old iPhone SE uses this resolution. Android phones using this resolution are way way too old to be "alive" and working but I've seen many people using that iPhone model. A "modern" resolution is 375px and the greatest and latest models from Samsung / iPhone / Huawei etc. are using 425px or close to that.
It's not like we're supporting browsers like IE but damn we could go as low as 320px 😛 So 320px is a bit low but pretty inclusive I should say.
Marked as helpful
@brainwins
Posted
@xphstos Thank you, this was super helpful!!
You set the chart's height to a fixed value like 12.5rem or 200px and then use percentages in bar's height. Based on max value in dataset being the 100% height and the rest are calculated accordingly...
That's a great approach! Simple and flexible.
I'm definitely going to be reading about the 8-point grid. From skimming it, it seems like a great solid base to start building.
As for what's the lowest screen resolution you need to test your design, a safe option is to go as low as 320px. The old iPhone SE uses this resolution. Android phones using this resolution are way way too old to be "alive" and working but I've seen many people using that iPhone model. A "modern" resolution is 375px and the greatest and latest models from Samsung / iPhone / Huawei etc. are using 425px or close to that.
Super helpful. I imagine it changes every year. But this is a pretty helpful starting point.
Thanks again for the comprehensive and helpful feedback!!
Cheers.
