Highlighted

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

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?

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.

TOPICS
Create Slideshows in Dreamweaver, Learn Dreamweaver

Views

14.9K

Likes

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

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

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?

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.

TOPICS
Create Slideshows in Dreamweaver, Learn Dreamweaver

Views

14.9K

Likes

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
May 05, 2014 0
Adobe Community Professional ,
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, ACP
Alt-Web Design & Publishing

Likes

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
Reply
Loading...
May 05, 2014 2
Adobe Employee ,
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

Likes

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
Reply
Loading...
May 05, 2014 1
Participant ,
May 07, 2014

Copy link to clipboard

Copied

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

April Connection: Spotlight on Adobe Muse

Likes

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
Reply
Loading...
May 07, 2014 0
New Here ,
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

Likes

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
Reply
Loading...
Jun 09, 2017 0
Adobe Community Professional ,
Jun 11, 2017

Copy link to clipboard

Copied

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

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

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
Reply
Loading...
Jun 11, 2017 0
Participant ,
May 07, 2014

Copy link to clipboard

Copied

Likes

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
Reply
Loading...
May 07, 2014 0
LEGEND ,
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.

Likes

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
Reply
Loading...
May 08, 2014 3
Participant ,
May 09, 2014

Copy link to clipboard

Copied

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

Likes

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
Reply
Loading...
May 09, 2014 0