Re: [css-d] help with media queries for email...mercy, mercy

[Karl DeSaulniers]

Ron,
I found this read-up that is quite dated, but I think is still relevant.

https://css-tricks.com/using-css-in-html-emails-the-real-story/

HTH,

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Feb 21, 2017, at 2:11 PM, Tom Livingston  wrote:
> 
> I'll also add that what I said below is based on the assumption that
> you want to reach the widest audience (number of different email
> clients) as possible. If you know you have a captive audience with a
> limited email client use (all recipients are using Outlook, for
> example) then things may be a bit easier...
> 
> On Tue, Feb 21, 2017 at 3:07 PM, Tom Livingston  wrote:
>> While it is great that it works for you and you've had success, Karl,
>> I don't really recommend using anything other than tables. At least
>> not until you are proficient in using tables (for email) and getting
>> consistent results with them. I cannot find anything recent regarding
>> html emails without tables after googling a bit. I recommend going
>> through the lynda.com tut as you said and getting good at the basics,
>> at least, before straying.
>> 
>> HTML email is tricky and full of gotchas.
>> 
>> Testing is the key. Lots of it. Use the services I recommended earlier
>> to help with this.
>> 
>> Good luck. [insert knowing, yet still maniacal laugh, here]
>> 
>> ;-)
>> 
>> 
>> 
>> On Tue, Feb 21, 2017 at 1:08 PM, Karl DeSaulniers  
>> wrote:
>>> Stay away from tables is my recommendation. Use div or ul instead. Be sure 
>>> to study up on the display property as you will be needing this 
>>> understanding to make things look correctly and fit correctly.
>>> 
>>> For background images you could use the background property, or use an img 
>>> and absolute positioning with z-index. Also, set your CSS inline with the 
>>> style attribute. Don't link style sheets and read up on baseurl.
>>> 
>>> Just my 2¢
>>> 
>>> Built a lot of HTML emails in my day and these tips work for me.
>>> 
>>> HTH,
>>> Best,
>>> Karl
>>> 
>>> Sent from losPhone
>> 
>> 
>> --
>> 
>> Tom Livingston | Senior Front End Developer | Media Logic |
>> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>> 
>> 
>> #663399
> 
> 
> 
> -- 
> 
> Tom Livingston | Senior Front End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
> 
> 
> #663399
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] help with media queries for email...mercy, mercy

[Tom Livingston]

I'll also add that what I said below is based on the assumption that
you want to reach the widest audience (number of different email
clients) as possible. If you know you have a captive audience with a
limited email client use (all recipients are using Outlook, for
example) then things may be a bit easier...

On Tue, Feb 21, 2017 at 3:07 PM, Tom Livingston  wrote:
> While it is great that it works for you and you've had success, Karl,
> I don't really recommend using anything other than tables. At least
> not until you are proficient in using tables (for email) and getting
> consistent results with them. I cannot find anything recent regarding
> html emails without tables after googling a bit. I recommend going
> through the lynda.com tut as you said and getting good at the basics,
> at least, before straying.
>
> HTML email is tricky and full of gotchas.
>
> Testing is the key. Lots of it. Use the services I recommended earlier
> to help with this.
>
> Good luck. [insert knowing, yet still maniacal laugh, here]
>
> ;-)
>
>
>
> On Tue, Feb 21, 2017 at 1:08 PM, Karl DeSaulniers  
> wrote:
>> Stay away from tables is my recommendation. Use div or ul instead. Be sure 
>> to study up on the display property as you will be needing this 
>> understanding to make things look correctly and fit correctly.
>>
>> For background images you could use the background property, or use an img 
>> and absolute positioning with z-index. Also, set your CSS inline with the 
>> style attribute. Don't link style sheets and read up on baseurl.
>>
>> Just my 2¢
>>
>> Built a lot of HTML emails in my day and these tips work for me.
>>
>> HTH,
>> Best,
>> Karl
>>
>> Sent from losPhone
>
>
> --
>
> Tom Livingston | Senior Front End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>
>
> #663399



-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] help with media queries for email...mercy, mercy

[Tom Livingston]

While it is great that it works for you and you've had success, Karl,
I don't really recommend using anything other than tables. At least
not until you are proficient in using tables (for email) and getting
consistent results with them. I cannot find anything recent regarding
html emails without tables after googling a bit. I recommend going
through the lynda.com tut as you said and getting good at the basics,
at least, before straying.

HTML email is tricky and full of gotchas.

Testing is the key. Lots of it. Use the services I recommended earlier
to help with this.

