0

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 .

Improve this question
5
  • Hi Phil, so are you looking to get help with using media queries or are you looking for an easier way to code like a page builder? Did you make the parent table using max-width?
    – AndrewH
    Commented Oct 15, 2015 at 15:53
  • 1
    Are you using Photoshop to generate the HTML? Photoshop doesn't do responsiveness at all. You have to hand code for responsiveness and not all email clients will support it. So, you have to also factor that. In fact, if you are generating HTML from Photoshop, you must be using an older version of Photoshop since that feature was removed due to how horrible the code is for 2015.
    – Scott
    Commented Oct 15, 2015 at 16:59
  • Please post your HTML for the email. Also note that email clients are worse than web browsers when it comes to consistency in rendering. When it comes to writing code for emails, the best thing to do is keep it as simple and "old school" as possible.
    – paulmz
    Commented Oct 15, 2015 at 20:45
  • Side note- slicing up a PDF is not necessarily the best practice. Who is creating this PDF, how are they creating it and can they send you the source file instead?
    – paulmz
    Commented Oct 15, 2015 at 20:46
  • Creating responsive layouts is not easy & in fact tons of web designer use pre-made features (eg. bootstrap) to achieve this easily. Others simply purchase templates on online stores such as ThemeForest & customize them. There's no automatic "plugins" or easy ways besides the ones I mentioned above; you'll also sacrifice some design freedom by using them. It can't be easy to give you a one-size-fits-all solution, doing web design/coding is a career & specialty. You can use Firebug addon on Firefox too. Also, email campaigns = email clients too (eg. outlook), not only browsers.
    – go-junta
    Commented Oct 16, 2015 at 21:40

3 Answers 3

Reset to default
2

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.

Improve this answer
2
  • iOS and Apple Mail, and many webmail services, support media queries. It's mostly Outlook and Entourage which don't. But +1 for Ink. :)
    – Scott
    Commented Oct 15, 2015 at 16:57
  • 2
    For posterity, here's a fairly definitive list of which clients support media queries. Lack of support on Android and Windows 8 makes them a no-no in my book!
    – Jackson Hyde
    Commented Oct 16, 2015 at 7:44
2

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.

http://themeforest.net/category/marketing/email-templates

And when you're done - use this to test in literally any email environment.

https://litmus.com/

Improve this answer
1

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).

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.