by Lori Smith, Captivate Developer, COTP
Have you ever been frustrated when your beautifully designed layout in a Captivate responsive project looks nothing like what you created when viewing the content a mobile device (such as a tablet)? The problem isn't with your layout... it's likely due to the Breakpoint you set up in the first place.
Breakpoints
A Breakpoint is the layout area in a Captivate responsive project that essentially defines the size of a learner's mobile device. In the image below you can see the default Breakpoints available in Captivate 9. (Captivate initially has three Breakpoints and you can add two more.)
As you move from the Desktop Breakpoint down to the TabletBreakpoint and then Mobile, the layout for the slide automatically gets more and more narrow (from an initial default width of 1024 pixels all the way down to 414 pixels for a smart phone).
I wanted to create a reponsive layout in Captivate for my iPad. I assumed that the default Tablet Breakpoint size of 768 pixels would work just fine. However, after finishing the layout and then viewing it on my iPad, the layout looked nothing like I had intended. It turns out that the size of my iPad is very different than the default 768 pixels in Captivate. To make the layout in Captivate look correct when viewed on my iPad, I needed to set up a Breakpoint in Captivate that was the exact same size as my iPad. The problem was that I had no idea what that size was.
Viewports
A Viewport is the size of the viewing screen on a device, and there are as many Viewport sizes as there are devices. Fortunately, there are free resources available on the Web that will tell you the size of just about any device. One site that I use all of the time is viewportsizes. Besides offering an extensive list containing just about any device you can think of, the site offers a page that will tell you the size of the device you're currently using on the fly.
I opened Safari on my iPad and browsed to http://viewportsizes.com/mine. Once on the site, I was surprised to learn that the Viewport for my iPad was actually 1024x644 in Landscape mode, 768x900 in Portrait mode.
Now that I had the size of my iPad, it was simple enough to return to Captivate and modify the width and the height of my Breakpoint.
To adjust the width, all I need to do is drag the Size slider shown in the image below to 768. (If dragging the slider isn't precise enough for you, you can always type the value into the field to the right of the Slider.)
Specifying a specific height for a Breakpoint is also a snap via the Device Height field on the Properties Inspector.
From that point forward, I was able to rest easy with the knowledge that the layout I created in Captivate for my iPad would look the exactly the way I expected when opened with the same version/size iPad.
Looking for Captivate training? Check out these live, online classes.
Comments