Good luck. [insert knowing, yet still maniacal laugh, here]

;-)



On Tue, Feb 21, 2017 at 1:08 PM, Karl DeSaulniers  wrote:
> Stay away from tables is my recommendation. Use div or ul instead. Be sure to 
> study up on the display property as you will be needing this understanding to 
> make things look correctly and fit correctly.
>
> For background images you could use the background property, or use an img 
> and absolute positioning with z-index. Also, set your CSS inline with the 
> style attribute. Don't link style sheets and read up on baseurl.
>
> Just my 2¢
>
> Built a lot of HTML emails in my day and these tips work for me.
>
> HTH,
> Best,
> Karl
>
> Sent from losPhone


-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] help with media queries for email...mercy, mercy

[Karl DeSaulniers]

Stay away from tables is my recommendation. Use div or ul instead. Be sure to 
study up on the display property as you will be needing this understanding to 
make things look correctly and fit correctly. 

For background images you could use the background property, or use an img and 
absolute positioning with z-index. Also, set your CSS inline with the style 
attribute. Don't link style sheets and read up on baseurl. 

Just my 2¢

Built a lot of HTML emails in my day and these tips work for me. 

HTH,
Best,
Karl

Sent from losPhone

> On Feb 21, 2017, at 9:12 AM, Rod Castello  wrote:
> 
> Ron, that's the best thing to do. Work thru that tutorial on lynda and you
> will be getting off on the right foot. Table based emails are much harder
> to do than conventional html. Good luck.
> 
> If you're really serious about email, then go to this site and get their
> newsletter and even join. It's $20 / month, but you get to talk to real
> email marketing professionals and ask questions.
> http://www.onlyinfluencers.com/
> 
> Rod Castello
> 
>> On Tue, Feb 21, 2017 at 6:52 AM, Ron Zisman  wrote:
>> 
>> you’ve all been helpful. it’s been years since i’ve done any coding..so my
>> html probably sucks… but it seems to work.
>> 
>> i don’t know why i opted to lay the type over the hero image instead of
>> doing it all in mages…thought it might be “the right way”
>> 
>> i’ve found a tutorial on MQs at lynda.com…hopefully that will help.
>> 
>> and i thought tables would be easy..
>> 
>> rgds,
>> ron
>> 
>> On Feb 21, 2017, at 9:45 AM, Rod Castello  wrote:
>> 
>> Hi Ron,
>> I see a lot of issues with your media queries. They need to be target to
>> the classes you've tagged onto your 's. Such as "top" and "header".
>> You should just try to get one thing working at a time, such as the hero
>> area, which will need to turned into an image. Email clients don't
>> consistently support background images, especially with live text over
>> them.
>> Take  the headline" ANTEC 2017, subhead and date and merge with the
>> background image and create a "hero image".
>> Then just try and set that up in a table using an absolute url for the
>> image. Give the image width as 100%.  If needed you can create multiple
>> hero images if the text looks too small when reduced to "320px" on small
>> screens. Then you show an hide those when appropriate with your MQ's.
>> For the copy, try using "em" sizes instead of "px" sizing and they will
>> resize automatically when the screen size is reduced. You can use "px" but
>> will probably need to use different sizing at your various break points.
>> 
>> I would offer more help with examples of code, but need to get to work.
>> 
>> Rod Castello
>> 
>> 
>> On Tue, Feb 21, 2017 at 5:25 AM, Ron Zisman  wrote:
>> 
>> karl,
>> 
>> http://ricochet.org/plastics_feb20.html
>> 
>> i’ve been trying to work with media queries. i think understand the basic
>> concepts, i’ve done some tutorials, rebuilt the html and am still banging
>> my head.
>> 
>> i theory, it seems like it shouldn’t be that hard. a wrapper and fixed
>> container. when i apply the query, it goes liquid and won’t hold the 600
>> measure.
>> 
>> sorry to be so dense, but i’m going nuts—i’m done a few tutorial from
>> litmus .no  luck. i was hoping to get an extremely
>> simple example.
>> 
>> 
>> most of the examples i’ve seen have a ton of resets and queries—its a
>> blur. its not from not trying. —thanks again,
>> 
>> ron
>> 
>> On Feb 19, 2017, at 10:05 PM, Karl DeSaulniers 
>> 
>> wrote:
>> 
>> 
>> Ron,
>> Quick and simple.
>> 
>> Google: CSS Media Queries example
>> 
>> Download, dissect and learn.
>> 
>> GL!
>> 
>> Best,
>> 
>> Karl DeSaulniers
>> Design Drumm
>> http://designdrumm.com
>> 
>> 
>> 
>> 
>> On Feb 18, 2017, at 7:14 PM, Ron Zisman  wrote:
>> 
>> hi all,
>> 
>> http://ricochet.org/plastics_engineering.html
>> 
>> i’m new to email, but most of the table coding went ok, but as i’m
>> 
>> trying to make it responsive,
>> 
>> i need media queries. i understand the concept, but am having trouble
>> 
>> with reality.
>> 
>> 
>> a little direction would be appreciated.
>> 
>> thank you in advance,
>> —ron
>> __
>> css-discuss [css-d@lists.css-discuss.org]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>> 
>> 
>> __
>> css-discuss [css-d@lists.css-discuss.org]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- 

