As from build 3.386 of webProg3, you may optionally create mobile-friendly web pages if you wish. This means that the pages you create will show correctly on any mobile device, no matter what its make or size.

Essentially, a mobile device is different to a desktop or laptop computer. The normal usage of a portable device such as a smartphone is with the display in portrait mode, simply because it is easier to hold it in your hand that way. The very opposite is true of desktop computers: none of them have screens which are higher than they are wide! A desktop screen is naturally in landscape mode! Also, you have much more screen space to use on a desktop. If you try to display a page made for desktop on a smartphone, it would not be appropriate at all. Amongst other things, the letters of the texts would probably be far too small to read. In short, web pages made for desktop computers are incompatible with those made for portable devices, and vice-versa.

In order to overcome the incompatabilities between portable and non-portable devices described above, web programmers have invented what they call "responsive" web pages. As the dimensions of the screens change, they move stuff around on the page to make it display decently. It's all very clever, and it's extremely difficult to do! In my personal opinion, it is too complex to be practical most of the time!

The view I have taken with WP3 is different. A desktop page is not a portable page. A portable page is not a desktop page. You either design for one or the other. If you have used the previous version of WP3 (build 3.383), you will already be familiar with the production of web pages for desktop computers. It remains here to show you how to deploy the "friendly" (meaning "portable friendly") option if you so wish.

First of all, take a look at THIS portable-friendly web page, using your desktop computer. The images are enormous for example, and it occupies the full width of the screen. But it wasn't designed like that. Here's how it was designed:

As you can see, the widgets were created on the left-hand side of the WP3 grid, and a lot of space was left on the right. The images are relatively small (only 400 pixels wide). This means that you can create a very long page if you wish, without creating an output HTML file that consists of a zillion bytes!

When you come to do this yourself, the width occupied by the widgets on the LH side of the grid can be whatever you find convenient, but the considerations are these:

1) If the pictures are too small, they will not have sufficient resolution when they are expanded, and they will not display clearly.

2) If the pictures are too big, they will display clearly, but you will create an output HTML file which is gigantic. This will slow page loading time and will have the tendency to overtax the resources of the browser used to display it.

Note also that the text size is somewhat bigger than you would use for display on a desktop computer. When displayed on a portable device, the text size will be reduced, and if you are not careful it will become difficult or impossible to read. Old codgers like me, with failing eyesight, can often have terrible trouble reading stuff designed by younger folks. So PLEASE choose a font size which is good for everybody! It's better that it should be bigger than necessary rather than smaller than necessary!

In the simple example given above, the pictures are 400px wide, as are the texts. The maximum horizontal space occupied by the widgets is 800px.

When you save your web page, and you choose the "Make Mobile Friendly" option, WP3 calculates the position of the rightmost edge of the rightmost widget. Whatever is on the left of it is then becomes the filling of the mobile viewport (i.e. the screen).

Although it is not shown in the example above, if you require a margin on the left of the widgets, all you have to do is to position them with a left of xx pixels instead of 0 pixels. This left-hand margin is then automatically included in the viewport (mobile screen) display.

If on the other hand you require a margin on the right, you can specify the width of it (in pixels) when you save your file. This right-hand margin then becomes included in the viewport width.

Instructions for previewing and/or saving WP3 files are given elsewhere in this HELP.

However, in build 3.386, two additional alerts will appear:

SAVING YOUR MOBILE-FRIENDLY FILE

No problem answering that I hope!

(The "Cancel" option will give you a non-friendly output web page, i.e. a page to be displayed on a computer.)

As described above, this is where you can extend the width of the resulting mobile viewport with a margin on the right-hand side. If you don't want a margin here, just leave it at 0.

(The value you give in pixels will be converted into viewport units.)

Before actually saving your webpage file, you might well decide to Preview it.

The sequence is exactly the same as for saving, except that at the end you will be shown the proposed page in an iframe instead of being presented with a "SaveAs" dialogue to save it on your computer. And what you will see in the iframe (browser substitute) is your web page with a viewport setting of 1920 pixels in width! In other words, it will be BIG. Don't worry about this. When you open the page on a mobile device, it will be exactly as it should be.

IMPORTANT NOTE

I wish I didn't have to write this. When you are doing a preview in WP3, you might well be tempted to re-size the browser in order to see better how it would appear on mobile. I suggest you resist this temptation! It might well work OK on a number of occasions, and then suddenly and unexpectedly, the browser might freeze, and if you have not been saving your work previously, you will lose all the work you have done. This is obviously a Firefox bug because it should never happen.

If you want a quick idea of how your portable-friendly web page will look when it is reduced in size, save it to disk first. Then open up the file in Firefox and re-size the browser window. You will observe that the page contents are reduced in size or magnified according the size of the browser window. Here is an example where the Firefox window has been reduced as much as possible:

If you wish to preview the performance of your web page on various portable devices, do it like this.

If you haven't done it already, save your "mobile friendly" file from WP3 to the disk on your computer.

Then, open it up in Firefox and go to the "Web Developer" menu:

From there, choose "Web Console":

On the right-hand side of the menu bar that appears at the bottom, click on the little icon (shown by the red arrow) which says "Responsive Design Mode" when you move the mouse cursor over it:

You will then be able to see simulations of what your web page should look like on various devices.

In the example below, you will see that I have chosen to see the web page's performance on an iPad:

And this is what it would look like on a Samsung Galaxy:

Of course, on a real portable device, the scrollbars would not appear. Scrolling is done by swiping up and down.

MOBILE FRIENDLY FILE FORMAT

SAVE YOUR FILE IN STANDARD FORMAT AS WELL!

It is always a good idea to save your file in standard (i.e. non-mobile-friendly) format as well as in mobile-friendly format.

This is because in WP3 version 3.386, files in mobile-friendly format cannot be uploaded for the purpose of modification and/or extension.

However, such upload compatibility is hardly necessary. It takes but a few seconds to save your file in standard format as well as in m-friendly format. You can then upload the standard file, modify it as you wish, and save it as m-friendly again.

As from version 3.386, The standard header of a webProg3 output file now includes a "viewport statement", regardless of whether it is mobile friendly or not:

However, a mobile-friendly file differs from a standard one in the following ways.

1) Images are no longer enclosed in DIVs:

2) Pixels are now converted into "vw units":

Unlike pixels, which are fixed in size, the vw-unit is flexible. A single vw-unit (1vw) has a size which is 1% of the width of the mobile device's viewport (i.e. the screen width). It therefore varies according to the width of the screen in use. That's why your webProg3 mobile-friendly web pages will show correctly on any device whatsoever.

This mobile-friendly update increases the power and versatility of webprog3 quite considerably I believe, and in a way which is quite simple. In sum, all you have to do is design your web page on the left-hand side of the screen, and save it using the mobile option, followed by a second save in standard mode for later modification if required.

Here's hoping you manage to do some good work with this new extension!

For some useful tips on the production of websites using the WP3 mobile-friendly extension, please re-visit the webprog3 website using a portable device such as a smartphone. You will then be re-directed to the new Mobile Section.