Skip to main content
M
mwjr
Known Participant
June 15, 2018
Question

Responsive Design: Question About Screen Sizes in Responsive Design

  • June 15, 2018
  • 1 reply
  • 918 views

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?
    This topic has been closed for replies.

    1 reply

    Paul Wilson CTDP
    Paul Wilson CTDP
    Community Expert
    June 16, 2018

    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.

    Paul Wilson, CTDP
      M
      mwjrAuthor
      Known Participant
      June 18, 2018

      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
      Paul Wilson CTDP
      Community Expert
      June 19, 2018

      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.

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