Media
3 items
Description
Audit HTML emails for CSS compatibility, accessibility, and deliverability, directly from any page. Emailens is an email preflight inspector built for developers, designers, and marketing engineers. Open the browser side panel on any webpage, inspect email HTML or component code, and receive real-time compatibility scores, CSS diagnostics, accessibility audits, deliverability warnings, and cloud rendering previews before sending a single campaign. No switching between browser tabs. No waiting on slow screenshot queues. No guesswork on whether your template will break across different rendering engines. Inspect and debug email markup directly where you build. ================================= PREFLIGHT COMPATIBILITY SCORING ================================= Every email inspection calculates a 0 to 100 compatibility score in real time. The score evaluates how reliably your HTML markup, inline styles, and CSS properties survive across modern webmail, mobile apps, and legacy desktop engines. • Dynamic health indicators (Outstanding, Stable, Acceptable, Critical Fixes Needed) give immediate feedback on template quality. • Breakdown metrics evaluate rendering stability across mobile viewports, web clients, and desktop word processors. • Identifies whether rendering issues are cosmetic warnings or critical layout-breaking bugs. ================================= INTERACTIVE VISUAL ELEMENT INSPECTOR ================================= Target specific email modules instead of debugging thousands of lines of markup at once. • Click Inspect to activate the element picker directly on the current tab. • Hover over buttons, tables, cards, or hero banners in your email to isolate them. • Review isolated preflight scores, CSS rules, and element-specific markup. • Copy raw HTML or snippet code with one click. ================================= DETAILED CSS ENGINE DIAGNOSTICS ================================= Email client engines handle CSS inconsistently. Emailens identifies incompatible declarations and provides actionable inline alternatives. • Pinpoints the exact selector, property, and style attribute triggering issues. • Explains the underlying engine limitation, such as stripped style blocks, missing flexbox or grid support in desktop Word engines, unsupported border radius, or dropped linear gradients. • Provides recommended fallback markup, including table-based patterns and VML workarounds. • Interactive element highlighting: click any diagnostic card in the panel to visually locate the offending element on the page. • Filter issues by platform to focus on resolving specific layout bugs one at a time. ================================= CLOUD RENDERING SCREENSHOTS ================================= Generate high-fidelity visual previews across light and dark modes. • Inspect rendered cards representing primary desktop, mobile, and webmail environments. • Trigger headless browser cloud captures to inspect actual rendering output. • Full-screen modal inspector supporting zoom levels (Fit, 100%, 200%) and keyboard shortcuts for quick navigation. • Toggle between light and dark backgrounds instantly to spot unreadable text or broken color schemes. ================================= DARK MODE SIMULATION AND CONTRAST ================================= Dark mode rendering varies dramatically across email applications. Some clients apply full color inversion, others apply partial inversion, and some ignore dark mode entirely without explicit meta tags. Emailens checks for: • Missing color-scheme meta tags required to activate dark mode media queries. • Inverted backgrounds that cause dark text or dark logos to become unreadable. • Half-inverted email layouts where nested containers retain hardcoded light backgrounds while surrounding containers invert. • Transparent PNG or SVG assets that blend into dark container backgrounds. • Contrast compliance issues on inverted text. ================================= ACCESSIBILITY (A11Y) AUDITING ================================= Ensure your email campaigns are readable and usable for all subscribers. • Image accessibility: flags missing alt text and recommends empty alt attributes for purely decorative imagery. • Semantic table structure: verifies appropriate roles (such as role="presentation") so screen readers interpret layouts correctly. • Screen reader readiness: flags nested tables, empty links, and missing language attributes. • Color contrast checks: verifies text readability on standard, mobile, and dark mode viewports. ================================= DELIVERABILITY AND SIZE WARNINGS ================================= Deliverability problems often stem from template payload issues rather than sender reputation alone. • Gmail 102 KB clipping alert: warns you when total HTML payload approaches or exceeds the threshold where webmail clients clip content, hide footers, and disable tracking pixels. • Style block size monitoring: flags CSS blocks exceeding client-specific style limits that cause styles to be dropped entirely. • CSS survival checks: identifies syntax patterns that trigger clients to discard stylesheet blocks, such as uppercase important declarations or malformed color syntax. • Spam trigger analysis: evaluates structural factors and content markers that increase junk folder risk. ================================= LINKS AND MEDIA VERIFICATION ================================= Ensure every link works and media assets display properly before distribution. • Link audit: flags empty href attributes, non-HTTPS protocols, and malformed URLs that trigger security filters. • Media validation: detects missing image dimensions that cause layout shifts or layout collapse in desktop email clients. • Asset safety: highlights image formats with limited client compatibility. ================================= INBOX PREVIEW AND PLAIN TEXT FALLBACK ================================= Inspect how your email appears in subscriber inboxes before opening. • Subject line and preheader extraction: preview headline length, character truncation, and preheader alignment. • Plain text fallback generator: verify that subscribers using text-only readers or assistive tools receive clean, structured content. ================================= MULTI-FRAMEWORK CODE COMPILATION ================================= Audit templates even when not currently rendering them in an active browser tab. • Paste raw code directly into the side panel with automatic format detection. • Supports raw HTML, MJML markup, React Email (JSX), and Maizzle templates. • Drag and drop files (.html, .mjml, .jsx) straight into the panel for instant scanning. • Quick-start starter templates to test sample emails immediately. ================================= COMPATIBLE WITH YOUR TOOLCHAIN ================================= Emailens works wherever you design, develop, or preview emails: • Major email service provider (ESP) visual and code editors. • Local development environments, localhost servers, and component preview tools. • Online email sandboxes and playgrounds. • Standalone browser preview frames. ================================= DEVELOPER SECURITY AND PRIVACY ================================= Emailens is built with developer privacy at the core. We do not collect or track personal subscriber records. Template parsing and preflight scoring run safely within isolated browser contexts and our open-source diagnostic engine (@emailens/engine). ================================= PART OF THE EMAILENS ECOSYSTEM ================================= The Chrome side panel integrates with the broader Emailens email developer platform: • Web Application: full-screen inspection dashboards, history tracking, and shareable preview links. • MCP Server: local model context protocol tools for AI coding assistants. • GitHub Actions: automated CI/CD pipeline checks to prevent rendering regressions before merging pull requests. • Figma Plugin: preflight diagnostics for designers before developer handoff. Free tier includes daily preflight scans, full CSS diagnostics, dark mode checks, and local MCP developer tooling.