SoftwareTips and TricksTutorialsWeb Design

From Desktop to Mobile and Back in EverWeb

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!

You may also like

6 Comments

  1. I have created Mobile version for a phone but I do not understand how to redirect to an IPad version – IPad is different from and IPhone…it is a bit of a mystery to me…:)

    1. Hi Yelena
      Usually the desktop version of your website will be sufficient for most needs. Desktop versions usually hold up well on tablets. It’s worth considering some of the design aspects of your desktop website so that they accommodate touch and mouse users. If you really want to have a tablet version then the best option would be to use one of Roddy’s widget packs (see http://everwebcodebox.com/widgetbox3/touch/widgets.html for more info) that is specifically designed for a ‘Trisite’ scenario.

      1. Thank you, Simon, but my question is really about redirecting….if I am redirecting to a mobile site it is created with a smart phone in mind… How can one redirect to a tablet?

    2. Hi Yelena, Thanks for the reply… yes, to get the redirect you’ll need to code for it… have a look at what Roddy’s done as he explains how to do it… http://everwebcodebox.com/trisite/tablet/redirect-t.html Hope that helps… I guess it’s also good to suggest this is included as a default option in the EverWeb forums too 😉

  2. I have a 900 page width for my desktop pages.
    I use 480 for mobile.
    Is it possible to get an Everweb page (900) to reduce proportunately to a 480 page.
    Would be much easier than creating a new seperate page for each desktop page.
    Thanks

    1. Hi Neville

      Thanks for the comment! At the moment you will need to use two pages, one for desktop/tablet and one for mobile. There are pros and cons to using this approach and to responsive design which would use one page for all devices. I believe that responsive design of pages is an important goal for EverWeb so let’s hope for an update on this in the future!

      Thanks!

Leave a reply

Your email address will not be published. Required fields are marked *

More in Software