Wondered how your web page looks in different browsers before your page goes live?
This has been always a pain point for content authors, because each browser displays the content differently. With Contribute CS5, we address this issue by providing ‘Compare Page Display’ option. So, when a user creates a web page or edits it, and, before he publishes the page, he can click the Compare Page Display button. Contribute displays the web page in three of the most popular browsers – IE, Firefox and Webkit (which is the core of Safari and Google Chrome). Now, the user can compare the web page display side-by-side in all the 3 browsers, and make changes, if necessary.
To use the Compare Page Display functionality -
1. Browse to a web page in your web site which you want to edit.
2. Click Edit Page button to edit the web page.
3. Make changes to your web page.
4. Click the Compare Page Display button in the tool bar.
Click ‘Close’ button, to exit Compare Page Display view and make necessary changes to the draft.
There are two options available with Compare Page Display -
One can compare the draft by publishing it to a temporary folder in your server. In this case, your draft will be published to a temporary folder in your server, and you will be able to click the links in your page. (Yes, you can compare those web pages that are linked to your web page, as well.) If, you see that some change is necessary in any of the linked pages, you can click the Edit Page button, to edit that web page. This option can be used, when you want to compare web pages that are linked to the web page you are comparing.
The other option is comparing the draft locally. With this option, the draft is not published to the web server; the comparison is done with the local draft. You will not be able to click the links in your web page. This option can be used, when you are working offline or your website connection is disabled, and, you want to compare only the web page you are editing.
These settings can be changed in Contribute‘s Preferences dialog.
Although you can scroll individually in each browser, you can use the Sync Scroll bar to scroll simultaneously in all the 3 browsers.
Note: In CS5, this feature has been implemented only for the Windows platform.
Video demo for Compare Page Display