Η τεχνική Fab Four για τη δημιουργία αποκριτικών μηνυμάτων χωρίς ερωτήματα πολυμέσων

Νομίζω ότι βρήκα έναν νέο τρόπο δημιουργίας αποκριτικών email, χωρίς ερωτήματα πολυμέσων. Η λύση περιλαμβάνει τη συνάρτηση CSS calc () και τις ιδιότητες τριών πλάτους , ελάχιστου πλάτους και μέγιστου πλάτους .

Ή όπως μου αρέσει να τα ονομάζω όλα μαζί: το Fab Four (σε CSS).

Το πρόβλημα

Η δημιουργία αποκριτικών email είναι δύσκολη, ειδικά επειδή οι πελάτες email σε κινητά (όπως το Gmail, το Yahoo ή το Outlook.com) δεν υποστηρίζουν ερωτήματα πολυμέσων. Μια υβριδική προσέγγιση, μια πρώτη στρατηγική Gmail ή ένα αποκριτικό email χωρίς ερωτήματα πολυμέσων είναι εξαιρετικοί τρόποι προσαρμογής σε αυτήν την κατάσταση.

Αυτή η τελευταία προσέγγιση ήταν η αγαπημένη μου μέχρι στιγμής. Η μεγάλη ιδέα είναι να έχουμε στήλες ως iv> s με σταθερό πλάτος ευθυγραμμισμένο με το "display: inline- block". Μόλις μια οθόνη δεν μπορεί πλέον να περιέχει δύο μπλοκ δίπλα-δίπλα, φυσικά θα ρέουν το ένα κάτω από το άλλο. Αλλά πάντα είχα πρόβλημα με αυτό.

Μόλις στοιβάζονται όλα τα μπλοκ, δεν λαμβάνουν το πλήρες πλάτος του email.

Αναζητώ τρόπους επίλυσης αυτού του προβλήματος εδώ και πολύ καιρό. Το Flexbox είναι ένας μεγάλος υποψήφιος, αλλά δυστυχώς η υποστήριξη του Flexbox σε ένα email είναι αβυσσαλέα.

Μια λύση

Θυμάμαι πλάτος , ελάχιστο και μέγιστο πλάτος

Πάνω από τη συνάρτηση calc () , η λύση που βρήκα περιλαμβάνει αυτές τις τρεις ιδιότητες CSS. Για να κατανοήσετε πλήρως πώς λειτουργεί, ακολουθεί μια υπενθύμιση για το πώς συμπεριφέρονται το πλάτος , το ελάχιστο και το μέγιστο πλάτος όταν χρησιμοποιούνται μαζί (όπως συνοψίζεται σαφώς από τον συνάδελφο γαλλικό προγραμματιστή Raphaël Goetter).

  • Αν το πλάτος τιμή είναι μεγαλύτερη από την μέγιστη πλάτους τιμή, μέγιστο πλάτος νίκες.
  • Εάν η τιμή ελάχιστου πλάτους είναι μεγαλύτερη από τις τιμές πλάτους ή μέγιστου πλάτους , κερδίζει το ελάχιστο πλάτος .

Μπορεί να μαντέψει ποιο θα είναι το πλάτος ενός κουτιού με τα ακόλουθα στυλ;

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

(Απάντηση: το πλαίσιο θα έχει πλάτος 480px.)

Παρουσιάζοντας το calc () και τη μαγική φόρμουλα

Χωρίς άλλη παραλλαγή, εδώ είναι ένα παράδειγμα του Fab Four για τη δημιουργία δύο στηλών που θα στοιβάζονται και θα αναπτυχθούν κάτω από 480px.

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

Ας το αναλύσουμε για κάθε ιδιότητα πλάτους .

min-width:50%;

Η ιδιότητα min-width καθορίζει τα πλάτη των στηλών μας σε αυτό που θα μπορούσαμε να ονομάσουμε την έκδοση για επιτραπέζιους υπολογιστές. Μπορούμε να αλλάξουμε αυτήν την τιμή για να προσθέσουμε περισσότερες στήλες (για παράδειγμα, 25% για διάταξη τεσσάρων στηλών) ή να ορίσουμε στήλες με σταθερά πλάτη pixel.

max-width:100%;

Η ιδιότητα max-width καθορίζει τα πλάτη των στηλών μας σε αυτό που θα μπορούσαμε να ονομάσουμε την έκδοση για κινητά. Στο 100%, κάθε στήλη θα αναπτυχθεί και θα προσαρμοστεί στο πλήρες πλάτος του γονικού κοντέινερ. Μπορούμε να αλλάξουμε αυτήν την τιμή για να διατηρήσουμε στήλες σε κινητά (για παράδειγμα, 50% για διάταξη δύο στηλών).

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

Χάρη στη συνάρτηση calc () , η ιδιότητα πλάτους είναι εκεί που συμβαίνει η μαγεία. Η τιμή 480 ταιριάζει με την επιθυμητή τιμή breakpoint. Το 100% αντιστοιχεί στο πλάτος του γονικού κοντέινερ των στηλών μας. Ο στόχος αυτού του υπολογισμού είναι να δημιουργήσουμε μια τιμή μεγαλύτερη από το μέγιστο πλάτος μας ή μικρότερη από το ελάχιστο πλάτος μας , έτσι ώστε να εφαρμόζεται είτε μία από αυτές τις ιδιότητες.

Ακολουθούν δύο παραδείγματα.

Με γονικό 500px, το υπολογισμένο πλάτος ισούται με -9600px. Είναι μικρότερο από το ελάχιστο πλάτος. Έτσι, το ελάχιστο πλάτος του 50% κερδίζει. Έτσι έχουμε μια διάταξη δύο στηλών.

Με γονικό 400px, το υπολογισμένο πλάτος ισούται με 38400px. Είναι μεγαλύτερο από το ελάχιστο πλάτος, αλλά το μέγιστο πλάτος είναι μικρότερο. Έτσι, το μέγιστο πλάτος του 100% κερδίζει. Έτσι έχουμε μια διάταξη στήλης.

Διαδήλωση

Εδώ είναι ένα demo για το τι μπορεί να κάνει αυτή η τεχνική.

Μπορείτε να δείτε την πλήρη επίδειξη online εδώ (ή στο Litmus Builder ή στο CodePen).

Και εδώ είναι δύο στιγμιότυπα οθόνης αυτής της επίδειξης στο Gmail, στο ηλεκτρονικό ταχυδρομείο ιστού και στην εφαρμογή για κινητά στο iOS. Ίδιος κωδικός, διαφορετική απόδοση.

Σε αυτό το demo, έχω ορίσει μερικά παραδείγματα διαφορετικών πλεγμάτων (με δύο, τρεις, τέσσερις στήλες). Το πρώτο πλέγμα, με τις εικόνες, είναι φτιαγμένο από τέσσερις στήλες σε επιτραπέζιο υπολογιστή σε δύο στήλες σε κινητό. Τα άλλα πλέγματα έχουν κατασκευαστεί για να αυξάνεται το πλήρες πλάτος σε κινητά.

Επίσης, παρατηρήστε πώς ο τίτλος αλλάζει από αριστερή στοίχιση θέση σε επιτραπέζιο υπολογιστή σε κεντρική θέση στο κινητό. Αυτό επιτυγχάνεται δίνοντας στον τίτλο ένα σταθερό πλάτος 190px και ένα " margin: 0 auto; "Για να το κεντράρετε. Στην επιφάνεια εργασίας, το γονικό κοντέινερ του τίτλου έχει ελάχιστο πλάτος 190 εικονοστοιχεία, οπότε το λογότυπο παραμένει στα αριστερά. Σε κινητά, το γονικό κοντέινερ αυξάνεται σε όλο το πλάτος, οπότε το λογότυπο κεντράρεται.

Μια μεγάλη πτυχή αυτής της τεχνικής είναι ότι, δεδομένου ότι όλα βασίζονται στο γονικό πλάτος του πλέγματος, ένα email μπορεί να προσαρμοστεί ακόμη και σε ένα ηλεκτρονικό ταχυδρομείο ιστού. Για παράδειγμα, στο Outlook.com, ανεξάρτητα από το αν επιλέξατε να έχετε το παράθυρο ανάγνωσης στο κάτω μέρος ή στα δεξιά, το μήνυμα ηλεκτρονικού ταχυδρομείου ανταποκρίνεται σωστά στο πλάτος του παραθύρου ανάγνωσης. Αυτό θα ήταν αδύνατο να κάνετε με ερωτήματα πολυμέσων.

Υποστήριξη

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.
  • Η τελική έκδοση του υπολογισμού (για την υποστήριξη του παλιού Outlook.com και την υποβάθμιση του νέου) είναι δύσκολο να διαβαστεί. Η χρήση ενός προεπεξεργαστή και μιας μίξης για τη δημιουργία όλων των απαιτούμενων ιδιοτήτων θα μπορούσε να είναι κάτι παραπάνω από χρήσιμη.

Εξακολουθώ να πιστεύω ότι αυτή η τεχνική θα είναι πολύ χρήσιμη σε πολλές περιπτώσεις, ειδικά για βελτιστοποιήσεις του Gmail. Είμαι βέβαιος ότι υπάρχουν επίσης περιπτώσεις χρήσης για ιστότοπους (όπως widgets, διαφημίσεις,…).

Και ανυπομονώ να δω τι θα σας εμπνεύσει να δημιουργήσετε.