See also: Previous and Next (View all)
I’ve been using Copilot AI more and more (also Perplexity). I discovered to my delight that I can create URL’s of the AI answer for easy reference.
CSS Rendering on Mobile Devices
AI: Improving Rendering on Mobile Safari
I’m good at asking technical questions like this, and the answer frankly surprised me (and revealed how behind my CSS skills are). (It was in reference for this 10 part interview. I am okay at web and accessibility testing, but I do most of it on my own devices (Win 11, Samsung tablet, android phone), and didn’t have easy access to iPhones. Yes, I knew it was sub-optimal, but I didn’t know what was wrong or an easy way to devise a fix for it. (And of course Copilot solved it in 5 seconds!)
I like having the ability to make an occasional static HTML site. You’re in complete control and can often make human-readable code. When I try to troubleshoot WordPress for example, I find the CSS mostly unfathomable. I’m sure it makes sense for developers (especially those with tools to combine everything into the right interface), but I don’t have time to figure those things out except in rare cases.
My Docbook files generate clean HTML code, so I often can do my own CSS (without working about dynamic code, java script, etc). I remember the utter shock I experienced about 5 years ago when I saw the data about what percent of my site visitors were on mobile phones. I quickly schooled myself in responsive design, but I lacked an ability to test things fully.
I would love a free solution to this device emulator problem, but for the moment I am using LambdaTest to test on iphone emulators. Worked like a charm! (I had to pay $9 per month or 7 dollars for an annual rate, but it was well worth the money).
Here’s the thing about AI-guided expertise. Often, AI gives great accurate information and sometimes it is very tailored. On the other hand, a solution may be more than what you need or introduce its own problems. It could also be out of date. So I spend a lot of time preparing a question to ask and a lot of time trying to understand the answer. Even if AI’s answer is correct, you the human may not understand the rationale behind it. Such as: is this solution a hack or a best practice? What dependencies do you create when you implement this solution?
So for $9, I have the ability to ramp up my CSS knowledge and test my existing static web pages better than I used to. Horray!
Here is the best article for using the clamp to do font sizes on css.
Another article about more complex uses of clamp
Update: I redid the style sheet and combined it into a single file.
Previous version had 2 files: 736 lines + 258 lines. The new file (just one) has 560 lines total (Admittedly, I cleaned it up a little and removed cruft). When I added the link, I see that I have 50-75 lines of cruft I could also delete– maybe I will eventually.
AI: Estimating Device + Browser statistics. The source of the data is here.
AI: how to ensure fonts on mobile devices are still readable.
AI: Balancing Fluid Types for Phones and Big Desktops.
AI: Is max-width on body/p necessary when using fluid types?
AI: Tips for using the CSS Inspect tool in browsers. Here’s a followup.
AI: Estimating optimal pixel size for fonts on mobiles.
AI: Exporting columns from Google Sheets into another view.
AI: Serving Responsive Images to Reduce File size for mobile visitors ; HTML page file size, static HTML page templates
Article: font-size guidelines for accessibility on mobile devices ; Here’s the main TOC with chapters for ios and android. Here’s a great case study on choosing fonts. For the last few years I’ve been using Alegreya as my goto body font with Alegreya Sans for headers. I still love Alegreya, but the Sans font has some weird lettering. I’m eager to try something different.
TAKE MY SURVEY: When you go online, what percent of your time on the Internet is spent using a)desktop/laptop, b)tablet and c)mobile phone? My percents are a)50%, b)45% and c)5%. Apparently (According to Statcounter) this is much different from the rest of the world. Worldwide, 35% come from desktops/laptop, 63% of traffic comes from mobile phones, and 1.6 come from tablets. For Europe and USA, 44% come from desktop/laptop, 53% come from mobile phones and 2.3% come from tablets. I have a great mobile phone with a decent display, but it is cumbersome to do a lot of reading on it (and my middle-aged eyesight makes me continually wish the font was bigger).
AI: Do university degrees and advanced degrees correlate with higher tablet use? There appears to be a soft correlation; wealthier people are more likely to own tablets, and more than half of people over 65 (according to one UK study) used tablets to go online. (Perplexity answer).
Favorite free/open source utilities (Windows only)
Update: I am removing this from this post and putting it here.
Leave a Reply