from image to pixel perfect html emails
TRANSCRIPT
From image to pixel-perfect HTML email
… in minutes!
Powered by InstaCut.eu
Goal
Convince you that converting an image into an HTML + CSS email is a piece of cake …
… even for the numerous platforms, browsers and mail clients!
Why
• HTML + CSS email is simple, but … did you know– scaling a 1 px gif is fine, unless you scale it larger than 62.5
px?– a table cannot be longer than 23.7 inches or 1790 px for
older Outlook versions?– 600 px is the max width for the Gmail app on IOS?– Outlook 2013 doesn’t like images smaller than 15 px in a td?– there is Android, IOS, Windows, Linux, Opera, Firefox,
Internet explorer, Chrome, Yahoo, Gmail, Hotmail, Outlook 20XX, Thunderbird, …
– …
How
• Upload your image or pdf to http://instacut.eu• Cut it easily into small images• Add links and formatted text• Send test mail• Download your HTML + CSS + images archive!
Say what? OK, visit instacut.eu
Create a Free Account
Upload Your Image or Pdf
Time to Cut!
Cut, cut, cut!
Cut, cut, cut!
Switch Cut orientation (press C)
Cut, cut, cut!
Cut, cut, cut!
Cut, cut, cut!
7 Cut, cut, cut!
Cut, cut, cut!
Cut, cut, cut!
Cut, cut, cut!
Cut, cut, cut!
Cut, cut, cut!
Cut, cut, cut!
Cut, cut, cut!
Cut, cut, cut!
Cut, cut, cut!
Cut, cut, cut!
Cut, cut, cut!
Cut, cut, cut!
Cut, cut, cut!
Cut, cut, cut!
Cut, cut, cut!
Cut, cut, cut!
Cut, cut, cut!
Cut, cut, cut!
Cut, cut, cut!
Cut, cut, cut!
Cut, cut, cut!
Cut, cut, cut!
Cut, cut, cut!
Cut, cut, cut!
Cut, cut, cut!
Cut, cut, cut!
Cut, cut, cut!
Cut, cut, cut!
Cut, cut, cut!
And we’re almost there!
• Press Apply & Download and get a ZIP with …
And we’re almost there!
• Press Apply & Download and get a ZIP with …• HTML with CSS code
And we’re almost there!
• Press Apply & Download and get a ZIP with …• HTML with CSS code• A bunch of images
Squeezing Images
• Uniform images are automatically squeezed in all possible directions
• Compressed images become GIF• Limited compression based on email clients
TODO’s
• Replace text images by real text
• Add links
• Rename images
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta suscipit tortor, ut efficitur nisl scelerisque at. Donec eu purus quis risus euismod tristique.
image <img> text <p>
Image_003.png Logo_example.png
Text Images to Real Text
• Right mouse button on cell=> Text Edit
Text Images to Real Text
• Right mouse button on cell=> Text Edit
• Dialog box pops up
Text Images to Real Text
• Right mouse button on cell=> Text Edit
• Dialog box pops up• Fill in values
Make similar by changing settings
Text Images to Real Text
• Right mouse button on cell=> Text Edit
• Dialog box pops up• Fill in values• Edited cell indicated by (*)
Text Images to Real Text
• Right mouse button on cell=> Text Edit
• Dialog box pops up• Fill in values• Edited cell indicated by (*) • Hover to see original image
Add Link in Text
• Fill in HTML code in Text/HTML field
Add Link to Image
• Right mouse button on cell=> Edit
Add Link to Image
• Right mouse button on cell=> Edit
• Dialog box pops up
Add Link to Image
• Right mouse button on cell=> Edit
• Dialog box pops up• Fill in values
Add Link to Image
• Right mouse button on cell=> Edit
• Dialog box pops up• Fill in values• Edited cell indicated by (*)
Tips
• Zoom in browser for pixel-perfect clicking
Tips
• Zoom in browser for pixel-perfect clicking• Replace symbols by HTML Name (or code)
• Full undo/redo, even after closing project!• Uniform image not squeezed? Bad click or
compression artifact present?
é é
Ü Ü…
• Try it yourself? Visit: http://instacut.eu• We’re in beta, so for now it is totally FREE!