Re: [css-d] help with media queries for email...mercy, mercy

[Karl DeSaulniers]

Using text instead of images IS the right way for download times. Less images 
the better I've found when loading a webpage. 

Oh and one other thing regarding the mailing list. Be sure to remember to prune 
your reply-to. I'm getting double emails each time. ;)
Thx. 

Best,
Karl

Sent from losPhone

> On Feb 21, 2017, at 8:52 AM, Ron Zisman  wrote:
> 
> you’ve all been helpful. it’s been years since i’ve done any coding..so my 
> html probably sucks… but it seems to work.
> 
> i don’t know why i opted to lay the type over the hero image instead of doing 
> it all in mages…thought it might be “the right way”
> 
> i’ve found a tutorial on MQs at lynda.com …hopefully that 
> will help.
> 
> and i thought tables would be easy..
> 
> rgds,
> ron
> 
>> On Feb 21, 2017, at 9:45 AM, Rod Castello  wrote:
>> 
>> Hi Ron,
>> I see a lot of issues with your media queries. They need to be target to
>> the classes you've tagged onto your 's. Such as "top" and "header".
>> You should just try to get one thing working at a time, such as the hero
>> area, which will need to turned into an image. Email clients don't
>> consistently support background images, especially with live text over
>> them.
>> Take  the headline" ANTEC 2017, subhead and date and merge with the
>> background image and create a "hero image".
>> Then just try and set that up in a table using an absolute url for the
>> image. Give the image width as 100%.  If needed you can create multiple
>> hero images if the text looks too small when reduced to "320px" on small
>> screens. Then you show an hide those when appropriate with your MQ's.
>> For the copy, try using "em" sizes instead of "px" sizing and they will
>> resize automatically when the screen size is reduced. You can use "px" but
>> will probably need to use different sizing at your various break points.
>> 
>> I would offer more help with examples of code, but need to get to work.
>> 
>> Rod Castello
>> 
>> 
>>> On Tue, Feb 21, 2017 at 5:25 AM, Ron Zisman  wrote:
>>> 
>>> karl,
>>> 
>>> http://ricochet.org/plastics_feb20.html
>>> 
>>> i’ve been trying to work with media queries. i think understand the basic
>>> concepts, i’ve done some tutorials, rebuilt the html and am still banging
>>> my head.
>>> 
>>> i theory, it seems like it shouldn’t be that hard. a wrapper and fixed
>>> container. when i apply the query, it goes liquid and won’t hold the 600
>>> measure.
>>> 
>>> sorry to be so dense, but i’m going nuts—i’m done a few tutorial from
>>> litmus .no  luck. i was hoping to get an extremely
>>> simple example.
>>> 
>>> 
>>> most of the examples i’ve seen have a ton of resets and queries—its a
>>> blur. its not from not trying. —thanks again,
>>> 
>>> ron
 On Feb 19, 2017, at 10:05 PM, Karl DeSaulniers 
>>> wrote:
 
 Ron,
 Quick and simple.
 
 Google: CSS Media Queries example
 
 Download, dissect and learn.
 
 GL!
 
 Best,
 
 Karl DeSaulniers
 Design Drumm
 http://designdrumm.com
 
 
 
 
> On Feb 18, 2017, at 7:14 PM, Ron Zisman  wrote:
> 
> hi all,
> 
> http://ricochet.org/plastics_engineering.html
> 
> i’m new to email, but most of the table coding went ok, but as i’m
>>> trying to make it responsive,
> i need media queries. i understand the concept, but am having trouble
>>> with reality.
> 
> a little direction would be appreciated.
> 
> thank you in advance,
> —ron
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
 
 __
 css-discuss [css-d@lists.css-discuss.org]
 http://www.css-discuss.org/mailman/listinfo/css-d
 List wiki/FAQ -- http://css-discuss.incutio.com/
 List policies -- http://css-discuss.org/policies.html
 Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>>> 
