Yahoo! Mail gets a makeover. A new version of it called Yahoo Mail Pro released a few weeks back, with updated features, new UI and performance improvement. The update has a new subscription plan for desktop and mobile users, apart from the new technology stack and design.
The new version is developed with a goal to deliver Yahoo! Mail services,
- Faster and better than the previous version
- Improve performance for low-bandwidth users
- More accessible and reliable
- Reduces the memory used by the browser
It’s built in a way that it provides agility to the developers in terms of updates.
Email clients render HTML differently and face certain support and rendering challenges. In order to prevent your emails from landing up in the trash folder, you need to keep in mind these challenges and their workarounds while building the email templates.
This update brings with it certain changes in the way Yahoo! Mail renders emails. Let us have a sneak peek into them:
Yahoo! Webmail now allowing “display:none” (and !important) inline
Previously, Yahoo! Mail supported display:none only within embedded <style> blocks. With the update, “display:none” is now allowed as an inline style.
Scrollbars appearing when using max-width and max-height
While using the max-width and max-height elements, Yahoo! Mail used to add overflow-x:auto with max-width and overflow-y:auto with max-height, due to which a scrollbar used to appear. To avoid this scrollbar, it was necessary to add overflow:hidden!important.
The new interface of Yahoo! Mail no longer adds these elements with max-width and max-height and hence there is no issue of scrollbars appearing.
Difference in CSS filtering
There were slight CSS filtering differences in Yahoo! Mail which is now resolved in the new version. The CSS filtering in Webmail and iOS are now similar,
What remains the same?
- The center align HTML attribute is not supported in both the versions. As a solution to this, use align= “center” and for tables of fixed width, use align center in td.
- For images, the float tags do not work. As a workaround, add align=”top” to the concerned images.
- The !important rule is still removed in both versions for styles like display and color if there is space between the !important and your display statement. For example, display:block !important will be converted to display:block and hence it should be used as display:none!important.
- Media queries still do not support max-width and min-width. Since Yahoo! Mail allows only a single filter in media queries, both max-width and min-width cannot be used in a single media query.
- Even though the CSS filtering for Android is similar to Webmail and iOS, it still supports styles only in the body.
- The height attribute still gets converted to min-height. Due to this, when we try to change width to “auto” for responsive images, it gets converted into min-height:auto, which is an invalid declaration.
Keep in mind the above changes while developing emails for your next marketing campaign. Also, take note that this new update takes an opt-in approach, and hence a large portion of the user base will still be using the previous version.
Facing similar challenges with other email clients? Email Uplers can help. Get in touch with us.