Device Driven Design (Mobile, Tablet and Desktop Devices)

Device Driven Design (Mobile, Tablet and Desktop Devices)

Overview

Amaze takes a device-specific approach to design. Rather than create one design that responds to different screen sizes, you have to create separate designs tailored for mobile, tablet and desktop. When a visitor lands on your Amaze page, a script checks to see if the visitor is using a mobile, tablet or desktop, then serves the correct design for the device. This approach gives you greater control over the content, layout and experience for each device. The main benefit is that you can create and deliver the best user experience according to whichever device someone is using.

Managing Devices

When a new project is created, canvases for all three devices - mobile, tablet, and desktop -  are included by default.  Devices are displayed in the left panel above the Layers list.  To access a device's canvas, click on the device name.  

Deleting devices

Deleting empty device layouts will keep visitors from accessing blank or unfinished pages. To delete a device: 
  1. In the panel on the left, Ctrl+click or right-click the device that you want to delete, and then click Delete Device from the menu.
  2. The deleted device will be grayed out in the left panel.

      Mobile-on-desktop view

      Before you delete a device from your project, make sure to take the following outcomes into consideration: 
  1. When you delete a device canvas, it is removed immediately from the project and your work cannot be recovered. If you decide to add the device back to the project, it will be blank.
  2. When you delete a mobile or tablet device, anyone viewing your page from one of those devices will be redirected to a 404 page. To provide the best experience, we recommend specifying a redirect url to send visitors to instead. This can be done in Project Settings. More on that below. 
  3. When you have a mobile layout and delete the desktop canvas, anyone viewing your page from a desktop will be served a desktop view of the mobile version like the example below. Again, you can choose to redirect desktop visitors to a different url altogether by specifying a desktop redirect url in Project Settings. 


Device redirects

When you delete a tablet or mobile device from your project, visitors to your page from that device get redirected to a 404 page. To provide the best experience, we recommend specifying a redirect url to send visitors to instead. You can specify redirect url’s for devices not included in your design on the General tab in Project Settings.
  1. Click the gear icon on the left side of the Asset Bar to open Project Settings
  2. On the General tab, scroll down until you see the Device Redirects section
  3. Enter a redirect url (https://www.website.com) for the missing device, click Save, then republish your project
  4. Anyone visiting your page from that device will be redirected to the url you entered

Adding devices

You can add a blank device back to your project that was previously deleted. To add a device click the + button that appears to the right of the disabled device at the top of the left panel.


    • Related Articles

    • Are Famous sites limited to mobile devices?

      Question: Are Famous pages mobile-only? Answer: Famous Pro works best for creating single-page mobile websites. If you want your Famous site to work across mobile, desktop, and tablet, you will need to create a separate design for each.  ...

    • How Does Responsive Design work in Amaze?

      Overview Amaze can be used to create responsive designs. Responsive designs automatically adjust as the size of the viewport (the space where your Amaze page is displayed - the Live Preview window or on an actual device) changes.  Responsive Amaze ...

    • Device Redirect to Shopify Storefront

      Question: If my Famous page is designed only for mobile devices, are desktop users automatically routed to my regular Shopify Storefront, or do I have to redirect desktop traffic explicitly? Answer:  If you want visitors on specific devices, such as ...

    • Mobile Live Preview

      Mobile Live Preview You can view edits to your mobile design in real time on your mobile device's browser. Live Preview links and QR codes are regenerated every 24 hours.  To preview your design on a mobile device: Click the QR Code icon in the asset ...

    • System Compatibility

      Overview: We designed The Amaze Design Tool to run in a web browser on a desktop computer. We test on the lasted version of MacOS and the lasted version of Windows, but the application is known to work on various Linux distributions. Published ...