>>> __
>>> css-discuss [css-d@lists.css-discuss.org]
>>> http://www.css-discuss.org/mailman/listinfo/css-d
>>> List wiki/FAQ -- http://css-discuss.incutio.com/
>>> List policies -- http://css-discuss.org/policies.html
>>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>> 
>> 
>> 
>> 
>> -- 
>> Rod Castello
>> DIGITAL DESIGN AND DEVELOPMENT
>> 818.437.7880
>> rodcastel...@gmail.com
>> www.smashcube.com
>> __
>> css-discuss [css-d@lists.css-discuss.org]
>> 

Re: [css-d] help with media queries for email...mercy, mercy

[Karl DeSaulniers]

Hi Ron,
I usually put width:100%;max-width:600px; for situations where the element will 
fill the screen up to a certain size and then max it so it stops at the width I 
desire. 

And yes, like Tom said, you have to point to something to make it change in 
your media query. 

@media ... (...) {
#some_element {
width:100%;
max-width:600px;
}
}

HTH,

Best,
Karl

Sent from losPhone

> On Feb 21, 2017, at 7:25 AM, Ron Zisman  wrote:
> 
> karl,
> 
> http://ricochet.org/plastics_feb20.html
> 
> i’ve been trying to work with media queries. i think understand the basic 
> concepts, i’ve done some tutorials, rebuilt the html and am still banging my 
> head.
> 
> i theory, it seems like it shouldn’t be that hard. a wrapper and fixed 
> container. when i apply the query, it goes liquid and won’t hold the 600 
> measure.
> 
> sorry to be so dense, but i’m going nuts—i’m done a few tutorial from litmus 
> .no  luck. i was hoping to get an extremely simple example.
> 
> 
> most of the examples i’ve seen have a ton of resets and queries—its a blur. 
> its not from not trying. —thanks again,
> 
> ron
>> On Feb 19, 2017, at 10:05 PM, Karl DeSaulniers  wrote:
>> 
>> Ron,
>> Quick and simple.
>> 
>> Google: CSS Media Queries example
>> 
>> Download, dissect and learn.
>> 
>> GL!
>> 
>> Best,
>> 
>> Karl DeSaulniers
>> Design Drumm
>> http://designdrumm.com
>> 
>> 
>> 
>> 
>>> On Feb 18, 2017, at 7:14 PM, Ron Zisman  wrote:
>>> 
>>> hi all,
>>> 
>>> http://ricochet.org/plastics_engineering.html
>>> 
>>> i’m new to email, but most of the table coding went ok, but as i’m trying 
>>> to make it responsive,
>>> i need media queries. i understand the concept, but am having trouble with 
>>> reality.
>>> 
>>> a little direction would be appreciated.
>>> 
>>> thank you in advance,
>>> —ron
>>> __
>>> css-discuss [css-d@lists.css-discuss.org]
>>> http://www.css-discuss.org/mailman/listinfo/css-d
>>> List wiki/FAQ -- http://css-discuss.incutio.com/
>>> List policies -- http://css-discuss.org/policies.html
>>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>> 
>> __
>> css-discuss [css-d@lists.css-discuss.org]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> 
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] help with media queries for email...mercy, mercy

[Rod Castello]

Ron, that's the best thing to do. Work thru that tutorial on lynda and you
will be getting off on the right foot. Table based emails are much harder
to do than conventional html. Good luck.

If you're really serious about email, then go to this site and get their
newsletter and even join. It's $20 / month, but you get to talk to real
email marketing professionals and ask questions.
http://www.onlyinfluencers.com/

Rod Castello

On Tue, Feb 21, 2017 at 6:52 AM, Ron Zisman  wrote:

> you’ve all been helpful. it’s been years since i’ve done any coding..so my
> html probably sucks… but it seems to work.
>
> i don’t know why i opted to lay the type over the hero image instead of
> doing it all in mages…thought it might be “the right way”
>
> i’ve found a tutorial on MQs at lynda.com…hopefully that will help.
>
> and i thought tables would be easy..
>
> rgds,
> ron
>
> On Feb 21, 2017, at 9:45 AM, Rod Castello  wrote:
>
> Hi Ron,
> I see a lot of issues with your media queries. They need to be target to
> the classes you've tagged onto your 's. Such as "top" and "header".
> You should just try to get one thing working at a time, such as the hero
> area, which will need to turned into an image. Email clients don't
> consistently support background images, especially with live text over
> them.
> Take  the headline" ANTEC 2017, subhead and date and merge with the
> background image and create a "hero image".
> Then just try and set that up in a table using an absolute url for the
> image. Give the image width as 100%.  If needed you can create multiple
> hero images if the text looks too small when reduced to "320px" on small
> screens. Then you show an hide those when appropriate with your MQ's.
> For the copy, try using "em" sizes instead of "px" sizing and they will
> resize automatically when the screen size is reduced. You can use "px" but
> will probably need to use different sizing at your various break points.
>
> I would offer more help with examples of code, but need to get to work.
>
> Rod Castello
>
>
> On Tue, Feb 21, 2017 at 5:25 AM, Ron Zisman  wrote:
>
> karl,
>
> http://ricochet.org/plastics_feb20.html
>
> i’ve been trying to work with media queries. i think understand the basic
> concepts, i’ve done some tutorials, rebuilt the html and am still banging
> my head.
>
> i theory, it seems like it shouldn’t be that hard. a wrapper and fixed
> container. when i apply the query, it goes liquid and won’t hold the 600
> measure.
>
> sorry to be so dense, but i’m going nuts—i’m done a few tutorial from
> litmus .no  luck. i was hoping to get an extremely
> simple example.
>
>
> most of the examples i’ve seen have a ton of resets and queries—its a
> blur. its not from not trying. —thanks again,
>
> ron
>
> On Feb 19, 2017, at 10:05 PM, Karl DeSaulniers 
>
> wrote:
>
>
> Ron,
> Quick and simple.
>
> Google: CSS Media Queries example
>
> Download, dissect and learn.
>
> GL!
>
> Best,
>
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com
>
>
>
>
> On Feb 18, 2017, at 7:14 PM, Ron Zisman  wrote:
>
> hi all,
>
> http://ricochet.org/plastics_engineering.html
>
> i’m new to email, but most of the table coding went ok, but as i’m
>
> trying to make it responsive,
>
> i need media queries. i understand the concept, but am having trouble
>
> with reality.
>
>
> a little direction would be appreciated.
>
> thank you in advance,
> —ron
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
>
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
>
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
>
>
>
>
> --
> Rod Castello
> DIGITAL DESIGN AND DEVELOPMENT
> 818.437.7880 <(818)%20437-7880>
> rodcastel...@gmail.com
> www.smashcube.com
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by 

Re: [css-d] help with media queries for email...mercy, mercy

[Tom Livingston]

I'd have to *respectfully* disagree with some of the below. For
reasons like images being hidden by default in some email clients, I'd
recommend using live text as much as possible.

Also, I'd recommend sticking with px font-sizing for email client
compatibility and getting results that are more like you'd expect.

I do agree with background images being sketchy as far as support
goes. I'd suggest a band of that BG texture as an image above the text
headline as a safer layout and allowing live text still for headline
(which is important text IMHO). Of course, you could use a fallback
solid color if that's ok with you.

As always, all your mileages may vary.

Also, I'd recommend an email testing service like emailonacid.com or
litmus.com. We use emailonacid.com as it lets us use a url to test
from so you don't need to have to set up a blast to get your email
into the testing service.

HTH



On Tue, Feb 21, 2017 at 9:45 AM, Rod Castello  wrote:
> Hi Ron,
> I see a lot of issues with your media queries. They need to be target to
> the classes you've tagged onto your 's. Such as "top" and "header".
> You should just try to get one thing working at a time, such as the hero
> area, which will need to turned into an image. Email clients don't
> consistently support background images, especially with live text over
> them.
> Take  the headline" ANTEC 2017, subhead and date and merge with the
> background image and create a "hero image".
> Then just try and set that up in a table using an absolute url for the
> image. Give the image width as 100%.  If needed you can create multiple
> hero images if the text looks too small when reduced to "320px" on small
> screens. Then you show an hide those when appropriate with your MQ's.
> For the copy, try using "em" sizes instead of "px" sizing and they will
> resize automatically when the screen size is reduced. You can use "px" but
> will probably need to use different sizing at your various break points.
>
> I would offer more help with examples of code, but need to get to work.
>
> Rod Castello
>



-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] help with media queries for email...mercy, mercy

[Ron Zisman]

you’ve all been helpful. it’s been years since i’ve done any coding..so my html 
probably sucks… but it seems to work.

i don’t know why i opted to lay the type over the hero image instead of doing 
it all in mages…thought it might be “the right way”

i’ve found a tutorial on MQs at lynda.com …hopefully that 
will help.

and i thought tables would be easy..

rgds,
ron

