The ultimate guide to mobile projects in Readymag

Under the hood of Mobile Auto-Layout

In addition to a desktop viewport, Readymag offers a mobile and a tablet viewport. If you don’t switch on the mobile viewport for your Readymag project and look at this project on a mobile device, you will still see the desktop layout—it will be scaled to the width of the screen (both in landscape and portrait orientation).

If you switch on the mobile viewport, you will get a Mobile Auto-Layout — an automatically created draft, in which all widgets are arranged in a single column with a 20-pixel gap between each.

Widgets wider than 280 pixels are resized and set to 280 pixels wide, so that the gap between them and the left and right page margins is 20 pixels (the width of the mobile viewport is 320 pixels).

The size of mobile widgets with a desktop width less than 280 pixels will remain unchanged; these widgets align to the left, so that the gap between them and the left edge of the viewport is also 20 pixels.

Please note, that this formatting simply aims to minimize the effort of rearranging content. Placing widgets one by one, we free you from redundant work, yet you need to elaborate on the final look of your project.

Composition tips & tricks for mobile

“Visual contrast and rhythm are very important, but mobile screens don’t offer much space, so the possibilities for creating visual contrast are quite limited”, says Readymag Product Designer Stas Aki. Don’t hesitate to recompose your project substantially — the smaller width of mobile screens and their proportions call for their own unique approach to composition.

“Let’s take our editorial about Charles and Ray Eames as an example. In the desktop, headlines appear in a very big font with animation applied. In the mobile version, I left the headline large but rotated, so that it spanned the whole screen, stretching past the bottom edge. That’s a very simple stunt, yet catchy. When you see only part of the headline, you intuitively begin scrolling down to see the rest of it”, Stas adds. The same trick is used in his editorials iPencil and Shrtcts.

Beating cliches is always a good idea. In mobile, text and images are traditionally placed in one column — but there’s nothing preventing you from using more. Take for instance Readymag Stories’ installment about Anton Ioukhnovets.

Things to be cautious about

Synchronization between layouts

The content and most properties of widgets are synchronized between desktop and mobile layouts. When you change the content of a widget in either layout, the change is repeated across both.

Yet, some widget properties can be set differently. Positioning, size, opacity, animation settings, image cropping, as well as font, font size, and text line spacing can all be manipulated independently.

Sometimes, you may need to change the content of a mobile widget — for instance, to syllabify words in a different way, add extra hyphens to a text, or assign different graphics for desktop and mobile. In this case, we recommend you hide (but not delete) the mobile widgets synchronized with the desktop and create new, independent ones for mobile. They will appear as hidden in the desktop layout.

You can always reset the Mobile Auto-Layout by using the restore panel.

Please note that the Scalable Layout viewer mode is unavailable in mobile, it works only for desktop.

Animation in mobile widgets

Readymag maintains two types of animation in mobile: On Click and On Load. When you activate the Mobile Viewport, all widgets animated in desktop mode will appear static. You can set On Click and On Load animation for mobile widgets from scratch or use Shift+Cmd+C/V to copy animation attributes from desktop widgets to mobile.

Performance of mobile projects

We recommend you avoid complex animations in mobile projects. Firstly, due to the lower power of smartphone processors and mobile internet. Secondly, because of the circumstances in which people view mobile projects: usually, along with looking at a project on your smartphone, you do something else, hastily scrolling down. “I think that any kind of on load mobile animation breaks the smooth viewing flow and irritates people”, Stas Aki adds.

Large images also thwart the performance of mobile projects. “We recommend you optimize pictures with the free service TinyPNG — it compresses images without affecting their quality”, Readymag support manager Yana Yukhalova says.

Testing your mobile

To test how your project looks on various screens, open the console in Google Chrome (Ctrl+Shift+J for Windows / Linux or Cmd+Opt+J for Mac) and choose the tab with a mobile phone and tablet icon. You’ll find a range of simulators. We also recommend BrowserStack — a paid service, though it has a free trial period. But of course, the best solution is to have several devices on hand so that you can directly test how your project looks on their screens.

Do not hesitate to address your questions regarding mobile projects in Readymag to our support team at support@readymag.com.

*According to Statista portal, in 2018, 52.2 percent of all website traffic worldwide was generated through smartphones.