https://web4health.info/technical-documentation/Mobile-adjustment-of-the-Web4health-web-site.html

Redesigning a web page to be viewed in mobiles or other devices with a narrow window

Note 1:This document need to be seen with a browser with a vindow width of more than 740 pixels.

Note 2: Do not look at the HTML and CSS behind this page itself, this page does not at all follow the methods descriped here, not need it, since this page itself is to be seen with a wide screen and is not itself meant to be viewed on a mobile or other narrow-screen device.

Note 3: When printing this document, either:

If you print the HTML version of this document:

1. go to the "File" menu and choose "Print",
2. Click the "Options..." button.
3. Enable the option to "Print background colors and images" and print the document.

Or print the PDF version at
http://web4health.info/technical-documentation/Mobile-adjustment-of-the-Web4health-web-site.pdf, link at the PDF version of this document.

The web4health.info web site was originally made for users with stationary computers with large screens (screen window wider than about 740 pixels). But today, a majority of web users use mobile phones or other devices with screens with lower width. Such pages would force a mobile user with a narrow screen to scroll horizontally when viewing sthe page, which would not be nice for them.

The work of redesigning Web4health for smaller windows uses some separate CSS files:

These two codes can be used to suppress part of the html code. A combination of mobilenotshow in one part of a web page, and mobileonlyshow can be used to move some information to a different place in the web page.

When someone opens one of the home pages of web4health.info with a window wider than 741 pixels,
   mobilenotshow is set to "display:initial" and
   mobileonlyshow is set to "display:none".
When someone sees the same file with a window with a width of 740 pixels or less,
   mobilenotshow is set to "display:none" and
   mobileonlyshow is set to "display:initial".
This is achieved because different .css files are read when the user has a window size with a width of more or less than 740 pixels.

These classes are mainly used to have different versions of a section of information on wide and narrow windows. An example is the directory of links to different sections of web4health, on the web4health home page. This directory uses three columns on stationary screens, but only two columns on narow screens.

The class mobilenotshow is also used to not show at all some sections on mobile screens, since some less important and not necessary information, information which is shown on stationary computers, need not be shown, and cannot be shown, in acceptable ways on mobile screens.

These two classes are given their values in for example the file:
    web4health-homepage-stationary-v1.css
This file is activated olny for windows with windows wider than 740 pixels. For such windows, it sets:

.mobileonlyshow {
    display: none;
}
.mobilenotshow {
    display: initial;
}

.mobileonlyshow {
    display: initial;
}
.mobilenotshow {
    display: none;
}

<link media="only screen and (max-width: 739px)"
href="/web4health-homepage-responsive-v1.css"rel="stylesheet">
<link media="only screen and (min-width: 740px)"
href="wweb4health.info/web4health-homepage-stationary-v1.css" rel="stylesheet>"

To set the limit at 740 pixels may be rather high, but there are various kinds of display screens which are more or less wide and the user of a stationary computer may have chossen to open his web browser in a narrower windov than the actual width of the screen of the device used.

An alternative way of handling pages with much information, might be to put some information, which on wide windows are included in one page, into- several pages for mobile screens. I am not sure if I will use this method. If used, different variants of the built-in search engine of the web site need to be used, so that searching on a wide screen might show only one page while searching on a narrow screen might show several pages in search results.

Another adaption to narrow screens is that some texts, especially for headers, use a smaller font on mobile screens than on desktop screens. Also, clickable information may need to be more widely separated since clickning on a mobile screen is difficult with too close links, especially links in lists of information below each other, like the directory of links to different sections of web4health on the home page.

Continued when printed on the next page:

Example: of part of the web4health.info/en/
home page as shown on wide windows: