smartphone-friendly web pages

[Helmut Richter]

I am author and administrator to two web sites, both of them so small (=so few
pages) that I minimize the effort. In particular, I am not running a
full-fledged CMS which would take care of some problems but at the price of
large complexity elsewhere.

Most of my web pages are not smartphone-friendly, that is, they are hard to
read when the screen size is small. For some of them, I put up with it because
not every information can be chopped into tiny pieces that fit on a small
screen. For those, I will do the minimum necessary along the lines of
https://perishablepress.com/the-5-minute-css-mobile-makeover/ . Thats CSS
only.

For those web pages where a more thorough redesign is appropriate, I have two
questions:

1. Choice of URL depending on media type or screen width

Up to now, I have only found ways to *select* a style-sheet depending on
media type or screen width, or of branching *within* a style sheet. In
both cases, there is only one HTML source file. Sometimes, however, it
would be easier to have two different URLs for two thoroughly different
designs of a page. Some sites do that, e.g. de.wikipedia.org which
immediately switches to de.m.wikipedia.org if called from a mobile phone.
Of course, when there is an elaborate CMS in the background, one can do
everything. But can that be done with standard means, i.e. HTML, CSS, and,
if necessary, redirection in .htaccess? (The obvious work-around is a link
in each page "Do you prefer the other design?").

2. The (sub-)menu icon

Instead of a large table of contents, one has to scatter mini-menus
everywhere. These mini-menus should be invisible with an icon saying "Here is
a menu if you touch this button". The usual shape is a square with rounded
corners and three horizontal bars in the middle. Is there a standard way to
produce this icon on the screen? I will do the graphics myself only if forced
to.

--
Helmut Richter

[😉 Good Guy 😉]

Post by Helmut Richter
1. Choice of URL depending on media type or screen width
Up to now, I have only found ways to *select* a style-sheet depending on
media type or screen width, or of branching *within* a style sheet. In
both cases, there is only one HTML source file. Sometimes, however, it
would be easier to have two different URLs for two thoroughly different
designs of a page. Some sites do that, e.g. de.wikipedia.org which
immediately switches to de.m.wikipedia.org if called from a mobile phone.
Of course, when there is an elaborate CMS in the background, one can do
everything. But can that be done with standard means, i.e. HTML, CSS, and,
if necessary, redirection in .htaccess? (The obvious work-around is a link
in each page "Do you prefer the other design?").

Media Queries is one way but your webpage must be HTML5 Standards
compliant and all the classes and IDs are properly set on the page.

<https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries>

Post by Helmut Richter
2. The (sub-)menu icon
Instead of a large table of contents, one has to scatter mini-menus
everywhere. These mini-menus should be invisible with an icon saying "Here is
a menu if you touch this button". The usual shape is a square with rounded
corners and three horizontal bars in the middle. Is there a standard way to
produce this icon on the screen? I will do the graphics myself only if forced
to.

You are talking about about "Hamburger Icon". One way is to use
bootstrap type icons as shown in this example:

<https://getbootstrap.com/docs/3.3/examples/navbar/>

Minimise the page and you'll see the icon appear on top-right corner in
the Navbar. This can be adapted anywhere on the page with some trickery!

[ alt-no ] <Loading Image...>

Post by Helmut Richter
--
Helmut Richter