Web browsers & the WebSite X5 browser

Further information >

Web browsers & the WebSite X5 browser

Previous pageReturn to chapter overviewNext page
Show/Hide hidden text

A Browser is a program that lets users display and interact with the information (text, images, etc.) in a web page. The most widely-used browsers are Microsoft Explorer®, Firefox®, Safari® and Google Chrome™.

Browsers use a rendering engine to display web contents. A rendering engine is a program that downloads contents (an HTML page, for example) and formats the information on it (associated CSSs, for example) and shows them on the screen. Browsers use many different rendering engines, and these differ for the rendering quality, with respect to the standards, and speed. So, pages may appear differently according to which browser displays them. However, as a web page is not printed, a certain margin of difference is acceptable, if the user's experience is not damaged by this.

The best way to obtain web pages that are compatible with the main browsers, in their various versions, is to create a clean code that adheres to standards.

WebSite X5 automatically generates HTML5 code with associated CSS 2.1 or 3, and guarantees full compatibility with all the main browsers and mobile devices, such as mobile phones, tablets and smartphones.

Click to expand/collapseWebSite X5's built-in browser

When you are working on a project, you need to be able to check the final result and how the website will be displayed once it has been published. To do this, WebSite X5 provides a Preview button, that is always available (see The work environment), which gives you a preview of the website on your computer. It is constantly updated (see Update Preview while editing the Project in the Preferences window).

To display the preview, WebSite X5 uses its built-in browser, based on Chromium (http://www.chromium.org/), the open source browser that gives its name to Google Chrome™. This browser has the following commands:

Back

Return to the last page visited.

Next

Go forward to a previously-visited page.

Home Page

Go to the website's Home page.

Address bar

This shows the path of the page on display and/or lets you enter the path of the page you want to display. You just need to click on the SEND button to confirm the inserted address.

Edit this Page

This goes back to the Program, opening the page displayed as a preview by the browser in the Page Creation window, so it can be edited. If the page is part of the Blog, the Members' Area or the Shopping Cart, this button takes you back to the relative section in Step 1 - Website Settings | Advanced.

Device Buttons

Device Buttons are available only if the Responsive Website option is active. They are displayed according to the number of breakpoints you set for the Project: for example, if you set 4 breakpoints or more, the Desktop, Smartphone and Tablet buttons are displayed, the latter showing a sub-menu for all the intermediate breakpoints.

By clicking on a Device Button, the window where the page contents are displayed is automatically resized according to the corresponding resolution. At the default settings, the Desktop Button is active, and the contents adapt to the Preview window width, using all the available space.

Show object display order

This function is available only if the Responsive WebSite option is active. The number set for the Object during the Display Order procedure is superimposed on the Page contents.

Mobile Preview

This opens a window that displays a QR Code and a URL address. When you have connected your mobile device to the PC, you can either scan the QR Code or go to the URL to display a preview of the website and check its behavior.

Preview the WebSite on another Browser

You can Preview the site using one of the Browsers installed on your computer. By clicking on the arrow placed next to the button, a drop-down menu is displayed, where you can choose among the reported Browsers. Finally, the Browser of your choice is saved as favourite and it will be used as default Browser until a new choice is made.

You can activate the Responsive Website with the Responsive Site option available in the Resolutions and Responsive Design window. If the Responsive Website option is active, a Resolutions Bar is displayed in the WebSite X5 ’s built-in Browser. This bar shows the active breakpoints for the Project.

When the browser window is open to show the preview of the page you are working on, the page that is displayed changes automatically according to the page displayed in the main browser window.

Using a built-in browser to display a preview of the website under construction has the following advantages:

the preview does not replace the website page  displayed in the browser window;
the preview of the website under construction is updated in the built-in browser's window and new windows in the default browser are not opened.