E-Shot like this, difficult??

Soldato
Joined
4 Apr 2004
Posts
5,626
Location
Pontypridd
Been asked by a client to create an e-shot for their company. As my main field of work is graphic design / print, I'm in need of a little help. I've had a look and it seems the easiest thing would be to just be to use each link as an image

something like this?

E-shot.png


Is what I'm doing correct?

All images will be stored on our server, I'm just wondering what's the best way to build this? Dreamweaver or the like?

Any advice would be great

ps. the sizes can change not sure what the maximum width is for an e-shot. Thanks
 
Around 600px wide. If you're storeing images just make sure you've got enough bandwidth. To create it use HTMl & CSS from 10 years ago. All tables & inline CSS, no <div> or <p> tags etc.
 
the easiest thing
That's an unprofessional and irresponsible way of thinking. You need to be thinking about what's best for your client, not what causes you the least hassle.

would be to just be to use each link as an image
Easiest? Yes, probably. Most effective? Almost certainly not. Here's a link that hints at why:

http://www.campaignmonitor.com/blog/post/3574/image-blocking-in-email-clients-2011/

something like this? [IMG = wireframe]
That's a sensible layout for an untargeted e-shot.

However, email marketing is much more effective if you specifically target segments of your mailing list with different, focussed emails. But that's more for your client to know and work at, really, rather than you. I just thought it worth mentioning.

I'm just wondering what's the best way to build this? Dreamweaver or the like?
Nope, not if you can help it. Far better to hand-code it. Once you've got the design to your liking and approved, build up the basic layout in HTML using nested tables, and use inline CSS styles to match your design. And even when designing, try and think in terms of tables.

Doing it this way will minimize the inevitable rendering issues you're going to encounter across email/webmail platforms [but even then, be prepared for a world of unpleasant surprises from the likes of Outlook and GMail].

not sure what the maximum width is for an e-shot. Thanks
The narrower the better, essentially.

600px is often bandied around as the accepted standard, but I've found that some webmail platforms' display/preview windows are narrower than that, once you take into account other navigation/admin/advert columns. And you've also got to consider the small screens of mobile devices, which are being used to receive emails more than ever.

So I'd go for 540px as an absolute maximum width, and try to get it down to 500px. That being the case, I'd also look at having your secondary product grid go from 3x3 to 4 rows of 2 columns to better utilise that narrower format.

Hope that helps.
 
Last edited:
Thanks for thank simisker, when I said easiest maybe I should have choose my words better. The client in question forwarded a few e-shots from major uk etailers and they seem to do it this way. (so maybe popular / effective may have been better)

I've had a little looking into coding it, but I have't used html/css for what must be 10 years, so I'm basically starting from scratch. I was hoping to find a more design based platform than coding.

It's not a big problem, it was more of a favour to the client, they wanted a more "professional" looking e-shot and their current designers aren't really giving them that.
Sure I can design it, but they would end up paying us both, so I was hoping it was maybe something I could cover myself. I'll have a little play over the weekend, and see what I can do.

Thanks again
 
Layout wise it's fairly straight forward - create a three columned table and colspan (ie: colspan = 3) the first three rows. Then, as mentioned, use inline CSS to style the table/rows/cells.
Just make sure adequate bandwidth is available for the images.
 
Nah, some platforms have issues with colspans [though possibly not the simple sort that would be used in this layout, admittedly].

It'd be best to get into the practice of thinking about email layout in terms of nesting tables, as that's more robust and reliable cross-platform.
 
Back
Top Bottom