Page 28 of 28Next

Smartphone Web browser customization

Some extra information can be added to your website to allow display customization of some web browser elements when visiting your site. These options can be added to your site from the following screen : "Options > Smartphone" in TOWeb V7 (and "File > Your website" in TOWeb V6).

Web browser status bar color on smartphones

Some browsers may recognize and use a custom color defined for the display of their elements if the version of the mobile platform supports it too. This is the case with the Google Chrome browser and web browsers offered by default in Android devices but also with Windows Phone devices. By using and adding this option to your site, you allow Internet users to view your site better suited to your theme, as shown in the example below with a screenshot before and after using a custom color.

Android Internet browser changes

The above screenshots were made by a Samsung Galaxy S6 with Android 6.01 (Marshmallow) and the web browser provided by default. The way custom color is used (or not) to color certain elements depends on web browsers, their versions and the version of the platform supporting (or not) such option.
If you want to reuse a color already prsent in the theme of your site, you need to proceed as follows: from step "Theme" click on the original element and then on its color button. Once the "Colors" window is opened you can select and make a copy of its "color code" to the clipboard and then reuse this code with a paste. Finally, if you do not want to use any of custom color simply leave (or reselect) the "Auto" color.
On the iOS platform with the Safari browser there are 3 possible display choices : the normal default display of a web page in Safari, the display with a status bar using a black background and the status bar display using transparency. For these 2 last option to work, it is necessary to have saved your site URL not among the favorites of your iPhone / iPad but as an icon on your home screen by using the "Share" (  ) "Add to Home screen" (  ) and then open your site directly from this icon (given that the icon to be used will be your favicon or the iOS icon defined for your site).


A favicon is an icon symbolizing your website. Web browsers can use a favicon in their address bar, bookmarks, tabs and other shortcuts pointing to any page of your site. It is therefore strongly advised to add one on your site to allow users to better store your image (for example the logo of your company/organization) and better identify it later when they want to come back to visit your site. This icon must be a 32x32 pixels image and preferably in a PNG or ICO format

Metro, iOS & Android icon

This icon in PNG format is similar to the favicon but of greater size. It is primarily used by Apple products (including iPhone and iPad) and the latest web browsers of Microsoft (such as Edge on Windows 10 and Internet Explorer on Windows 8).

Smartphone-specific rules

The operating rules applicable only to mobile and touch devices are available from version 7 of TOWeb and accessible from the "Options> Smartphone" screen.

Parallax effects

The parallax effects are not always supported or even incompatible with some smartphones and tablets (mainly older models), therefore TOWeb allows you to disable them on these touch devices for all pages of your site.

Full screen height

The full height option often forces you to only put very few information on the screen so that everything can also be seen on low-resolution devices such as smartphones. If you notice that in some low resolution screens all the content is not visible when using the full height option then you will have to disable it on smartphones by adjusting the minimum size below which this effect will be applied (default is 480px).

Force the navigation of your site in landscape mode

Some elements of your pages may need to have a minimum screen width to be presented in the most pleasant and/or readable way possible (like for instance some data tables or reduced size images that are too small to see the details you want to show). If this is the case for some pages of your site, then it may be desirable to activate the display of an animation indicating your visitors to switch their smartphone landscape mode (ie horizontally) when it uses it in portrait mode (ie vertically).

Paragraph animations

Depending on the performance of some smartphones,  the paragraph animations can cause significant slowdowns in the display and/or a less pleasant navigation for these users. Therefore, it is recommended to disable all paragraph animations throughout your site.

Phone numbers and Links

On your site you can add SMS links and links to make phone calls so that visitors of your site can directly reach you with a simple click from their smartphone during their visit. The visibility option "mobile only" or "always visible" can then be applied to your links according to your needs.
If you choose to display links or phone buttons also for devices that can not make calls (such as a computer) then these links will be inactive but their content will be displayed. In such a case, it may be desirable to also correctly label your phone number in the text of your link / button rather than just a "Contact me" message to make your number visible to all.
Finally you have the possibility to deactivate at any time all the phone links of your site from the only option "Disable automatic phone number linking" located in the screen "Options > Smartphone" of TOWeb (from version 7 and above).