• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

How to create a responsive email newsletter like adobe's newsletter that looks nice in every device. Did you guys create media query css?

Participant ,
May 05, 2014 May 05, 2014

Copy link to clipboard

Copied

I just noticed your newsletter looks presentable in every device. How did you guys do that.? What software should i use?

Views

16.5K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , May 08, 2014 May 08, 2014

I'm not sure what To answer your 1st question, NO - media queries are not the way to go as most e-mail clients DO NOT read media queries. Also, web e-mail clients like Gmail completely strip header contents from its view before displaying the e-mail so media-queries are useless. There are some apps that do it - but you cant make every subscriber happy that way.

The simple trick is to use fluid layouts. For instance, instead of creating:

<table style="width:500px;">

you'd use:

<table style="width:

...

Votes

Translate

Translate
Community Expert ,
May 05, 2014 May 05, 2014

Copy link to clipboard

Copied

This is a user-to user forum.  I doubt anybody who works on Adobe's newsletters will be responding to this.

That said, I use Dreamweaver to build HTML newsletters.  Also, I mainly work in code view since HTML emails are nothing like real web pages.

Nancy O. 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
May 05, 2014 May 05, 2014

Copy link to clipboard

Copied

Thank you, Nancy.

The team that handles the newsletter isn't known to me but I am trying to find out. Will get back as soon as I have an answer.

Thanks,

Preran

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
May 07, 2014 May 07, 2014

Copy link to clipboard

Copied

thank you. this is what i'm talking about.

April Connection: Spotlight on Adobe Muse

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jun 09, 2017 Jun 09, 2017

Copy link to clipboard

Copied

Did you find the team which creates email newsletters? Does Adobe have an option to create such email newsletters?

Thanks,

Jay

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 11, 2017 Jun 11, 2017

Copy link to clipboard

Copied

LATEST

If you need a responsive email template in Dreamweaver, go to File > New and select one.  See screenshot.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
May 07, 2014 May 07, 2014

Copy link to clipboard

Copied

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 08, 2014 May 08, 2014

Copy link to clipboard

Copied

I'm not sure what To answer your 1st question, NO - media queries are not the way to go as most e-mail clients DO NOT read media queries. Also, web e-mail clients like Gmail completely strip header contents from its view before displaying the e-mail so media-queries are useless. There are some apps that do it - but you cant make every subscriber happy that way.

The simple trick is to use fluid layouts. For instance, instead of creating:

<table style="width:500px;">

you'd use:

<table style="width:100%;">

And nest elements within it that are fluid instead of carrying a fixed width. This will ensure the e-mail is displayed across devices/ screen sizes consistently.

In the meantime, if you're not aware already, you could use 'Mailchimp' to create beautiful newsletters that just work - they have great 'Forever Free' plans and also have pay-as-you-go plans here: http://www.mailchimp.com - give it a shot.

If you're specific that you want to create them yourself, you could take a look at these 2 links that contain tips & tricks:

http://webdesign.tutsplus.com/articles/creating-a-simple-responsive-html-email--webdesign-12978

http://blog.sumall.com/journal/3-steps-to-make-your-e-mail-design-responsive-2.html

And this link that comes from 'Zurb' - the makers of 'Foundation' which is a beautiful front-end framework. They have this tool 'Ink' which does exactly what you're looking for: http://zurb.com/ink/ - it's open-source and free.

Good luck.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
May 09, 2014 May 09, 2014

Copy link to clipboard

Copied

  • thanks a lot,, ill definitely check those links out

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines