[sf-lug] Mobile-friendlying the SF-LUG website (was Re: Status of SF-LUG etc) SF-LUG web site (mis?)information thereof

Tue May 21 08:23:55 PDT 2019

jim writes:
> From what I've read, the following addition will improve google's
> perception:
> 
> <meta name="viewport" content="width=device-width, initial-scale=1">
> 
> Yes?

Certainly start with that.

> And there's our image, currently
> <BODY>
> <P> la la la </P>
> <IMG SRC="LinuxKongSmall.jpg" align="left" width="289" height="701">
> <P>mi mi mi </P>
> 
> which should be revised to be something like
> <BODY>
> <P> la la la </P>
> <style type="text/css">
>     IMG { SRC="LinuxKongSmall.jpg" align="left"; max-width: 100%; height:
> auto; }
> </style>
> <P>mi mi mi </P>
> 
> My guess is that the above is incorrect. Corrections anyone?

Two problems with that.

First, in your revision, you've added style inside the <style> tag
but removed the actual image from the HTML. Sure, that would solve
the problem of the image being too big, but I'm guessing that's not
what you intended. Also, you put the <style> tag inside the <body>,
but it's supposed to go in the <head>.

If you want to maintain the page and make it mobile-friendly using
CSS, I'd recommend reading some basics about what CSS is and how it
works. It turns out it's not that easy to find beginner-friendly CSS
tutorials; the best I found so far is
https://www.w3.org/Style/Examples/011/firstcss.en.html
That should give you a basic idea of what a stylesheet is and how
it modifies HTML.

Second, look at the CSS you're asking about, and look at the page.
The LinuxKong image is 289 pixels wide, so setting max-width: 100%
should only matter on devices less than 289 pixels wide. Googling
[minimum phone resolution] gives me a page from 2010 that says there
were at that time a few phones that used QVGA (240x320). I doubt that
resolution is common today (you can add 2019 to that query to find a
table of common resolutions today).

The real problem with the Kong image is that it takes width away from
the main content, and on a phone, there isn't much width to begin with.
So if you really want to be friendly to mobile browsers, you might
want to re-think the page layout so it doesn't depend on that big
image along the side of the page (the Kong penguin is cute, though!).
Or make the image optional so it doesn't show up on small screens,
or shows up smaller; but that takes more elaborate CSS, and you'd
definitely need to learn a few CSS basics first before tackling
device-specific stylesheets.

        ...Akkana