The ultimate guide to mobile

Currently, mobile makes up half of all global web pages served*. So, to present your ideas effectively online, a good mobile project is as important as the desktop one. In this piece, we summarize how to work with mobile in Readymag.

General flow: Desktop layout and Single column

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 website and view it 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).

When you switch on the mobile viewport, you can choose between two automated options to create a general mobile layout:

Single column resizes widgets to fit into the mobile viewport and positions them in a column, one after the other. Auto-arrangement into a single column doesn’t apply to fixed widgets and widgets with on-all-pages positioning.

Desktop layout recreates the positioning and sizes of all of the widgets just like in the desktop version, but does so within the gray frame, which represents the borders of your mobile layout.

Working with individual widgets

When you select at least two widgets in the mobile layout of your website, Arrange controls appear in their attributes on the right side of your screen. When you work with them, you can adjust the chosen widgets without the risk of damaging the rest of the mobile layout. If the selected widgets have regular positioning, there are three option buttons.

Desktop composition: this will recreate the initial proportions and positioning of the widgets in the Desktop layout.

Fit Desktop to Mobile: this will keep the widgets in the same positions as in the Desktop layout, but will resize them to fit the width of the mobile layout.

Single column: this will rearrange the widgets one after another and position them in a vertical column. In this panel, you can set margins and line spacing, as well as decide if you want to keep widgets grouped together like on the desktop.

If you select widgets that include one with a fixed position, you can opt for Desktop composition.

Automated mobile layout arrangements don’t apply if at least one of the widgets that you select has the on all pages and above all widgets positioning. This was done to prevent the overall composition of the mobile layout from breaking.

Learn more about mobile versions of websites in Readymag.

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 website 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 websites

We recommend you avoid complex animations in mobile. Firstly, due to the lower power of smartphone processors and mobile internet. Secondly, because of the circumstances in which people view mobile websites: usually, along with looking at 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 websites. “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 work 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 website looks on their screens.

Do not hesitate to address your questions regarding mobile websites in Readymag to our support team at [email protected].

*According to Statista portal, as of March 2023, 58.43% of all website traffic comes from people using mobile devices.