Hi what is the typical size to design and build a custom email? Other questions
*** Using a Fix width 600px dimension?**
*** Can emails be responsive?**
*** How should I be mindful of other email clients? (obviously an particular email would not look the same everywhere)**
I have seen designs go up to 1200px.
I made a 1200px design but my team is suggesting 600px fixed in the center
Heres how it looks like (ignore dark gray blocks):
If you are not familiar with html emails then I suggest you download a free template from campaign monitor and use that as a basis for your design.
Html emails are horribly complex and even more complex these days with most users viewing emails on mobile rather than desktop.
I would keep the email as simple as possible and at a responsive max-width of 600px (not fixed width). You can make it larger if it is responsive but that generally just makes it harder to get a consistent design and most email clients show the email inside a side panel anyway so there isn’t usually that much room available.
Reverse engineer the campaign monitor templates to see all the hoops that you have to jump through and follow all their special coding. You may not understand any of it 
.
I’m assuming that you know to code html emails using old table tags and only inline css. The spacing and positioning is all done with table cells and not any css positioning at all. CSS is mostly used for colours and embellishments but the hard lifting is done by the tables themselves to position everything in the right place. Avoid multiple columns as you can’t reduce them to single columns in mobile due to various ios email bugs.
In the end it is better to choose a design from one of the tried and tested templates and substitute with your own content.
There are many articles about on coding html email and they all more or less say the same thing.
I gave up coding html emails a while ago as it was too time consuming even for the simplest design.
Hi there csosa,
as PaulOB has indicated, HTML emails are a can of worms. 
Instead, I would suggest that you just use plain text for the
email with a link - ( view in HTML ) - to your site.
coothead
Perfect answer from coothead 
we don’t play with HTML emails 
I am familiar with them, I have developed some in the past but I am just asking the questions…
I was reading a bit on mobile https://www.invisionapp.com/inside-design/quick-guide-designing-responsive-email
So would 600px be the max width on most mobile breakpoints?
No most mobiles will be much smaller than that. The majority are between 320px and 480px.
Most mobile email clients let the email go full width but desktop clients are usually in a panel of restricted with so there’s not much point going larger than 600px anyway.
Ok and I have also heard that some emails are developed scalable and fluid vs the responsive approach. Is responsive the best option? Particularly for since I have images, columns and tables. Thinking it may need to be both responsive and fluid.
So I can’t have multiple column of thumbnail images like above? lets say I make 600px width layout and I have a like a column of three thumbnails in one row, is that ok?
Can I see an example of that?
If I am understanding you correctly I would want the user to see the email right away and not have to
have clicks. Especially on mobile.
Mainly fluid as media queries most likely will not work in many desktop clients and as I mentioned you are talking about email panels that the application sits in and not whole browsers width. That’s why I mentioned using max-width and not a fixed width.
It all depends how you have placed them. If the images are just sitting inline, and can wrap to the next line then you can place them 3 across. If you use three table-cells to place them equally 3 across then in ios email clients you will not be able to re-organise them into a single column because Ios (email only) won’t turn display:table-cell into display:block for some unknown reason.
If you want them 3 across and they just get smaller 3 across for mobile then that should be ok.
The answer is it all depends
ah ok
Some devs I work with used Foundation for their framework
https://foundation.zurb.com/emails/docs/global.html#responsive-breakpoint
and it defaults to a 580px width, it has no mention of using a max-width. Is it still
a better practice to set a max-width? or did I miss something?
It uses a fixed width for desktop and then changes it with a media query for smaller devices (essentially mobile).
Mobile device email clients have better support for media queries than desktop so there probably is no issue on mobile.
The issue I would have with a fixed width is that a fixed 580px width email will not fit in the side panel of my email client (outlook) without maximising the application which is something I rarely do. A max width design on the other hand would fit easily no matter how wide I have my email client open.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
