How to create mobile adaptive-responsive landing pages with Pagewiz
Your visitors are in for a satisfying user experience when trying to access your landing page from a mobile device: Pagewiz lets you create a unique mobile version by simply duplicating your desktop page and adjusting it to the mobile screen width with a few simple drag & drop actions.
This solution lets advertisers A/B Test mobile and desktop versions separately, while sharing the same URL.
Our unique technology serves the right version to your visitors by monitoring the device they use. Furthermore, mobile pages are served without any redirection, resulting in significantly faster loading time. This, in turn, can lead to higher conversion rates.
To set up a mobile version of your landing page:
- Create a duplicate version of your desktop landing page:
- Set your page width to 540px (the recommended width for mobile pages) in ‘Page settings’ -> ‘Size & Direction’, as seen in this picture:
- Drag and re-size all the page elements to fit within the page boundaries.
You have just created your mobile optimized landing page with the same look as your desktop version! But wait, we’re not done yet.
The next step is to connect the two versions (mobile & desktop). This way Pagewiz can serve the right version to your visitors, by monitoring the device they use to access them.
The mobile version displays on mobile devices, and the desktop version serves visitors using a desktop computer. For example:
Here’s how the desktop version will look: http://p1.pagewiz.net/mobile-launch
Here’s how the mobile version will look: http://p1.pagewiz.net/mobile_mobile
To connect a mobile version, go to the desktop landing page settings and do the following:
- Click 'Mobile', located on the left menu bar.
- Click 'Connect your Mobile Design'.
- Choose the mobile-optimized landing page you created earlier.
That’s it! You have successfully connected your mobile version. and now your site's landing page is responsive:
A visitor using a mobile device trying to access the desktop URL will be automatically served the mobile version while desktop users will still see the default (desktop) page. In other words:
Your responsive landing page URL (Mobile & Desktop) = desktop landing page URL.
Note:
- the statistics gathered by the mobile version can be viewed from within the mobile page itself. A mobile page can still be accessed separately (even after connecting it to a desktop version landing page), meaning it keeps its own URL for direct browsing in addition to its role as the mobile version of the desktop landing page.
- Test your mobile landing page from a mobile device to make sure it is working.
- To disconnect / change a mobile version simply enter the desktop version, click ‘Mobile Version’ from the left menu -> click Disconnect/Change.
Follow these 6 helpful tips to leverage your creative process: