Responsive Σχεδιασμός Newsletter Email: Αύξηση αναγνωσιμότητας για κινητά

Έχουμε μιλήσει σχετικά με την έννοια του Responsive Web Design (RWD) αρκετά πρόσφατα και το πήραμε ακόμα πιο μακριά με εργαλεία για ευαίσθητες εικόνες και άλλα. Σύντομα θα παρουσιάσουμε και ένα άρθρο που θα καλύπτει το θέμα της Αισθητικής Τυπογραφίας, αλλά έως τότε θα πρέπει να επικεντρωθούμε σε ενημερωτικά δελτία ηλεκτρονικού ταχυδρομείου και πώς μπορούμε να τα μετατρέψουμε σε ανταποκρινόμενες διατάξεις, ώστε να χωρέσουν στην οθόνη της συσκευής στην οποία βλέπουν.

Γιατί ανταποκρίνεται ξανά το σχέδιο;
Πολλοί από εμάς διαβάζουμε τα μηνύματα ηλεκτρονικού ταχυδρομείου από τα smartphones μας – στο αυτοκίνητο, στο τρένο ή ακόμα και στο αεροπλάνο. Προσπαθούμε να κάνουμε όσο το δυνατόν περισσότερα πράγματα εν κινήσει, ώστε να μπορούμε να απολαύσουμε λίγο περισσότερο χρόνο με την οικογένεια, στο γυμναστήριο ή με ένα χόμπι.

Αν διαβάζετε τα μηνύματά σας ηλεκτρονικού ταχυδρομείου από ένα smartphone μία φορά, γνωρίζετε ήδη ότι ενώ μπορεί να είναι μια θετική εμπειρία, μπορεί επίσης να μετατραπεί σε αρνητικό. Έχουμε δοκιμάσει μικρές γραμματοσειρές, στενές κολώνες και σπασμένες διατάξεις πάρα πολλές φορές. Αλλά είμαστε μέσα για μια αλλαγή τώρα που Responsive Web Design είναι στα πρόθυρα να γίνει μια από τις πιο σημαντικές ιδέες στην ιστορία του σχεδιασμού ιστοσελίδων.

Αν είστε ένας από αυτούς που στέλνουν ενημερωτικά δελτία ηλεκτρονικού ταχυδρομείου και δεν γνωρίζετε αν αυτό, σας ενημερώνω ότι περίπου το 20% των ηλεκτρονικών μηνυμάτων που αποστέλλονται σε όλο τον κόσμο διαβάζονται σε smartphone ή tablet (σύμφωνα με έρευνα από το 2011 – σχεδόν το 16% περισσότερο από το 2009). Παραδόξως ή όχι, περίπου το 90% αυτών των συσκευών εκτελούν iOS.

Έτσι, κάθε πέμπτο των πιθανών αναγνωστών σας χρησιμοποιεί μια φορητή συσκευή κατά την πρόσβαση στα εισερχόμενά τους. Πριν από λίγα χρόνια, οι άνθρωποι ανησυχούσαν για το γεγονός ότι αυτά τα μηνύματα ηλεκτρονικού ταχυδρομείου φαίνονται καλά στο Gmail ή το Outlook. Τώρα που αυτό είναι το είδος, το να τους φαίνεται καλό σε φορητές συσκευές είναι εξίσου σημαντικό και απαιτεί άμεση προσοχή.

Με αυτές τις φορητές συσκευές να παίρνετε γρήγορα, είναι σαφές ότι η παροχή αρνητικής ανάγνωσης σε μια μικρή οθόνη πιθανόν να σας προκαλέσει να χάσετε ορισμένους οπαδούς, ίσως και την πλειοψηφία τους.

κατασκευη ιστοσελιδας τιμες

Συσκευές προς στόχευση

Ίσως αναρωτηθείτε ποιες είναι οι συσκευές για τις οποίες μπορείτε να σχεδιάσετε – και μπορώ να σας πω ότι, περισσότερο ή λιγότερο, μπορείτε να σχεδιάσετε για όλους τους. Οι συσκευές που εκτελούν iOS δεν πρέπει να αποτελούν πρόβλημα, καθώς βελτιστοποιούνται πολύ καλά για HTML και CSS. Παρόλο που ενδέχεται να αντιμετωπίσετε ορισμένα προβλήματα με συσκευές Android, αυτό εξαλείφεται επίσης μέσω των τακτικών ενημερώσεων από την Google. Βασικά, δεν υπάρχουν όρια για εσάς.

Τα στοιχεία σχεδιασμού
Πριν περάσουμε σε ένα κομμάτι της κωδικοποίησης, θα πρέπει να ρίξουμε μια ματιά σε ορισμένα στοιχεία σχεδιασμού που ταιριάζουν κινητά καλά και εκείνα που πρέπει να αποφεύγονται. Οι ίδιες έννοιες του Responsive Web Design θα χρησιμοποιηθούν για την οικοδόμηση ενημερωτικών email newsletters. Σε περίπτωση που δεν γνωρίζετε πολλά σχετικά με το Responsive Web Design, αυτό το άρθρο μπορεί να μην έχει πολύ νόημα για εσάς, γι ‘αυτό πρέπει να επιστρέψετε και να διαβάσετε κάτι για τα βασικά της ιδέας.

Η βασική ιδέα είναι ότι, όπως συνήθως, θα δημιουργήσουμε δύο CSS διατάξεις του ίδιου περιεχομένου – κάποιος θα ταιριάζει με υπολογιστές desktop και webmail και ο άλλος θα φαίνεται καλός σε μικρότερη οθόνη.

Προκειμένου να φτιάξετε μια διάταξη που να δείχνει καλή στο κινητό, υπάρχουν κάποιες λεπτομέρειες για το CSS που θα πρέπει να λάβετε υπόψη:

Στήλες – δεν πρέπει ποτέ να υπάρχουν περισσότερες από μία στήλες, όχι μεγαλύτερες από 500 έως 600 εικονοστοιχεία.
Σύνδεσμοι και κουμπιά – αυτά πρέπει να έχουν μια ελάχιστη περιοχή προορισμού 44 x 44 pixels, σύμφωνα με ορισμένες οδηγίες που παρέχονται από την Apple. Αυτό θα διασφαλίσει ότι θα μπορείτε πραγματικά να κάνετε κλικ σε συνδέσμους και να περιηγηθείτε.
Μέγεθος γραμματοσειράς – θα έχετε προφανώς κάτι να πει, έτσι θα χρησιμοποιήσετε λέξεις και γράμματα. Βεβαιωθείτε ότι το ελάχιστο μέγεθος γραμματοσειράς που χρησιμοποιείτε είναι 13 εικονοστοιχεία. Σύμφωνα με τον ίδιο αμερικανό γίγαντα, οτιδήποτε μικρότερο θα αυξηθεί και θα μπορούσε να σπάσει τη διάταξη.
Μήκος – τα μηνύματα που εμφανίζονται σε φορητές συσκευές θα πρέπει κανονικά να είναι πολύ σύντομα και συνοπτικά. Τα σημαντικά στοιχεία θα πρέπει να βρίσκονται στην πάνω πλευρά και η κύλιση θα πρέπει να μειώνεται όσο το δυνατόν περισσότερο.
Στοιχεία απόκρυψης – στην επιφάνεια εργασίας μπορείτε να αντέξετε οικονομικά πολύ περισσότερο χώρο από ό, τι σε κινητή πλατφόρμα. Επομένως, είναι μια έξυπνη ιδέα να χρησιμοποιήσετε μια απλή ιδιότητα CSS για να αποκρύψετε διαφορετικά στοιχεία: εμφάνιση: καμία. Εάν θέλετε ένα παράδειγμα κάτι που πρέπει να κρυφτεί, τότε τα κουμπιά κοινωνικών μέσων ενημέρωσης είναι αυτά τα πράγματα. Παρόλο που μπορεί να είναι μεγάλη και χρήσιμη στον επιτραπέζιο υπολογιστή, είναι γεμάτος τη διάταξη στο κινητό.

