Easily Link Mobile and Desktop Pages in Your Fixed Width EverWeb Made Website

Building a website in EverWeb is an easy and fun experience! Of course, there may be some challenges along the way but usually if you prepared well before starting to build your website, you’ll have less issues down the line.

When using EverWeb, one of the first things that you do is to choose the type of website that you want to create. Your site can include fixed width pages, responsive pages and even a combination of both if it’s needed. The choice is yours and you can always change your mind later on if you want to. If your’re new to these concepts and terms then read on…

First time EverWeb users usually start by creating a fixed width website. As its name implies, in this scenario the width of your site’s pages are of a fixed width, being measured in pixels. As the page width is fixed, you will usually need to create two versions of every page you’re going to create. For example, you will want to build a home page that can be viewed on a desktop type screen. This type of page usually has a width about 980 – 1000 pixels. You’ll also need to build a second version of the Home page, this time for use on mobile phones. This is needed as the width of a mobile phone page is going to be a lot smaller than that of a desktop page. For a Home page to be properly viewed on a mobile phone, your page width will usually be around 320 pixels wide.

The reason for creating a fixed width website is that it is easy. You just drag and drop text, images, shapes and widgets on to the free form canvas in EverWeb, then position these objects wherever you like. Building a responsive website takes a different mindset requiring you to be more structured rather than free-form in your design approach.

Once you have created the two versions of your fixed width page, you’ll then need to link them together. When your site’s published, your visitors will only see the desktop page when viewing your site on a desktop device, and a mobile style page when viewing your site on a mobile phone.

…but what about Responsive Pages?
If you’ve already done some research in to website building you’ll undoubtedly have come across responsive website design. This is a very popular way of building a website as the pages you build in your site automatically adjust to fit the page width of the device it’s being viewed upon. The upside of responsive design is that you only have one design to maintain and you know that, when done correctly, your page will always fit whatever device it’s displayed upon.

The downside, however, is that this method has a longer, steeper learning curve. So, if you’re new to website building, we recommend that you use a fixed width page layout to start with. You can then learn EverWeb at the same time. Once you are comfortable, you can later convert your fixed width site to a responsive one if you want.

Getting Started with a Fixed Width Design
The first thing you will need to do is to create your website project in EverWeb:

1. Launch EverWeb from its icon.
2. The first screen you’ll see is the Projects Window. Click on the ‘Create a new website’ button.
3. You’ll now see a list of themes running down the left hand side. There are over 150 to choose from.
4. As we’re going to create a fixed width page for our site, click first on the dropdown menu in the top left hand corner of the screen. You’ll see a list menu options All, Fixed Width Responsive and New. Click on Fixed Width. This will filter the list of themes that are displayed to only fixed width ones.
5. Scroll the list and click on the theme you want.
6. On right hand side of the screen you’ll see each page of the theme. Most Fixed Width themes will have desktop pages and one mobile page included in their theme. Click on the page you want to add to your website project then click on Select.

In this example, I could scroll down and select the ‘Briefcase’ theme in the left hand column, then click on the Home page in the right hand side of the screen before clicking on ‘Select’. In my example I now have my desktop Home page in my website project. The next thing I want to do is to add a Mobile page to my site, so this time, click on the Add Page button in the Toolbar. EverWeb will show the ‘Briefcase’ theme again as it’s the last theme we chose in this session. Easy! Click on the ‘Mobile’ page then click on Select. You now have two pages in your site. Double click on the label ‘Mobile’ in left hand column, which is the Web Page List. Change the name of the page by adding a space then Home at the end of the name. Press enter and you will see the name of the mobile page change to ‘Mobile Home’.

Linking the Two Fixed Width Pages Together
Now that you have your two Home pages, you can design then as you want. Once you have finished the designs of both of these pages:

1. Return to the Desktop Home page by clicking on the Home page name in the Web Page List.
2. Click on the Page Settings button in the Inspector Window, if the Page Settings are not visible.
3. Scroll down until you reach the Mobile Settings section. If the section is closed, click on the triangle to the left of ‘Mobile Settings’ to open the section.
4. The first dropdown menu in this section, ‘Mobile Page’ should be set to ‘One of My Pages’.
5. Next click on the second dropdown and select your Mobile Home page.
6. Once you have done this, click on the Mobile Home page in the Web Page List to select it.
7. Again go to the Mobile Settings section of the Page Settings tab in the Inspector Window.
8. This time check the option ‘This page is for mobile devices’ if it is not already checked.

You’ve now set up the link between your desktop and mobile Home pages so that the correct page will display on the correct type of device!

Publish your site and test the pages on a desktop computer and on a mobile phone.

If you enjoyed this blog please let us know. If you have any comments or would like us to blog on a subject of your choice, again please let us know in the Comments Section below.