[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 09:15:05 PDT 2019

very helpful, I will read and do.
with thanks,
jim

On 5/21/19 11:23 AM, Akkana Peck 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/

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://linuxmafia.com/pipermail/sf-lug/attachments/20190521/7708b370/attachment.html>