Responsive Design - Locking breakpoints

[PaulaAcker]

I must admit I find responsive design to be somewhat of a mystery. Captivate offers three default breakpoints in version 9. More are offered in 2017, but I always revert to breakpoint view because I haven't figured out how to work with the 2017 format. I have also not used fluid boxes.

Here is my problem. I was under the impression that a specific breakpoint would display and then if the screen size changes it jumps to the next breakpoint. But I discovered that if one plays around with the browser window it progressively resizes. I would have thought that it would jump from one breakpoint to the next but instead it shrinks until it reaches the next breakpoint and the next and so on. I've only designed for three breakpoints, so those in-between sizes (for lack of a better term) look terrible.

As a user, I've experienced elearning courses (authoring tool unknown) where a single breakpoint is displayed for each device. So, for instance, on a desktop, the course remains in the desktop breakpoint when the browser window is resized, but when the same course is viewed on a mobile device the mobile breakpoint is displayed. I don't know if the course is designed to detect the device or the OS rather than the screen size. That's how I would like my course to display.

Any ideas?

[Lilybiri]

Not so easy to answer by phone, it needs lot of explanation. First of all:

you are not limited to 3 breakpoints, you can have up to 5. Each breakpoint

can have each own layout, you can replace large images for primary view by

small icons or text for smaller screens (just an example). The layout of a

particular.breakpoint wiill appear until the screen width reaches the value

of a lower breakpoint, Objects will rescale proportionally if you set them

up correctly in the Position properties. Only exception is font size, has

to be set up in the Object style of the text container, remains fixed

between breakpoints.

Breakpoints are possible in 2017, but Fluid Boxes are the default. To

switch to breakpoints go to Project menu.

There are no more devices in 2017; fluid boxes work torally different.

Layout will change based on the setup for the boxes, but you don't have the

same control as with breakpoint views and there are some limitations. I

will publish a blog post next week, explaining my exploration about the

differences between both workflows.

[PaulaAcker]

"The layout of a particular.breakpoint wiill appear until the screen width reaches the value

of a lower breakpoint, Objects will rescale proportionally if you set them

up correctly in the Position properties."

This hasn't been my experience.

[Lilybiri]

That is the way it is designed to work, and does for me. Can you share some

screenshots of the setup, position properties?

[arashmaz]

I've been working in Captivate 9 as I don't have CP2017 yet.

My understanding is if you know what device or devices you're designing for go with break points.

If you need to hit a wide range of devices and aren't specifically designing for a smaller number go with fluid boxes?

I've not been able to set up breakpoints that work for both landscape and portrait on a range of devices.

[Lilybiri]

Recently I wrote this article comparing the Fluid Boxes and Breakpoint Views workflows:

Fluid Boxes Or Breakpoint Views? - Captivate blog

I don't agree with what you wrote. Even with Breakpoint views in between the specific resolutions of the breakpoints the screen will adapt based on the settings in the Position Properties panel.  You have even more control over what happens than is the case for Fluid Boxes, where the application will decide when to change the layout based on the settings for the Fluid Boxes. You have more control over layout when using Breakpoint Views, it is simply more work.

[arashmaz]

I came here after reading your blog post.

But if that's the case I've yet to find a good example of how break points actually work and render the module.

So for example, I can't set one portrait breakpoint for mobile that fits the viewport for an iPhone 7 plus down to an iPhone SE, without the user having vertically scroll. And that's without even considering popular Android devices.

[Lilybiri]

It is a lot of trial and error, I agree. Although I try to avoid scrolling for courses on a desktop, I don't think it is so bad to have to scroll on certain small phones. It is really an illusion to have one course that will be viewed in an ideal way on all screen resolutions. Playing with % and relative % for Breakpoint views, and simplifying the layout for phone resolutions is the way to go. With Fluid boxes simplifying is not as easy, you only have the optional setting, not a way to replace objects for small screens. I am not even talking about the pedagogical viewpoint, as a former professor I don't believe that the same eLearning content can be offered on all screens the same way.

DId you already see many responsive websites that ton' need vertical scrolling? Is it realistic to require if for an eLearning course on all screens? Website development software has been around much longer for responsive projects than eLearning software (which is more complicated I believe).

[arashmaz]

I agree, scroll in portrait mode on a mobile isn't too bad. I think it's more of an issue if you have to scroll in landscape mode. But thanks for your honesty around it being a lot of trail and error I guess you just have to keep tweaking and testing.

But I guess with break points you could technically do some cool designs so in portrait mode on a mobile it acts more like a scrolling website. I think from how you've explained it I'm starting to understand the benefits more of breakpoints.

[Lilybiri]

That was the goal of that blog post. I was a bit frustrated (happens often) because at this moment you only see tutorials and articles about that cool 'Fluid Boxes' development, as if it is a  better cool alternative for Breakpoint Views development. That is not the case at all. Fluid boxes have a lot of limitations which may or may not disappear in future releases, but you have to accept that you'll lose control over the layout in a way. It saves a lot of time, compared to Breakpoint Views development, and I recommend it for projects that are suited for it, but not for all projects.