https://webprog3.com/purpose,newtab

https://webprog3.com/builds,newtab

https://webprog3.com/latest,newtab

https://webprog3.com/mini-help,newtab

https://webprog3.com/help,newtab

Purpose...
Builds...
Latest Build...
Mini-Help...
Full Help...
PC- and Printer viewport-friendly web pages
If the widgets your page contains naturally occupy the entire width of the screen at one point at least, then your page is ready for friendification directly. By this, I mean that one widget or more touches the point 1920 px (but not more) on the right hand side.
If not, then there is a very quick and simple task to be carried out. Suppose you have a page like this:
As it stands, the widgets on your page naturally occupy a width of 1200 pixels. In fact, you have TWO options.
If you intend to display this page on screens of less than 1920 pixels in width, but also on screens of at least 1200 pixels, you could leave this page exactly as it is. Displaying it would simply cut off a chunk on the right hand side, but that wouldn't matter at all because the chunk would be empty.
The other option is to friendify it so that whatever size of screen it is displayed on would demagnify it proportionally. The appearance would be the same, but smaller. In practice, this is the option you would normally choose, since you don't need to worry about the size of the destination screen at all. Before SAVING with the FRIENDLY option, do this one little thing:
Create a new "dummy" 80x80-pixel text widget, and place it on the extreme right hand side of the screen in the 1840 position on the grid, as shown. The scrollbar might cover the right hand side of it, but the fact that it is 80 pixels wide ensures that it touches the 1920 pixel mark, and no further. It is important to do this accurately.
After creating the dummy text widget, double-click on it to edit, and make its CANVAS TRANSPARENT. It will then be invisible.
NOW, FIRST AND FOREMOST, SAVE THE PAGE IN STANDARD MODE AND KEEP IT IN A SAFE PLACE.
THIS IS FOR ADDED SECURITY, AND IS CURRENTLY STILL RECOMMENDED, though with the latest version of webProg3, it is no longer crucial.
You are now ready to save your PC-friendly version, so click on the Save button again.
The sequence of dialogues is as follows:
"Friendly" means that a page uses flexible VW (Viewport Width) units instead of fixed pixels so that it can automatically adjust itself to whatever size of screen it is displayed on. The previous item in this HELP has shown you how such flexible pages can be produced for use on mobile devices, no matter what their size. This very same output option can also be used to produce "friendly" pages which adapt themselves to different PC screens and printer ports. HOWEVER, there is one small but crucial difference in the preparation of PC-FRIENDLY pages: THE WIDGETS THEY CONTAIN NEED TO OCCUPY THE ENTIRE WIDTH OF THE EDITING SCREEN IN SOME WAY, not just a small portion of the screen width on the left hand side which is demanded for portable devices.
We are making a "PC Friendly" page using the "Mobile Friendly" option in a slightly different way, so go ahead and click on "OK".
Choose whatever value you like for a margin at the bottom of your page.
If the page exceeds the height of the screen, I usually type in "240" here. Otherwise, leave it at "0".
For PC-Friendly pages, this option must be left at "0".
(This is for Mobile-Friendly pages only.)
There's your PC-Friendly output script with VW units instead of pixels.
Hack it if you need to, but always bear in mind that hacking can make it incompatible for sugsequent upload into webProg3. That depends on the kind of hacking, of course.
Finally, choose an appropriate file name for your script, and save it to the computer.
Now here's a little bit of good news. Previously, PC-friendly scripts could not be uploaded directly into webProg3 for re-editing. For that reason it was essential to keep the Standard versions under lock and key so the they could be edited if necessary and saved again in Friendly mode. While it is still a good idea to save and keep the Standard versions as a matter of security, the fact is that webProg3 is now able to upload PC-Friendly scripts directly. It still only "understands" Standard scripts, but the previously separate Utility App "Defriendify" has been embedded in it. You can see details of this in section 19 of this HELP: "WebProg3 2025".
However, different to PC-Friendly scripts, true Mobile-Friendly scripts are impossible to defriendify, and for that reason their corresponding Standard scripts need to be kept in case re-editing is required.
PRINTER VIEWPORT-FRIENDLY SCRIPTS
For discussion of Printer Viewport-Friendly scripts, see the "Javascript/JQuery Tools & Tips" section.
Here, it suffices to say that in general, the preparation of such pages follows exactly the procedure described above for PC-Friendly scripts, with one significant difference:
The letters need to be BIG, like this!
A picture is worth 1000 words, so here's a screenshot of the firendly version of this very page that I am preparing now, in PRINT PREVIEW: