Fab Four-teknikken til at skabe responsive e-mails uden medieforespørgsler

Jeg tror, ​​jeg fandt en ny måde at oprette responsive e-mails på uden medier. Løsningen involverer CSS calc () -funktionen og egenskaberne tre bredde , minbredde og maks. Bredde .

Eller som jeg gerne vil kalde dem alle sammen: Fab Four (i CSS).

Problemet

Det er svært at lave responsive e-mails, især da e-mail-klienter på mobilenheder (som Gmail, Yahoo eller Outlook.com) ikke understøtter medieforespørgsler. En hybrid tilgang, en Gmail-første strategi eller en responsiv e-mail uden medieforespørgsler er gode måder at tilpasse sig denne situation.

Den sidste tilgang har hidtil været min favorit. Den store idé er at have kolonner som iv> s med en fast bredde justeret med “display: inline- block”. Når en skærm ikke længere kan indeholde to blokke side om side, flyder de naturligvis under hinanden. Men jeg har altid haft et problem med dette.

Når alle blokke er stablet, tager de ikke den fulde bredde af e-mailen.

Jeg har ledt efter måder at løse dette problem i lang tid. Flexbox er en stor konkurrent, men desværre er Flexbox support i en e-mail dybtgående.

En løsning

Husker bredde , min bredde og maks bredde

Oven på funktionen calc () involverer den løsning, jeg fandt, disse tre CSS-egenskaber. For fuldt ud at forstå hvordan det virker, her er en påmindelse om, hvor bredde , min-bredde og max bredde opfører, når de anvendes sammen (som tydeligt opsummeret af kollega fransk front-end udvikler Raphaël Goetter).

  • Hvis bredden er større end de max-bredde værdi, max bredde vinder.
  • Hvis værdien min. Bredde er større end værdierne for bredde eller maks. Bredde , vinder min. Bredde .

Kan gætte hvad bredden på en kasse med følgende stilarter ville være?

.box { width:320px; min-width:480px; max-width:160px;}

(Svar: boksen ville være 480 px bred.)

Introduktion til calc () og den magiske formel

Uden yderligere ado er her et eksempel på Fab Four til at oprette to kolonner, der stabler og vokser under 480 pixel.

.block { display:inline-block; min-width:50%; max-width:100%; width:calc((480px — 100%) * 480);}

Lad os opdele det for hver breddeegenskab .

min-width:50%;

Egenskaben min-bredde definerer vores søjlebredder på det, vi kan kalde vores desktopversion. Vi kan ændre denne værdi for at tilføje flere kolonner (for eksempel 25% for et layout med fire kolonner) eller indstille kolonner med faste pixelbredder.

max-width:100%;

Egenskaben max-width definerer vores søjlebredder på det, vi kan kalde vores mobilversion. Ved 100% vokser hver kolonne og tilpasser sig den fulde bredde af deres overordnede container. Vi kan ændre denne værdi for at beholde kolonner på mobil (for eksempel 50% for et layout med to kolonner).

width:calc((480px — 100%) * 480);

Takket være den calc () funktion, bredde ejendom er, hvor det magiske sker. Den 480 værdi matcher vores ønskede breakpoint værdi. 100% svarer til bredden på den overordnede container i vores kolonner. Målet med denne beregning er at skabe en værdi, der er større end vores max-bredde eller mindre end vores min-bredde , så en af ​​disse egenskaber anvendes i stedet.

Her er to eksempler.

Med en forælder på 500 pixel er den beregnede bredde lig med -9600 px. Det er mindre end min. Bredde. Så min-bredden på 50% vinder. Således har vi et to kolonnelayout.

Med en forælder på 400 pixel er den beregnede bredde lig med 38400 pixel. Den er større end min-bredden, men den maksimale bredde er mindre. Så den maksimale bredde på 100% vinder. Således har vi et kolonnelayout.

Demo

Her er en demo af, hvad denne teknik kan gøre.

Du kan se den fulde demo online her (eller på Litmus Builder eller på CodePen).

Og her er to skærmbilleder af denne demo i Gmail, på desktop-webmailen og på mobilappen på iOS. Samme kode, forskellige gengivelser.

I denne demo har jeg sat et par eksempler på forskellige net (med to, tre, fire kolonner). Det første gitter med billederne er bygget til at gå fra fire kolonner på skrivebordet til to kolonner på mobilen. De andre net er bygget til at vokse i fuld bredde på mobil.

Bemærk også, hvordan titlen skifter fra en venstrejusteret position på skrivebordet til en centreret position på mobilen. Dette opnås ved at give titlen en fast bredde på 190 pixel og en " margin: 0 auto; ”For at centrere det. På skrivebordet har titelens overordnede container en minbredde på 190 pixel, så logoet forbliver til venstre. På mobil vokser forældercontaineren i fuld bredde, så logoet bliver centreret.

Et godt aspekt ved denne teknik er, at da alt er baseret på gitterets overordnede bredde, kan en e-mail tilpasses selv på en desktop-webmail. For eksempel på Outlook.com, uanset om du vælger at have læseruden i bunden eller til højre, svarer e-mailen korrekt på læserudenes bredde. Dette ville være umuligt at gøre med medieforespørgsler.

Support

In browsers, calc() is well supported since IE9. Turns out, calc() also has a pretty good support in email clients. It works in Apple Mail (on iOS and OS X), Thunderbird, Outlook (iOS and Android apps), Gmail (webmail, iOS and Android apps), AOL (webmail), and the old Outlook.com (still present in Europe).

The old Outlook.com

Outlook.com has one small quirk, though. The webmail will filter every property with a calc() that includes any parenthesis. This means that “calc(480px - 100%)” is supported, but “calc((480px - 100%) * 480)” is not. Since my initial formula involves parenthesis, we need to refactor it to avoid parenthesis. So the formula to support the old Outlook.com looks like this.

width:calc(480px * 480 — 100% * 480);

Unsupported clients

Of course, calc() isn’t supported in old email clients like Lotus Notes, or the latest Outlook for Windows (using Word’s HTML rendering engine). It also won’t work on Outlook Web App (both Office 365 and the new Outlook.com) and Yahoo (webmail, iOS and Android apps). These two will strip out any property involving a calc().

Fallbacks

In these cases, I would suggest duplicating all involved properties with fixed width values for clients that don’t support calc(). In order to hide The Fab Four from those clients, I advise to use calc() functions, even if it’s not technically useful. Our first example would look like the following.

.block { display:inline-block; min-width:240px; width:50%; max-width:100%; min-width:calc(50%); width:calc(480px * 480 — 100% * 480);}

Outlook Web App

However, Outlook Web App (both Office 365 and the new Outlook.com) has one more quirk of its own. When a calc() function contains a multiplication (with the ‘*’ character), the new Outlook.com and Office 365 will remove the whole inline style attribute corresponding. This means we need to calculate the multiplications by hand and only keep the resulting substraction. Here’s what the final calculation looks like for a 480px breakpoint.

width:calc(230400px — 48000%);

WebKit Prefixes

Older versions of Android (before Android 5.0) or iOS (before iOS 7) require -webkit- prefixes in order to work. Our final version looks like the following.

.block { display:inline-block; min-width:240px; width:50%; max-width:100%; min-width:-webkit-calc(50%); min-width:calc(50%); width:-webkit-calc(230400px — 48000%); width:calc(230400px — 48000%);}

Shortcomings and final thoughts

Like anything in the email development world, the Fab Four technique isn’t perfect. Here are a few limitations that I can think of:

  • It won’t work on Yahoo. The desktop version of its webmail supports media queries, though. So we could improve things a bit by making a mobile first version of our email, and then enhancing it on desktop with media queries.
  • You can only set one breakpoint. This might not be such a problem for emails though, as designs rarely go beyond 600px on desktop and don’t require more than one breakpoint to adapt on mobile.
  • You can only diminish the number of columns from a desktop version to a mobile version. While this rarely happens, you couldn’t go from a four columns layout on mobile to a single column layout on desktop.
  • Den endelige version af beregningen (for at understøtte det gamle Outlook.com og nedbrydes yndefuldt på det nye) er svært at læse. Brug af en forprocessor og et mixin til at generere alle de krævede egenskaber kan være mere end nyttigt.

Jeg tror stadig, at denne teknik vil være meget praktisk i mange tilfælde, især til Gmail-optimeringer. Jeg er sikker på, at der også er brugssager til websteder (som widgets, annoncer, ...).

Og jeg kan ikke vente med at se, hvad dette vil inspirere dig til at skabe.