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