> On Feb 21, 2017, at 9:45 AM, Rod Castello  wrote:
> 
> Hi Ron,
> I see a lot of issues with your media queries. They need to be target to
> the classes you've tagged onto your 's. Such as "top" and "header".
> You should just try to get one thing working at a time, such as the hero
> area, which will need to turned into an image. Email clients don't
> consistently support background images, especially with live text over
> them.
> Take  the headline" ANTEC 2017, subhead and date and merge with the
> background image and create a "hero image".
> Then just try and set that up in a table using an absolute url for the
> image. Give the image width as 100%.  If needed you can create multiple
> hero images if the text looks too small when reduced to "320px" on small
> screens. Then you show an hide those when appropriate with your MQ's.
> For the copy, try using "em" sizes instead of "px" sizing and they will
> resize automatically when the screen size is reduced. You can use "px" but
> will probably need to use different sizing at your various break points.
> 
> I would offer more help with examples of code, but need to get to work.
> 
> Rod Castello
> 
> 
> On Tue, Feb 21, 2017 at 5:25 AM, Ron Zisman  wrote:
> 
>> karl,
>> 
>> http://ricochet.org/plastics_feb20.html
>> 
>> i’ve been trying to work with media queries. i think understand the basic
>> concepts, i’ve done some tutorials, rebuilt the html and am still banging
>> my head.
>> 
>> i theory, it seems like it shouldn’t be that hard. a wrapper and fixed
>> container. when i apply the query, it goes liquid and won’t hold the 600
>> measure.
>> 
>> sorry to be so dense, but i’m going nuts—i’m done a few tutorial from
>> litmus .no  luck. i was hoping to get an extremely
>> simple example.
>> 
>> 
>> most of the examples i’ve seen have a ton of resets and queries—its a
>> blur. its not from not trying. —thanks again,
>> 
>> ron
>>> On Feb 19, 2017, at 10:05 PM, Karl DeSaulniers 
>> wrote:
>>> 
>>> Ron,
>>> Quick and simple.
>>> 
>>> Google: CSS Media Queries example
>>> 
>>> Download, dissect and learn.
>>> 
>>> GL!
>>> 
>>> Best,
>>> 
>>> Karl DeSaulniers
>>> Design Drumm
>>> http://designdrumm.com
>>> 
>>> 
>>> 
>>> 
 On Feb 18, 2017, at 7:14 PM, Ron Zisman  wrote:
 
 hi all,
 
 http://ricochet.org/plastics_engineering.html
 
 i’m new to email, but most of the table coding went ok, but as i’m
>> trying to make it responsive,
 i need media queries. i understand the concept, but am having trouble
>> with reality.
 
 a little direction would be appreciated.
 
 thank you in advance,
 —ron
 __
 css-discuss [css-d@lists.css-discuss.org]
 http://www.css-discuss.org/mailman/listinfo/css-d
 List wiki/FAQ -- http://css-discuss.incutio.com/
 List policies -- http://css-discuss.org/policies.html
 Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>>> 
>>> __
>>> css-discuss [css-d@lists.css-discuss.org]
>>> http://www.css-discuss.org/mailman/listinfo/css-d
>>> List wiki/FAQ -- http://css-discuss.incutio.com/
>>> List policies -- http://css-discuss.org/policies.html
>>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>> 
>> __
>> css-discuss [css-d@lists.css-discuss.org]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> 
> 
> 
> 
> -- 
> Rod Castello
> DIGITAL DESIGN AND DEVELOPMENT
> 818.437.7880
> rodcastel...@gmail.com
> www.smashcube.com
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- 

Re: [css-d] help with media queries for email...mercy, mercy

[Rod Castello]

Hi Ron,
I see a lot of issues with your media queries. They need to be target to
the classes you've tagged onto your 's. Such as "top" and "header".
You should just try to get one thing working at a time, such as the hero
area, which will need to turned into an image. Email clients don't
consistently support background images, especially with live text over
them.
Take  the headline" ANTEC 2017, subhead and date and merge with the
background image and create a "hero image".
Then just try and set that up in a table using an absolute url for the
image. Give the image width as 100%.  If needed you can create multiple
hero images if the text looks too small when reduced to "320px" on small
screens. Then you show an hide those when appropriate with your MQ's.
For the copy, try using "em" sizes instead of "px" sizing and they will
resize automatically when the screen size is reduced. You can use "px" but
will probably need to use different sizing at your various break points.

I would offer more help with examples of code, but need to get to work.

Rod Castello


On Tue, Feb 21, 2017 at 5:25 AM, Ron Zisman  wrote:

