Quantcast

help with media queries for email

classic Classic list List threaded Threaded
15 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

help with media queries for email

Ron Zisman
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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: help with media queries for email

Karl DeSaulniers
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 <[hidden email]> 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 [[hidden email]]
> 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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: 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 <http://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 <[hidden email]> 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 <[hidden email]> 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 [[hidden email]]
>> 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 [[hidden email]]
> 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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: 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 <[hidden email]> 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 <http://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 <[hidden email]> 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 <[hidden email]> 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 [[hidden email]]
>>> 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 [[hidden email]]
>> 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 [[hidden email]]
> 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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: 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 <[hidden email]> 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 <[hidden email]> 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 <http://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 <[hidden email]> 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 <[hidden email]> 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 [[hidden email]]
>>>> 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 [[hidden email]]
>>> 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 [[hidden email]]
>> 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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: help with media queries for email...mercy, mercy

Rod Castello-2
In reply to this post by Ron Zisman
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 <td>'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 <[hidden email]> 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 <http://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 <[hidden email]>
> 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 <[hidden email]> 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 [[hidden email]]
> >> 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 [[hidden email]]
> > 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 [[hidden email]]
> 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
[hidden email]
www.smashcube.com
______________________________________________________________________
css-discuss [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: 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 <http://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 <[hidden email]> 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 <td>'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 <[hidden email]> 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 <http://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 <[hidden email]>
>> 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 <[hidden email]> 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 [[hidden email]]
>>>> 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 [[hidden email]]
>>> 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 [[hidden email]]
>> 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
> [hidden email]
> www.smashcube.com
> ______________________________________________________________________
> css-discuss [[hidden email]]
> 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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: help with media queries for email...mercy, mercy

Tom Livingston
In reply to this post by Rod Castello-2
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 <[hidden email]> 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 <td>'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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: help with media queries for email...mercy, mercy

Rod Castello-2
In reply to this post by Ron Zisman
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 <[hidden email]> 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 <[hidden email]> 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 <td>'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 <[hidden email]> 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 <http://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 <[hidden email]>
>
> 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 <[hidden email]> 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 [[hidden email]]
> 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 [[hidden email]]
> 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 [[hidden email]]
> 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>
> [hidden email]
> www.smashcube.com
> ______________________________________________________________________
> css-discuss [[hidden email]]
> 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
[hidden email]
www.smashcube.com
______________________________________________________________________
css-discuss [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: help with media queries for email...mercy, mercy

Karl DeSaulniers
In reply to this post by Ron Zisman
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 <[hidden email]> 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 <http://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 <[hidden email]> 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 <[hidden email]> 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 [[hidden email]]
>>> 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 [[hidden email]]
>> 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 [[hidden email]]
> 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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: help with media queries for email...mercy, mercy

Karl DeSaulniers
In reply to this post by Ron Zisman
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 <[hidden email]> 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 <http://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 <[hidden email]> 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 <td>'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 <[hidden email]> 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 <http://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 <[hidden email]>
>>> 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 <[hidden email]> 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 [[hidden email]]
>>>>> 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 [[hidden email]]
>>>> 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 [[hidden email]]
>>> 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
>> [hidden email]
>> www.smashcube.com
>> ______________________________________________________________________
>> css-discuss [[hidden email]]
>> 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 [[hidden email]]
> 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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: help with media queries for email...mercy, mercy

Karl DeSaulniers
In reply to this post by Rod Castello-2
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 <[hidden email]> 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 <[hidden email]> 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 <[hidden email]> 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 <td>'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 <[hidden email]> 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 <http://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 <[hidden email]>
>>
>> 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 <[hidden email]> 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 [[hidden email]]
>> 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 [[hidden email]]
>> 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 [[hidden email]]
>> 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>
>> [hidden email]
>> www.smashcube.com
>> ______________________________________________________________________
>> css-discuss [[hidden email]]
>> 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
> [hidden email]
> www.smashcube.com
> ______________________________________________________________________
> css-discuss [[hidden email]]
> 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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: 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 <[hidden email]> 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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: 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 <[hidden email]> 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 <[hidden email]> 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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: 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 <[hidden email]> 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 <[hidden email]> 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 <[hidden email]> 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 [[hidden email]]
> 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 [[hidden email]]
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/
Loading...