DonkeyWorx

Thanks for the feedback. I've anguished over this for quite a while. I personally hate the rotate your device option and am considering replacing it with a screencap of the landscape image so it encourages instinctive rotation. Originally I designed portrait and landscape versions of the pages BUT you don't get the same feel to it when the phone is in portrait ("work") orientation and people rarely switched to landscape. For these particular pages, making it easy to use isn't the primary concern, The whole point of the site is to make people stop and think and take time out. So I decided that disrupting people's expectations and making them reconsider their phone was actually a valuable aspect for the site. Also it is ultimately a wellbeing "game" and a lot of mobile games are landscape so I didn't think it was critical. Feedback so far has been quite positive about the shift to landscape. Having said that I intend to develop a portrait version of one the Interactive activities and watch the analytics. I also have abstract contemplations which simply fill any orientation so I'll watch their popularity too.

I think I've got the pages working but clearly the whole thing l needs reworking. Also realised that when switching the iPhone in question to landscape it tripped my breakpoint for delivering a desktop version of the page - which didn't help as I was frequently not looking at my "fixes" at all! So now I need to discover whether javascript screen.width delivers physical screen pixels of mobile phones or the UIKit resolution which I think is device.width in css and design a better breakpoint. And I've still got @Jack 's code to play with. And so further down the rabbit hole we go....

Thanks. Certainly automated tests and formal analysis is important in commercial development - though from my experience not always rigorously implemented or universally popular 🙂 I also know that even professional developers often come up with alternative solutions they prefer, at second or third consideration but they also come up with solutions which I would never even consider because I am simply not aware of the options and/or syntax shortcuts. I guess I'm wondering if only formal courses can give you that deeper insight or whether experience is just as productive?

Many thanks, Jack and apologies for dragging you into the twisted world of my amateur code. 🙂 I had decided overnight I'd probably have to redesign but I'll give that a go first.

Thanks Jack, I was wondering that too. I have tried removing it but I've run so many different tests in the last couple of days I'm getting to that point where I'm questioning if I've really tried all the combinations in all instances and reset the cache each time etc, etc so I'm going to check that again. As the animated content is loaded by a function I thought I should be able to defer that function and load the content once the fullscreen div has been created but I've not been able to get it to work and tbh I'm not expert enough to know if it should.

Looks like I've got everything except test01 working on iphone but not on android. So if the div to which content is being loaded is present but not visible (using visibility or opacity to show and hide it) then it works on iphone, but if you use display:none it works on android but not iphone. So I guess iphone needs the dimensions of the div to resize the content correctly but android doesn't. Not aware of an easy way to check for android vs iphone and deliver a different document which would be the easiest route from this point. So I can only think of trying to defer the load of the dynamic content once the div has been made visible/displayed.

☹️ Windows and Android here I'm afraid. It works fine on a macbook BTW. It's just mobiles that are causing me grief.

Thanks for confirming it. Any ideas why and what the solution might be? I'm wondering if it would help if I can defer the script which loads the content until the div is visible.

Thanks, I was afraid you might say that. My tame iPhone user is non-dev so would appreciate your expert eye... Here's the test page - https://www.magnoliajoes.com/interactives/in-the-groove/test-gallery.shtml These use display/visibility/opacity to try to reveal a content div after the overlay div has been hidden. Test 1 works on android but none seem to work on a real iPhone SE 2020 - you just get a white screen after pressing Continue.

Anyone got a recommendation for an accurate iPhone simulator. I've got a problem with a page which the Google simulator says works fine but a real device doesn't like. I can't get at the actual device so need a good simulator. Any suggestions gratefully received. TIA Paul

How do you judge the efficiency of your code? Does it matter as long as it works and doesn't create a huge overhead? The thing I have always loved about "development" since tweaking magazine listings on a ZX Spectrum is creating a problem and then solving it, and that's how I've learnt. But because I'm really a designer and never trained in development I feel I don't know enough. I wonder if I create solutions which are more complicated than they need to be and make life difficult for myself. But that puts me in a kind of Catch-22 because I won't know there's an alternative until I've found an alternative, so I'd have to go over code again and again which is boring but which is also a waste of time, especially if my solution was actually pretty good in the first place. Any thoughts? TIA Paul

Many thanks, that answers it. Makes sense when you think about it. The image is to accompany a meditation - hence the need to avoid other distractions if possible. I'll have to settle for user interaction, perhaps I can load the image and go to full screen when the user clicks to choose the image they want to use. Thanks everyone for the guidance.

Thanks but yes, it would obviously have to work on different size screens. I'd assumes that was what the fullscreen method achieves - or are you saying it doesn't? The site itself is a simple responsive design but because of the nature of the content, users will want to enjoy specific pages as fullscreen and I'd like to assume that, rather than the require the interaction from the user when it will interrupt the process.

Thanks, but can you clarify what you mean, this isn't what appears to happen with YouTube fullscreen - it simply covers everything with the fullscreen video and when you exit fullscreen you revert to the original browser window. Or am I missing something? There will be no need for UX in the fullscreen mode except to go back as it will require no user interaction - mere enjoyment and captivation 😊

Working on a new site with internal pages which would really work best if they automatically launched fullscreen. According to caniuse the fullscreen.api seems to be fairly well supported if still requiring a prefix or two. Anyone used it, got any recommendations/gotchas? Particularly interested in thoughts on automatically opening fullscreen rather than requiring user intervention - though obviously with a button to close fullscreen mode if the user wanted to. The contents are still images not videos. Thanks in advance. Paul