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

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

Σχετικά με το Quest for Responsive Web Images

c Corporation vs Corporation ορισμός

Σε αυτό το σημείο, οι προγραμματιστές και οι σχεδιαστές πρέπει να διασφαλίσουν ότι η φόρτωση του ιστότοπού τους είναι βελτιστοποιημένη για να ανταποκρίνεται στους χρήστες που βρίσκονται σε ιστότοπους για κινητά. Πάνω από το 20% της επισκεψιμότητας στον Ιστό είναι πλέον χρήστες κινητών και ο αριθμός εξακολουθεί να αυξάνεται. Με τη λήψη εικόνων μεταξύ των μεγαλύτερων μεριδίων δεδομένων περιεχομένου σελίδας, καθίσταται προτεραιότητα η μείωση αυτού του φορτίου. Έχουν γίνει πολλές προσπάθειες για την απλοποίηση της αλλαγής μεγέθους εικόνας σχεδιασμού με απόκριση, συμπεριλαμβανομένων λύσεων τόσο από πλευράς διακομιστή όσο και από διεπαφή. Για να συζητήσουμε αυτές τις απαντητικές λύσεις εικόνας, πρέπει πρώτα να κατανοήσουμε τις τρέχουσες ελλείψεις που συνδέουν την εικόνα.

Το Η ετικέτα έχει μόνο το χαρακτηριστικό πηγής που συνδέεται απευθείας με την ίδια την εικόνα. Δεν έχει κανέναν τρόπο προσδιορισμού του σωστού τύπου εικόνας που απαιτείται χωρίς πρόσθετα.

Δεν μπορούμε απλώς να συμπεριλάβουμε όλα τα μεγέθη εικόνας στο HTML και να χρησιμοποιήσουμε τους κανόνες CSS για να display:none για όλους εκτός από τη σωστή εικόνα; Αυτή είναι η πιο λογική λύση σε έναν τέλειο λογικό κόσμο. Με αυτόν τον τρόπο το πρόγραμμα περιήγησης μπορεί να αγνοήσει όλες τις εικόνες που δεν εμφανίζονται και, θεωρητικά, να μην τις κατεβάσει. Ωστόσο, τα προγράμματα περιήγησης έχουν βελτιστοποιηθεί πέρα ​​από την κοινή λογική. Για να καταστεί η σελίδα αρκετά γρήγορη, το πρόγραμμα περιήγησης προ-λαμβάνει συνδεδεμένο περιεχόμενο πριν ακόμη φορτωθούν πλήρως τα απαραίτητα φύλλα στυλ και τα αρχεία JavaScript. Αντί να αγνοούμε τις μεγάλες εικόνες που προορίζονται για επιτραπέζιους υπολογιστές, καταλήγουμε να κατεβάσουμε όλες τις εικόνες και να οδηγήσουμε σε ακόμη μεγαλύτερη φόρτωση σελίδας. Η τεχνική μόνο για CSS λειτουργεί μόνο για εικόνες που προορίζονται ως εικόνες φόντου επειδή αυτές μπορούν να ρυθμιστούν στο φύλλο στυλ (χρησιμοποιώντας ερωτήματα πολυμέσων).

Λοιπόν, τι πρέπει να κάνετε ένας ιστότοπος;

Λύσεις κλιμακωτής απόκρισης εικόνων Back-End

Χωρίς αποκλεισμούς ιστότοπων / δευτερευόντων τομέων μόνο για κινητά, μας αφήνουν να εισπράττουμε τον χρήστη-UA (UA) και να τον χρησιμοποιούμε για την προβολή των σωστών μεγεθών πίσω στον χρήστη. Ωστόσο, κάθε προγραμματιστής μπορεί να βεβαιώσει πόσο αναξιόπιστη μπορεί να είναι αυτή η λύση. Οι νέες συμβολοσειρές UA εμφανίζονται συνεχώς, καθιστώντας επίπονη τη διατήρηση και την ενημέρωση μιας ολοκληρωμένης λίστας. Και φυσικά, αυτό δεν λαμβάνει καν υπόψη την αναξιοπιστία των χορδών UA που πλαστογραφούνται εύκολα.

Προσαρμοστικές εικόνες

