Περιεχόμενο
- Μέγεθος φόντου: 100%;
- Σχεδιασμός με κείμενο
- Γραμματοσειρές ως εικονίδια
- Επεκτάσιμα διανυσματικά γραφικά
- Διαφορετικά κόλπα για διαφορετικά σενάρια
- Αντιμετωπίζοντας το μέλλον
Έχω δει το μέλλον των ιστότοπων και των εφαρμογών και είναι σε ανάλυση 300ppi. Από αυτό το γράψιμο, μόνο τα πιο πρόσφατα iPhone και iPad έχουν αυτές τις οθόνες Retina, αλλά έρχονται τόσο γρήγορα όσο οι κατασκευαστές υπολογιστών μπορούν να τα φτιάξουν.
Δεδομένου ότι έχουμε προέλθει από ένα ιστορικό οικοδόμησης σε αναλύσεις 72ppi ή 96ppi, αυτό το ζήτημα σχιζοφρενικής επίλυσης είναι ένα ζήτημα που θα συνεχιστεί για τα επόμενα χρόνια. Για διορθωτικά μέτρα, ας σκεφτούμε έξω από το κουτί για το ζήτημα της παράδοσης προσαρμοστικών ή ευέλικτων εικόνων χωρίς να χρειάζεται να ανησυχούμε για την επίλυση των επισκεπτών τους.
Μέγεθος φόντου: 100%;
Ένας τρόπος είναι να τοποθετήσετε εικόνες στο φόντο στοιχείων HTML και να ορίσετε μέγεθος φόντου: auto;. Καθώς το στοιχείο κοντέινερ επεκτείνεται, το ίδιο κάνει και η εικόνα στο παρασκήνιο. Πρόκειται περισσότερο για μια εξειδικευμένη λύση κατάλληλη για μικρές περιοχές της ακίνητης περιουσίας μιας οθόνης.
Ένα σταθερό παράδειγμα αυτού είναι στο βέλος στον ιστότοπο fittextjs.com, ο οποίος τυχαίνει επίσης να είναι ένα εξαιρετικό εργαλείο για το σχεδιασμό κειμένου για αποκριτικές διατάξεις.
Αυτό το πρόβλημα εξακολουθεί να υπάρχει με την ακεραιότητα της εικόνας. Εάν η εικόνα επεκταθεί σε χώρο πολύ μεγαλύτερο από ό, τι είχε προβλεφθεί, τα εικονοστοιχεία και άλλα αντικείμενα εικόνας γίνονται εύκολα ορατά.
Σχεδιασμός με κείμενο
Ένας τρόπος δημιουργίας προσαρμοστικών εικόνων είναι με τα καθημερινά γράμματα και αριθμούς που χρησιμοποιούμε για να διαβάζουμε και να γράφουμε.
Η ικανότητα ανταλλαγής πληροφοριών σε όλο τον κόσμο είναι μια πρόκληση που ξεπερνά το Διαδίκτυο. Μια άλλη πρόκληση είναι οι άνθρωποι από πολλές χώρες να επικοινωνούν μεταξύ τους με κείμενο. Διαφορετικές γλώσσες σημαίνει διαφορετικούς χαρακτήρες και σημαίνει πολύ περισσότερα από τα ABC.
Για να αντιμετωπίσουμε αυτό το αίνιγμα επικοινωνίας, χρειαζόμαστε ένα κοινό σύνολο χαρακτήρων από τους οποίους μπορούμε να αντλήσουμε από κοινού και να υποστηρίζονται από διαφορετικά λειτουργικά συστήματα και εφαρμογές.
Εκεί μπαίνει το Unicode. Είναι ένα βιομηχανικό πρότυπο για τη ρύθμιση και την αποστολή χαρακτήρων για πολλές γλώσσες. Και περιλαμβάνει εικονίδια.
Το υπέροχο πράγμα σχετικά με τα καλά επεξεργασμένα εικονίδια είναι ότι είναι πολύ αποτελεσματικά στην επικοινωνία: δεν χρειάζονται μετάφραση. Μια μικρή εικόνα που αντιπροσωπεύει ένα τηλέφωνο, για παράδειγμα, διαπερνά τόσα πολλά γλωσσικά εμπόδια.
Για να χρησιμοποιήσετε εικονίδια Unicode με HTML5, βεβαιωθείτε ότι έχετε ορίσει το σύνολο χαρακτήρων στο στοιχείο κεφαλής:
meta charset = "utf-8">
Στη συνέχεια, στο στοιχείο του σώματος, μπορείτε απλά να αντιγράψετε και να επικολλήσετε το Unicode απευθείας από μια ιστοσελίδα αναφοράς, όπως το en.wikipedia.org/wiki/Unicode_symbols.
Για να προχωρήσετε ένα βήμα παραπέρα, χρησιμοποιήστε τη δημιουργία περιεχομένου CSS με κωδικοποιημένους χαρακτήρες Unicode ως τρόπο βελτίωσης του περιεχομένου:
a [href ^ = "mailto:"]: πριν από το {content: " 2709"; }
Ενώ οι χαρακτήρες Unicode είναι ένας τρόπος να ακολουθήσετε, είναι ίσως καλύτερο να τους χρησιμοποιήσετε ως συμπληρωματικό οπτικό στοιχείο. Αναγνώστες οθόνης - προγράμματα περιήγησης που διαβάζουν το περιεχόμενο μιας ιστοσελίδας για άτομα με αναπηρία - πιθανότατα δεν θα μπορούν να διαβάσουν χαρακτήρες Unicode.
Στην πραγματικότητα, ορισμένοι αναγνώστες οθόνης βρέθηκαν να διαβάζουν τον χαρακτήρα ως ερωτηματικό. Λοιπόν, οι σχεδιαστές ιστοσελίδων πρέπει να γνωρίζετε
Γραμματοσειρές ως εικονίδια
Με τη χρήση του Unicode ως εικονίδια, μπορούμε επίσης να ρυθμίσουμε την εμφάνιση και την αίσθηση αυτών με CSS. Αλλά μπορούμε επίσης να προχωρήσουμε ένα βήμα παραπέρα και να εφαρμόσουμε την ίδια σκέψη σε γραμματοσειρές που περιέχουν μόνο εικονίδια, μερικές φορές αναφέρονται ως γραμματοσειρές dingbat.
Δεδομένου ότι τόσο τα εικονίδια Unicode όσο και τα dingbats ρυθμίζονται μέσω κειμένου, είναι πιθανό αυτά τα οπτικά βοηθήματα να επεκτείνονται και να συστέλλονται με τις διάφορες συσκευές, ορίζοντας επίσης το ύψος του κειμένου σε ems ή ποσοστά.
Το κύριο πρόβλημα με τη χρήση γραμματοσειρών dingbat είναι ότι εξακολουθούν να είναι αναπαραστάσεις χαρακτήρων. Ενώ οπτικά, οι άνθρωποι μπορεί να δουν ένα εικονίδιο, οι επισκέπτες του ιστότοπου με αναγνώστες οθόνης πρόκειται να ακούσουν τυχαίους χαρακτήρες.
Για να επιλύσετε το ζήτημα, χρησιμοποιήστε τη δημιουργία περιεχομένου CSS και το χαρακτηριστικό δεδομένων για να αποθηκεύσετε τον χαρακτήρα όπως φαίνεται στο pictos.cc/articles/using-icon-fonts/:
style> [data-icon]: πριν από το {font-family: "icon-font"; content: attr (data-icon);} / style> a href = "http://example.com/cloud/save/" > span data-icon = "C" aria-hidden = "true"> / span> Αποθήκευση στο Cloud / a>
Με αυτό το τεύχος αυτό δημιουργεί επιπλέον εμπόδια για να περάσει ο αναγνώστης οθόνης. Εάν μπορούν να αναλύσουν τη δημιουργία περιεχομένου, ενδέχεται να μην μπορούν να τραβήξουν χαρακτήρα από το attr () αξία.
Αυτή η σειρά συσκότισης δεν είναι μια ιδανική τεχνική, αλλά φαίνεται να λειτουργεί προς το παρόν. Αν μη τι άλλο, ελπίζω ότι αυτό θέτει μια πρόκληση για τους προγραμματιστές αναγνώσεων οθόνης να κάνουν ένα καλύτερο εργαλείο.
Επεκτάσιμα διανυσματικά γραφικά
Ένας άλλος τρόπος είναι να εργαστείτε με Scalable Vector Graphics (SVG). Η SVG έχει κάνει μεγάλα άλματα στην υποστήριξη του προγράμματος περιήγησης. Στην πραγματικότητα, όλα τα σύγχρονα προγράμματα περιήγησης υποστηρίζουν εγγενείς εικόνες SVG εγγενώς.
Εάν θέλετε να δημιουργήσετε ένα γραφικό SVG, λάβετε υπόψη ότι τα δημοφιλή εργαλεία διανυσματικών εικόνων όπως το Adobe Illustrator ή το Adobe Fireworks επιτρέπουν ήδη την εξαγωγή στη μορφή.
Το πρόβλημα με το SVG δεν σχετίζεται με τη μορφή εικόνας: αλλά με παλαιότερες εκδόσεις του IE. Από την έκδοση IE9, η Microsoft έχει υποστηρίξει το SVG.
Υπάρχουν μερικές λύσεις σε αυτό το πρόβλημα. Το ένα είναι να χρησιμοποιήσετε το πρόγραμμα περιήγησης (των ειδών). Με παλαιότερες εκδόσεις του IE, μπορούμε να βασιστούμε στο εξαιρετικό μπλοκ των υπό όρους σχολίων που βρίσκονται στο HTML5 Boilerplate και να χρησιμοποιήσουμε ένα απλό jQuery Plugin που ονομάζεται SVG Swap (βλ. Github.com/teleject/svg-swap). Έτσι, όταν εμφανίζεται μια παλαιότερη έκδοση του IE, αντικαθίσταται μια εικόνα αντικατάστασης PNG-8 ή JPEG ή GIF.
Μια άλλη λύση είναι να κάνετε ανίχνευση χαρακτηριστικών. Εάν χρησιμοποιείτε ήδη το Modernizr στον ιστότοπό σας, ορίστε το Modernizr για δοκιμή για inline SVG και παραδώστε ένα polyfill μέσω του yepnope.
Διαφορετικά κόλπα για διαφορετικά σενάρια
Τέλος, ας μην ξεχνάμε το CSS3. Με πρωτοποριακές ιδιότητες όπως εικόνα μάσκας, χρώμα πλήρωσης κειμένου, χρώμα κειμένου και πολλά άλλα, φτάνουμε σταθερά σε ένα μέρος όπου το Photoshop βρίσκεται στο πρόγραμμα περιήγησης, περιμένοντας να αποδώσουμε τα γραφικά μας μαζί με τις υπόλοιπες σελίδες στοιχεία διάταξης και σχεδίασης.
Για έμπνευση σε αυτόν τον τομέα, ρίξτε μια ματιά στις κεφαλίδες του Trent Walton στις αναρτήσεις ιστολογίου του, όπως αυτή με τίτλο "In Flux".
Αντιμετωπίζοντας το μέλλον
Αυτοί είναι μερικοί τρόποι για να ξεπεράσετε την ανάγκη για εικόνες ράστερ, και επομένως την ανάγκη για πολλαπλές εκδόσεις της ίδιας εικόνας. Η υποστήριξη του προγράμματος περιήγησης (παρόλο που ορισμένοι εξακολουθούν να χρησιμοποιούν προθέματα προμηθευτή) οδηγεί σε υπέροχα οπτικά σχέδια και, το πιο σημαντικό, ασχολείται με την αποθήκευση πολλών αρχείων σε πολλές αναλύσεις συσκευών.
Είναι η αποκριτική λύση εικόνας για ένα πρόβλημα που δεν πρόκειται να βελτιωθεί σύντομα.
Γραφικό κεφαλίδας από τον Patrick Hoesly
