[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 10:51:06 PDT 2019

awesome mr. peck...
thank you...

/'m'/...

message ends.
________________________

On Tue, May 21, 2019 at 8:29 AM Akkana Peck <akkana at shallowsky.com> wrote:

> 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
>
> _______________________________________________
> sf-lug mailing list
> sf-lug at linuxmafia.com
> http://linuxmafia.com/mailman/listinfo/sf-lug
> SF-LUG is at http://www.sf-lug.org/
>

-- 

*~the quieter you become, the more you are able to hear...*
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://linuxmafia.com/pipermail/sf-lug/attachments/20190521/aa6b6c0d/attachment.html>