Ωστόσο, ορισμένες λύσεις από την πλευρά του διακομιστή αξίζει να εξεταστούν. Προσαρμοστικές εικόνες είναι μια εξαιρετική λύση για όσους προτιμούν μια επιδιόρθωση εικόνας που ανταποκρίνεται στο πίσω μέρος. Δεν απαιτεί καμία ειδική σήμανση, αλλά αντ 'αυτού χρησιμοποιεί ένα μικρό αρχείο JavaScript και κάνει το μεγαλύτερο μέρος της βαριάς δουλειάς στο αρχείο back-end. Χρησιμοποιεί διακομιστή ρυθμισμένο PHP και nginx. Επίσης, δεν βασίζεται σε κανένα UA, αλλά ελέγχει το πλάτος της οθόνης. Το Adaptive Images λειτουργεί ιδανικά για τη μείωση των εικόνων, αλλά είναι επίσης βολικό όταν χρειάζονται μεγάλες εικόνες ΚΑΛΛΙΤΕΧΝΙΚΗ ΕΠΙΜΕΛΕΙΑ , δηλαδή μείωση εικόνας με τεχνικές όπως περικοπή και περιστροφή - όχι απλώς κλιμάκωση.

Sencha Touch

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

ο προϋπολογισμός κεφαλαίου είναι ένας:

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

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

Λύσεις διεπαφής

Τα τελευταία χρόνια, υπήρξαν μεγάλες βελτιώσεις από την πλευρά του προγράμματος περιήγησης για την αντιμετώπιση εικόνων που ανταποκρίνονται.

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

Υπάρχει επίσης η περίπτωση του srcset Χαρακτηριστικό που είναι διαθέσιμο για πολλά προγράμματα περιήγησης που βασίζονται στο webKit για το στοιχείο. Αυτό μπορεί να χρησιμοποιηθεί χωρίς καμία JavaScript και είναι μια εξαιρετική λύση εάν τα προγράμματα περιήγησης εκτός του WebKit πρέπει να αγνοηθούν. Είναι ένα χρήσιμο κενό για την περίεργη περίπτωση όπου άλλες λύσεις υπολείπονται, αλλά δεν πρέπει να θεωρούνται ολοκληρωμένη λύση.

Συμπλήρωση εικόνων

Συμπλήρωση εικόνων είναι μια βιβλιοθήκη polyfill για το στοιχείο. Είναι μια από τις πιο δημοφιλείς βιβλιοθήκες μεταξύ των λύσεων front-end για θέματα με ευκρίνεια μεγέθους εικόνας και κλιμάκωσης. Υπάρχουν δύο εκδόσεις. Το Picturefill v1 μιμείται το στοιχείο χρησιμοποιώντας span ενώ το Picturefill v2 χρησιμοποιεί το στοιχείο μεταξύ των προγραμμάτων περιήγησης που το προσφέρουν ήδη και παρέχει ένα polyfill για παλαιού τύπου (για παράδειγμα, για IE> = IE9). Έχει μερικά περιορισμούς και δουλειές , κυρίως για το Android 2.3 - το οποίο παρεμπιπτόντως είναι ένα παράδειγμα όπου το img srcset το χαρακτηριστικό έρχεται στη διάσωση. Ακολουθεί ένα δείγμα σήμανσης για τη χρήση του Picturefill v2:

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

Imager.js

Imager.js είναι μια βιβλιοθήκη που δημιουργήθηκε από την Ειδήσεις BBC ομάδα για να επιτύχει αποκριτικές εικόνες με διαφορετική προσέγγιση από αυτήν που χρησιμοποιείται από το Picturefill. Ενώ το Picturefill προσπαθεί να φέρει το στοιχείο σε μη υποστηριζόμενα προγράμματα περιήγησης, το Imager.js επικεντρώνεται στη λήψη μόνο των κατάλληλων εικόνων, ενώ παράλληλα παρακολουθεί τις ταχύτητες δικτύου. Περιλαμβάνει επίσης τεμπέλης φόρτωση χωρίς να βασίζεται σε βιβλιοθήκες τρίτων. Λειτουργεί χρησιμοποιώντας στοιχεία κράτησης θέσης και αντικαθιστώντας τα με στοιχεία. Το παρακάτω δείγμα κώδικα δείχνει αυτήν τη συμπεριφορά:

πού να ξεκινήσετε να μαθαίνετε c++

new Imager({ availableWidths: [480, 768, 1200] });

Το τετηγμένο HTML θα μοιάζει με αυτό:

new Imager({ availableWidths: [480, 768, 1200] });

Η υποστήριξη του προγράμματος περιήγησης είναι πολύ καλύτερη από εκείνη του Picturefill σε βάρος της ύπαρξης μιας πιο ρεαλιστικής λύσης από μια μελλοντική σκέψη.

