In addition to the default Desktop layout, you can enable Tablet and/or Mobile layouts for your pages. Check this comprehensive tutorial that covers all the stages of building such layouts:
To enable the Mobile or Tablet layout, click the Devices icon in the left dock of the Editor window, then add the layout you want to work on.
Remember that your widget content is synced across different layouts, but some attributes can be edited separately. You can read more about that here. To check how your widget looks in the desktop layout when editing it on mobile, use the Keyhole feature—which can be found in the left dock of the mobile and tablet layout.
- Activate the mobile layout.
- Copy all of your widgets and give specific titles to those that will be used only for the mobile layout (for example, by adding mob to their titles).
- Hide the widgets that will only be used on the desktop layout by clicking on the Eye icon next to them.
Mobile layout
Building your website's mobile layout in Readymag is a highly adaptable process that offers a range of automation methods and algorithms for you to choose from based on your specific requirements.
Once you add Mobile from the Devices panel, you’ll see a new canvas with the left dock opened. This dock houses features that make tailoring your projects to mobile devices effortless—you'll find them in the 'Arrange widgets' menu.
Single column
When you activate the mobile layout, it recreates the sizes, attributes, and positioning of all your widgets exactly like in the desktop layout.
To quickly rearrange all your widgets, simply click the Single column button to resize and position them in a single column to fit within the mobile frame.
You can manually move and resize all your widgets, or adjust margins and line spacing within the Single column interface. If you make changes to these values, simply readjust them and click 'Single column' again.
You’ll notice that the toggle ‘Keep desktop groups’ is enabled by default. With this option active, widget groups on the desktop also act as groups in the mobile layout, so that the widgets stick together and are placed next to each other inside the frame.
Desktop layout
To create a mobile layout from scratch, simply click on ‘Desktop layout’ under ‘Arrange widgets’. This will automatically replicate the sizes and positioning of all your widgets, just like in the desktop layout.
From there, you can move, resize, and adjust your widgets as necessary to fit within the grey frame that represents the borders of your mobile layout. If you ever need to start over, you can easily cancel all changes by clicking on 'Desktop layout' in the left dock. This will restore your widgets to their original positioning, sizes, and attributes, just like in the desktop version.
Arrange for individual widgets
You have the option to use automation not only for the entire mobile layout but also for individual widgets, thanks to the Arrange feature found in their attributes.
To access this feature, simply select at least two widgets by holding down the Shift key and clicking on them. The Arrange option will appear in their attributes, allowing you to rearrange only the selected widgets without affecting the rest of your layout.
- Desktop layout. This option recreates the initial proportions of your desktop layout, which you can then adjust manually to achieve the desired look for your mobile layout.
- Fit to mobile. Widgets will maintain their positions just like in the desktop version but will be resized to fit the width of the mobile layout.
- Single column. This option works the same as described above: it rearranges the widgets one after another, positioning them in a single column. It also allows you to set margins and line spacing, as well as decide whether or not you want to keep widgets grouped together, just like in the desktop version.
Mobile layout on different devices
To see how your project looks on different devices, enter Preview mode and use the toggle at the top of your screen. As of now, these types of devices are available to preview:
- iPhone SE (vertical and horizontal)
- iPhone 11 Pro/X
- Google Pixel 2 XL
- Samsung Galaxy S20
You can also preview your project for tablets (in case you haven’t activated the Tablet version separately).
The sizes of displayed layouts may differ from real devices, but the proportions are the same.
Layouts on different screens
If you create desktop (1024 px), tablet (768 px), and mobile (320 px) layouts of the same page the one closest to the actual screen width of the particular device will be displayed. When rotating a mobile device from portrait to landscape view the desktop or tablet (if it exists) version will be shown.