I realized that we have just 4 Breakpoints to make it responsive design, can I create more or customized the current ones? how do I do that? especially ones for Android devices that have other sizes ?
Yes you can, but it’s not simple. Blocs uses the Bootstrap 4 framework. There are a bunch of examples on how to add breakpoints or adjust the existing ones online. If you were doing that, you probably would not be using Blocs. Blocs is made for the default Bootstrap breakpoints.
This isn’t a full technical explanation, but more of a simplified description of why it’s not really too important to have more than the 4 basic breakpoints when designing for the Web. This is because Android (which currently operates on 18,000 distinct devices) has its own way of dealing with the variety of screen sizes out there through the use of density buckets. Essentially, a base density bucket of 320 x 480 px is used. From there on, Android treats each device as its DIP (density independent pixel) size and adjusts the display accordingly. There are currently six density buckets, ranging from 0.75x to 4x. However, this doesn’t mean you have to design for 6 distinct breakpoints. A browser will select the most appropriate layout based on the device DIP and then enlarge or reduce the display size accordingly.
Where greater consideration has to be given is when designing apps which may rely on single screen elements and precise placement of elements within those single screens. Websites, however, are scrollable so any slight variations in aspect ratio are dealt with by ensuring the width displays ok in the device screen and leaving the length to adapt proportionately. To see more of the screen, simply scroll down.
Designing websites for more breakpoints simply overcomplicates what is essentially a non-issue. Of course, this may change in the future as technology progresses. Once that happens, I’m sure frameworks such as bootstrap will change along with the technology.
5 Likes