Προκειμένου να αναπτυχθεί μια καλή λύση για φορητές συσκευές, είναι καλή ιδέα να αρχίσετε να μπερδεύετε δύο διατάξεις από την αρχή, μία για επιφάνεια εργασίας και μία για κινητά. Λάβετε υπόψη ότι στο κινητό έχετε πολύ λιγότερο χώρο πάνω από την πτυχή – και αυτός είναι ο τόπος όπου πρέπει να τοποθετηθούν όλα τα σημαντικά στοιχεία, συμπεριλαμβανομένου του κουμπιού CTA (που ονομάζεται επίσης κουμπί παρότρυνσης για δράση). Ο παραλήπτης δεν πρέπει να μετακινηθεί για να το δει.

Ας δούμε κάποια κωδικοποίηση!
Προκειμένου να σας βοηθήσει να ξεκινήσετε ένα καλό ξεκίνημα, θα σας πω λίγα πράγματα για το πώς να ξεκινήσετε την κωδικοποίηση ενός τέτοιου σχεδιασμού ανταποκριτών ενημερωτικών δελτίων. Όταν είπαμε νωρίτερα ότι θα έχουμε δύο φύλλα στυλ, δεν εννοούσα δύο διαφορετικά. Θα έχετε μόνο ένα φύλλο στυλ, αλλά θα χρησιμοποιήσετε ερωτήματα μέσων για την εμφάνιση διαφορετικών στοιχείων σε ορισμένες συσκευές.

Στοιχεία διαφορετικά σε ορισμένες συσκευές

Εκπαιδευτής πρότυπου εκκίνησης
Με την εκκίνηση μπορείτε να δημιουργήσετε έναν διαδικτυακό ιστότοπο χρησιμοποιώντας το Bootstrap builder με έτοιμα σχεδιασμένα και κωδικοποιημένα πρότυπα και θέματα.

Η διακήρυξη @media έχει να κάνει με την αναγνώριση του μεγέθους της οθόνης. Η δήλωση @media ορίζει ότι αυτό το φύλλο στυλ πρέπει να χρησιμοποιείται μόνο όταν η οθόνη είναι μικρότερη από 480 pixels. Αυτή η τιμή μπορεί να προσαρμοστεί ανάλογα με τις συσκευές στις οποίες στοχεύετε.

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

Διαφορετικά μεγέθη οθονών

Από εδώ και στο εξής, κωδικοποιείτε τον ίδιο τρόπο όπως πάντα. Είναι τόσο εύκολο!

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

Ένα άλλο πράγμα που μπορείτε να χρησιμοποιήσετε είναι η λεγόμενη τεχνική “προοδευτικής αποκάλυψης”. Η Wikipedia το χρησιμοποιεί πολύ σε κινητές συσκευές. Βασικά σημαίνει να κρύβετε το περιεχόμενο κάτω από συγκεκριμένα στοιχεία που θα το εμφανίσουν κάποτε. Εάν τα αγγίξετε ξανά, θα κρύψουν το περιεχόμενο. Αυτό εξασφαλίζει ότι ο χρήστης δεν χρειάζεται να μετακινηθεί πάρα πολύ για να φτάσει στο περιεχόμενο που βρίσκεται στο κάτω μέρος του ενημερωτικού δελτίου.

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

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

Ο παραπάνω κώδικας λέει στο φύλλο στυλ ότι η οθόνη θα πρέπει να έχει πλάτος μεγαλύτερο από 320px, αλλά όχι περισσότερο από 480px. Σε αυτό μπορείτε να προσθέσετε έναν άλλο κανόνα, έναν άλλο και έναν άλλο, και ούτω καθεξής. Μπορείτε να σχεδιάσετε για όσες συσκευές και μεγέθη οθόνης θέλετε.

