Όσο πιο δημοφιλείς γίνονται οι κινητές συσκευές, τόσο πιο άβολη γίνεται η κύλιση στους περισσότερους ιστότοπους. Γι' αυτό, από το 2012, οι webmasters χρησιμοποιούν μια λύση που κάνει πιο άνετη την προβολή πόρων σε οθόνες χαμηλής ανάλυσης - προσαρμοστική διάταξη.
Σύγχρονη τάση
Σήμερα, περίπου πέντε δισεκατομμύρια άνθρωποι στη Γη χρησιμοποιούν κινητά τηλέφωνα, με το ένα τρίτο από αυτούς να έχει smartphone. Ως εκ τούτου, η επισκεψιμότητα από κινητά γίνεται ολοένα και πιο σημαντική για τους κατόχους ιστότοπων. Είναι πιθανό ότι μια τέτοια πηγή επισκεπτών θα αυξηθεί μόνο με την πάροδο του χρόνου. Οι μηχανές αναζήτησης ανταποκρίθηκαν γρήγορα σε αυτήν την τάση. Οι μεγάλες εταιρείες "Yandex" και η Google έχουν πραγματοποιήσει σημαντικές αλλαγές στους αλγόριθμούς τους για την κατάταξη ιστοτόπων στα αποτελέσματα αναζήτησης, λαμβάνοντας υπόψη τη διαθεσιμότητα προσαρμοστικής διάταξης και σχεδίασης. Με απλά λόγια, οι πόροι Ιστού που έχουν βελτιστοποιηθεί για κινητά τηλέφωνα, smartphone και tablet θα έχουν κάποιο πλεονέκτημα έναντι των ανταγωνιστών τους.
Ορισμός διάταξης που αποκρίνεται
Η προσαρμοστική διάταξη είναι μια μέθοδος δημιουργίας πλαισίου ιστοσελίδας,αλλάζει αυτόματα τη θέση των μπλοκ σύμφωνα με την ανάλυση οθόνης της συσκευής στην οποία προβάλλεται. Δηλαδή, με αυτήν την προσέγγιση, δημιουργούνται ξεχωριστά στυλ για μια ποικιλία αναλύσεων. Αυτό το εφέ επιτυγχάνεται γράφοντας ειδικά αρχεία CSS.
Νωρίτερα, το πρόβλημα λύθηκε λίγο διαφορετικά. Οι προγραμματιστές έπρεπε να κάνουν πολύ περισσότερες «κινήσεις του σώματος», δημιουργώντας τη διάταξη και τη σχεδίαση της κύριας έκδοσης του ιστότοπου και κάνοντας το ίδιο για το κινητό. Ανάλογα με την οθόνη της συσκευής στην οποία προβλήθηκε το έργο Διαδικτύου με τη διαθέσιμη πλατφόρμα για κινητά, κυκλοφόρησε η κατάλληλη έκδοση του ιστότοπου.
Αυτή η προσέγγιση δεν δικαιολογήθηκε από πολλές απόψεις, και οι περισσότεροι webmasters δεν ανέλαβαν ποτέ τη δημιουργία μιας έκδοσης για κινητά. Τώρα αυτή η σειρά έχει αντικατασταθεί από προσαρμοστική διάταξη. Δημιουργώντας έναν σκελετό ιστότοπου χρησιμοποιώντας αυτήν την τεχνολογία, ο webmaster συγκεντρώνει όλες τις προσπάθειές του στη δημιουργία μιας έκδοσης του έργου και οι επισκέπτες μπορούν να το δουν με το ίδιο επίπεδο άνεσης τόσο σε μεγάλη οθόνη υπολογιστή όσο και σε κινητό τηλέφωνο, smartphone ή tablet.
Πλεονεκτήματα της Responsive Layout
Ποια είναι τα πλεονεκτήματα της προσαρμοστικής διάταξης ιστότοπου; Είχε προηγουμένως σημειωθεί ότι το πλεονέκτημα είναι η σωστή εμφάνιση όλων των μπλοκ σελίδων σε οποιαδήποτε συσκευή. Επίσης, μια θετική πτυχή αυτής της προσέγγισης στη δημιουργία ενός προτύπου είναι η ταχύτητα υλοποίησης των αλλαγών. Τι σημαίνει αυτό;
Εάν ο ιστότοπος είχε δύο πλατφόρμες, οι αλλαγές που έγιναν στη διάταξη έπρεπε να είναιεφαρμόστε πρώτα στην έκδοση εργασίας και μετά στην έκδοση για κινητά. Εάν οι αλλαγές στον κώδικα ήταν αρκετά σημαντικές, τότε η διαδικασία πραγματοποίησης τέτοιων αλλαγών θα μπορούσε να διαρκέσει πολύ. Με προσαρμοστική διάταξη, η εργασία στον ιστότοπο πραγματοποιείται σε ένα αρχείο. Οι αλλαγές που έγιναν στη διάταξη της ιστοσελίδας θα αντικατοπτρίζονται εξίσου σύντομα τόσο στην έκδοση παραγωγής όσο και στην έκδοση για κινητά.
Το μειονέκτημα αυτής της προσέγγισης, ορισμένοι webmasters αποκαλούν την πολυπλοκότητα της εφαρμογής της. Αλλά με την έλευση του CSS 3, η δημιουργία ενός αποκριτικού προτύπου διάταξης έχει γίνει αρκετά απλή. Ακόμη και οι άπειροι webmasters μπορούν να κάνουν τον ιστότοπό τους φιλικό προς κινητά.
Αρχές και χαρακτηριστικά προσαρμοστικής διάταξης
Ποιες αρχές διέπουν τη μέθοδο απόκρισης διάταξης στο σχεδιασμό ιστοσελίδων;
- Χρήση του τύπου Fluid Layout.
- Εικόνες "Rubber".
- Χρήση ερωτημάτων μέσων (μέσα-ερωτήματα).
- Η ανάγκη να σκεφτόμαστε τις κινητές συσκευές από την αρχή της διάταξης.
Από αυτές τις θεμελιώδεις αρχές αυτής της μεθόδου δημιουργίας προτύπου, ακολουθούν τα ακόλουθα χαρακτηριστικά προσαρμοστικής διάταξης:
1. Σχεδιασμός και δημιουργία σχεδίου ιστότοπου λαμβάνοντας υπόψη την εργασία σε όλο το φάσμα των αναλύσεων: από κινητά έως οθόνες ευρείας οθόνης.
2. Διάταξη με κλιμακωτά φύλλα στυλ χρησιμοποιώντας τεχνολογία ερωτημάτων μέσων που εισήχθη στο CSS 3.
3. Προγραμματισμός από την πλευρά του πελάτη και του διακομιστή για αποστολή εικόνων σε φορητές συσκευές μικρότερου μεγέθους και ανάλυσης.
Μια σημαντική πτυχή, λαμβάνοντας υπόψη ποια προσαρμοστική διάταξη δημιουργείται, είναιμήτρα ανάλυσης δημοφιλών ηλεκτρονικών συσκευών. Αυτή η προσέγγιση για την ανάπτυξη σχεδιασμού θα κάνει την περιήγηση στο web σε οποιαδήποτε οθόνη πολύ άνετη. Αλλά πώς ξέρετε ποια να συμπεριλάβετε στα στυλ;
Πού να ξεκινήσετε με την αποκριτική διάταξη;
Οι περισσότεροι ιστότοποι είναι κατασκευασμένοι με τέτοιο τρόπο ώστε να εμφανίζονται γραμμές κύλισης στις οθόνες smartphone και tablet, οι οποίες δεν είναι τόσο βολικές για σερφάρισμα, και ο σχεδιασμός και η διάταξη πολλών έργων στο Διαδίκτυο απλώς «επιπλέουν». Οι ιστότοποι που δημιουργήθηκαν για διδασκαλία σχεδίου ιστοσελίδων περιέχουν μια ποικιλία αναλύσεων οθόνης διαφόρων συσκευών, κάτω από τις οποίες αξίζει να τοποθετήσετε τις σελίδες του ιστότοπού σας.
Η προσαρμοστική διάταξη, παραδείγματα της οποίας υπάρχουν αρκετά συχνά, έχει πολλά πλεονεκτήματα. Τι πρέπει να έχετε κατά νου όταν προσεγγίζετε τη διάταξη της σελίδας με αυτόν τον τρόπο;
Όταν ξεκινάτε να εργάζεστε σε ένα πρότυπο, είναι σημαντικό να ελέγχετε περιοδικά πόσο καλά εμφανίζονται τα μπλοκ περιεχομένου και διάταξης σε διαφορετικές οθόνες. Για να γίνει αυτό, μερικές φορές αρκεί απλώς να αλλάξετε το πλάτος του παραθύρου του προγράμματος περιήγησης. Το αρχείο στυλ λαμβάνει το ερώτημα πολυμέσων και επανατοποθετεί τα μπλοκ, κάνοντας σημαντικές αλλαγές. Ένα καλό εργαλείο για τη δοκιμή ενός αποκριτικού προτύπου διάταξης μπορεί να είναι ιστότοποι που μιμούνται τις οθόνες κινητών συσκευών διαφορετικών μοντέλων. Τέτοιες υπηρεσίες θα σας επιτρέψουν να εξετάσετε προσεκτικά και να αξιολογήσετε πώς φαίνεται η σχεδίαση στις οθόνες διαφόρων κινητών συσκευών.
Αν και η τεχνολογία μιας τέτοιας απόκρισης διάταξης δεν είναι τόσο απλή, η εκμάθησή της θα αποφέρει καρπούς πολύ σύντομα.
