Smashing Newsletter #276: CSS Edition

Preventing layout shifts with CSS Grid, clamp(), custom list markers and fixed haders and jump links with scroll-margin. Issue #276 • Tue, Nov. 24, 2020 • [View in the browser]( 💨 [Smashing Newsletter]( Dear Friends, The subject of the newsletter today is CSS — very much my favorite subject! We have plenty of CSS-related material in our [Guide to CSS Layout]( and a good number of useful articles that we’ve published in the past (e.g. “[How To Learn CSS]( would be a good place to start). But in case you’re looking to dive in even more into the world of CSS, there’s still time to book one of the final remaining tickets for our workshop with Andy Bell on “[Building A Design System With CSS](. He’ll be showing you how to create a resilient and scalable design system using CUBE CSS, and so much more! Also, we have just announced that this December 17, we are organizing another community-based [Smashing Meets]( event! This time, it’ll be a nice and cozy ‘Happy Holidays’ edition to celebrate the holiday season of this interesting year with a few hours of Smashing fun! There will be three talks and some fun side events, too. Tickets are only 10 USD, and our Smashing Members get in for free. [Smashing Meets Happy Holidays Edition]( I hope that our American readers have a good Thanksgiving, and while it may be a bit different compared to the previous years, hopefully you’ll still manage to celebrate and have some time to relax. Stay safe, Rachel Andrew (@rachelandrew) --------------------------------------------------------------- Table of Contents 1. [Preventing Layout Shifts With CSS Grid](#a1) 2. [Fluid Typography With clamp()](#a2) 3. [New Front-End & UX Workshops](#a3) 4. [A Clever Solution For Autogrowing Textareas](#a4) 5. [Custom List Markers](#a5) 6. [Fixing Headers And Jump Links](#a6) 7. [New On Smashing Job Board](#a7) 8. [Our Current Most Popular Articles](#a8) --------------------------------------------------------------- #1. Preventing Layout Shifts With CSS Grid It’s no news that CSS Grid is a fantastic tool to build complex layouts. But did you know that it can help you prevent layout shifts, too? When Hubert Sablonnière discovered a layout shift problem with a toggling state on a UI component he worked on, he came up with a solution: the “[Anti Layout Shift Grid Stacking Technique](. [Prevent layout shifts with CSS grid stacks]( Compared to solving the layout shift with absolute positioning, Hubert’s Grid-based technique supports complex situations that require more than two panels. Another benefit: You don’t need to assume which panel should guide the size of the whole component. If you want to dive in deeper, Hubert wrote up everything you need to know to prevent both vertical and horizontal shifts in a practical [blog post](. (cm) --------------------------------------------------------------- #2. Fluid Typography With clamp() When it comes to fluid scaling, CSS has some exciting new features: clamp(), min(), and max(). They cap and scale values as the browser grows and shrinks. min() and max() return the respective minimum and maximum values at any given time while clamp lets you you pass in both a minimum and maximum plus a preferred size for the browser to use. [Clamp]( As Trys Mudford points out, clamp() comes in particularly handy when you want broadly fluid typography without being 100% specific about the relationship between the varying sizes. In his [in-depth article]( about the new feature, he shares valuable hands-on tips for using clamp() effectively. (cm) --------------------------------------------------------------- #3. New Front-End & UX Workshops We’ve been running online workshops since April this year, and it’s always an [incredible experience]( with wonderful attendees from all over the world coming together to learn something together. That’s [Smashing Workshops]( live 2.5h-sessions with practical examples, video recordings and a friendly Q&A. [Smashing Online Workshops]( Live and interactive: [2.5h-sessions]( spanning across days or weeks. We’ve just announced our [new front-end & UX workshops]( on front-end in 2021, forms, SVG animation, CSS and HTML email. There are still some early-birds left, with a lil’ friendly discount, so [take a look]( and perhaps join us as well. --------------------------------------------------------------- #4. A Clever Solution For Autogrowing Textareas There’s no native solution for an autogrowing that expands in height as much as it needs to in order to contain the current value. Based on an idea by Stephen Shaw, Chris Coyier shares a very [clever workaround]( for autogrowing textareas that achieves the desired effect until we get something better and native. [The Cleanest Trick for Autogrowing Textareas]( The trick is that you replicate the content of the <textarea> in an element that can auto-expand height, and match its sizing. Then hide the replica visually. Whichever of the children is tallest will push the parent to that height, and the other child will follow. The minimum height of the <textarea> serves as the base height, but as soon as the replicated text element grows taller, everything will grow taller with it. Nice! (cm) --------------------------------------------------------------- #5. Custom List Markers There are ordered lists and unordered lists, each of them giving us the standard styling we expect. However, there’s more to lists than that, and thanks to CSS we have more styling options than you may think. How about starting a list of pros and cons with thumbs up and thumbs down emoji, for example? [Custom Emoji Markers]( Lea Verou [did exactly that]( with the help of ::marker { content: var(--marker); }. The ::marker pseudo-element allows us to have custom markers (emoji, for example) with just one property, either on the <li> or an ancestor. [Browser support]( for the feature is constantly improving. If you want to learn more about markers, counters, and how to tailor CSS lists to your need, Rachel Andrew’s [article]( takes a closer look at the CSS Lists specification and the possibilities it brings along. (cm) --------------------------------------------------------------- From our sponsor Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy [Northwestern: Online Master’s in Information Design and Strategy]( Earn your master’s degree [online](. --------------------------------------------------------------- #6. Fixing Headers And Jump Links Jump links in combination with fixed headers can cause quite some frustration. Maybe you’ve run into the same issue before: When clicked, your jump link takes you to the desired element, but a fixed header is hiding it. In the past, wild hacks were required to solve the issue. Luckily, there’s now a [straightforward and well-supported CSS solution](. [Fixed Headers And Jump Links?]( The trick: scroll-margin-top. Assign it to your headers, and the position: fixed header won’t get into their way anymore when you navigate to them with a jump link. A short line of code that makes a huge difference. (cm) --------------------------------------------------------------- #7. New On Smashing Job Board - [Digital Advertising and Partnerships Coordinator]( at Smashing Media AG (Anywhere) - [Web Developer II]( at University of Florida College of the Arts (Gainesville) - [Senior Creative Software Engineer (TouchDesigner)]( at Leviathan (Chicago) --------------------------------------------------------------- #8. Our Current Most Popular Articles - [A Thoughtful Way To Use React’s useRef() Hook]( - [Standardizing <select> And Beyond: The Past, Present And Future Of Native HTML Form Controls]( - [Creating A Continuous Integration Test Workflow Using GitHub Actions]( --------------------------------------------------------------- This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf), Rachel Andrew (ra) and Iris LjeÅ¡njanin (il). Sent to truly [smashing]( readers via [Mailchimp](. We sincerely appreciate your kind support. You rock. [Follow us on Twitter]( • [Join us on Facebook]( --------------------------------------------------------------- Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](</div> </div> <div id="tabs-4" style="overflow-y:hidden;"> <a href="" class="productLeftTabsImg venobox_mobile"> <div class="productTabImgWrapper"> <div style="margin: 0 auto;width: 320px;"> <img src=""> </div> </div> <div class="productLeftTabsImgInner"> <span></span> </div> </a> </div> </div> </div> <div class="productLeftFeatures"> <div class="right" style="margin-right: 17px;"> <a href="https://www.similarmail.com/login.php" class="productRightDlBtn cf"> <i class="productRightLockIcon"></i> <p>Edit & Download HTML</p> </a> </div> <div class="right" style="margin-right: 10px;"> <a href="https://www.similarmail.com/login.php" class="productRightFavBtn cf likebox_link" data-id="4062294"> <i class="productRightFavIcon"></i> <p>Add To Favourites</p> </a> </div> <div class="clear"></div> </div> <div class="productLeftKeywords"> <h2>EDM Keywords <span>(115)</span></h2> <div class="productLeftKeywordsInner cf"> <a href="https://www.similarmail.com/search/year/">year</a> <a href="https://www.similarmail.com/search/written/">written</a> <a href="https://www.similarmail.com/search/world/">world</a> <a href="https://www.similarmail.com/search/workshop/">workshop</a> <a href="https://www.similarmail.com/search/worked/">worked</a> <a href="https://www.similarmail.com/search/weeks/">weeks</a> <a href="https://www.similarmail.com/search/want/">want</a> <a href="https://www.similarmail.com/search/vertical/">vertical</a> <a href="https://www.similarmail.com/search/university/">university</a> <a href="https://www.similarmail.com/search/trick/">trick</a> <a href="https://www.similarmail.com/search/tips/">tips</a> <a href="https://www.similarmail.com/search/time/">time</a> <a href="https://www.similarmail.com/search/tickets/">tickets</a> <a href="https://www.similarmail.com/search/thumbs/">thumbs</a> <a href="https://www.similarmail.com/search/thanks/">thanks</a> <a href="https://www.similarmail.com/search/textarea/">textarea</a> <a href="https://www.similarmail.com/search/tallest/">tallest</a> <a href="https://www.similarmail.com/search/take/">take</a> <a href="https://www.similarmail.com/search/subject/">subject</a> <a href="https://www.similarmail.com/search/straightforward/">straightforward</a> <a href="https://www.similarmail.com/search/still/">still</a> <a href="https://www.similarmail.com/search/starting/">starting</a> <a href="https://www.similarmail.com/search/start/">start</a> <a href="https://www.similarmail.com/search/soon/">soon</a> <a href="https://www.similarmail.com/search/solving/">solving</a> <a href="https://www.similarmail.com/search/solve/">solve</a> <a href="https://www.similarmail.com/search/solution/">solution</a> <a href="https://www.similarmail.com/search/sizing/">sizing</a> <a href="https://www.similarmail.com/search/size/">size</a> <a href="https://www.similarmail.com/search/showing/">showing</a> <a href="https://www.similarmail.com/search/run/">run</a> <a href="https://www.similarmail.com/search/resilient/">resilient</a> <a href="https://www.similarmail.com/search/required/">required</a> <a href="https://www.similarmail.com/search/require/">require</a> <a href="https://www.similarmail.com/search/replicate/">replicate</a> <a href="https://www.similarmail.com/search/relationship/">relationship</a> <a href="https://www.similarmail.com/search/push/">push</a> <a href="https://www.similarmail.com/search/published/">published</a> <a href="https://www.similarmail.com/search/pros/">pros</a> <a href="https://www.similarmail.com/search/prevent/">prevent</a> <a href="https://www.similarmail.com/search/possibilities/">possibilities</a> <a href="https://www.similarmail.com/search/plenty/">plenty</a> <a href="https://www.similarmail.com/search/pass/">pass</a> <a href="https://www.similarmail.com/search/parent/">parent</a> <a href="https://www.similarmail.com/search/panel/">panel</a> <a href="https://www.similarmail.com/search/order/">order</a> <a href="https://www.similarmail.com/search/northwestern/">northwestern</a> <a href="https://www.similarmail.com/search/nice/">nice</a> <a href="https://www.similarmail.com/search/news/">news</a> <a href="https://www.similarmail.com/search/needs/">needs</a> <a href="https://www.similarmail.com/search/need/">need</a> <a href="https://www.similarmail.com/search/navigate/">navigate</a> <a href="https://www.similarmail.com/search/native/">native</a> <a href="https://www.similarmail.com/search/much/">much</a> <a href="https://www.similarmail.com/search/minimum/">minimum</a> <a href="https://www.similarmail.com/search/may/">may</a> <a href="https://www.similarmail.com/search/max/">max</a> <a href="https://www.similarmail.com/search/match/">match</a> <a href="https://www.similarmail.com/search/master/">master</a> <a href="https://www.similarmail.com/search/makes/">makes</a> <a href="https://www.similarmail.com/search/looking/">looking</a> <a href="https://www.similarmail.com/search/look/">look</a> <a href="https://www.similarmail.com/search/lists/">lists</a> <a href="https://www.similarmail.com/search/list/">list</a> <a href="https://www.similarmail.com/search/li/">li</a> <a href="https://www.similarmail.com/search/learn/">learn</a> <a href="https://www.similarmail.com/search/know/">know</a> <a href="https://www.similarmail.com/search/issue/">issue</a> <a href="https://www.similarmail.com/search/idea/">idea</a> <a href="https://www.similarmail.com/search/hours/">hours</a> <a href="https://www.similarmail.com/search/hope/">hope</a> <a href="https://www.similarmail.com/search/hiding/">hiding</a> <a href="https://www.similarmail.com/search/hide/">hide</a> <a href="https://www.similarmail.com/search/help/">help</a> <a href="https://www.similarmail.com/search/height/">height</a> <a href="https://www.similarmail.com/search/headers/">headers</a> <a href="https://www.similarmail.com/search/guide/">guide</a> <a href="https://www.similarmail.com/search/get/">get</a> <a href="https://www.similarmail.com/search/future/">future</a> <a href="https://www.similarmail.com/search/follow/">follow</a> <a href="https://www.similarmail.com/search/feature/">feature</a> <a href="https://www.similarmail.com/search/expands/">expands</a> <a href="https://www.similarmail.com/search/example/">example</a> <a href="https://www.similarmail.com/search/exactly/">exactly</a> <a href="https://www.similarmail.com/search/everything/">everything</a> <a href="https://www.similarmail.com/search/even/">even</a> <a href="https://www.similarmail.com/search/emoji/">emoji</a> <a href="https://www.similarmail.com/search/element/">element</a> <a href="https://www.similarmail.com/search/edited/">edited</a> <a href="https://www.similarmail.com/search/dive/">dive</a> <a href="https://www.similarmail.com/search/discovered/">discovered</a> <a href="https://www.similarmail.com/search/current/">current</a> <a href="https://www.similarmail.com/search/css/">css</a> <a href="https://www.similarmail.com/search/create/">create</a> <a href="https://www.similarmail.com/search/content/">content</a> <a href="https://www.similarmail.com/search/contain/">contain</a> <a href="https://www.similarmail.com/search/cons/">cons</a> <a href="https://www.similarmail.com/search/comes/">comes</a> <a href="https://www.similarmail.com/search/combination/">combination</a> <a href="https://www.similarmail.com/search/code/">code</a> <a href="https://www.similarmail.com/search/clicked/">clicked</a> <a href="https://www.similarmail.com/search/clamp/">clamp</a> <a href="https://www.similarmail.com/search/children/">children</a> <a href="https://www.similarmail.com/search/child/">child</a> <a href="https://www.similarmail.com/search/celebrate/">celebrate</a> <a href="https://www.similarmail.com/search/case/">case</a> <a href="https://www.similarmail.com/search/cap/">cap</a> <a href="https://www.similarmail.com/search/came/">came</a> <a href="https://www.similarmail.com/search/building/">building</a> <a href="https://www.similarmail.com/search/browser/">browser</a> <a href="https://www.similarmail.com/search/beyond/">beyond</a> <a href="https://www.similarmail.com/search/assume/">assume</a> <a href="https://www.similarmail.com/search/announced/">announced</a> <a href="https://www.similarmail.com/search/always/">always</a> <a href="https://www.similarmail.com/search/also/">also</a> <a href="https://www.similarmail.com/search/achieves/">achieves</a> </div> </div> </div> <div class="productRightContainer"> <div class="productRightProfile cf"> <a href="https://www.similarmail.com/edm-newsletter/smashingmagazine.com"><div class="productRightProfileImg"><img style="width: 120px;" src="https://logo.clearbit.com/smashingmagazine.com" onerror="this.onerror=null;this.src='https://similarmail.com/assets/img/default_icon.jpg';"/></div></a> <div class="productRightProfileContent"> <h2><a href="https://www.similarmail.com/edm-newsletter/smashingmagazine.com">smashingmagazine.com</a></h2> <p>Smashing Magazine</p> <a class="productRightProfileContentLink follow_domain followtip" href="https://www.similarmail.com/login.php" class="cf" data-id="10185"> <i></i> <p>Follow</p> <div class="top"> <p style="text-transform: none;margin: 0;text-align: center;">Follow domain to get weekly email update</p> <i></i> </div> </a> </div> </div> <div class="productRightMails"> <div class="productRightMailsTitle cf"> <h2>Marketing emails from smashingmagazine.com</h2> <a href="https://www.similarmail.com/edm-newsletter/smashingmagazine.com">View More</a> </div> <div class="productRightMailsContent cf"> <div class="productRightMailsContentList"> <div class="productRightMailsContentListInner"> <a href="https://www.similarmail.com/edm-newsletter/smashingmagazine.com/11383512_476-how-to-measure-ux.html"><div class="productRightMailsContentListImg" style="background-image: url(https://images.similarmail.com/newsletter/11383512_476-how-to-measure-ux.png);"></div></a> <div class="productRightMailsContentListContent cf"> <div class="productRightMailsContentListContentLeft"> <span>Sent On</span> <p>01/10/2024</p> </div> <a href="https://www.similarmail.com/login.php" class="productRightMailsContentListContentRight likebox_link " data-id="11283512"></a> </div> </div> </div> <div class="productRightMailsContentList"> <div class="productRightMailsContentListInner"> <a href="https://www.similarmail.com/edm-newsletter/smashingmagazine.com/11347303_475-new-front-end-adventures.html"><div class="productRightMailsContentListImg" style="background-image: url(https://images.similarmail.com/newsletter/11347303_475-new-front-end-adventures.png);"></div></a> <div class="productRightMailsContentListContent cf"> <div class="productRightMailsContentListContentLeft"> <span>Sent On</span> <p>24/09/2024</p> </div> <a href="https://www.similarmail.com/login.php" class="productRightMailsContentListContentRight likebox_link " data-id="11247303"></a> </div> </div> </div> <div class="productRightMailsContentList"> <div class="productRightMailsContentListInner"> <a href="https://www.similarmail.com/edm-newsletter/smashingmagazine.com/11311752_474-web-accessibility-free-workshop.html"><div class="productRightMailsContentListImg" style="background-image: url(https://images.similarmail.com/newsletter/11311752_474-web-accessibility-free-workshop.png);"></div></a> <div class="productRightMailsContentListContent cf"> <div class="productRightMailsContentListContentLeft"> <span>Sent On</span> <p>17/09/2024</p> </div> <a href="https://www.similarmail.com/login.php" class="productRightMailsContentListContentRight likebox_link " data-id="11211752"></a> </div> </div> </div> <div class="productRightMailsContentList"> <div class="productRightMailsContentListInner"> <a href="https://www.similarmail.com/edm-newsletter/smashingmagazine.com/11278983_473-motion-and-animation.html"><div class="productRightMailsContentListImg" style="background-image: url(https://images.similarmail.com/newsletter/11278983_473-motion-and-animation.png);"></div></a> <div class="productRightMailsContentListContent cf"> <div class="productRightMailsContentListContentLeft"> <span>Sent On</span> <p>10/09/2024</p> </div> <a href="https://www.similarmail.com/login.php" class="productRightMailsContentListContentRight likebox_link " data-id="11178983"></a> </div> </div> </div> <div class="productRightMailsContentList"> <div class="productRightMailsContentListInner"> <a href="https://www.similarmail.com/edm-newsletter/smashingmagazine.com/11243917_472-enterprise-ux.html"><div class="productRightMailsContentListImg" style="background-image: url(https://images.similarmail.com/newsletter/11243917_472-enterprise-ux.png);"></div></a> <div class="productRightMailsContentListContent cf"> <div class="productRightMailsContentListContentLeft"> <span>Sent On</span> <p>03/09/2024</p> </div> <a href="https://www.similarmail.com/login.php" class="productRightMailsContentListContentRight likebox_link " data-id="11143917"></a> </div> </div> </div> <div class="productRightMailsContentList"> <div class="productRightMailsContentListInner"> <a href="https://www.similarmail.com/edm-newsletter/smashingmagazine.com/11211712_nl-471-design-systems.html"><div class="productRightMailsContentListImg" style="background-image: url(https://images.similarmail.com/newsletter/11211712_nl-471-design-systems.png);"></div></a> <div class="productRightMailsContentListContent cf"> <div class="productRightMailsContentListContentLeft"> <span>Sent On</span> <p>27/08/2024</p> </div> <a href="https://www.similarmail.com/login.php" class="productRightMailsContentListContentRight likebox_link " data-id="11111712"></a> </div> </div> </div> </div> </div> </div> </div> </div> <div class="productRow2Container"> <div class="productRow2ContainerInner"> <h2>Email Content Statistics</h2> <div class="productRow2Content cf"> <!-- 01 Start --> <div class="productRow2ContentList" style="background: white no-repeat url('https://www.similarmail.com/assets/img/icon/subject-length.png') 95% 5%;"> <div class="productRow2ContentListInner"> <div class="productRow2ContentListTopContent"> <a href="https://www.similarmail.com/pricing.php"><div class="details_stats_lock_wrapper"><div class="left"><img src="https://similarmail.com/assets/img/icon_lock_blue.png" style="height: 45px;"/></div><div class="left details_stats_lock_text_wrapper">Subscribe Now</div><div class="clear"></div></div></a> <p>Subject Line Length</p> <p class="details_stats_writeup">Data shows that subject lines with 6 to 10 words generated 21 percent higher open rate.</p> </div> <div class="productRow2ContentListBottomContent"> <a href="https://www.similarmail.com/pricing.php"><div class="details_stats_lock_wrapper"><div class="left"><img src="https://similarmail.com/assets/img/icon_lock_blue.png" style="height: 45px;"/></div><div class="left details_stats_lock_text_wrapper">Subscribe Now</div><div class="clear"></div></div></a> <p>Average in this category</p> </div> </div> </div> <!-- 01 End --> <!-- 02 Start --> <div class="productRow2ContentList" style="background: white no-repeat url('https://www.similarmail.com/assets/img/icon/num-words.png') 95% 5%;"> <div class="productRow2ContentListInner"> <div class="productRow2ContentListTopContent"> <a href="https://www.similarmail.com/pricing.php"><div class="details_stats_lock_wrapper"><div class="left"><img src="https://similarmail.com/assets/img/icon_lock_blue.png" style="height: 45px;"/></div><div class="left details_stats_lock_text_wrapper">Subscribe Now</div><div class="clear"></div></div></a> <p>Number of Words</p> <p class="details_stats_writeup">The more words in the content, the more time the user will need to spend reading. Get straight to the point with catchy short phrases and interesting photos and graphics.</p> </div> <div class="productRow2ContentListBottomContent"> <a href="https://www.similarmail.com/pricing.php"><div class="details_stats_lock_wrapper"><div class="left"><img src="https://similarmail.com/assets/img/icon_lock_blue.png" style="height: 45px;"/></div><div class="left details_stats_lock_text_wrapper">Subscribe Now</div><div class="clear"></div></div></a> <p>Average in this category</p> </div> </div> </div> <!-- 02 End --> <!-- 03 Start --> <div class="productRow2ContentList" style="background: white no-repeat url('https://www.similarmail.com/assets/img/icon/num-images.png') 95% 5%;"> <div class="productRow2ContentListInner"> <div class="productRow2ContentListTopContent"> <a href="https://www.similarmail.com/pricing.php"><div class="details_stats_lock_wrapper"><div class="left"><img src="https://similarmail.com/assets/img/icon_lock_blue.png" style="height: 45px;"/></div><div class="left details_stats_lock_text_wrapper">Subscribe Now</div><div class="clear"></div></div></a> <p>Number of Images</p> <p class="details_stats_writeup">More images or large images might cause the email to load slower. Aim for a balance of words and images.</p> </div> <div class="productRow2ContentListBottomContent"> <a href="https://www.similarmail.com/pricing.php"><div class="details_stats_lock_wrapper"><div class="left"><img src="https://similarmail.com/assets/img/icon_lock_blue.png" style="height: 45px;"/></div><div class="left details_stats_lock_text_wrapper">Subscribe Now</div><div class="clear"></div></div></a> <p>Average in this category</p> </div> </div> </div> <!-- 03 End --> <!-- 04 Start --> <div class="productRow2ContentList" style="background: white no-repeat url('https://www.similarmail.com/assets/img/icon/time-read.png') 95% 5%;"> <div class="productRow2ContentListInner"> <div class="productRow2ContentListTopContent"> <a href="https://www.similarmail.com/pricing.php"><div class="details_stats_lock_wrapper"><div class="left"><img src="https://similarmail.com/assets/img/icon_lock_blue.png" style="height: 45px;"/></div><div class="left details_stats_lock_text_wrapper">Subscribe Now</div><div class="clear"></div></div></a> <p>Time to Read</p> <p class="details_stats_writeup">Longer reading time requires more attention and patience from users. Aim for short phrases and catchy keywords.</p> </div> <div class="productRow2ContentListBottomContent"> <a href="https://www.similarmail.com/pricing.php"><div class="details_stats_lock_wrapper"><div class="left"><img src="https://similarmail.com/assets/img/icon_lock_blue.png" style="height: 45px;"/></div><div class="left details_stats_lock_text_wrapper">Subscribe Now</div><div class="clear"></div></div></a> <p>Average in this category</p> </div> </div> </div> <!-- 04 End --> </div> <div class="productRow2Content1 cf" id="openrate"> <div class="productRow2Content1List left" style="background: white no-repeat url('https://www.similarmail.com/assets/img/icon/open-rate.png') 98.5% 5%;"> <div class="productRow2Content2ListInner"> <a href="https://www.similarmail.com/pricing.php"><div class="details_stats_lock_wrapper"><div class="left"><img src="https://similarmail.com/assets/img/icon_lock_blue.png" style="height: 45px;"/></div><div class="left details_stats_lock_text_wrapper">Subscribe Now</div><div class="clear"></div></div></a> <p>Predicted open rate</p> <div class="predicted_writeup"></div> </div> </div> <div class="productRow2Content1List right" style="background: white no-repeat url('https://www.similarmail.com/assets/img/icon/open-rate.png') 98.5% 5%;margin-right: 0px;"> <div class="productRow2Content2ListInner"> <a href="https://www.similarmail.com/pricing.php"><div class="details_stats_lock_wrapper"><div class="left"><img src="https://similarmail.com/assets/img/icon_lock_blue.png" style="height: 45px;"/></div><div class="left details_stats_lock_text_wrapper">Subscribe Now</div><div class="clear"></div></div></a> <p>Spam Score</p> <p class="details_stats_writeup">Spam score is determined by a large number of checks performed on the content of the email. For the best delivery results, it is advised to lower your spam score as much as possible.</p> </div> </div> </div> <div class="productRow2Content2 cf"> <div class="productRow2Content2List" style="background: white no-repeat url('https://www.similarmail.com/assets/img/icon/reading-score.png') 95% 5%;"> <div class="productRow2Content2ListInner"> <a href="https://www.similarmail.com/pricing.php"><div class="details_stats_lock_wrapper"><div class="left"><img src="https://similarmail.com/assets/img/icon_lock_blue.png" style="height: 45px;"/></div><div class="left details_stats_lock_text_wrapper">Subscribe Now</div><div class="clear"></div></div></a> <p>Flesch reading score</p> <p class="details_stats_writeup" style="height:130px;">Flesch reading score measures how complex a text is. The lower the score, the more difficult the text is to read. The Flesch readability score uses the average length of your sentences (measured by the number of words) and the average number of syllables per word in an equation to calculate the reading ease. Text with a very high Flesch reading ease score (about 100) is straightforward and easy to read, with short sentences and no words of more than two syllables. Usually, a reading ease score of 60-70 is considered acceptable/normal for web copy.</p> </div> </div> <div class="productRow2Content2List" style="background: white no-repeat url('https://www.similarmail.com/assets/img/icon/technology.png') 95% 5%;"> <div class="productRow2Content2ListInner"> <a href="https://www.similarmail.com/pricing.php"><div class="details_stats_lock_wrapper"><div class="left"><img src="https://similarmail.com/assets/img/icon_lock_blue.png" style="height: 45px;"/></div><div class="left details_stats_lock_text_wrapper">Subscribe Now</div><div class="clear"></div></div></a> <p>Technologies</p> <p class="details_stats_writeup" style="height:130px;">What powers this email? Every email we receive is parsed to determine the sending ESP and any additional email technologies used.</p> </div> </div> <div class="productRow2Content2List" style="background: white no-repeat url('https://www.similarmail.com/assets/img/icon/email-size.png') 95% 5%;"> <div class="productRow2Content2ListInner"> <a href="https://www.similarmail.com/pricing.php"><div class="details_stats_lock_wrapper"><div class="left"><img src="https://similarmail.com/assets/img/icon_lock_blue.png" style="height: 45px;"/></div><div class="left details_stats_lock_text_wrapper">Subscribe Now</div><div class="clear"></div></div></a> <p>Email Size (not include images)</p> </div> </div> </div> </div> </div> <div class="productRow3Container"> <div class="productRow3ContainerInner"> <h2>Font Used</h2> <div class="productRow2Table"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td>No.</td> <td>Font Name</td> </tr> <tr><td colspan=2><a href="https://www.similarmail.com/pricing.php"><div class="details_stats_lock_wrapper"><div class="left"><img src="https://similarmail.com/assets/img/icon_lock_blue.png" style="height: 45px;"/></div><div class="left details_stats_lock_text_wrapper">Subscribe Now</div><div class="clear"></div></div></a></td></tr> </table> </div> </div> </div> <!-- Go to www.addthis.com/dashboard to customize your tools --> <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5ef15ed6a12b4f50"></script> <link rel="stylesheet" href="https://similarmail.com/assets/css/venobox.css" type="text/css" media="screen" /> <script type="text/javascript" src="https://similarmail.com/assets/js/venobox.min.js"></script> <script> var login_ed = false; $( function() { $( "#tabs" ).tabs({disabled: [ 1, 3 ]}); }); $(document).ready(function(){ $('.venobox').venobox({ frameheight: '600px' }); $('.venobox_mobile').venobox({ }); if(login_ed){ // likebox toggle $(".likebox_link").click(function(){ if (!$(this).hasClass("active")) { $(this).addClass("active"); $.post("https://www.similarmail.com/like_item.php", { email_id: $(this).attr("data-id"), action: 1 }, function(data, status){ // alert("Data: " + data + "\nStatus: " + status); }); } else{ $(this).removeClass("active"); $.post("https://www.similarmail.com/like_item.php", { email_id: $(this).attr("data-id"), action: 2 }, function(data, status){ // alert("Data: " + data + "\nStatus: " + status); }); } }); // follow domain toggle $(".follow_domain").click(function(){ if (!$(this).hasClass("active")) { $(this).addClass("active"); $.post("https://www.similarmail.com/subscribe_domain.php", { domain_id: $(this).attr("data-id"), action: 1 }, function(data, status){ // alert("Data: " + data + "\nStatus: " + status); }); $(this).children("p").text("Following"); } else{ $(this).removeClass("active"); $.post("https://www.similarmail.com/subscribe_domain.php", { domain_id: $(this).attr("data-id"), action: 2 }, function(data, status){ // alert("Data: " + data + "\nStatus: " + status); }); $(this).children("p").text("Follow"); } }); } // $('.productRightFavBtn').click(function(){ // if (!$('.productRightFavBtn').hasClass('active')) { // $('.productRightFavBtn').addClass('active'); // console.log("test"); // } else { // $('.productRightFavBtn').removeClass('active'); // } // }); }); </script> <!-- Content : End --> <!-- div id="footer_wrapper"> <div id="footer_copyright_wrapper" class="left">Copyright © 2016–2025 SimilarMail™. All screenshots © their respective owners.</div> <div class="footer_item_wrapper right uppercase"><a href="#">Privacy Policy</a></div> <div class="footer_item_wrapper right uppercase"><a href="#">Disclaimer</a></div> <div class="clear"></div> </div> --> <div class="footerContainer"> <div class="generalPageInner footerContainerInner cf"> <p>Copyright © 2019–2025 SimilarMail.</p> <ul class="cf"> <li><a href="https://www.similarmail.com/about_us.php">About</a></li> <li><a href="https://www.similarmail.com/contact_us.php">Contact</a></li> <li><a href="https://www.similarmail.com/feedback/">Feedback</a></li> <li><a href="https://www.similarmail.com/subscribe/">Subscribe</a></li> <li><a href="https://www.similarmail.com/privacy.php">Privacy</a></li> <li><a href="https://www.similarmail.com/terms.php">Terms of Use</a></li> </ul> </div> </div> <!-- Load Facebook SDK for JavaScript --> <div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({ xfbml : true, version : 'v7.0' }); }; (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js'; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> <!-- Your Chat Plugin code --> <div class="fb-customerchat" attribution=setup_tool page_id="439705576855352" theme_color="#0084ff" logged_in_greeting="Hi there, welcome to Similarmail! I'm happy to answer your question. " logged_out_greeting="Hi there, welcome to Similarmail! I'm happy to answer your question. " greeting_dialog_display="hide"> </div> <script type="text/javascript"> $(function() { var shortContent = function() { if($(window).height() > $('body').height()) { $('.footerContainer').addClass('shortContent'); } else { $('.footerContainer').removeClass('shortContent'); } }; shortContent(); $(window).resize(function() { shortContent(); }); }); </script> </body> </html>