Line breaks in VF email templates

Question

I am running into this problem - if I am not using line breaks then sentence is getting too stretchy for the test users (In outlook) in full window mode. However, it adjust approprately when user compress the window which is desirable: Here is the example (too stretchy)

But If I use line breaks then when some of the test users see the same email in narrow screen then these line breaks are breaking sentences in weird fashion. For example: here I used the line break and its ok in full window:

But then it appear strange when somebody looks in small window:

But I also sent the test to my gmail and it appears ok without Line beraks. I thinking to go without line breaks in my VF/classic emails. What is the recommendation?

Thank you, M

Answer 1

This is subjective, but I would not use any line breaks at all (when you say "line break" in the context of a VF email, I think of the break row tag <br />, so correct me if that's not the case) and just use paragraph (<p>) tags to wrap text together. Then, if you have any text that absolutely needs a hard return before and/or after it, it similarly gets wrapped in <p> tags.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Velit ut tortor pretium viverra suspendisse potenti.</p>

<p>
    <strong>Important sentence with its own line (or paragraph, screen depending)</strong>
</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

Think about what your users can receive emails on: phones, tablets, tiny laptops, big desktop monitors, in a full-screen window, in a side column in Outlook. If you just use paragraphs, the text will flow naturally and fit the window that the user is currently looking at. If you open a long-winded email in your mail client right now and stretch it out, I would bet that the text will accommodate the full-width. Most people don't consider how long the lines are and they just type until their message is done.

There are some considerations to be made regarding the length of a line of text for readability (generally considered to be 50-60 characters per line) that many websites and marketing emails will take into account in their design. Take StackExchange for instance. When you look at this page most of the content is confined to a div that is no wider than 1100px. That is by design so that text doesn't trail all the way across a screen, unless the screen is sufficiently small like on a phone. There are a lot of great resources on typography and layouts you can find on this subject so I won't go into it any further here as it is outside the scope of this site.

Answer 2

Line breaks should be for paragraphs, not arbitrary breaks in sentence structure. You should not use line breaks for formatting purposes. The client that they are using is responsible for making reasonable line breaks. If you absolutely want to limit how wide the email is, you could wrap the entire text in a div with a maximum width:

<div style="display: inline-block; max-width: 70vw;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere ipsum 
velit, id fermentum dolor semper et. Proin nec eros arcu. Integer eu aliquam risus. 
Etiam felis nisi, feugiat in sapien et, mattis mattis urna. Nullam nec mattis lectus. 
Duis porttitor consectetur tincidunt. Donec congue finibus iaculis. Quisque facilisis ante 
in augue feugiat, quis venenatis enim pulvinar. Morbi at consequat lorem. Morbi fringilla 
sem sed molestie lacinia.
</div>

In this example, the text will be limited to 70% of the view width (vw). You could also specify a number of line heights (em) or even pixels (px). This is common in HTML-based email templates in order to avoid the text being "too stretchy." In any case, do not manually insert line breaks except when they make sense semantically.