I find Blocs very friendly, quick—and perhaps most importantly—very robust when developing.
Especially once you get a grip on how classes cascade ‘down’ to smaller breakpoints and direct changes to the right-hand settings panel cascade ‘up’ you can become pretty quick using cmd+1 through 4.
One annoyance I have is that Blocs shows the breakpoints in 1:1 pixels. I would assume that VERY, VERY few viewports show 1:1 pixels at smaller sizes with almost everything being some flavor of “retina”.
As it is now, I’m making decision only to see them not reflected on devices that correspond to “smaller sizes”. I would like to have an option in Blocs to show ‘retina equivalent’ viewports.
Is this the problem that Solis solves? Is Solis still a thing?
How do you guys solve this? Is there a free reliable alternative? Ideally, I want the solution to be there while developing and I would prefer to not have to keep opening a browser and resizing and whatnot.
The breakpoints are determined by the Bootstrap framework.
Solis I think is dead in the water. And I did buy it but it was never updated reliably or worked properly IME.
I will use real devices for testing. Local network preview which has been in Blocs for a while now and is fantastic and it got some extra love this year. I test on iPad and iPhone etc directly. Simulators only go so far. Eg the dynamic viewport size on iPhone with the UI causes issues with using VH units. You won’t know that until you test on an iPhone though.
You can of course use responsive mode in browsers to test screen sizes. It’s better than resizing a browser. And browsers usually won’t got narrow enough for XS.
It worked really well before the airdrop thing. A few bumps on the way with that transition. But it’s still good IME.
Local Network Preview was one of the best features people didn’t talk about. . We just need live browser updates to be a thing now like BSS and PG are capable of.
I simply build in Blocs, use the view points for building and test across browsers - but the real test is 100% check on devices, Mac, iPad and phone.
@Pixla I take it by retina you mean higher resolution displays? - I simple just change my resolution on my Mac and test that way! but mainly if I have a website where I have blocs set to max width I do tend to make sure my images are bigger in size but optimised for the web.
I’m using the following quote to summarize what’s been mentioned a few times above.
This is how I work now, but I don’t feel that that is a great workflow. I want to have a reasonable ‘actual’ preview of what my design will look like on a smaller device that falls under a certain breakpoint. The “bigger” things work of course, like column flow and breaks. But I feel that modern screens allow for more content (text rendering) than Blocs suggests.
The Xcode solution seems interesting. I’ll look at that. Thanks.
Breakpoint testing can go a long way for general responsive debugging with the likes of [ Responsively App, Polypane app, Sizzy App, etc, ]. Though not all the way concerning the actual browser and device nuances and idiosyncrasies of each.
Fortunately Blocs is a Mac app so given that Safari became the new IE in terms of issues, people can at least maybe discover those since they are on a Mac. Though it still however intrigues me when people talk as if Apple / macOS / iOS have the dominant marketshare regarding web connected devices.
A small update: since I’m very “in again, out again” of developing for the web I tend to have to relearn or remind myself of what I already should know every time I start over. It’s also why I like Blocs: I trust it to handle most quirks of today’s ever-changing standards without me having to dig too deep.
Anyway, I used to use Safari’s built-in Responsive Design mode back when it had device presets as small icons to quickly check for a typical device size. I don’t know why I stopped actively using it.
The device presets have been removed (many have asked ‘why?’), in a deliberate effort to “free everybody’s mind” from thinking about certain devices. After being reminded above and committing to remembering ‘ctrl+cmd+r’ it’s very smooth to just check the design in this mode. The normal developer tools are available too, as well as the open in simulator as suggested above.
. We just need live browser updates to be a thing now like BSS and PG are capable of.
