Related terms

• Email marketing campaign
• Newsletter
• Template

WHAT IS ACRELIA NEWS?

Email marketing platform with everything you need to design, send campaigns, and perform upmost efficient tracking

Responsive design

Design that adapts to the device from which a webpage or email is accessed. Whether it's a computer, tablet, or smartphone, the same display is achieved using a single design instead of a different one for each screen resolution.

How does responsive design work?

Responsive design is flexible and automatically adjusts to the device that is opening the webpage or email. It uses percentages and proportional values so that a fixed screen width is not set, as it could lead to vertical or horizontal scrolling if the screen size is different from the one it was designed for.

Although a common translation of "responsive" is "adaptative," they are actually different concepts: the former uses a single design, while the latter designs content for each device (such as various computers with different operating systems and browsers) to adapt to their characteristics (screen size, resolution).

Responsive design contributes to providing a good user experience, ensuring that users stay on the page. Neglecting this aspect of content can lead to a decrease in conversions because it becomes more challenging for the user to take action, for example, if buttons are too small or if images don't display correctly.

How to create a responsive design?

All content management systems include responsive templates, as do email marketing providers. This is the simplest way to ensure that all users see the message correctly. Additionally, these templates are customizable, so the design won't be compromised when making changes to align with corporate branding or inserting the correct content.

To check if the design being used is responsive, you can simply test it by resizing your browser window: when the width is reduced, the structure and images should adjust to the new dimensions. Typically, the number of columns decreases, and the menu is condensed. You can also send a test to a test list to verify the template on various devices.

Responsive design works with Cascading Style Sheets (CSS). Within this code, maximum measurement tags (in pixels) should be included, for example, to set the base screen width for other devices to adapt. It's also important to ensure that fonts and images are not too small or too large, which is why relative values are used instead of absolute values (for example, 80% of the width instead of 1024 px).