NEW! Preview Your EverWeb Site On a Phone or Tablet Before Publishing!

One of the simple, but amazing features of the recently released EverWeb 4.3 for macOS and Windows is the ability to preview your website directly on your mobile phone or tablet, using the new ‘Preview QR Code’ feature! It’s a great way to test out your EverWeb made website on any mobile device so that you know everything is correct before you publish it.

What you need to begin…
You’ll need to have the following to use the Preview QR Code feature:

1. EverWeb 4.3 for macOS or Microsoft Windows
2. A mobile device, either a phone or a tablet
3. A QR Code Reader app installed on your mobile device

Once you have met the three prerequisites, open your project in EverWeb and go to the page that you want to preview on a mobile device. Click on the Preview button in the Toolbar, then select the ‘Preview QR Code’ menu option. You’ll now see that a QR Code has been generated for you in popup window. With your mobile phone (or tablet), open its QR Code Reader app and scan the on screen QR Code. You’ll now see your page previewed on your phone!

Testing Fixed Width Web Page on a Mobile Device
EverWeb allows you to design web pages either using a fixed width page layout, such as the Centered Layout, or as a Responsive page layout which uses Responsive Web Design techniques. You can use the Preview QR Code feature on both page layout types. For fixed width page layouts, you will create separate web pages for Desktop and mobile devices, then link corresponding pages together, e.g. your Desktop Home page will be linked to your Mobile Home page. Using the Preview QR Code feature, you can easily check to see that your pages are correctly linked so that you only see mobile type pages on mobile devices and not their desktop counterparts.

Start by adding e.g. a desktop style Home page to your site, then create a corresponding Home page for use on Mobile devices. Usually using EverWeb’s Theme Templates will make this process easy to do. Once you have your pages designed, go to the Mobile Settings section of the Page Settings tab of the page you have designed for mobile. Choose ‘None’ from the ‘Mobile Page’ dropdown menu then check the option ‘This page is for mobile devices’ if it is not already checked. Next, go to the desktop Home page. In the Mobile Settings section, set the Mobile Page menu option to ‘One of My Pages’, then choose the corresponding mobile page from the list.

Now go to the Preview button in the Toolbar and select the Preview QR Code option. When you scan the code, you should see the mobile page displayed on your phone, and not the desktop page that you were on in EverWeb. This means that you have set up the page reduced from desktop to mobile correctly.

Testing Responsive Pages on a Mobile Device
When you preview a responsive page on a mobile device, the most obvious thing to do is to scroll up and down the page to check that they layout looks right. You’ll also want to test any links that you have on the page to make sure that they also work. The other thing you should also do during your testing is to swipe a bit left to right on the page. Does the page move when you do this? If it doesn’t ‘wiggle’ then you’ve designed your page properly! If you find that you get a large amount of space on the right side of the page coming in to view, then you’ll need to check your page design as it’s not correct.

The reason that you can get lots of white space appearing to the right of the page on a mobile device is that your page contains a fixed width object somewhere that is wider than the width of the page it’s being displayed upon. When designing your page, you may have added fixed width objects in to a Responsive Row widget. so make sure that any feed width objects are 320 pixels or less wide. This will ensure that these objects display properly even on narrow width mobile phones such as the iPhone mini and iPhone SE.

To change the width of a fixed width object, simply select the object in the Responsive Row widget, then go to the Metrics Inspector tab and set the width in the ‘Width’ field. Remember to check all of your fixed width objects on the page, as there may be more than one that needs its width fixing to resolve the problem.

Another potential issue that can cause this problem is that a full width object on the page has had its Full Width status in the Metrics Inspector unchecked. Full Width objects will automatically scale to the width of the page that they are being displayed upon. As such you should go through your page and select each object that you think is already full width to check its full width status against the ‘Full Width’ field in the Metrics Inspector. If you find that what you think is a full width object is unchecked, then recheck it.

Once you have checked the whole page through to correct its issues, use Preview QR Code again to recheck the page again!

The new Preview QR Code feature in EverWeb 4.3 make it easier than ever to test our your mobile pages directly on a mobile device!

if you have any questions about this article, please let us know in the Comments Section below!