The 7 Elements of Great Mobile Design
Do you have a mobile audience? Yes, you do! Every day millions of emails are being opened on mobile. With mobile open rates well over 50%, it’s time to focus on how your emails look on mobile.
Mobile devices—particularly smartphones—have evolved to help humans be connected to each other and provide access to information at any time. In many ways, the main purpose of the mobile device is to help. It then stands that the main purpose of mobile-friendly design should be to help.
Content and design play equally important roles in helping users get the most from any communication served up on a mobile device. Let’s review the elements of great mobile design so you can bring a mobile-first design approach to your next email!
Width: Plan for 480px
The first consideration in mobile email design should be the screen width. Most responsive designs kick in when the screen width is 480px. This isn’t much real estate! Knowing the size will help you determine what is included in the design.
*Note: 480px is the width of most devices in landscape mode. 320px is the width in portrait mode.
Layout: Design for one column
Most email designs use two, three or even more columns. Mobile designs should transform to one-column designs for the best legibility at 480px wide and narrower. A responsive email with multiple columns of side by side content will generally stack left content above right content when the media query detects a mobile screen width.
Less is more: Be succinct
You’ll hear us mention this point often: Less is more. There’s no need to include a full-length article inside your emails. Link off to your website or blog for more information instead. That’s it! Additional considerations on mobile include shortening your preheader text and simplifying navigation and social links sections.
Type: Make it bigger
#1 rule for mobile typography: Fonts should be larger than your average desktop email. Mobile interface guidelines call for 17px paragraph font size with at least 22px font line-height. You may think that’s large on a mobile device but it’s far easier to read than a 14px font which tends to be the desktop norm. Be kind to your subscribers’ eyes.
Images: Optimize for small screens
Images should always be balanced with the text copy that accompanies it. Image width should be at least 480px for mobile (and wider of course if the image is being resized from desktop). Only use words in images if they are essential. In fact, in some cases this may require a completely separate image for mobile if the desktop version has more text throughout.
Generally speaking, individual image sizes should be kept to around 40K so that images load as quickly as possible on a mobile network or over wifi. The larger the image weight, the longer it will take to download and the more mobile data it uses.
Touch targets: Big and brief
Did you know the average adult human finger width converts to 45-60px? Touch targets such as buttons and links should be easily touchable with a human finger. Best practices call for touch targets to be at least 44px in height and width. We recommend at least 200x80px for buttons. Use brief, action-specific titles like “Read More”, and “Buy Tickets” to communicate that the button or link is interactive. Help users know exactly what will happen when a touch target is selected. This is especially important for your main call to action.
Whitespace: Let your email breathe
We saved the hallmark of beautiful design for last: Whitespace. With space at a premium, it’s tempting to reduce padding and try to fit in as much content as possible. Resist this urge. Make your email easy to read by adding adequate spacing between the sections of your email. We recommend at least 15px padding around all text and image areas. Your readers will thank you.
Mobile design resources
Bookmark these helpful mobile design resources for reference:
- iOS Human Interface Guidelines
- Android User Interface Guidelines
- Mobile and Tablet screen sizes
- W3C Mobile Web Best Practices
How to focus on mobile design in WordFly
You’re in good hands with WordFly: All starter email templates are designed with all of the above mentioned mobile design best practices in mind. Here are some more helpful Modern Editor features for designing on mobile:
- Mobile Style Toggle – Fine tune your mobile styles
- Mobile hide – Remove images, text area, or structural blocks just on mobile
- Columns: Reverse on mobile / Scale on mobile – Adjust how your columns display on mobile