Updating my website I noticed usually all goes well until I get to the XS break point in Blocs. Not only is it often hardest to design for this break point, but I’m not even sure anymore what Blocs XS represents in the real world. Using Solis and Firefox’s Responsive Designer Mode, XS doesn’t really match up well with any conventional smart phone I’m trying to design for. For example: Apple’s iPhone X, XR, XS, 8 or even 5/6 footprints don’t match up with the Blocs XS break point.
For now I tend to do a work around where I use XS as a basic template, but then error correct all designs to make sure they at least fit well into an Apple iPhone X, even while Firefox and Solis don’t exactly replicate that well enough to avoid testing in a dev environment to my actual iPhone X. Ironically none of the other break points in Blocs has thus much margin for error as XS.
If I’m going about this incorrectly, feel free to put me back on the right track. If you know of other tools, apps, techniques etc. that make this more of a science and less of pin the tail on the smart phone, love to hear about those too.
Since Blocs uses the Bootstrap framework, the breakpoints are just the Bootstrap standards. The smaller breakpoints are still valid for phones. Don’t get lost in the pixels, because take for example the iPhone 6, which has a 1334-by-750-pixel resolution, but it is equivalent to 375px device-width size.
iPhone x has a resolution of 1125 x 2436 pixels, but the device width is 375px.
Using Solis and Firefox’s Responsive Designer Mode, XS doesn’t really match up well with any conventional smart phone I’m trying to design for. For example: Apple’s iPhone X, XR, XS, 8 or even 5/6 footprints don’t match up with the Blocs XS break point.
Probably the only real way to help is to look at designs and talk about what’s actually possible.
…
Some thoughts…
A responsive framework simply fits the number of columns that you specify based on the browser width. These columns are fluid, they adjust to fit in that breakpoint. Even if it’s something unusable like 12 columns across a small screen. Blocs/Bootstrap can do this.
But, with very complex designs you might adjust the column layouts or number of columns at each breakpoint. By doing this you can achieve exactly what you want.
About XS breakpoints
The XS break points for most designs are columns set to 100% width, stacked vertically. You don’t see a lot of multi-column content at that width. Just stacking columns might sound boring (and it can be) but it’s usable and that’s important.
You do have the control, but the content has to be considered. Essentially we accept the idea that things will stack and scroll at the XS size because that’s what phones are optimized for. Finding cooler ways to do that is mostly in the details of your design. If you haven’t tried this, consider hiding a bloc for specific breakpoint and showing others. where the layout and content are ideal for the screen size.
Some people don’t fuzz much and just let things stack. Others want different backgrounds and may adjust font sizes on mobile and the spacing between items vertically.
Check this site and type of subtle things people do to get nice mobile, but they are mostly just stacks as I mentioned earlier. It’s the little details!
Thanks, @Whittfield what a great response to what can be very complicated. If you want your site to look the best as it can on each breakpoint it just takes some thought. Somethings look like a killer design on a desktop just don’t get it at smaller breakpoints. Nice job.
Thanks! Really appreciate the feedback. And agreed, mobile specific designs make the most sense. I just get stuck in a “print” way of thinking sometimes when I want the visuals to be seamless when functionally, it just doesn’t really work that way.
Ironically without really knowing what I was doing, I ended up using stacked columns and mobile specific blocs (hiding) since I couldn’t see any other alternatives.