What to consider when building a mobile design

Building a mobile version of an online publication or magazine can be a great way to expand your reach and ensure an optimal reading experience on all devices. However, there are a few things to keep in mind when designing a mobile version of your publication in Maglr:

Take mobile in to consideration when designing desktop (and not after)

Obviously, a smart phone and desktop computer have different screen sizes. Therefore, it's challenging (and virtually impossible) to use the exact same design on both devices. Maglr is a "desktop-first" platform, meaning it's best to first set up your desktop design before moving on to mobile. While sketching out your design, try to design with mobile in mind. It's great to have large elements that pop off large screens, though how will you incorporate that for your mobile design? Mobile screens are much smaller and you will need to think thoroughly about how to fit in your information.

Easily use desktop elements and assets into your mobile design

The desktop and mobile editor may seem similar, though there's a small difference to make your life easier. Due to the platform's desktop first approach, the mobile editor view will provide you with an extra panel that contains all layers and assets that you have used in your desktop design. Dragging an item from this panel onto the canvas is a quick and easy way to incorporate the same elements from your desktop design into your mobile design. All styles on the element remain in tact.

Mobile reading and interaction is different

Smart phones and tablets offer a different experience than computer users and your design should reflect that. Although elements and assets can be easily copied from desktop, that does not mean that they are suitable. Be sure to revise your animations and interactions, and assess whether they are optimised for various devices. Take into consideration the smaller screen size, touch interaction and accessibility best practices.

Changes to your mobile design do not overwrite desktop design

Maglr is a desktop-first design platform. Any changes you make to elements in the mobile editor view will not overwrite your desktop design.

Change the height of your canvas as your design grows (or shrinks)

You'll find that you may need more space when creating your mobile design. Not to worry, simply drag down the canvas to make it longer (or shorter) or go to the page settings to set the height of the page in pixels.

Updated on: 24/10/2024