EverWeb Codebox logo

EverWeb Widgetbox 3


How To Create Three Versions Of The Website On One Project File

Project File Setup

The screenshot to the right shows the structure of the TriSite Example website.
The site name is "trisite-example". This can be change to anything else.
The first - and only top level page - is the one which contains the resirect code to the three versions of the site depending on the visitors device type.
This page is name "main-redirect". The name really doesn't matter since EverWeb will change this name to "index" anyway.

Three directories are created for the "full-site", "tablet" and "phone" versions of the website.
Inside each directory the pages are created. Note that the pages of each site have the same names. This is important!

Page & Directory File Names
It should be pointed out that - no matter what the user enters for these names - EverWeb will convert them to all lower case with hyphens instead of spaces. This is how it should be.
Make sure all the directory & page names are entered correctly as these same names will be used to set up the redirects.
Here's an example of how NOT to do it …
If a page name is entered as "My Life Story", EverWeb will export this as "my-life-story".
When the redirects are created, and the user enters the page name as "My Life Story", the browser will convert this to "My%20Life%20Story". This will obviously not work.

TriSite Page Layout

Creating The Redirects

Main Redirects

The "main-redirect" page in the example above is exported by EverWeb as the index.html file which resides in the website's root folder on the server.
When a visitor enter "domain-name.com" into the browser, they will land on this page which is completely blank appart from the redirect code. This will direct them to the home page of the version of the site which is appropriate to the device type they are using.
The screenshot to the right shows the widget settings for the Redirect Widget placed on that page.
The box next to "Main Redirect Page" is checked.
The page name - which in this case is "home" - is entered.
The directory name for each version of the site is then entered into the appropriate box.

This works fine for the situation where a visitor enters "http://domain-name.com" to go to the site.
Suppose a vistor happened to be on the site using their home computer and bookmarked a page. Then they decided to revisit it on their iPhone while waiting in line at the doughnut shop. They would land on the fullsite version of the page and get mad because they can't actually see anything without zooming in.
In another scenario, the visitor uses a search engine to find info and they arrive at the listing for your page. If this is the page to the smart phone version - and they are using a computer - once again, they will get the wrong version.
To avoid this, redirects need to be added to each page of the site which will direct the user to one of the other versions if the one they have the URL for is not appropriate for their device type.

Redirect Widget
Redirect Widget

Directory Redirects

Setting up all these redirects can be time consuming if the site has a doen pages. The widget will help to speed this up.
The screenshot to the right shows the widget settings when the Redirect Widget is dragged onto the "home" page of the full version of the site.
The "Full site" box is checked, the page name entered and also the various directory folder names.
Copy this widget and paste it into the tablet version's "home" page, uncheck the box next to "Full site" and check the one next to "Tablet".
Do the same for the smart phone "home" page.
Open the "home" page of the full site, copy the widget and paste it to the other full site pages. On each page, change only the page name.
Go to the tablet version's "home" page, copy the widget and paste it to all the other pages in that directory - changing the page name on each one.
Do the same for the smart phone version.

Demo Project File

The "redirectWidget" folder contains a copy of the widget and a project file.
This project file can be opened in EverWeb to see how the site is laid out and how the widgets are set up for each page.
The demo has the optimum content widths set up for each device type.
NOTE: In most cases, it would be beneficial to set up a master page for each version of the site with the header, navigation and footer.