05 Aug 2016

From Desktop to Mobile and Back in EverWeb

6 Comments Software, Tips and Tricks, Tutorials, Web Design

When you create a website in EverWeb you should always create pages for desktop/tablet devices and equivalent pages for mobile devices. It’s important to have a mobile presence as our phones are now the primary way in which we access the Internet.

Once you’ve developed your website, you’ll want to make it so that your website visitor will be automatically directed to the correct page style on whichever device they’re using at the time: your mobile website pages when using a mobile phone and the desktop website when using a desktop or tablet device.

Redirecting From Desktop To Mobile Websites

In EverWeb it’s easy to set up this automatic redirection within your Project file.

  1. You first need to tell EverWeb which pages in your Project are specifically for use on a mobile device. To do this, select your mobile page and go to the Page Inspector. Scroll down to the ‘Mobile Settings’ section. If the section is closed, click on the arrow symbol to the left of ‘Mobile Settings’ to expand it.
  2. Check that the drop down box for ‘Mobile Pages’ is set to ‘None’, then tick the box ‘This page is for mobile devices’. That’s all you need to do to set up your mobile page. Repeat this step for all of your ‘mobile’ type pages.
  3. Next, link the corresponding desktop page to the mobile page. For example, you may a ‘Contact’ page for desktop and one for mobile. You need to link the pages together so that when a visitor goes to the Contact page they get the right experience for the device they are using.
  4. in our scenario, to link the desktop page to the mobile page, you would go to the desktop version of the ‘Contact’ page. Scroll down to the Mobile settings section. This time, under ‘Mobile Page’ click on the drop down and choose one of the following options:
    • Select ‘One of My Pages’ if the mobile ‘Contact’ page is in the same Project file as the desktop page. When you select this option, select the page you want in the ‘Page’ dropdown that appears. In our case it is called ‘Mobile Contact Page’.
    • Select ‘External URL’ if the page you are linking to is in a separate Project file. If you are using this option remember to enter the full URL of the ‘Contact’ page you are linking to in the ‘URL’ box.
    • Remember that you should only select ‘None’ for a mobile page, not on a desktop page.

    Your desktop and mobile pages are now linked. Once you have completed this for all pages that have desktop and mobile counterparts, publish your website and test the redirection on different types of device. It’s good practice to test as you can see that the redirection works and that you have linked to the right corresponding page.

    Redirecting Back From Mobile To Desktop Websites

    There may be times where your visitor actually wants to use the desktop website in preference to the mobile website, when they are using a mobile device. It may be that there’s more detailed information available on the desktop website.
    If you have set up your redirection as outlined above, you will always go to the mobile website if on a mobile device. To stop this automatic redirection and force the use of the desktop website on a mobile device take the following steps…

    1. Add a piece of text or a button to your mobile website pages to act as a link to your desktop website e.g. a button labelled as ‘Go to Desktop Website’. You may just want to this only on the ‘Home’ page or on all of your mobile pages. The choice is yours.
    2. Once you have added the linking piece of text or button to your page(s), select it and go to the Hyperlinks Inspector. Enable the Hyperlink and then set the ‘Link To:’ drop down as ‘An External Page’.
    3. In the ‘URL’ box enter the full URL of the desktop web page you want to link to. It’s easier and more accurate if you cut and paste the desktop page’s URL from the browser’s search box in to the URL section in the Hyperlinks Inspector.
    4. Once you have the URL added, go to the end of the URL address and add in ‘?fullsite=true’ e.g. http://mywebsite.com/home-pagre.html?fullsite=true
    5. Once you have completed the Hyperlink, publish your website.
    6. On a mobile phone go to the mobile page with the redirection text or button. Click on the link to test that it redirects you to the desktop website.

    Your website is now complete and will direct your visitors to the mobile website automatically as needed with the option to override if needed!

    If you have a question about this blog article, let us know below! Thanks!