What is best for Mobile Portrait breakpoint width?

[Theresa J]

I created a responsive project with a mobile portrait breakpoint width of 428px. When I view the project on my iPhone 11 in portrait mode it breaks at the tablet portrait size, not the mobile portrait size. After doing some research, I understand now that this happens because of the browser resolution on my phone. If I change the Safari settings to 300%, the project displays as I expected. Of course, I can't expect other users to change their preferences to view the project. What is a better way to handle this?

[RodWard]

I think the first thing you need to ask yourself is whether or not you have a compelling reason for delivering this course to mobile devices that use Portrait mode.  What actual percentage of your user base will be using mobile phones to view the course and DO NOT have the option of viewing the course any other way (e.g. on tablet or PC)?  If the percentage is higher than 50%, then you certainly have a case for creating a course in portrait mode. 

However, if the vast majority of your users would be quite capable of using a PC or handheld landscape tablet to view the content, and only a very small percentage would be using mobile phones in portrait mode, then you would be far better (in my opinion) to just create the course as a non-responsive project. 

Trying to get the same course to cover all breakpoints, including portrait, ties your hands in so many ways that you find sometimes the faster and more economically viable way to cover all bases is to actually build two versions of the course.  The main one for your biggest user base, and the other for the small group of outliers.  In almost every case I have seen, the mobile portrait format is the smallest user base, and every one of those users usually has the ability to use another device.

[nickepe]

Hi, 

My target group is sales representativs living in their car and they do their trainings in a mobile phone.

To bad it's so hard to create responsive e-learnings in 2023. 

Or maybe you have a recommandation for me to create content for a mobile device in portrait mode, except html5?

/Niklas

[RodWard]

If you don't want to use HTML5, forget interactivity and just publish your content as MP4 video.  People use mobile phones every day to consume Youtube video courses on their devices.

HTML5 content is for when you need to track what the learners are interacting with in the content and get scored results in an LMS.  If you don't need quizzing or proof that your participants can answer questions about the content correctly, then video is fine.

[Lilybiri]

All responsive projects do publish to HTML5, I don't understand your last sentence.

This thread is about the old Breakpoints workflow for responsive projects.

If you expect learners to use only smartphones, why not create a scalable non-responsive project (either in portrait or in landscape mode) and publish as scalable HTML? If you have video embedded I would prefer landscape mode. You can always warn the learner to switch to either mode for the best experience.

[Lilybiri]

There are so many different resolutions especially for browsers on phones that it is pretty much impossible to reach your goal, especially since you are using the older Breakpoint Views workflow for responsive projects.

Although you may feel to have less control, using Fluid Boxes would be a better option if you really need a responsive project. I completely understand Rod's viewpoint, in many cases a full responsive project may be unnecessary. If you want a solution that fits also most smartphone browsers, please try the Fluid Boxes approach, not the Breakpoint views workflow.

[Theresa J]

I am creating this project for myself to learn and understand how responsive design works. That is my compelling reason, so in this case it doesn't matter how many others view it or not on a mobile phone.

I tried fluid boxes and they were very difficult to control. However, I understand how they work and will use them if that will fix the problem. Will fluid boxes break correctly on the high def mobile phone screen?

I'm confused because when I previewed my project from Captivate to my phone it looked great. I discovered the problem after I published the project to my Wordpress site with the GrassBlade plugin.

Rod and Lilybiri, I really appreciate your help. Thank you.