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

I use a honeypot (but wasn't fully confident of it) and the spawn suggestion from @BrowserBugs (which I was). I also check for "a href=" because my customers shouldn't need to include a link in the contact form. That combo currently works for me. I'm currently trapping the spam into a specific mailbox along with the host IP so I can review it. The spam to arrive first and in greatest volume appears to all come from IPs in St Petersburg :-)

Thanks. As my site promotes my images I need control over the image displayed on different screens. My desktop banner images are too wide to look good on mobile so I need to switch. Sounds like srcset is the way to go.

Is using srcset the best way to deliver mobile-specific images or is it better to use plain css to show and hide specific images in a responsive design? TIA Paul

For all those frustrated by GDPR requirements, especially when they are irrelevant or inappropriate, I thought I'd share this fora little light relief...

Many thanks - that successfully highlighted my stupidity. The form was in an html page not a php file so the php wasn't executing. Knew I was missing something obvious.

At nearly 60 I am clearly so far over the hill I'm in another country! But experience tells me this... knowledge is easy if you can read, learning is easy if you want to, it's what you do with that knowledge which defines your success. I'd say a professional attitude and insightful solutions will always find customers.

Yes, I was expecting $submitted to be a date but currently it contains the whole php code verbatim from the input section of the form and not 2018-03-29 10:28:16 as I was expecting. Thanks for clarification on strtotime - that explains why my time check doesn't work because it's not getting a date as input but the string intended to generate the date. Do I need to put $submitted = $_POST['sent']; into a if($_SERVER['REQUEST_METHOD']=='POST') { $submitted=$_POST('sent'); } construct?

Thanks, my php is not great so apologies if this is obvious. What I was specifically trying to do was get the value of 'sent' from your <input name="sent" type="hidden" value="<?php echo date('Y-m-d H:i:s');?>"> but when I do $submitted = $_POST['sent']; the variable $submitted contains <?php echo date('Y-m-d H:i:s');?> not the date string I was expecting. Which makes me think I'm missing something. I tried combinations of strtotime and dateformat but can't get it to work and although my php skills may be letting me down I wondered again if I'm missing something more fundamental.

I'm trying to implement an anti-bot timer on my contact form as suggested by @BrowserBugs here But I'd also like to include the time in the email so I can check what I'm doing and because it would be useful. If I simply put the posted value 'sent' into a variable and include that in the email I get the complete php code from the form input not the date-time. And if I use strtotime on 'sent' first I don't get anything in the resulting variable. What am I missing? TIA Paul

Could it be a Norton site validation? Second line reads site secured by Norton.