Τα ερωτήματα των μέσων ενημέρωσης μπορούν επίσης να χρησιμοποιηθούν για τη δημιουργία διατάξεων υγρού, πράγμα που ουσιαστικά σημαίνει ότι δεν θα χρειαστεί να είστε τόσο ακριβείς σχετικά με διαφορετικά μεγέθη οθόνης, αλλά θα ορίσετε στοιχεία σε ποσοστό του μεγέθους της οθόνης, περιορίζοντάς τα ανάλογα με το πόσο μεγάλη είναι η οθόνη . Για να εφαρμόσετε ένα αριστερό περιθώριο, απλά χρησιμοποιήστε: margin-left: 3%. Αυτό θα διασφαλίσει ότι ανεξάρτητα από το πόσο στενή ή ευρεία είναι η οθόνη, το περιθώριο θα είναι πάντα το 3% του πλάτους.

Βελτιστοποίηση εικόνων
Μερικοί σχεδιαστές σας προτείνουν να αλλάξετε το μέγεθος των εικόνων με το ακριβές μέγεθος για την οθόνη στην οποία εμφανίζονται. Ωστόσο, θα συνιστούσα τη δημιουργία μιας νέας εικόνας για τα μικρά μεγέθη. Μια μεγάλη εικόνα μειωμένη μπορεί να μην είναι τόσο χρήσιμη ή ορατή, οπότε δημιουργώντας μια εικόνα όπου κόβετε τις γωνίες θα ήταν λύση.

Εάν σχεδιάζετε για συσκευές της Apple, θα συνιστούσα να δημιουργήσετε μια εικόνα στο διπλάσιο μέγεθος αυτού που θέλετε να εμφανίσετε, απλώς και μόνο επειδή η οθόνη Retina εμφανίζει τις συσκευές των συσκευών Apple. Αυτό το μικρό τέχνασμα θα κάνει τις εικόνες να φαίνονται απότομες και ευκρινείς και συνεπώς θα βελτιώσουν την εμπειρία του χρήστη.

Βελτιστοποίηση εικόνων

Η αλλαγή μεγέθους των εικόνων για τις διατάξεις υγρών θα πρέπει απλώς να γίνει χρησιμοποιώντας μέγεθος φόντου: 100%. Ωστόσο, φαίνεται ότι υπάρχουν μερικά περισσότερα πλεονεκτήματα στο μέγεθος του φόντου: κάλυψη, και κάνατε μια μικρή έρευνα και δείτε ποια σας ταιριάζει καλύτερα.

συμπέρασμα
Για να θέσω και να τελειώσω σε αυτό το άρθρο, θέλω να σας πω πόσο σημαντικό είναι να δοκιμάσετε πραγματικά τα ενημερωτικά δελτία σε όσο το δυνατόν περισσότερες συσκευές και όχι μόνο στα προγράμματα περιήγησης Safari ή Chrome για μεγέθη. Οι φορητές συσκευές συνήθως ερμηνεύουν διαφορετικά πράγματα εντελώς διαφορετικά από ό, τι οι υπολογιστές, οπότε πρέπει να βεβαιωθείτε ότι η έκδοση του ενημερωτικού δελτίου κινητής τηλεφωνίας σας μοιάζει πραγματικά με την επιθυμία σας.

Σύντομα τα περισσότερα μηνύματα ηλεκτρονικού ταχυδρομείου θα διαβαστούν από μια φορητή συσκευή και όχι από μια επιφάνεια εργασίας. Είμαι βέβαιος ότι θα θέλατε να κάνετε αυτό το περιεχόμενο ευανάγνωστο και να προσφέρει μια καλή εμπειρία χρήστη σε αυτούς τους οπαδούς που διαβάζουν εν κινήσει. Εάν παρέχετε μια λίστα με τέτοια μηνύματα ηλεκτρονικού ταχυδρομείου, θα πρέπει να προχωρήσετε σε έρευνα σχετικά με το RWD για ενημερωτικά δελτία ηλεκτρονικού ταχυδρομείου και να αρχίσετε να σχεδιάζετε και να αναπτύσσετε αυτές τις φορητές συσκευές αμέσως.

κατασκευη ιστοσελιδας κοστος