Αναδιάταξη πηγής

Αναδιάταξη πηγής προσεγγίζει το πρόβλημα της απόκρισης εικόνας από ελαφρώς διαφορετική γωνία από τις υπόλοιπες βιβλιοθήκες front-end. Μοιάζει με κάτι από τη «κινητή πρώτη» σχολή σκέψης, όπου εξυπηρετεί την ελάχιστη δυνατή ανάλυση από προεπιλογή. Μόλις εντοπίσει ότι μια συσκευή έχει μεγαλύτερη οθόνη, αλλάζει την πηγή εικόνας για μεγαλύτερη εικόνα. Νιώθω σαν περισσότερο χάκερ και λιγότερο πλήρης βιβλιοθήκη. Αυτή είναι μια εξαιρετική λύση για κυρίως ιστότοπους για κινητά, αλλά σημαίνει ότι η διπλή λήψη πόρων για επιτραπέζιους υπολογιστές ή / και tablet είναι αναπόφευκτη.

Ορισμένες άλλες αξιόλογες βιβλιοθήκες JavaScript είναι:

• Γεια σου - Ένα πρόσθετο jQuery για αποκριτικές εικόνες. Η εξάρτηση από το jQuery μπορεί να αποτελεί πρόβλημα.
• Mobify.js - Μια πιο γενική βιβλιοθήκη για αποκριτικό περιεχόμενο, συμπεριλαμβανομένων εικόνων, φύλλων στυλ και ακόμη και JavaScript. «Καταγράφει» το DOM πριν από τη φόρτωση πόρων. Το Mobify είναι μια ισχυρή ολοκληρωμένη βιβλιοθήκη, αλλά μπορεί να είναι υπερβολική, εάν ο στόχος είναι απλώς εικόνες που ανταποκρίνονται.

Περίληψη

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

Για να ολοκληρώσετε, η λίστα με τις παρακάτω ερωτήσεις μπορεί να σας βοηθήσει να αποφασίσετε προτού αποφασίσετε την κατάλληλη λύση απόκρισης εικόνας.

• Είναι ένα πρόγραμμα περιήγησης παλαιού τύπου πρόβλημα; Εάν όχι, σκεφτείτε να χρησιμοποιήσετε μια πιο σύγχρονη προσέγγιση (π.χ. Picturefill, srcset χαρακτηριστικό)
• Είναι κρίσιμος ο χρόνος απόκρισης; Εάν όχι, αναζητήστε μια λύση τρίτου μέρους ή back-end.
• Υποτίθεται ότι οι λύσεις πρέπει να είναι εσωτερικές; Οι λύσεις τρίτων προφανώς θα αποκλειστούν.
• Υπάρχουν ήδη πολλές εικόνες σε έναν ιστότοπο που προσπαθεί να μεταβεί σε αποκριτικές εικόνες; Υπάρχουν ανησυχίες για επικύρωση ή σημασιολογικές ετικέτες (ή μάλλον μη σημασιολογικές ετικέτες); Αυτό θα απαιτήσει μια λύση back-end για τη δρομολόγηση των αιτημάτων εικόνας σε κάτι όπως Adaptive Images.
• Είναι η κατεύθυνση της τέχνης πρόβλημα (ειδικά για μεγάλες εικόνες με πολλές πληροφορίες); Μια βιβλιοθήκη όπως το Picturefill θα είναι μια καλύτερη λύση για ένα τέτοιο σενάριο. Επίσης, οποιαδήποτε από τις λύσεις back-end θα λειτουργήσει επίσης.
• Υπάρχει ανησυχία για την έλλειψη JavaScript; Οποιαδήποτε από τις λύσεις front-end θα είναι αδιαμφισβήτητη, γεγονός που αφήνει τις επιλογές back-end ή τρίτων που βασίζονται στο UA sniffing.
• Υπάρχει προτεραιότητα για τους χρόνους απόκρισης για κινητά σε σχέση με τους χρόνους απόκρισης στην επιφάνεια εργασίας; Μια βιβλιοθήκη όπως το Source Shuffling μπορεί να είναι πιο κατάλληλη.
• Υπάρχει ανάγκη παροχής συμπεριφοράς που να ανταποκρίνεται σε κάθε πτυχή του ιστότοπου και όχι μόνο στις εικόνες; Το Mobify.js μπορεί να λειτουργεί καλύτερα.
• Έχει επιτευχθεί ο τέλειος κόσμος; Χρησιμοποιήστε μόνο CSS display:none πλησιάζω!