Skip to main content
P
PaulaAcker
Known Participant
October 25, 2017
Question

Responsive Design - Locking breakpoints

  • October 25, 2017
  • 2 replies
  • 1225 views

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?

    This topic has been closed for replies.

    2 replies

    A
    arashmaz
    Known Participant
    November 23, 2017

    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
    Lilybiri
    Legend
    November 23, 2017

    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.

    Lilybiri
    Lilybiri
    Legend
    October 25, 2017

    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.

    P
    PaulaAckerAuthor
    Known Participant
    October 25, 2017

    "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
    Lilybiri
    Legend
    October 25, 2017

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

    screenshots of the setup, position properties?

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices