<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body text="#000000" bgcolor="#FFFFFF">
    <br>
    <br>
    <font face="Courier New, Courier, monospace">thank you, Akkana. <br>
      <br>
      I read your </font><br>
    <pre class="moz-quote-pre" wrap=""><a class="moz-txt-link-freetext" href="http://shallowsky.com/blog/tech/web/google-mobile-friendly.html">http://shallowsky.com/blog/tech/web/google-mobile-friendly.html</a></pre>
    <font face="Courier New, Courier, monospace">description, and thank
      you for clarity. <br>
      <br>
    </font><br>
    <font face="Courier New, Courier, monospace"><span><font
          face="Courier New, Courier, monospace">---------------------------<br>
          <br>
        </font></span>Here's all the header stuff: <br>
    </font><span><<span class="start-tag">HEAD</span>></span><span></span><span><br>
      <<span class="start-tag">TITLE</span>></span><span>San
      Francisco Linux Users' Group</span><span></<span
        class="end-tag">TITLE</span>></span><span></span><span><br>
      <<span class="start-tag">META</span> <span
        class="attribute-name">name</span>="<a class="attribute-value">keywords</a>"
      <span class="attribute-name">content</span>="<a
        class="attribute-value">Linux, User, Group, San Francisco,
        sf-lug, LUG</a>" <span>/</span>></span><span></span><span><br>
      </<span class="end-tag">HEAD</span>> <br>
      <font face="Courier New, Courier, monospace"><br>
        From what I've read, the following addition will improve
        google's perception: <br>
        <br>
        <meta name="viewport" content="width=device-width,
        initial-scale=1"> <br>
        <br>
        Yes? <br>
        <br>
        ---------------------------<br>
        <br>
        And there's our image, currently <br>
        <BODY> <br>
        <P> la la la </P> <br>
        <IMG SRC="LinuxKongSmall.jpg" align="left" width="289"
        height="701"> <br>
        <P>mi mi mi </P><br>
        <br>
        which should be revised to be something like <br>
      </font></span><span><font face="Courier New, Courier, monospace"><span><font
            face="Courier New, Courier, monospace"><BODY> <br>
            <P> la la la </P> <br>
          </font></span><style type="text/css"><br>
            IMG { SRC="LinuxKongSmall.jpg" align="left"; max-width:
        100%; height: auto; }  <br>
        </style><br>
      </font></span><span><font face="Courier New, Courier, monospace"><span><font
            face="Courier New, Courier, monospace"><P>mi mi mi
            </P><br>
            <br>
          </font></span>My guess is that the above is incorrect.
        Corrections anyone? <br>
        <br>
      </font></span><span><font face="Courier New, Courier, monospace">---------------------------<br>
      </font></span><br>
    Nice that there's just the one page. <br>
    <span></span><font face="Courier New, Courier, monospace"><span>
      </span></font>
    <pre id="line1"><font face="Courier New, Courier, monospace"><span><span id="line6"></span>
<span id="line7"></span></span><span></span></font></pre>
    <font face="Courier New, Courier, monospace"><br>
    </font><br>
    <div class="moz-cite-prefix">On 5/20/19 8:02 PM, Akkana Peck wrote:<br>
    </div>
    <blockquote type="cite"
      cite="mid:20190521000246.GE6035@shallowsky.com">
      <blockquote type="cite">
        <pre class="moz-quote-pre" wrap="">On Mon, May 20, 2019 at 9:51 AM jim <a class="moz-txt-link-rfc2396E" href="mailto:jim@well.com"><jim@well.com></a> wrote:
</pre>
        <blockquote type="cite">
          <pre class="moz-quote-pre" wrap="">I can make basic content changes, but
I have no clue how to re-write the
page to be mobile-compliant. I am
guessing that narrowing the page
width might improve mobile perception
somewhat.
</pre>
        </blockquote>
      </blockquote>
      <pre class="moz-quote-pre" wrap="">[ ... ]
</pre>
      <blockquote type="cite">
        <blockquote type="cite">
          <pre class="moz-quote-pre" wrap="">Also, it will help if people can chime
in about what should be changed.
</pre>
        </blockquote>
      </blockquote>
      <pre class="moz-quote-pre" wrap="">
Ken Shaffer writes:
</pre>
      <blockquote type="cite">
        <pre class="moz-quote-pre" wrap="">Jim,
Take a look at thetasystems.net for an example of a  compliant site.
Change your browser window size to see the format change on  the fly.
</pre>
      </blockquote>
      <pre class="moz-quote-pre" wrap="">
It looks to me like <a class="moz-txt-link-freetext" href="http://www.sf-lug.org/">http://www.sf-lug.org/</a> resizes just fine,
and actually it looks pretty good on my phone (but of course every
phone and every Android version is different).
But Google flags it as not mobile friendly and gives a screenshot
that implies very small text indeed:
<a class="moz-txt-link-freetext" href="https://search.google.com/test/mobile-friendly?id=5LlfYhGhmsMRw62yoifQnQ">https://search.google.com/test/mobile-friendly?id=5LlfYhGhmsMRw62yoifQnQ</a>

What it's looking for isn't always very clear; for instance, it
requires a magic meta tag in the HTML header that's only there to
keep mobile browsers happy. I wrote up some of the tricks I found:
<a class="moz-txt-link-freetext" href="http://shallowsky.com/blog/tech/web/google-mobile-friendly.html">http://shallowsky.com/blog/tech/web/google-mobile-friendly.html</a>

You might think that phone browsers would default to a scaling that
shows text at a readable size, and indeed, Android used to do that;
but Google changed that somewhere along the line, so modern phones
default to fonts the size of a paramecium on pages that don't add
the magic meta viewport tag.

        ...Akkana

_______________________________________________
sf-lug mailing list
<a class="moz-txt-link-abbreviated" href="mailto:sf-lug@linuxmafia.com">sf-lug@linuxmafia.com</a>
<a class="moz-txt-link-freetext" href="http://linuxmafia.com/mailman/listinfo/sf-lug">http://linuxmafia.com/mailman/listinfo/sf-lug</a>
SF-LUG is at <a class="moz-txt-link-freetext" href="http://www.sf-lug.org/">http://www.sf-lug.org/</a> 
</pre>
    </blockquote>
    <br>
  </body>
</html>