Journal Journal: How to make "mobile-friendly" web pages 3
I finally got the full texts of Nobots and Mars, Ho! to display well on a phone. My thanks to Google for showing me how, even if the way they present the information is more like trial and error, but it's actually easy once you jump through all their hoops. I'll make it easy.
First, you need to make sure it will fit on a phone's screen. I've been preaching for years that it's stupid to use absolute values, except with images; if you don't tell the browser the image size and you are using style sheets, your visitors will be playing that annoying "click the link before it moves again" game.
Some of you folks who studied this in college should demand your tuition be refunded, because they obviously didn't teach this.
Giving tables, divs, and such absolute values almost assures that some of your visitors will have that incredibly annoying and unprofessional horizontal scroll (*cough* slashdot *cough*).
None of the elements (images, divs, etc) can be more than 320 pixels wide, and you need to tell the browser to make it fit on a screen. To do this, add this meta tag to your page's head:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Next, you need to make sure the text is large enough to read without double tapping. The <p> tag does this:
<p {min-height: 16px}>
This needs to be placed after the <body> tag and before anything having to do with text.
To test it, just pull the page up on your phone. If it scrolls sideways, you need to work on it.
If you're worried about your Google pagerank, Google has a "mobile friendly test" here. If you flunk, well, when Google says "jump"...
My main index page fails their test. To make it pass the test I would have to ruin the desktop/tablet design. As it is now, the text is readably large on a phone but it has a sideways scroll, which is tiny if you hold the phone sideways, and I added a link at the very start of the page to a version that will pass Google's test, looks fine on a phone, not bad on a tablet but looks like excrement on a computer. The main index works fine on a tablet, since I've made it as "mobile-friendly" as possible.
I'd have it redirect if it saw Android or iOS, but it's been fifteen years since I've done that and I've forgotten how.
