Responsive Design: Question About Screen Sizes in Responsive Design

[mwjr]

So, as I continue to learn the concept of responsive design, a few questions have to my mind with regards to screen sizes.

I've been experimenting with both breakpoints and fluid boxes, so I have questions on both options.

1. The standard screen ratio for desktops is 16:9, which, scaled upward is 1024 x 576. So is there a reason that the default Desktop view in both Fluid Boxes and Breakpoint modes is set to 1024 x 627?
2. Similarly, the screen size on an iPhone 6 is 375 x 667. However, the default screen size for the iPhone 6 in Fluid Boxes is 375 x 559. Again, is there a reason for this?
3. Let's say I design for an iPhone 6, and the end user is using an iPhone 5. The iPhone 6 and iPhone 5 have different screen sizes, but the scale is the same. will the content scale down accordingly?

[Paul Wilson CTDP]

eLearning occurs inside your browser and therefore some space is used up by the controls and URL bar of your browser. Another factor is the Captivate play bar (if you decide to have one, it can take up some screen real-estate as well.

A recent example I've been working with is the iPad 9.7". Using the iPad I can visit a website like How Big Is My Browser? and learn that my iPad reports 1024 x 698 (not the 1024 x 768 that is the actual screen size). In my situation, I am primarily designing for the standard iPad and I am overlaying the play bar so the 1024 x 698 is my target size.

Adobe Captivate will attempt to fill all the possibilities between either the breakpoints, or adapt the fluid boxes to the different screen sizes. I recommend selecting a target device based on what your client is planning to deliver the training to. For example, if all the employees are issues iPhone 8 Plus smartphones, borrow one and check it with How Big Is My Browser? to see what the resolution is and make that your target device. This way you can design with that in mind and since it's responsive it will probably look great on most other devices as well.

[mwjr]

Thanks for the tips, Paul. Love the work you do here and on YouTube.

My struggle is exacerbated by the fact that our company doesn't issue devices; employees bring their own to work. So it could be anything - Samsung Galaxy, Google Pixel, iPhone 6, iPhone 4. It's a vast spectrum.

[Paul Wilson CTDP]

I would go with fluid boxes then. While breakpoint design has some advantages, I enjoy that fluid boxes has nice natural resizing for devices (it a almost doesn't matter what you select). You can preview whichever device size you wish while designing, knowing that except for a small amount of tweaking here and there, fluid box design should work nicely across a wide range of device sizes. Best of luck.

[Lilybiri]

There is a huge difference between Fluid Boxes workflow and Brekapoint Views. Only the last one is really responsive in the exact sense of the word: layout can be very simplified for smaller screen sizes. Fluid Boxes is a big timesaver but a hybrid solution in between rescalable and real responsive projects. Moreover Fluid Boxes have at this moment still a lot of limitations on use of items and functionality. Have a look at my in-depth explorarion in this blog post, which has also links to two short example files: same content in FLuid Boxes and in Breakpoint views, showing the advantages and limitations of both:

Fluid Boxes Or Breakpoint Views? - Captivate blog