Tuesday, May 05, 2015
Ch-ch-ch-changes for the mobile web
It's been brought to my attention by a few parties that my blog was unviewable on some smartphones; which smartphones I don't know (but I suspect Android based devices). I finally got around to it and the changes were minimal. This:
<meta name="HandHeldFriendly" content="True">
(the Google Mobile-Friendly Test fell on the floor laughing when it encountered that line) changed to:
<meta name="viewport" content="width=device-width, initial-scale=1">
And that's it for the HTML changes. The CSS changes weren't that bad, once I figured out what was needed. I asked a fellow cow-orker, D, what I needed to do in order to serve up a “mobile-friendly CSS file” and his advice was: “Do whatever CNN does.”
Sigh.
It appears there is no real reliable way to detect a smartphone through CSS only. Sure, I could try to detect a smartphone by sniffing the user agent, but I wanted something easy, not something error prone despite a ton of ongoing configuration and testing. So that was out. And the obvious media query:
<link media="handheld" rel="stylesheet" href="/CSS/smartphone.css" type="text/css">
was right out because “smartphones” are “smart” and not at all a “handheld.” Sheesh.
I ended up doing what CNN did—base the style upon the width of the browser. It seems that a “safe” width for smartphones is around 736 pixels. Larger than that, and I can assume a real desktop (or laptop) display; that or less and hey, treat it as a smartphone. And if your browser window on the desktop (or laptop) is less than 737 pixels, you'll get the “mobile” version of my site.
Anyway, the changes weren't all that bad. The “not-main-content” is positioned via CSS and that's all I really wanted to change. For instance, I had this style for the main content:
/* Yes, the DIV is redundant. I left it in because I want to be explicit */
DIV#content
{
margin-top: 0;
margin-bottom: 0;
margin-left: 220px;
margin-right: 180px;
border: 0;
padding: 0;
}
To fix this for the smartphone:
DIV#content
{
margin-top: 0;
margin-bottom: 0;
margin-left: 220px;
margin-right: 180px;
border: 0;
padding: 0;
}
/* override some previous settings for "smartphones" */
@media screen and (max-device-width: 736px),
screen and (max-width: 736px)
{
DIV#content
{
margin-left: 0;
margin-right: 0;
}
}
The rest of the changes were along those lines for the major portions of the page—override the placement settings for the various bits and pieces.
So now the blog should be readable on small devices.
I hope.
Driskell v. Homosexuals
It seems that one Sylvia Ann Driskell is suing homosexuals (link via Flutterby). The handwritten lawsuit is a riot to read, but ultimately, it does seem that Ms. Driskell might be in need of some mental care (if not a proofreader).
Also, I think that Ms. Driskell needs to read (or listen) to Matthew Vines' talk on the Bible and homosexuality (it's long, but I think it's worth the time if only for some Christians to gain some perspective, and for gays to get some counter arguments for the Westboro Baptist Churches out there).
![[The future's so bright, I gotta wear shades]](https://www.conman.org/people/spc/about/2023/1023.t.jpg "The future's so bright, I gotta wear shades")