Διακοπή αναλύσεων οθόνης κυνηγίου
Ζούμε σε τόσο συναρπαστικό χρόνο στον κόσμο του διαδικτύου. Η τεχνολογία και τα πρότυπα προχωρούν με ρυθμό που είναι ίσως γρηγορότερος και πιο συναρπαστικός από ποτέ. Καθώς αλλάζουν τα πράγματα, και οι συνήθειες μας και μια περιοχή που νομίζω ότι έχει δει μεγαλύτερες αλλαγές από ό, τι οι περισσότεροι θα έπρεπε να είναι η αλλαγή στο ψήφισμα που οι συσκευές μας τρέχουν τώρα.
Η επίλυση είναι ένα αστείο πράγμα που πρέπει να μετρήσετε. δεν είναι μια φυσική αλλαγή μεγέθους, αλλά μια αλλαγή σαφήνειας. Δεν κάνει εικόνες, φωτεινότερες ή πιο πλούσιες σε χρώμα, αλλά τις καθιστά πυκνότερες. Είναι επίσης κάτι που οι άνθρωποι σπάνια κατανοούν την αξία του μέχρι να το δουν για τον εαυτό τους.
Φυσικά, όταν έχουμε μια γεύση από οθόνες υψηλής ανάλυσης, είμαστε γαντζωμένοι. Και όλοι θέλουμε οι ιστότοποί μας (και οι ιστότοποι των πελατών μας) να φαίνονται υπέροχοι στις συσκευές που αθλούν αυτές τις οθόνες. Πολλοί σχεδιαστές ιστοσελίδων αγωνίζονται προς την κατεύθυνση αυτού του στόχου δημιουργώντας εικόνες για κάθε νέο ψήφισμα που έρχεται στο δρόμο μας. Ή, όπως το καλώ σε αυτό το άρθρο, "κυνηγούν ψηφίσματα οθόνης".
Εισαγωγή στο SVG
Πολλοί από εμάς γνωρίζουμε τι είναι τα SVG (Scalable Vector Graphics). Το έχουμε δει στον ιστότοπο W3C HTML5, στην ενότητα "3D, γραφικά και εφέ". Το SVG είναι μια τυπική τεχνολογία HTML5, η οποία εμφανίζει εικόνες με κωδικό. Ή κάτι.
Τουλάχιστον, αυτή είναι η γενική απάντηση που πήρα όταν ρώτησα τους ανθρώπους για τα γραφικά SVG. Δεν είναι πραγματικά κάτι που ενδιαφέρονται οι άνθρωποι, επειδή η αξία του δεν είναι πλήρως κατανοητή.
Θέλω να σας δείξω πώς να αποφύγετε να "κυνηγάτε ψηφίσματα οθόνης", και συμβαίνει ακριβώς ότι το πρότυπο SVG μπορεί να μας βοηθήσει να κάνουμε ακριβώς αυτό.
Η κατάσταση των γραφικών του αμφιβληστροειδούς
Όταν λέω "γραφικά αμφιβληστροειδούς", αναφέρομαι σε οποιεσδήποτε συσκευές που έχουν ανάλυση οθόνης υψηλότερη από αυτή των παραδοσιακών οθονών, αθλητική ανάλυση πάνω από 72ppi (pixels ανά ίντσα).
Η Apple διάσπασε το φράγμα 72ppi με το iPhone 4, μια συσκευή που είχε μια φανταστική νέα οθόνη υψηλής ανάλυσης, που μοιάζει με κάτι άλλο που είχαμε δει πριν. Εκτός από την περίπτωση που το χρησιμοποιήσατε για να περιηγηθείτε στον ιστό ... ο ιστός θεωρούσε σκουπίδια.
Ο ιστός είχε 72ppi βελτιστοποιημένες εικόνες. Τη στιγμή που γράφτηκε αυτό, το μεγαλύτερο μέρος του ιστού συνεχίζει, δύο χρόνια μετά την κυκλοφορία του iPhone 4.
Τώρα, έχουμε όλα τα είδη συσκευών με γραφικά ποιότητας Retina. Είναι αργά καθιστώντας το δρόμο της σε ολόκληρη τη γραμμή προϊόντων της Apple, επεκτείνοντας το iPod Touch, το iPad και ακόμα και το πιο πρόσφατο MacBook Pro. Τα έξυπνα τηλέφωνα εμφανίζονται σε όλη την χώρα με οθόνες υψηλής ανάλυσης, τόσο πολύ ώστε μια "τυπική" ανάλυση ανάλυσης να αισθάνεται σχεδόν παλιά στο παρόν στάδιο.
Ακόμη εξαρτάται η ανάλυση
Όταν η κοινότητα του σχεδιασμού ιστοσελίδων ξεπέρασε το πρόβλημα των θολών εικόνων με φορτωμένες με υπό όρους @ 2 εικόνες (οι εικόνες που δημιουργήθηκαν για να είναι διπλάσιες από τις αρχικές τους αντίστοιχες και φορτώνονται μόνο σε συσκευές υψηλής ανάλυσης), η πύλη φαινόταν καλή πάλι, ως επί το πλείστον . Ορισμένοι σχεδιαστές μάλιστα διαφημίζουν τους ιστοτόπους τους ως "ανεξάρτητα από το ψήφισμα".
Φυσικά, αυτό που πραγματικά έπρεπε να έχουν διαφημίσει τους ιστοτόπους τους όπως ήταν "βελτιστοποιημένο για δύο ψηφίσματα οθόνης".
Οι συσκευές θα συνεχίσουν να βελτιώνονται, οι αποφάσεις θα συνεχίσουν να βελτιώνονται και θα συνεχίσει να απολαμβάνει τον ιστό σε έναν αυξανόμενο αριθμό παραγόντων μορφής. Τι γίνεται με το αναπόφευκτο μέλλον @ 3x; Τι γίνεται με το @ 4x; Τι συμβαίνει εάν το πρότυπο "1x" γίνει περιττό; Τι κάνει 3x "@ 3x" και όχι "@ 2.5x";
Σίγουρα βρώμικο.
Επιπλέον, αυτό το είδος τεχνικής δεν είναι καθόλου διαδεδομένο. Περιηγηθώ τον ιστό στο προαναφερθέν MacBook Pro με οθόνη Retina και το μεγαλύτερο μέρος του ιστού είναι δυστυχώς εκεί όπου πάντα υπήρχε από το iPhone 4: θολή. Δημιουργώντας και πάλι όλες τις εικόνες του ιστού σας είναι ένα δύσκολο ηχητικό έργο, ειδικά όταν ολόκληρος ο κόσμος του web design έχει σχεδιάσει με bitmaps για τόσο πολύ καιρό.
Διασυνδεδεμένος ιστός
Ακόμα και σήμερα, με τις εικόνες μας @ 2x, δεν μπορούμε να μεγεθύνουμε τις ιστοσελίδες χωρίς να ξανάρθουν ξανά. Το κείμενο διαχειρίζεται ένα ζουμ, αλλά για λόγους σύγκρισης, οι εικόνες απλά φωνάζουν για τις μελλοντικές εξαγωγές @ 4x (κάτι που κανένας δεν θα το κρίνει κατάλληλο για να εξυπηρετήσει ακριβώς την πιθανότητα ότι κάποιος θα ήθελε να ζουμ 4x στο εικονίδιο RSS) .
Πραγματικά ανεξάρτητο ψήφισμα
Το πρόβλημα είναι με εικόνες bitmap. Πάντα γνωρίζαμε ότι δεν υπερβαίνουν, και τώρα δεν διαφέρει. Αυτό που χρειαζόμαστε είναι διανυσματικά γραφικά στις ιστοσελίδες μας. Τα διανυσματικά γραφικά υπολογίζονται με μια σειρά οδηγιών, αντί να ψηθούν σε ένα πλέγμα όπου κάθε εικονοστοιχείο αντιπροσωπεύει ένα χρώμα. Εισαγάγετε, SVG.
Ενα μέγεθος ταιριάζει σε όλους
Δεδομένου ότι τα γραφικά SVG είναι διανυσματικά γραφικά (εξ ου και η ονομασία "Scalable Vector Graphics"), θα φαίνονται υπέροχα για τις χθεσινές, σημερινές και ακόμη και αύριο ψηφιακές αναλύσεις. Επιπλέον, λόγω της γραφειοκρατικής φύσης των διανυσματικών γραφικών, μπορείτε να κάνετε μεγέθυνση σε οποιαδήποτε συσκευή και οι εικόνες θα παραμείνουν εντυπωσιακές.
Ταχύτεροι χρόνοι φόρτωσης
Κάνοντας μια εικόνα 2000px σε 2000px, σε έναν web designer, δεν ακούγεται τίποτα λιγότερο από γελοίο. Θα χρειαζόταν πολύ χρόνο για να φορτώσει, θα έφερνε κάποια κινητά τηλέφωνα στα γόνατά της και η έκδοση "4x4000px" @ 2x "θα ήταν τρελή. Και καθώς οι αποφάσεις γίνονται καλύτερες και καλύτερες, είναι απλώς μη βιώσιμες. Με το SVG, δεδομένου ότι είναι μια διανυσματική μορφή, δεν έχει σημασία αν η εικόνα είναι 20px ή 2000px. ο χρόνος φόρτωσης θα είναι ακριβώς ο ίδιος. Το μόνο πράγμα που κάνει τη διαφορά στους χρόνους φόρτωσης είναι η πολυπλοκότητα κάθε αρχείου εικόνας.
Μπορείτε να το χρησιμοποιήσετε σήμερα
Το SVG μπορεί να μην υποστηρίζεται σε όλο το πλάτος, αλλά Modernizr μπορεί να το εντοπίσει. Με την προβολή μιας έκδοσης SVG και μη SVG, μπορείτε να αποκομίσετε όλα τα πλεονεκτήματα του SVG, αφήνοντας τα προγράμματα περιήγησης παλαιού τύπου με ένα @ 1x PNG. Είναι τόσο απλό ως εξής:
.no-svg .logo { background: url('logo.png'); }.svg .logo { background: url('logo.svg'); }Περιορισμοί του SVG
Δεν είναι δύσκολο να δημιουργήσετε γραφικά SVG από οποιαδήποτε εικόνα με βάση τον φορέα. Πολλές εφαρμογές pro, όπως το Adobe Illustrator και το Inkscape, μπορούν να εξαχθούν στο SVG εγγενώς. Ωστόσο, υπάρχουν μερικά πράγματα που πρέπει να γνωρίζετε σχετικά με το SVG για τον ιστό.
Δεν μπορούν να περιέχουν εικόνες bitmap οποιουδήποτε είδους.
Βεβαιωθείτε ότι μπορείτε να τα προσθέσετε σε εφαρμογές δημιουργίας SVG όπως το Illustrator ή το InkScape και να αποθηκεύσετε την εργασία σας ως SVG, αλλά δεν θα αποδίδουν εκεί που έχει σημασία: το πρόγραμμα περιήγησης ιστού σας. Το CSS wizardry θα χρειαστεί να φορτώσει ένα bitmap πάνω από το SVG, όπου χρειάζεται.
Μπορεί να πάρει για πάντα να φορτώσει αν περίπλοκη
Εάν κάνετε περίπλοκο SVG, θα χτυπήσετε με χρόνους φόρτωσης όχι αντίθετα από την προαναφερθείσα εικόνα 2000px x 2000px. Δεν θα θέλατε να σχεδιάσετε μια σύνθετη ζωγραφική σε μορφή SVG, για παράδειγμα.
Πρέπει να το κρατήσετε απλό
Εφαρμογές όπως το Illustrator και το Inkscape μπορούν να κάνουν πολύ περισσότερα από ό, τι μπορεί να χειριστεί το πρόγραμμα περιήγησης ιστού σας. Πρόκειται για εφαρμογές απεικόνισης με πλήρη εμφάνιση, όχι για εφαρμογές δημιουργού web SVG. Στην πραγματικότητα, είναι ασφαλές να υποθέσουμε ότι το 90% της λειτουργικότητας που προσφέρουν αυτά τα είδη εφαρμογών δεν θα είναι διαθέσιμη στους θεατές στον ιστό. Αν είστε εξοικειωμένοι με το λογισμικό φορέα, θα πρέπει να μάθετε εναλλακτικούς τρόπους για να δημιουργήσετε τα εφέ που έχετε έρθει να αγαπήσετε.
Προσπαθήστε να μάθετε τη γλώσσα
Ο κώδικας SVG δεν είναι κάτι που μπορείτε να "δείτε στο μυαλό σας" όπως μπορείτε όταν διαβάζετε HTML. Πρόκειται για μια σειρά οδηγιών που έχουν αντιστοιχιστεί αντιστοίχως μεταξύ τους, στοιχείο κατά στοιχείο, στρώμα με στρώμα. Δυστυχώς, από σήμερα, πιθανότατα θα χρειαστεί να βουτήξετε εκεί κατά καιρούς, καθώς υπάρχουν κάποια αποτελέσματα ακόμα και το Adobe Illustrator δεν προσφέρει.
Για παράδειγμα, οι εικόνες στο Illustrator έχουν καμβά που σχεδιάζετε. είναι ένα καθορισμένο πλάτος κατά ένα καθορισμένο ύψος. Αυτό είναι σπουδαίο, αλλά αν θέλετε να ελέγξετε αυτές τις λεπτομέρειες στο πρόγραμμα περιήγησης, θα πρέπει να αφαιρέσετε αυτές τις πληροφορίες από το ίδιο το SVG (σημειώστε ότι ορισμένα προγράμματα περιήγησης θα ερμηνεύσουν το CSS ανεξάρτητα από τις δηλωμένες διαστάσεις του SVG, αλλά όχι όλοι). Δεν είναι ιδιαίτερα δύσκολο, αλλά μπορεί να είναι πονοκέφαλος. Αξίζει να ξοδέψετε λίγο χρόνο για να γνωρίσετε τη γλώσσα, ώστε να μπορείτε να χειρίζεστε ακόμη περισσότερο τα SVG.
SVG στην άγρια φύση
Λογότυπα
Τα λογότυπα θα πρέπει να είναι συνήθως σε διανυσματική μορφή ούτως ή άλλως, γι 'αυτό είναι ένας πολύ καλός τρόπος να φέρετε το SVG στα σχέδια του ιστοτόπου σας. Χρησιμοποιώντας την παραπάνω σήμανση, έχετε όλα όσα χρειάζεστε για να κάνετε τα πρώτα σας στοιχεία SVG online.
Εικόνες
Τα εικονίδια είναι ένας σπουδαίος υποψήφιος για το SVG. Τόσο πολύ ώστε να έχω δημιουργήσει ένα πλήρες σύνολο εικονιδίων χρησιμοποιώντας γραφικά SVG. Η κλιμακούμενη φύση του SVG σημαίνει ότι τα εικονίδια μπορούν να χρησιμοποιηθούν σε οποιοδήποτε μέγεθος, προσαρμόζοντας ένα ευρύ φάσμα σχεδίων.
Κινούμενες εικόνες
Οι κινούμενες εικόνες αποτελούν επίσης μια εξαιρετική περίπτωση για τη χρήση γραφικών SVG. Δεδομένου ότι οι κινούμενες εικόνες είναι συνήθως προσδεδεμένες σε σταθερό πλάτος και ύψος, το SVG πηγαίνει σε κάποιο βαθμό προς την κατεύθυνση της υποβοήθησης των κινουμένων σχεδίων. Το Flash χρησιμοποιούσε διανυσματικά γραφικά στοιχεία, τώρα κινούμενα σχέδια HTML5 μπορούν επίσης.
Εικόνες φόντου
Οι εικόνες φόντου αποτελούσαν πάντα ένα δύσκολο σημείο για τους προγραμματιστές ιστού. οι δυνητικοί χρόνοι φόρτωσης, όπως ανέφερα παραπάνω, μπορεί να είναι τρελοί. Οι εικόνες φόντου SVG μπορεί να είναι τόσο μεγάλες όσο θέλετε. εξακολουθούν να έχουν γρήγορους χρόνους φόρτωσης, εφόσον δεν είναι πολύ περίπλοκοι.
συμπέρασμα
Συνολικά, η ανεξαρτησία της επίλυσης είναι ένας φανταστικός στόχος τόσο για τους σχεδιαστές ιστοσελίδων όσο και για τους προγραμματιστές να προσπαθούν προς την κατεύθυνση. Θα σημαίνει ακόμη και ότι τα γούστα του σχεδιασμού τους θα είναι ξεπερασμένα πριν εμφανιστούν οι εικόνες τους. Ενώ είναι σημαντικό να τους προσεγγίσετε με τα μάτια σας ανοιχτά, είναι αρκετά σαφές να βλέπετε πώς τα γραφικά SVG μπορούν να σας μεταφέρουν πιο κοντά σε ένα μέλλον συνολικής ανεξαρτησίας επίλυσης.
Όταν φορτώνετε έναν ιστότοπο με δυνατότητα SVG σε συσκευή υψηλής ανάλυσης όπως το iPad 3 και μεγεθύνετε, θα πουληθείτε.
Ελπίζω ότι αυτό το άρθρο πηγαίνει σε κάποιο βαθμό προς την κατεύθυνση της ενθάρρυνσης της ανεξάρτητης σκέψης της ανάλυσης στον σχεδιασμό και την ανάπτυξη ιστού και ελπίζω ότι ενθάρρυνε ορισμένους από εσάς να σκεφτούν πώς μπορεί να λειτουργήσει το SVG για την επόμενη τοποθεσία σας.
Έχω βρεθεί στην πισίνα SVG για λίγο, και πρέπει να πω ότι το νερό δεν ήταν ποτέ πιο όμορφο.
Είσαι μια μετατροπή SVG ή σερβίρετε κλιμακωτά bitmaps για οθόνες αμφιβληστροειδούς; Οι φορείς είναι το μέλλον των γραφικών web; Ενημερώστε μας στα σχόλια.
Προτεινόμενη εικόνα / μικρογραφία, εικόνα φορέα μέσω Shutterstock.