RFC: Google's recommended META viewport tag

[tlvp]

In conjunction with their recent Search algorithm recalibration, Google are
urging to improve the experience of mobile users by adding to one's HEAD:

: <meta name=viewport content="width=device-width, initial-scale=1"> .

After following that advice for the 200 or so Opow-*.htm files in our
Mahabharata series, Google's Page Speed Insights rating-page upped their
"User Experience" scores from under 60 to over 90.

That's very gratifying ... unless there are reasons I'm not aware of that I
should beware Google's advice (are there?).

Other problems remain, of course -- I welcome advice how to deal with (i) a
long slender graphic (about 510px x 30px) so as to let it shrink to fit
even a 320 CSS-pixel wide viewport, and (ii) a 10-cell navigation table
currently spread out horizontally across the top of each page.

These items, perfectly comfortable on a notebook screen, do almost more or
less fit on a modern Android cellular handset held in landscape position,
but protrude way beyond the edges in portrait position.

Is there an alternative to the width="510" height="30" attributes I might
add within the img tag so as to let browsers know that, while it's a 510x30
image they're to expect, they're to reduce it, as needed, to fit within the
available space?

Also: can I use DIVs instead of TABLE cells to hold what I've currently got
in the TD cells of a wide, 1-rowed table, so that with a narrow viewport
the DIVs arrange themselves into several full-width rows, while with a
broader viewport they're content to line up in a single row? If so, how?
(That is, what's a valid idiomatic HTML expression I might use for that?)

Sample page:

<http://tlvp.net/~b.mikolajewska/booknook/Mahabharata/Opow-158-MetaViewport.htm>.

To the extent these questions are more CSS questions than straight HTML,
please feel free to suggest moving to ciwas from the present ciwah. Thank
you all very much.
--
Avant de repondre, jeter la poubelle, SVP.

[tlvp]

On Thu, 23 Apr 2015 23:45:16 -0400, tlvp asked, inter alia:

> ... how to deal with (i) a

> long slender graphic (about 510px x 30px) so as to let it shrink to fit

> even a 320 CSS-pixel wide viewport ...

Heh-heh ... ask in public and you may figure it out yourself, the price
having been to make a public spectacle of yourself first. See the Opow-200
instance of those pages: there I broke a 530 x 30 image up into LH and RH
half, each 265 x 30, and juxtaposed these in-line.

Where the viewport permits, those halves are adjacent to each other on one
line, looking like one continuous 530 x 30 graphic; where the viewport is
too narrow, the RH piece slides under the LH piece, giving the illusion of
one continuous 265 x 60 graphic, and (by virtue of the way they are
designed) all is well again, albeit in a different way.

URL: <http://tlvp.net/~b.mikolajewska/booknook/Mahabharata/Opow-200.htm>.

(Yes, I know, I omitted the alt="" attribute. Haste, sorry. Me fix mañana.
And the two graphics deserve to be redone more artistically. Mañana, too.)

Comments on the other questions still welcome, please. Thx. Cheers, -- tlvp

[Denis McMahon]

On Thu, 23 Apr 2015 23:45:16 -0400, tlvp wrote:

> Other problems remain, of course --

> (ii) a 10-cell navigation
> table currently spread out horizontally across the top of each page.

What happens if you change the table into a paragraph, and the cells into
spans with display:inline-block.

--
Denis McMahon, denismf...@gmail.com

[tlvp]

On Fri, 24 Apr 2015 12:01:14 +0000 (UTC), Denis McMahon proposed for the:

>> ... navigation

>> table currently spread out horizontally across the top of each page.
>
> What happens if you change the table into a paragraph, and the cells into
> spans with display:inline-block.

Many thanks for the idea. An attempt to exploit it appears in the page

<http://b.mikolajewska.tlvp.net/booknook/Mahabharata/Opow-158-MetaViewportWiSpans.htm>.

I'm failing to incorporate the background-color specs of the prior page

<http://b.mikolajewska.tlvp.net/booknook/Mahabharata/Opow-158-MetaViewport.htm>.

And I'm not seeing how to get the various SPANs better aligned vertically
(especially the far right-side one, with the envelope graphic), and better
separated from each other, vertically, if the viewport's narrow.

I suppose I can give up on those desiderata ... or should I try using
well-styled left-floating DIVs instead of SPANs?

Thanks again. Cheers, -- tlvp

[Christoph M. Becker]

Of course, that's a possibility. Anyhow, you may (additionally)
consider using media queries:

<https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries>

--
Christoph M. Becker

[tlvp]

On Fri, 24 Apr 2015 22:38:11 +0200, Christoph M. Becker wrote:

> ... Anyhow, you may (additionally)

> consider using media queries:
>
> <https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries>

Thank you, Christoph, that's valuable documentation I had not hitherto met.

[tlvp]

On Fri, 24 Apr 2015 16:08:26 -0400, tlvp had written:

> I'm failing to incorporate the background-color specs of the prior page

Rely on erroneous documentation and that's what happens :-) . Fixed now: cf

<http://b.mikolajewska.tlvp.net/booknook/Mahabharata/Opow-158-MetaViewportWiDIVs.htm>.

> And I'm not seeing how to get the various SPANs better aligned vertically ...

Well, I've concocted a kluge using <br> tags to achieve that alignment,
more or less ... but the last one, of which I had complained explicitly,

> (especially the far right-side one, with the envelope graphic) ...

... is still place in a pretty unsatisfactory way. Ideas, perhaps?

Setting what used to be within double BLOCKQUOTE tags inside a well-padded
DIV instead (and changing text-align from justify to left) looks like a
worthwhile improvement to the layout of the introductory quoted extract.

But may I ask: better set the *padding*? - or the *margin*? - to '0px 5%'?
.
Thanks for serving as responsive sounding board! More tentatives (in the
French sense) to come. Cheers, -- tlvp

[David Harmon]

On Thu, 23 Apr 2015 23:45:16 -0400 in
comp.infosystems.www.authoring.html, tlvp <mPiOsUcB...@att.net>
wrote,

>In conjunction with their recent Search algorithm recalibration, Google are
>urging to improve the experience of mobile users by adding to one's HEAD:
>
>: <meta name=viewport content="width=device-width, initial-scale=1"> .

It pisses me off a bit when some web page is hard formatted wider than
the browser window I am trying to view it in, so I cannot read text
without scrolling left and right. You are not entitled to my entire
screen width.

[tlvp]

On Mon, 27 Apr 2015 12:00:15 -0700, David Harmon reacted to a proposed:

>>: <meta name=viewport content="width=device-width, initial-scale=1"> .
>
> It pisses me off a bit when some web page is hard formatted wider than
> the browser window I am trying to view it in, so I cannot read text
> without scrolling left and right. You are not entitled to my entire
> screen width.

Much obliged. Now, please, take a deep breath, and explain to me whether
that reaction expresses approval of, or displeasure with, the META tag
displayed above; why that is so; and what you'd consequently recommend.

Thanks. And cheers, -- tlvp

[Thomas 'PointedEars' Lahn]

David Harmon wrote:

> […] tlvp […] wrote,

>> In conjunction with their recent Search algorithm recalibration, Google
>> are urging to improve the experience of mobile users by adding to one's
>> HEAD:
>>
>>: <meta name=viewport content="width=device-width, initial-scale=1"> .
>
> It pisses me off a bit when some web page is hard formatted wider than
> the browser window I am trying to view it in, so I cannot read text
> without scrolling left and right. You are not entitled to my entire
> screen width.

As someone who deliberately violates the standards of Internet/Usenet
communication, namely RFC 5536, you should be very slow calling other people
anti-social.

Also, you are completely misunderstanding the meaning of the element
suggested above.

<https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag>


PointedEars
--
Sometimes, what you learn is wrong. If those wrong ideas are close to the
root of the knowledge tree you build on a particular subject, pruning the
bad branches can sometimes cause the whole tree to collapse.
-- Mike Duffy in cljs, <news:Xns9FB6521286...@94.75.214.39>

[Eli the Bearded]

In comp.infosystems.www.authoring.html,

tlvp <mPiOsUcB...@att.net> wrote:
> In conjunction with their recent Search algorithm recalibration, Google are
> urging to improve the experience of mobile users by adding to one's HEAD:
>
> : <meta name=viewport content="width=device-width, initial-scale=1"> .

Who made mobile systems so fucked up that something like that is not
default? Or better, why?

Why should fully conformant HTML from say 15 years ago not be fully
conformant HTML now?

Elijah
------
and would using a real header, instead of a "meta" work?

[Hans-Georg Michna]

On Tue, 28 Apr 2015 21:00:03 +0000 (UTC), Eli the Bearded wrote:

>In comp.infosystems.www.authoring.html,
>tlvp <mPiOsUcB...@att.net> wrote:

>> In conjunction with their recent Search algorithm recalibration, Google are
>> urging to improve the experience of mobile users by adding to one's HEAD:
>>
>> : <meta name=viewport content="width=device-width, initial-scale=1"> .

>Who made mobile systems so fucked up that something like that is not
>default? Or better, why?
>
>Why should fully conformant HTML from say 15 years ago not be fully
>conformant HTML now?

You may be right, but this world is ruled by idiots.

I have something built into my head that I call the idiot bell.
When it rings, it tells me that there are idiots around. And
when I read that somebody redefines 1.5 pixels as one pixel, my
idiot bell rings loudly.

What happens is that people invent and implement very
short-sighted patches for acute problems without thinking any
further and particularly without thinking about any long-term
consequences. This is why we have a patchwork of idiotic
measures now instead of a well-thought-out rule set.

But that's how it goes these days. We have not enough influence
over these decisions, so all we can do is accept them as given
and adapt our own doing accordingly.

Hans-Georg

[dorayme]

In article <1gbgrqb3o3hl4.v...@40tude.net>,

tlvp <mPiOsUcB...@att.net> wrote:

> On Mon, 27 Apr 2015 12:00:15 -0700, David Harmon reacted to a proposed:
>
> >>: <meta name=viewport content="width=device-width, initial-scale=1"> .
> >
> > It pisses me off a bit when some web page is hard formatted wider than
> > the browser window I am trying to view it in, so I cannot read text
> > without scrolling left and right. You are not entitled to my entire
> > screen width.
>
> Much obliged.

For what? It was likely a mere comment, the post reminding the
subscriber of an irritation*.

> Now, please, take a deep breath, and explain

About a couple of your original questions:

Images can be dimensioned as percentages, perhaps that would give you
happier results.

Perhaps try to use a horizontal list whose items wrap rather than a
table (the lack of flexibility of the table row has been one of the
main motivating factors for moving to more fluid facilities)

--------
* I can explain an irritation of mine. On an even 'big' iPad one often
has to scroll horizontally when enlarging the text a few clicks (or
the funny finger movement a few centimeters, it does not do 'zooming
text only'. Hard to believe! It might be ok for browsers used on
sizeable monitors to lack this facility (as is the case with some
browsers) but not ok for small monitor zooming. True, users often want
want the pics enlarged too, but be nice to have a choice. Maybe it is
just the Safari browser that comes with the iPad?

--
dorayme

[Stan Brown]

On Sat, 02 May 2015 08:37:49 +1000, dorayme wrote:
> I can explain an irritation of mine. On an even 'big' iPad one often
> has to scroll horizontally when enlarging the text a few clicks (or
> the funny finger movement a few centimeters, it does not do 'zooming
> text only'. Hard to believe! It might be ok for browsers used on
> sizeable monitors to lack this facility (as is the case with some
> browsers) but not ok for small monitor zooming. True, users often want
> want the pics enlarged too, but be nice to have a choice. Maybe it is
> just the Safari browser that comes with the iPad?
>

It's not. Amazon's "Silk Browser" on Kindles(*) does the same thing.
I even tried downloading Opera because of that annoyance, but Opera
for Android does it too.

(*) Generalizing from my Kindle Fire HDX 7".

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You: http://preview.tinyurl.com/WhyWont

[dorayme]

In article <MPG.2fae94747...@news.individual.net>,

Stan Brown <the_sta...@fastmail.fm> wrote:

> On Sat, 02 May 2015 08:37:49 +1000, dorayme wrote:
> > I can explain an irritation of mine. On an even 'big' iPad one often
> > has to scroll horizontally when enlarging the text a few clicks (or
> > the funny finger movement a few centimeters, it does not do 'zooming
> > text only'. Hard to believe! It might be ok for browsers used on
> > sizeable monitors to lack this facility (as is the case with some
> > browsers) but not ok for small monitor zooming. True, users often want
> > want the pics enlarged too, but be nice to have a choice. Maybe it is
> > just the Safari browser that comes with the iPad?
> >
>
> It's not. Amazon's "Silk Browser" on Kindles(*) does the same thing.
> I even tried downloading Opera because of that annoyance, but Opera
> for Android does it too.
>
> (*) Generalizing from my Kindle Fire HDX 7".

I have a non-backlit older Touch Kindle. It has an 'experimental'
browser. Of course, I'd rather be slapped by an unrefrigerated
week-old dead mullet than use it seriously for browsing. It has an
abominable scrolling mechanism, and like yours and Safari on iPads,
will not zoom text so it wraps on any size that is tactically adjusted
to be readable to a person at any time t.

But, to be kind to my Kindle (a big favourite of mine for reading
books, especially when on the move), if a wifi is connected, it will
give information on a word or phrase by connecting to the internet and
finding out (through wikis). Small, short sharp. That is a built-in
facility separate from the 'experimental' browser.

--
dorayme

[tlvp]

On Sat, 02 May 2015 08:37:49 +1000, dorayme wrote:

> About a couple of your original questions:
>
> Images can be dimensioned as percentages, perhaps that would give you
> happier results.

Alas, it's an image with text in it, so dimensioning using percentages may
render the text too small to read. Better from my vantage point was to snip
the image in half down the middle, and let the two halves abut each other
left and right when possible, and one over the other in narrower viewports.

> Perhaps try to use a horizontal list whose items wrap rather than a
> table (the lack of flexibility of the table row has been one of the
> main motivating factors for moving to more fluid facilities)

Yes, that approach (now that I've begun to understand how to implement it)
will prove very useful, thanks.

As to the behavior of iPads, I'm an utter dunce, having never touched one.

Cheers, -- tlvp

[Stan Brown]

On Thu, 23 Apr 2015 23:45:16 -0400, tlvp wrote:
> In conjunction with their recent Search algorithm recalibration, Google are
> urging to improve the experience of mobile users by adding to one's HEAD:
>
> : <meta name=viewport content="width=device-width, initial-scale=1"> .

Sorry for reopening a month-old thread -- I've only today had time to
do any reading on this.

I've looked this up on the Web, and I don't understand why every page
needs to change. Seems like an issue of bad browser defaults, innit?

Assuming we already have a liquid design, do we need to do anything
other that slap this line in the head section of every one of our
pages?

[Jon Fairbairn]

Stan Brown <the_sta...@fastmail.fm> writes:

> On Thu, 23 Apr 2015 23:45:16 -0400, tlvp wrote:
>> In conjunction with their recent Search algorithm recalibration, Google are
>> urging to improve the experience of mobile users by adding to one's HEAD:
>>
>> : <meta name=viewport content="width=device-width, initial-scale=1"> .
>
> Sorry for reopening a month-old thread -- I've only today had time to
> do any reading on this.
>
> I've looked this up on the Web, and I don't understand why every page
> needs to change. Seems like an issue of bad browser defaults, innit?

A combination of bad browser defaults and browsers attempting to
do something useful with badly designed web pages.

> Assuming we already have a liquid design, do we need to do anything
> other that slap this line in the head section of every one of our
> pages?

If you have liquid design, it’s probably better to use just

<meta name="viewport" content="width=device-width">

which seems (according to my experiments) to behave more how one
would hope. For me the other version resulted in a page on which
the user has to slide the viewport about.
--
Jón Fairbairn Jon.Fa...@cl.cam.ac.uk

[Stan Brown]

On Mon, 25 May 2015 09:34:09 +0100, Jon Fairbairn wrote:
>
> Stan Brown <the_sta...@fastmail.fm> writes:
>
> > On Thu, 23 Apr 2015 23:45:16 -0400, tlvp wrote:
> >> : <meta name=viewport content="width=device-width, initial-scale=1"> .

> > Assuming we already have a liquid design, do we need to do
> > anything other that slap this line in the head section of every
> > one of our pages?
>

> If you have liquid design, it?s probably better to use just

>
> <meta name="viewport" content="width=device-width">
>
> which seems (according to my experiments) to behave more how one
> would hope. For me the other version resulted in a page on which
> the user has to slide the viewport about.

Thanks for the reply.

I had hoped this would fix the phenomenon I noticed on my Kindle
Fire's "Silk Browser" as well as Opera -- when I zoom the text larger
on my pages, the browser doesn't reflow the text so that it stays
within the viewport, the way browsers do on PCs. That sounds like the
same thing as your "user has to slide the viewport about".

I added the version without initial-scale to
http://brownmath.com/swt/chap01.htm
I found that it doesn't fix that problem. All it seems to do is pre-
zoom the text to occupy the width of the viewport. That's better than
nothing, I guess, but it's still hard luck on people who need to see
larger font sizes than their default.

I don't understand why it doesn't do the same thing on a PC. I'm glad
it doesn't, but I would like to understand why. Many people have wide
screens these days, so I style <body> with max-width:40em. If a
browser blew up the text on a wide screen, so that 40 ems was the
width of the screen, it would be so unpleasantly large.

Is "viewport" taken to mean "of a mobile device"? Or is it that
"device-width" means something different on PCs?

If you're interested, you can contrast this, for now, with
http://brownmath.com/swt/chap02.htm
but I'll be uploading all new pages this evening.

(Thank goodness my pages are generated by scripts and a makefile. I'd
be really annoyed if I had to hand edit 161 files!)

[tlvp]

On Sun, 24 May 2015 15:06:57 -0400, Stan Brown wrote:

> Sorry for reopening a month-old thread ...

Please don't apologize -- I welcome all added input :-) . Cheers, -- tlvp