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 😉]

On 30/07/2019 11:38, Helmut Richter wrote:

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>

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!

--
Helmut Richter

--

With over 999 million devices now running Windows 10, customer satisfaction is higher than any previous version of windows.