> karl,
>
> http://ricochet.org/plastics_feb20.html
>
> i’ve been trying to work with media queries. i think understand the basic
> concepts, i’ve done some tutorials, rebuilt the html and am still banging
> my head.
>
> i theory, it seems like it shouldn’t be that hard. a wrapper and fixed
> container. when i apply the query, it goes liquid and won’t hold the 600
> measure.
>
> sorry to be so dense, but i’m going nuts—i’m done a few tutorial from
> litmus .no  luck. i was hoping to get an extremely
> simple example.
>
>
> most of the examples i’ve seen have a ton of resets and queries—its a
> blur. its not from not trying. —thanks again,
>
> ron
> > On Feb 19, 2017, at 10:05 PM, Karl DeSaulniers 
> wrote:
> >
> > Ron,
> > Quick and simple.
> >
> > Google: CSS Media Queries example
> >
> > Download, dissect and learn.
> >
> > GL!
> >
> > Best,
> >
> > Karl DeSaulniers
> > Design Drumm
> > http://designdrumm.com
> >
> >
> >
> >
> >> On Feb 18, 2017, at 7:14 PM, Ron Zisman  wrote:
> >>
> >> hi all,
> >>
> >> http://ricochet.org/plastics_engineering.html
> >>
> >> i’m new to email, but most of the table coding went ok, but as i’m
> trying to make it responsive,
> >> i need media queries. i understand the concept, but am having trouble
> with reality.
> >>
> >> a little direction would be appreciated.
> >>
> >> thank you in advance,
> >> —ron
> >> __
> >> css-discuss [css-d@lists.css-discuss.org]
> >> http://www.css-discuss.org/mailman/listinfo/css-d
> >> List wiki/FAQ -- http://css-discuss.incutio.com/
> >> List policies -- http://css-discuss.org/policies.html
> >> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> >
> > __
> > css-discuss [css-d@lists.css-discuss.org]
> > http://www.css-discuss.org/mailman/listinfo/css-d
> > List wiki/FAQ -- http://css-discuss.incutio.com/
> > List policies -- http://css-discuss.org/policies.html
> > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/




-- 
Rod Castello
DIGITAL DESIGN AND DEVELOPMENT
818.437.7880
rodcastel...@gmail.com
www.smashcube.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] help with media queries for email...mercy, mercy

[Tom Livingston]

That should be:

@media screen and (max-width: 640px) {
>  table{ width: 320px!important; }
> }



On Tue, Feb 21, 2017 at 8:47 AM, Tom Livingston  wrote:
> Ron,
>
> Looks to me like you closed the MQ before all of the styles, so the
> styles are working all the time. Also, it appears you aren't targeting
> anything and therefore not changing anything.
>
> for example:
>
> @media screen and (max-width: 640px) {
>  table: width: 320px!important;
> }
>
> Let me know if I can be of more help.
>
>
> On Tue, Feb 21, 2017 at 8:25 AM, Ron Zisman  wrote:
>> karl,
>>
>> http://ricochet.org/plastics_feb20.html
>>
>> i’ve been trying to work with media queries. i think understand the basic 
>> concepts, i’ve done some tutorials, rebuilt the html and am still banging my 
>> head.
>>
>> i theory, it seems like it shouldn’t be that hard. a wrapper and fixed 
>> container. when i apply the query, it goes liquid and won’t hold the 600 
>> measure.
>>
>> sorry to be so dense, but i’m going nuts—i’m done a few tutorial from litmus 
>> .no  luck. i was hoping to get an extremely simple 
>> example.
>>
>>
>> most of the examples i’ve seen have a ton of resets and queries—its a blur. 
>> its not from not trying. —thanks again,
>>
>> ron
>>> On Feb 19, 2017, at 10:05 PM, Karl DeSaulniers  wrote:
>>>
>>> Ron,
>>> Quick and simple.
>>>
>>> Google: CSS Media Queries example
>>>
>>> Download, dissect and learn.
>>>
>>> GL!
>>>
>>> Best,
>>>
>>> Karl DeSaulniers
>>> Design Drumm
>>> http://designdrumm.com
>>>
>>>
>>>
>>>
 On Feb 18, 2017, at 7:14 PM, Ron Zisman  wrote:

 hi all,

 http://ricochet.org/plastics_engineering.html

 i’m new to email, but most of the table coding went ok, but as i’m trying 
 to make it responsive,
 i need media queries. i understand the concept, but am having trouble with 
 reality.

 a little direction would be appreciated.

 thank you in advance,
 —ron
 __
 css-discuss [css-d@lists.css-discuss.org]
 http://www.css-discuss.org/mailman/listinfo/css-d
 List wiki/FAQ -- http://css-discuss.incutio.com/
 List policies -- http://css-discuss.org/policies.html
 Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>>>
