responsive email design

[Anonymous]

Hello,

I recently added tables (HTML) to a responsive template for a mobile send-out, and it appears that my line breaks or code is appearing diffierently within the email, when I open it on my outlook setup via desktop vs. my iphone.

I understand HTML/code tends to produce diferent visuals on different platforms (desktop, phone, ipad, etc..), but I thought the responsive template helped standardize code and design for all email send-outs?

I can paste screen shots if needed.

Thanks,
David

[Anonymous]

Hi David,

Once you change the type of content in the email, you really need to look at the CSS and ensure that all of the new content will be styled appropriately on different screen widths. Unfortunately that's not always so easy if you're not a front-end developer.

Can I suggest you look at the template code for the email to see if it has anything in place to handle tables? If not, you'll need to write that code - the alternative may be to insert the table as an image.

Regards,
Brody

[Anonymous]

Thanks for the advice Brody! I appreciate the help. I wish I could turn the table into an image, but I unfortunately have links within it. I guess I could create a table image that has hot links on it. I use Dreamweaver to work on my code. Best, David

[Anonymous]

Hi David,

Dreamweaver is great, at least I like it (many people prefer to use a text editor).

You could also try copying the whole template into Dreamweaver, and then inserting the table that you're using and that should give you an idea of what's going wrong and what needs fixing.

I'm not sure what you're skills are like in CSS, but look for Media Queries to do the resizing on different devices.

Regards,
Brody

[Anonymous]

Hi Brody,

I was able to get somewhere with Media Queries today, but I am still pulling out my hair. See my example.

Can you help?

Here is my scenario:

I added and edited the following lines in my Marketo Responsive template:

Added under the Style tag:

.ExternalClass {width:100%;}
img {display: block;}


I edited my media lines to read:

@media only screen and(max-device-width: 650px) {


My problem:

See how my right bracket/content is lined up and sits within the table next to the bracket perfectly on my Desktop version:




Note: The green bracket is only an image and I have content next to it. I tried placing the RSVP content into separate table rows, but it change all of my other table properties,

Here is what I am seeing on the mobile side:



As you can see, the RSVP content is extending beyond the image. Do I need to create a media query for a table or the content?

I've been working on this for 8 house and I am at a bit of a dead end.

Thanks,
David

[Anonymous]

Hi David,

I'd suggest either creating a media query to reduce the font-size on mobile for that area, or changing the margins/padding in that area.

Do you have much experience with CSS and Media Queries?

It also looks like the left-hand-side is cut off on mobile. Was it displayed at that zoom level by default?

Regards,
Brody

[Anonymous]

Hi Brody,

I am fairly new to media queries and have been doing quite a bit of research yesterday.

Can you give me a sample for what the font-size on mobile for that area, or margins/padding string of code would like?

I did a screen shot of the mobile one and cut it off on purposes (Sorry for the confusion).

So this may not be a table-oriented issue?

Thanks,
David

[Anonymous]

No problem David,

It's a lot to learn, so take your time - honestly I think you're jumping in quite deep, so be patient with yourself as you learn the world of media queries.

Essentially, you define your CSS as is. Then, you define CSS media query that says "if the screen is below this width (max-width), then do this instead". I generally use max-width over max-device-width, as I find it's easier to work with. The below will work on many devices, such as the iPhone range, and Windows Phone devices.

I'm assuming that your "ExternalClass" is the class name for the break-out box with the event details?

Thanks,
Brody

@media only screen and (max-width: 320px) {
    .ExternalClass {
        font-size: 50%;
    }
}

[Anonymous]

Hi Brody,

I appreciate your honesty. I was hoping the Marketo Responsive template would cover some of these issues.

I have the understanding of CSS, but media queries are definitely new to me. Also to ease the mind, we are testing this email extensively on iPhones, iPads, Androids, etc.. before it goes out.

I started writing the code based on on a few recommendations from other developers with advanced knowledge in media queries.

It looks like you are very knowledgable in the area, so I definitely appreciate your help!

Should that code you provided be included to what I already have?

Thanks,
David

[Anonymous]

Hi David,

Yes, you can use the code that I provided to tell the browser (or in this case, email client) that on a screen of 320px wide or less (rememeber that deives like the iPhone 4 have a larger width, but pretend to be 320px wide), then shrink the font size to 50%.

You'll want to play with that 50% value, setting it to a size that's actually smaller than the rest of your font. Font-size values can be %, px (pixels), and a variety of other measuerments. I just placed that value as an example.

The templates that I have seen from Marketo have a max-width 320px in them already, so you should just add the .ExternalClass / font-size code into that media query if it's there in your template. 

Does that make things a little clearer?

Regards,
Brody