A huge percentage of Internet users are viewing the web on mobile phones. Creating an EDM that can adapt to a tiny screen size requires a few extra steps. However, taking these steps has invaluable benefits in improving user experience and brand reliability.
Mobile-specific design
Jamming the same information presented on a computer screen onto a mobile screen is a user experience nightmare. Users shouldn't have to zoom in and out to consume digital content.
As much as possible, viewing digital content on mobile should be limited to one-dimensional scrolling (vertical or horizontal). In an EDM's case, vertical is the ideal.
The behavior of your EDM on mobile can be managed through the builder's built-in controls, designer awareness, and image editing tools.
Image Size
Dealing with images is probably where most issues arise in mobile view. The behavior of your EDM's images can be managed through file guidelines and the builder's built-in controls.
First things first - make sure that the image you're about to upload isn't too large.
EDMs are at most 600px wide so there's no need to upload an image with a width several times bigger. If image resolution is a concern, 1000px is enough to provide a sharp image for EDM. Although 600px is typically ideal.
The EDM builder has an image editing function that includes resizing. Nonetheless, it's more practical to upload an already size-optimized image.
Responsiveness Toggle
To have an image adjust automatically to a smaller screen, turn on the "Responsive image" toggle. This ensures that even if you have an image that exceeds a typical phone screen size, it will shrink down to fit in.
Note that when this toggle is turned on for one image, it has to be applied to others in the template as well.
ā
Hiding Blocks
Sometimes, hiding an entire structure is the best approach when creating a mobile version of the EDM. Hiding a block is useful when there's just too much content in the EDM for mobile viewing.
Design is function first, form second. Providing mobile users with a pleasant content viewing experience is more important than, say, overshadowing relevant content with a large header.
Hide a block, a structure, or even an entire stripe using the "Hide element" option and clicking on the appropriate icons.
Most of the time, though, you'd still want the section in your EDM, but have it use a smaller one for mobile. After all, it's not particularly pleasant to view a header-less EDM.
This "Hide element" function lets you do just that. Just stack the two blocks/structures vertically (see image below), then set them to hide where they should be appropriately hidden.
Overall, the steps needed to ascertain the mobile adaptability of your EDM are manageable. The current paradigm in designing for the web is "mobile first" after all.