>>> __
>>> css-discuss [css-d@lists.css-discuss.org]
>>> http://www.css-discuss.org/mailman/listinfo/css-d
>>> List wiki/FAQ -- http://css-discuss.incutio.com/
>>> List policies -- http://css-discuss.org/policies.html
>>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>>
>> __
>> css-discuss [css-d@lists.css-discuss.org]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
>
>
> --
>
> Tom Livingston | Senior Front End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>
>
> #663399



-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] help with media queries for email...mercy, mercy

[Tom Livingston]

Ron,

Looks to me like you closed the MQ before all of the styles, so the
styles are working all the time. Also, it appears you aren't targeting
anything and therefore not changing anything.

for example:

@media screen and (max-width: 640px) {
 table: width: 320px!important;
}

Let me know if I can be of more help.


On Tue, Feb 21, 2017 at 8:25 AM, Ron Zisman  wrote:
> karl,
>
> http://ricochet.org/plastics_feb20.html
>
> i’ve been trying to work with media queries. i think understand the basic 
> concepts, i’ve done some tutorials, rebuilt the html and am still banging my 
> head.
>
> i theory, it seems like it shouldn’t be that hard. a wrapper and fixed 
> container. when i apply the query, it goes liquid and won’t hold the 600 
> measure.
>
> sorry to be so dense, but i’m going nuts—i’m done a few tutorial from litmus 
> .no  luck. i was hoping to get an extremely simple example.
>
>
> most of the examples i’ve seen have a ton of resets and queries—its a blur. 
> its not from not trying. —thanks again,
>
> ron
>> On Feb 19, 2017, at 10:05 PM, Karl DeSaulniers  wrote:
>>
>> Ron,
>> Quick and simple.
>>
>> Google: CSS Media Queries example
>>
>> Download, dissect and learn.
>>
>> GL!
>>
>> Best,
>>
>> Karl DeSaulniers
>> Design Drumm
>> http://designdrumm.com
>>
>>
>>
>>
>>> On Feb 18, 2017, at 7:14 PM, Ron Zisman  wrote:
>>>
>>> hi all,
>>>
>>> http://ricochet.org/plastics_engineering.html
>>>
>>> i’m new to email, but most of the table coding went ok, but as i’m trying 
>>> to make it responsive,
>>> i need media queries. i understand the concept, but am having trouble with 
>>> reality.
>>>
>>> a little direction would be appreciated.
>>>
>>> thank you in advance,
>>> —ron
>>> __
>>> css-discuss [css-d@lists.css-discuss.org]
>>> http://www.css-discuss.org/mailman/listinfo/css-d
>>> List wiki/FAQ -- http://css-discuss.incutio.com/
>>> List policies -- http://css-discuss.org/policies.html
>>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>>
>> __
>> css-discuss [css-d@lists.css-discuss.org]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/



-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] help with media queries for email...mercy, mercy

[Ron Zisman]

karl,

http://ricochet.org/plastics_feb20.html

i’ve been trying to work with media queries. i think understand the basic 
concepts, i’ve done some tutorials, rebuilt the html and am still banging my 
head.

i theory, it seems like it shouldn’t be that hard. a wrapper and fixed 
container. when i apply the query, it goes liquid and won’t hold the 600 
measure.

sorry to be so dense, but i’m going nuts—i’m done a few tutorial from litmus 
.no  luck. i was hoping to get an extremely simple example.


most of the examples i’ve seen have a ton of resets and queries—its a blur. its 
not from not trying. —thanks again,

ron
> On Feb 19, 2017, at 10:05 PM, Karl DeSaulniers  wrote:
> 
> Ron,
> Quick and simple.
> 
> Google: CSS Media Queries example
> 
> Download, dissect and learn.
> 
> GL!
> 
> Best,
> 
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com
> 
> 
> 
> 
>> On Feb 18, 2017, at 7:14 PM, Ron Zisman  wrote:
>> 
>> hi all,
>> 
>> http://ricochet.org/plastics_engineering.html
>> 
>> i’m new to email, but most of the table coding went ok, but as i’m trying to 
>> make it responsive,
>> i need media queries. i understand the concept, but am having trouble with 
>> reality.
>> 
>> a little direction would be appreciated.
>> 
>> thank you in advance,
>> —ron
>> __
>> css-discuss [css-d@lists.css-discuss.org]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> 
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/