How to design customer communication that works on mobile, desktop and PDF

“Mobile first” is a common and often effective approach. It typically leads to more concise and readable content. However, there’s a major pitfall: To optimize for mobile, certain content elements are often hidden or removed from the HTML view. If these hidden elements are legally relevant or part of something the customer is expected to sign, it creates risk.

Tip:

• Avoid hiding important content in HTML that will later appear in a PDF. Customers must be able to access the complete agreement before signing.
• Use collapsible elements (accordions) or similar UX techniques that help with mobile navigation while still displaying all content.

When HTML content is converted to PDF – for example, as part of a digital signature process – the content must remain consistent. Users should never be surprised to see information in the signed PDF that wasn’t shown on their mobile screen.

Solution:

• Use a single content source (e.g., JSON or a template tool) and render the same content in both HTML and PDF.
• Test across different screen sizes and always verify the final PDF version.

Some teams try to create precise layout arrangements in PDFs using static positioning. This approach rarely translates well to mobile screens, where content naturally stacks vertically due to limited width.

Consequence:

• On mobile, elements that logically belong together may end up far apart, causing confusion.
• Poor user experience due to broken visual context.

Recommendation:

• Use flexible layout systems (e.g., CSS flex or grid in HTML, and equivalent in your PDF rendering engine).
• Focus on semantic structure rather than rigid visual placement.

A common mistake is using the same font size across all devices. On mobile, the screen is smaller, so content needs to be easily readable without zooming – while still fitting enough text on screen.

Balance:

• Too small: hard to read.
• Too large: excessive scrolling and poor space use.

Best practice:

• Use rem/em-based scaling in HTML so fonts adjust to screen size.
• Define separate styles for PDFs to ensure print-friendly readability (usually 10–11 pt for body text, 14–16 pt for headings).

Great customer communication is about more than design – it's about trust and clarity. When customers interact with content across devices, the experience must be seamless, and the information consistent – no matter where or how it is viewed. By thinking holistically, designing compactly, and avoiding rigid layouts, you’ll save time, avoid legal issues, and offer a far better user experience.

Organizations using Centerpoint report:

• 90% faster updates to templates, letters, and forms
• Dramatic reduction in IT involvement
• Faster rollouts – from weeks to hours
• Full compliance with WCAG, PDF/UA, DORA, and internal policies
• Better engagement through personalized, timely communication

Modern organizations treat communication as a core system – not a byproduct.

Here’s what leading teams are doing differently:

• Invest in communication as infrastructure
• Start small, scale fast with modular platforms
• Empower business teams to own content and logic
• Design for compliance and accessibility from the start

Explore how Centerpoint can help your organization deliver better customer experiences – faster, safer, and more consistently.