: Email Campaign Unable to make it Responsive i work for an advertising company and i create responsive email flyers. the image starts at a pdf and i put this into photoshop to slice and add
i work for an advertising company and i create responsive email flyers.
the image starts at a pdf and i put this into photoshop to slice and add URLs, once added i can save for web design and it nicely put this into an images folder and a separate html file
this is perfect for the basics however i need to make this Responsive i am able to keep it in the middle with the traditional 600px applied however when it goes smaller than this image (screen size i.e. iPhone 4,5 etc) it becomes an issue and i have to start side scrolling.... very unprofessional.
is there a quick way to be able to code so no matter how big/small the screen size is it will adjust accordingly
i have tried media queries till i have gone blue in the face lol however have had no luck
is there a fast and productive way this can be done
Yea i have the full adobe CC packages and looked at a few of the products like muze and code but they seem to be too sluggish
I have used media quries and tried to simplify my code by using blocks which gives me a smooth rescale without it snapping to a new res which am happy about as it makes my designs look fluent and flow better
Theres is still a few issues i have so not sure if anybody can help with this...
As it is a email E-Flyer it has to be 1 html file and a image folder so all css javascript is in-line code
The main issue i face now is compatability i have designed my code in Chrome as the developer options in 'inspect element' is f**kin awesome however gettin it to work on all platforms: safari, firefox, outlook seems to be my next challenge
Is it possible to do a generic plugin or perhaps a default code i could you to help woth compatbility
.
More posts by @Kimberly620
3 Comments
Sorted by latest first Latest Oldest Best
You mentioned JavaScript - that will be stripped out of any email and is a great way to get flagged as SPAM. Email doesn't need JS at all.
You also don't really need anything more than a text editor for HTML email. Email design is stuck in the ancient past, requiring table layouts and preventing you from using any new CSS or techniques you may be used to. Code just in text, and test immediately in the email client you are focusing on.
Starting from scratch might be the issue here. Between Gmail web, iPhone, Outlook and so on - there's so many CSS gotchas and bugs. I personally would find a existing email HTML layout and apply your content to it. Find one that closely matches your current design. You'll leverage the 100s of hours of work of that developer so you can focus on the design.
themeforest.net/category/marketing/email-templates
And when you're done - use this to test in literally any email environment.
litmus.com/
You should try Adobe Edge Reflow, a relatively new product that's still in its preview state but it let's you design responsively and export it as HTML and CSS.
Basically you can import PSDs and then set media-query breakpoints on the document and then layout your page differently for every breakpoint (of which you can add as many as you'd like I believe). Then you can easily preview and export your design.
I can't speak to how it would look inside of an email, as I've never tried, but it's worth checking out and I believe you can already use it if you have a CC account (not sure if you can without it).
Most email clients will strip out any CSS blocks in the header, meaning all styles need to be inline styles. This obviously rules out media queries.
Without seeing your template it's hard to give an exact solution, but as a rough stab try giving your image width: 100%. This will scale the image to a parent container, respecting your 600px width definition.
If that doesn't work, please post your template in a jsfiddle and I might be able to provide more specific help.
As a side note, I would highly recommend using the Ink framework by Zurb, it makes creating responsive emails so easy.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.