* * * * *

                     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 [1] based devices). I finally got around to it [2] and the changes
were minimal. This:

> <meta name="HandHeldFriendly" content="True">
>

(the Google Mobile-Friendly Test [3] 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 (HyperText Markup Language) changes. The CSS
(Cascading Style Sheets) 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
(Cable Network News: Scaring the crap out of people 24/7 since 1990!) [4]
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
[5], 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 [6]:

> <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 [7]. 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 [8].

I hope.

[1] https://www.android.com/intl/en_us/
[2] https://www.amazon.com/exec/obidos/ASIN/B009RP7I2C/conmanlaborat-20
[3] https://www.google.com/webmasters/tools/mobile-friendly/
[4] http://www.cnn.com/
[5] https://developer.mozilla.org/en-US/docs/Browser_detection_using_the_user_agent
[6] http://www.w3.org/TR/css3-mediaqueries/
[7] http://stephen.io/mediaqueries/
[8] https://www.google.com/webmasters/tools/mobile-friendly/?url=http%3A%2F%2Fboston.conman.org%2F

Email author at [email protected]