Here’s a common problem with marketing emails that I see all the time. This happens not only with small business owners who manage their own email campaigns, but also with bigger companies where the email marketing manager has simply never been taught. The problem is that when the recipient opens the email, the main messages area doesn’t fit the space. Instead of just being able to vertically scroll and read as they go, the user only sees part of the message, with the rest cut off. Some users may figure out that they can scroll right and left to read, but others may not be that tech-savvy.
Either way, it’s inconvenient to have to do a special horizontal scroll just to read an email. And it breaks the flow of concentration, which is already a problem when we’re using our smart phones on the go. So if you’re sending emails that your subscribers aren’t able to easily read without extra effort, what should you do? Simple. Fix the problem. Below, find out how to stop your marketing emails from growing too big to fit the space.
Fix Emails That Don’t Fit the Screen
- Why Your Emails Don’t Fit the Screen
- How to Fix Emails that Don’t Fit the Screen
- How to Add Images to an HTML Based Email
- A Better Way to Resize Images in an Email
- Image Size in an Email
- Other Image Settings to Help With Your Email Marketing
Why Your Emails Don’t Fit the Screen
The sole reason your emails are showing up outside the desired space where emails normally appear on your device screen is that the images are too big. Sure, images add color and punch to your emails while helping to tell the story. But if you do include images in your emails you really must be sure those images are formatted correctly, so that they show up clearly when the message is opened.
How to Fix Emails that Don’t Fit the Screen
The quickest way to fix emails that don’t fit the screen is to resize the images. This can be done in several ways. Ideally, you’d want to resize the images and upload/save them to your hosting server before adding them to the email. But if you’re in a hurry to get a message out, then you can simply resize them by editing the width of the image right in the HTML code of the email.
How to Add Images to an HTML based Email
You’ve probably added an image to an email before if you’ve been asked to send a marketing email, or if you do this for your small business. But in case you don’t know how, or have been doing it wrong, I’ll give you instructions. Here’s the process, step by step.
- Type the email message.
- Position the cursor where you’d like the image to appear.
- Click the IMAGE icon in your WYSIWYG HTML editor.
- Follow the prompts to upload the image.
- Click the image properties, and change the image width to 300px or less.
- Close the properties dialog box. The image should now appear in the email without going outside of the message borders.
A Better Way to Resize Images in an Email
Images that have been reduced in size are better to publish on your website or share in emails. Yes, you can resize an image by changing the width directly in HTML, as described in the prior series of steps. But a better way to reduce the size of your images is to edit them in an image editing program before uploading the new, smaller version of the file to your web server.
How to do it:
- Open the image file in your image editing program, such as Photoshop, Microsoft Image Editor, GIMP, or Paint.
- Resize the image by editing the width, making sure the image scales proportionately (you may have to check a box first).
- Save the image using a descriptive name + the width – so let’s say the file is called dog. Name it dog-300. Then save the file as a .jpg image which is a condensed, non-editable format.
- Upload the edited image to your web hosting server.
- Add the image to your email like you normally would, choosing the new file.
Image Size in an Email
What Happens if You Only Edit an Image in HTML but Keep the Original Image the Same Size?
If you choose to not reduce the size of an image before adding it to an email, this could cause problems. Let’s say it’s a larger image file that you took with your smart phone and then uploaded.
- If the file is high resolution and a large size, it’s going to take much longer to load.
- A large file also takes up more space on your web server.
- A large file may not render properly in the email, even if you’ve scaled it to a reduced width.
- A large file that is also an editable format, such as a .png file, poses a security risk.
Other Image Settings to Help With Your Email Marketing
In addition to adding images to an email that are sized corretly, there are other image properties that you can tinker with when setting up an email to send.
Change the image alignment.
To do this, use the HTML editor. Click on the image, then open up the image properties dialogue box. Change the image’s alignment to default (no alignment), left, right or center. The image will shift position relative to surrounding text. If you don’t care for how it looks, you can edit the alignment or return to the prior alignment setting.
Make the image clickable, and link it to a page on your site.
- To do this, click on image properties and visit the URL area. Copy the link to a page of your site that you’d like readers to click on.
- Open a new browser window and navigate to the page. Position your curser in the top window.
- Highlight the link text, then hit control-C to copy it.
- Go back to the image properties. Position your curser in the link or URL area, then click control-V to paste in the link.
- Select “open in a new window” so that your readers won’t lose the original email message if they click the link.
Outsource Email Marketing
Outsourcing your email marketing to an expert can be a great way to get your time back while increasing exposure for your company. The more often you connect with subscribers, the more you’re likely to increase profits in your business.
Want a quote on email marketing? Contact us by filling out the form on this page. We’ll reply within 2 business days.