E-mailcontent moet 600px breed zijn… Toch?

Is er een maximale breedte voor e-mailcontent? Vanuit het verleden is de adviesbreedte altijd 600px geweest. Tegenwoordig zijn schermresoluties over het algemeen hoger dan ‘in het verleden’. Betekent dit automatisch dat daarom ook de e-mailcontent breder gemaakt kan worden? Mijn advies is en blijft wat mij betreft, gewoon 600px. Waarom? Ik leg het onderstaand uit en geef graag een aantal argumenten om over na te denken.

Hogere resolutie is bredere e-mailcontent?

Het klopt inderdaad dat de schermresolutie voor een desktop computer de laatste jaren omhoog is gegaan. Maar dat betekent niet dat al die extra ruimte ter beschikking komt van het e-mail leesvenster. De meeste e-mailclients hebben zowel links als rechts naast het leesvenster een kolom voor bijvoorbeeld navigatie, postvakken, advertenties, chatfuncties en dergelijke. Die kolommen worden ook steeds breder. Gmail bijvoorbeeld heeft links een kolom van 235 pixels en rechts één van 295px. Er gaat dus minstens 530px van de schermbreedte af. Op een scherm van 1280px breed is er dan nog 750px over. Ruimte genoeg zou je zeggen.

Maar toch, volgens actuele statistieken gebruikt nog steeds 20 procent van de internetgebruikers een beeldscherm met een resolutie tussen de 640 en 1152 pixels breed. Zo heeft maar liefst 13 procent de resolutie ingesteld op 1024px breed*.

Het browservenster is schaalbaar

Daarnaast is het niet als vanzelfsprekend dat altijd het volledige beeldscherm wordt gebruikt voor het browservenster. Zo is het bijvoorbeeld niet heel ongewoon wanneer het browservenster door de gebruiker kleiner wordt gemaakt omdat hij daarnaast ook nog ander programma’s in het zicht wil hebben staan.

Leesvenster breedte Outlook

In een programma als Outlook zullen veel gebruikers met een wide-screen hun leesvenster rechts in plaats van onder het postvak hebben staan. Hoewel die ruimte door de gebruiker gemakkelijk groter of kleiner kan worden gemaakt zal die vaak niet veel groter zijn dan 600 á 700px.

Ook een blog op de website van Email on acid geeft argumenten om de breedte te beperken:
Outlook.com won’t display images that are too wide. Don’t get stuck with Outlook.com’s ‘WIDE LOAD’ sticker. If your email exceeds the reader’s browser window width minus 370px, your email will get cut off along the right side and a yellow box will appear saying the following: “This message is too wide to fit your screen. Show full message…”In general, it’s best to keep your email under 630px wide. This would presume that your average user will have their browser window sized to at least 1000px wide.

Optimaliseren voor mobiel

Dat e-mail door veel abonnees wordt gelezen op een mobiele telefoon is nog een reden waarom ik zou adviseren de content niet breder te maken dan 600px. Er zijn in principe twee manieren om content mobile-proof te maken:

1. Gebaseerd op Fluid design (en Media queries)
2. Alleen gebaseerd op Media queries

Wanneer  e-mailcontent is gebaseerd op Fluid design dan is deze ook schaalbaar op telefoons welke geen Media queries ondersteunen. Twee kolommen naast elkaar komen daarbij netjes onder elkaar te staan. Stel dat je content veel breder is dan 600px dan betekent dat ze nog steeds te breed zijn om netjes in het scherm te passen. Ook al komen de kolommen onder elkaar te staan.

Wanneer de schaalbaarheid van de content alleen is gebaseerd op Media queries zal die niet schalen wanneer Media queries niet worden ondersteund. In dat geval moet de gebruiker zoomen. Want hoe breder de content, hoe verder de lezer moet schalen en des te kleiner de content wordt om in het scherm te passen.

E-mail op een tablet

Naast een mobiele telefoon of een desktop wordt e-mail ook op een tablet geopend. De resolutie van een tablet scherm is veel lager dan die van de meeste desktop schermen. De app “Mail” van Apple heeft op de iPad II een leesvenster van 650px breed (landscape). De Gmail app op de iPad heeft een 660px ruimte. Daarom zou de e-mailcontent zelf niet breder moeten zijn dan 600 á 620px. Temeer omdat de meeste e-maildesigns een border of achtergrondkleur gebruiken. En dan is het een stuk netter als er links en rechts naast de content nog voldoende ruimte vrij is.

Samengevat

Kort samengevat: het is naar mijn mening goed om nog steeds de richtlijn van 600px breed aan te houden want:

• 20 procent van de internetgebruikers heeft een scherm met een resolutie van 1152px of lager.
• Browservensters zijn schaalbaar en zullen niet per definitie het volledige beeldscherm vullen.
• Binnen verschillende e-mailclients (zoals Outlook) kunnen leesvensters in breedte worden aangepast.
• Wanneer je de content mobile compatible maakt is +/- 600px de ideale breedte.