1) Everything is scaled down from the PNG files - content table is 614px instead of 740. Try using the PNGs as a transparent overlay on top of your coded HTML to ensure the little things match up with respect to spacing and ragging.
2) Images and font sizes are all smaller than comp. Section 2 copy is not smaller relative to the other sections, but it should be.
3) Section 2 copy is not from comp, it is resting copy from section 1
4) Text wrapping matches in chrome but looks different in safari.
5) Spacing between links in the eyebrow does not match the PNG, too tight.
6) Missed the different mobile cat apps link.
7) Not really an issue but cause more time looking at the code:
Adding a tags into comments messes up our html validator and required some manual clean up to remove false positives
Example: <!— something something doing something to
something —>
Same goes for hard wrapping, and wrapping long tags to multiple lines versus using software.
8) We have experienced that Gmail app does indeed support media queries on Android devices, if the implementation is correct. Can you please research that and see if you can find a solution for your code?
Please address these when you have the opportunity and get back to me when the code is ready to review anew.
All items you outlined in your feedback have been addressed and the updated code is ready to be reviewed. Here is an updated Litmus test for you to check out:
You're right about the CSS media queries for Gmail App Android. I needed to switch back to the standard CSS object format instead of using the square bracket format. Strangely enough, that was what I think what was recommended to use for Android a few years back, and also worked with everything else, so a lot of developers switched over to using it strictly for emails. Not so much anymore, I suppose! But, yeah, thanks for the tip, and also thanks for your suggestion to use a semi-transparent PNG overlay for editing to help achieve pixel-perfect greatness! Huge help. Much simpler than downloading and using some clunky third-party tool to try and do the same thing, which I've done in the past and have deeply regretted.
Please let me know how things are looking in this round, and if there's anything else that needs attentions, or if you have any other questions or comments, don't hesitate to reach out!
Dave,
Some feedback, if you can address it:
1) Everything is scaled down from the PNG files - content table is 614px instead of 740. Try using the PNGs as a transparent overlay on top of your coded HTML to ensure the little things match up with respect to spacing and ragging.
2) Images and font sizes are all smaller than comp. Section 2 copy is not smaller relative to the other sections, but it should be.
3) Section 2 copy is not from comp, it is resting copy from section 1
4) Text wrapping matches in chrome but looks different in safari.
5) Spacing between links in the eyebrow does not match the PNG, too tight.
6) Missed the different mobile cat apps link.
7) Not really an issue but cause more time looking at the code: Adding a tags into comments messes up our html validator and required some manual clean up to remove false positives Example: <!— something something doing something to
Same goes for hard wrapping, and wrapping long tags to multiple lines versus using software.
Example: <p style="line-height:20px;margin-top:0;padding-top:0;color: #1c1c1c;font-size: 12px;line-height: 20px;”>
8) We have experienced that Gmail app does indeed support media queries on Android devices, if the implementation is correct. Can you please research that and see if you can find a solution for your code?
Please address these when you have the opportunity and get back to me when the code is ready to review anew.
Hey Mateo,
All items you outlined in your feedback have been addressed and the updated code is ready to be reviewed. Here is an updated Litmus test for you to check out:
https://litmus.com/pub/e2ee455
You're right about the CSS media queries for Gmail App Android. I needed to switch back to the standard CSS object format instead of using the square bracket format. Strangely enough, that was what I think what was recommended to use for Android a few years back, and also worked with everything else, so a lot of developers switched over to using it strictly for emails. Not so much anymore, I suppose! But, yeah, thanks for the tip, and also thanks for your suggestion to use a semi-transparent PNG overlay for editing to help achieve pixel-perfect greatness! Huge help. Much simpler than downloading and using some clunky third-party tool to try and do the same thing, which I've done in the past and have deeply regretted.
Please let me know how things are looking in this round, and if there's anything else that needs attentions, or if you have any other questions or comments, don't hesitate to reach out!
Thanks, DC