L-36.com

Welcome to L-36.com

Dedicated to the enjoyment of sailing

Mobile Friendly

With the migration to PHP8.1 largely complete, I turned my attention to my phone. Better to say I turned my attention to how the site works on small screens. This is important because most of you, by a small margin, come here using your phones.

I am strictly a desktop guy so I did not appreciate how bad the site was from a phone. Sure, I responded to the mobile-friendly warnings from Google and "fixed" pages enough to become mobile-friendly. It was my daughter that pointed out how much she hates sites that have horizontal scrolling. She is an iPhone user and apparently iPhones wobble back and forth as you try and scroll down if there is horizontal scrolling. It is an Apple "feature". I guess they think it looks cool. Even pages that have one pixel of horizontal scrolling look terrible on an iPhone apparently.

All of the pages I have tested, and that is basically all of them, have no horizontal scrolling. This was not a trivial exercise and involved some fancy footwork. One of the largest problems was that when a phone downsizes an image so it will fit on the page, the right margin goes off the screen so there is a margin width of horizontal scrolling say 20 pixels. I solved this by adding an outer division with twice the margin plus 1 pixel. Crazy.

Secondly, there are graphs that extend beyond what the page can hold. There is no way to narrow them without making them unreadable with tiny fonts. The solution there was to put these in a "container" which can scroll without the entire page scrolling. It works really well. You can see it on the weather page and several others.

YouTube videos were another problem. On desktop, I set the size but that does not work on the small screen because they are not wide enough so there is scrolling. If you remove the fixed size, the frame gets pretty small which might be OK for mobile but definitely not for desktop. The solution was to set the width as a percent of the screen and then set an aspect ratio of 16/9 with the height also set to the percentage used for the width. This was applied to all videos using CSS. Neat.

Finally, there were several pages that just didn't work on mobile. Text was all pushed to the center or images were reduced to useless. I would wonder why nobody ever alerted me of this until I found that the Contact page was unusable on mobile. So much for feedback. As far as I have been able to tell, all that is fixed. If you find something that is not fixed. please let me know.

Manuals

I have to admit to being wrong about putting all the pages of a manual on one screen. Here is a case where you really do need to zoom in and the best way is just like everyone normally does with two finger scrolling. The new page works well with both desktop and mobile users. The interface is much improved over the old one. I have nice forward and back buttons on edge of the image. Very handy. They are actually on top of the image so that the size is not reduced but as there is typically margin in the images, they do not cover anything important. They are translucent so if the do cover something you can still see it. I considered another way of dealing with this but here my daughter was kind enough to point out what a terrible idea it was. I hope she likes the new method.

One more thing. It is almost Father's day so here is a photo of my daughter and I. She has been a great help in making the site mobile-friendly.





Past Home Pages

002 - May 2023
001 - April 2023




Please read website Cookie, Privacy, and Disclamers by clicking HERE.