Δύο ιστοσελίδες μπορούν να έχουν πανομοιότυπο περιεχόμενο και να δίνουν εντελώς διαφορετικά αποτελέσματα. Η μία πλοηγείται εύκολα και διαβάζεται καθαρά. Η άλλη φαίνεται σκόρπια και δύσκολη στην παρακολούθηση. Το περιεχόμενο είναι το ίδιο. Η διάταξη όχι. Η διάταξη της ιστοσελίδας είναι το αόρατο πλαίσιο που καθορίζει αν το περιεχόμενο περνά ή αγνοείται.
Η διάταξη ιστοσελίδας αναφέρεται στον τρόπο που οργανώνεται και δομείται το περιεχόμενο σε μια σελίδα. Καθορίζει πού τοποθετούνται τα στοιχεία, πώς σχετίζονται μεταξύ τους και με ποια σειρά τα συναντά ο επισκέπτης. Μια καλή διάταξη καθοδηγεί τους επισκέπτες μέσα από το περιεχόμενο φυσικά. Μια κακή τούς κάνει να κοπιάζουν για να βρουν αυτό που χρειάζονται.
Η διάταξη δεν είναι το ίδιο με το σχεδιασμό. Ο σχεδιασμός καλύπτει το πώς φαίνονται τα πράγματα: τα χρώματα, οι γραμματοσειρές και το οπτικό στυλ. Η διάταξη καλύπτει πού πηγαίνει το κάθε τι και πώς οργανώνεται. Μια σελίδα μπορεί να φαίνεται όμορφη και να έχει διάταξη που μπερδεύει τους επισκέπτες, ή να φαίνεται απλή και να έχει διάταξη που δουλεύει τέλεια.
Ποιοι είναι οι βασικοί τύποι διάταξης ιστοσελίδας;
Διάταξη μίας στήλης
Η διάταξη μίας στήλης στοιβάζει όλο το περιεχόμενο κάθετα σε μία στήλη στο κέντρο της σελίδας. Είναι η πιο απλή διάταξη και η πιο φιλική προς τα κινητά, αφού δεν χρειάζεται προσαρμογή όταν μια πλατιά οθόνη μαζεύεται σε στενή. Τα άρθρα blog, οι σελίδες μακροσκελούς περιεχομένου και η τεκμηρίωση χρησιμοποιούν συνήθως διατάξεις μίας στήλης, γιατί η γραμμική σειρά ανάγνωσης ταιριάζει με τον τρόπο που καταναλώνεται αυτό το περιεχόμενο.
Διάταξη δύο στηλών
Η διάταξη δύο στηλών χωρίζει τη σελίδα σε δύο τμήματα δίπλα δίπλα. Η πιο συνηθισμένη εκδοχή βάζει το κύριο περιεχόμενο σε πλατύτερη αριστερή στήλη και το συμπληρωματικό περιεχόμενο, όπως μια πλαϊνή στήλη με πλοήγηση ή σχετικούς συνδέσμους, σε στενότερη δεξιά στήλη. Οι διατάξεις δύο στηλών δουλεύουν καλά σε σελίδες με σαφή κύρια περιοχή περιεχομένου, που ωφελείται από υποστηρικτικό πλαίσιο δίπλα της.
Διάταξη πλέγματος (grid)
Η διάταξη πλέγματος οργανώνει το περιεχόμενο σε δομημένο σύστημα γραμμών και στηλών. Οι σελίδες καταλόγου προϊόντων, οι γκαλερί portfolio και οι σελίδες ευρετηρίου blog χρησιμοποιούν συχνά πλέγματα, γιατί επιτρέπουν να εμφανίζονται με συνέπεια πολλά στοιχεία ίσης σημασίας. Η οπτική κανονικότητα του πλέγματος το κάνει εύκολο στη σάρωση. Η πρόκληση είναι να μαζεύεται λογικά στο κινητό, όπου τα στοιχεία συνήθως πρέπει να περάσουν από τρεις ή τέσσερις στήλες σε μία ή δύο.
Διάταξη πλήρους πλάτους
Η διάταξη πλήρους πλάτους απλώνει τις ενότητες σε ολόκληρο το πλάτος του παραθύρου του προγράμματος περιήγησης. Οι ενότητες hero, οι εικόνες φόντου και οι διαχωριστικές ενότητες χρησιμοποιούν συνήθως πλήρες πλάτος για να δημιουργήσουν οπτικό αντίκτυπο και να ξεχωρίσουν τις περιοχές περιεχομένου. Το περιεχόμενο μέσα σε μια ενότητα πλήρους πλάτους περιορίζεται συνήθως σε ευανάγνωστο μέγιστο πλάτος, ώστε το φόντο να απλώνεται από άκρη σε άκρη ενώ το κείμενο όχι.
Διάταξη περιοδικού
Η διάταξη περιοδικού χρησιμοποιεί ασύμμετρη οργάνωση μπλοκ περιεχομένου σε διαφορετικά μεγέθη, παρόμοια με τον τρόπο που τα έντυπα περιοδικά οργανώνουν το συντακτικό περιεχόμενο. Χρησιμοποιείται σε ειδησεογραφικές ιστοσελίδες και πλατφόρμες με πολύ περιεχόμενο, όπου πρέπει να εμφανίζονται μαζί πολλά θέματα διαφορετικής σημασίας. Η οπτική ποικιλία μιας διάταξης περιοδικού δημιουργεί ιεραρχία μέσα από το μέγεθος και τη θέση, αλλά θέλει προσεκτικό σχεδιασμό για να μη φαίνεται χαοτική.
Διάταξη καρτών
Η διάταξη καρτών παρουσιάζει το περιεχόμενο σε μεμονωμένα μπλοκ, καθένα με σταθερή δομή: μια εικόνα, έναν τίτλο, μια σύντομη περιγραφή και μερικές φορές έναν σύνδεσμο ή ενέργεια. Οι κάρτες είναι αρθρωτές, κάτι που τις κάνει εύκολες στη σάρωση και εύκολες στην αναδιάταξη. Δουλεύουν καλά για προϊόντα, άρθρα blog, μέλη ομάδας, υπηρεσίες και κάθε τύπο περιεχομένου όπου πρέπει να εμφανιστούν μαζί πολλά στοιχεία του ίδιου είδους.
Πώς διαλέγεις τη σωστή διάταξη για μια σελίδα;
Η σωστή διάταξη εξαρτάται από τον σκοπό της σελίδας και από το πώς θα καταναλώσουν οι επισκέπτες το περιεχόμενο.
Οι σελίδες όπου οι επισκέπτες διαβάζουν από την αρχή ως το τέλος, όπως άρθρα, οδηγοί ή σελίδες βήμα προς βήμα, δουλεύουν καλύτερα με διατάξεις μίας στήλης ή απλές διατάξεις δύο στηλών που ακολουθούν καθαρή γραμμική διαδρομή. Οι σελίδες όπου οι επισκέπτες περιηγούνται και διαλέγουν ανάμεσα σε επιλογές, όπως καταλόγοι προϊόντων ή επισκοπήσεις υπηρεσιών, δουλεύουν καλά με πλέγματα ή διατάξεις καρτών που επιτρέπουν να συγκρίνεις στοιχεία με μια ματιά.
Οι σελίδες που πρέπει να κάνουν δυνατή πρώτη εντύπωση, όπως οι αρχικές σελίδες και οι landing pages, ωφελούνται από ενότητες πλήρους πλάτους για οπτικό αντίκτυπο, σε συνδυασμό με περιορισμένες στήλες για ευανάγνωστο περιεχόμενο. Η διάταξη πρέπει να ταιριάζει με τον τύπο περιεχομένου: μια διάταξη πλέγματος για ένα μακροσκελές άρθρο δίνει λάθος εμπειρία ανάγνωσης, όπως ακριβώς μια διάταξη μίας στήλης για έναν κατάλογο προϊόντων κάνει την περιήγηση άσκοπα δύσκολη.
Το άρθρο πώς να σχεδιάσεις μια αρχική σελίδα που δουλεύει καλύπτει πώς να δομήσεις τις επιλογές διάταξης ειδικά για αρχικές σελίδες, όπου το διακύβευμα είναι το μεγαλύτερο.
Πώς δουλεύει η διάταξη στο κινητό;
Κάθε διάταξη πολλών στηλών στον υπολογιστή χρειάζεται μια έκδοση για κινητό, όπου οι στήλες στοιβάζονται κάθετα. Ένα πλέγμα προϊόντων τριών στηλών γίνεται πλέγμα μίας ή δύο στηλών. Μια διάταξη δύο στηλών με πλαϊνή στήλη μαζεύεται σε μία στήλη. Το ερώτημα δεν είναι αν θα προσαρμόσεις τη διάταξη για το κινητό αλλά πώς θα το κάνεις χωρίς να χάσεις τη σειρά ανάγνωσης ή την οπτική ιεραρχία.
Η σειρά με την οποία μαζεύονται οι στήλες μετράει. Όταν μια διάταξη δύο στηλών στοιβάζεται στο κινητό, η αριστερή στήλη εμφανίζεται συνήθως πάνω από τη δεξιά. Αν το περιεχόμενο της πλαϊνής στήλης εμφανίζεται πριν από το κύριο περιεχόμενο όταν μαζεύεται η διάταξη, η εμπειρία ανάγνωσης στο κινητό χαλάει. Η δοκιμή της διάταξης σε πραγματικό κινητό πριν τη δημοσίευση αποκαλύπτει αυτά τα προβλήματα, που σπάνια φαίνονται στις προεπισκοπήσεις για υπολογιστή.
Κάποιες επιλογές διάταξης που δουλεύουν σε υπολογιστή πρέπει να ξαναεξεταστούν εντελώς για το κινητό. Μια σύνθετη διάταξη περιοδικού με πέντε διαφορετικά μεγέθη περιεχομένου μπορεί να χρειαστεί να απλοποιηθεί σε πλέγμα καρτών δύο στηλών στο κινητό για να παραμείνει χρηστική. Το άρθρο πώς να κάνεις την ιστοσελίδα σου φιλική προς τα κινητά καλύπτει ολόκληρο το σύνολο των θεμάτων διάταξης και σχεδιασμού για μικρότερες οθόνες.
Πώς επηρεάζει η διάταξη την οπτική ιεραρχία;
Η διάταξη και η οπτική ιεραρχία δουλεύουν μαζί. Η διάταξη δίνει τη δομή: πού πάνε οι ενότητες, πόσες στήλες υπάρχουν, πώς οργανώνονται τα μπλοκ περιεχομένου. Η οπτική ιεραρχία δίνει το βάρος: ποια στοιχεία μέσα σε αυτή τη δομή προσέχονται πρώτα, δεύτερα και τελευταία.
Μια διάταξη που βάζει το πιο σημαντικό περιεχόμενο στην κορυφή και στον μεγαλύτερο χώρο στήνει την οπτική ιεραρχία ώστε να δουλεύει φυσικά. Μια διάταξη που θάβει σημαντικό περιεχόμενο σε πλαϊνή στήλη ή το βάζει κάτω από λιγότερο σημαντικό υλικό δουλεύει ενάντια στην ιεραρχία, όπως κι αν είναι σχεδιασμένα τα μεμονωμένα στοιχεία. Αν στήσεις πρώτα σωστά τη διάταξη, γίνεται σημαντικά ευκολότερο να ορίσεις καθαρή οπτική ιεραρχία. Το άρθρο τι είναι η οπτική ιεραρχία εξηγεί πώς τα εργαλεία της έμφασης, του μεγέθους, της αντίθεσης και των αποστάσεων λειτουργούν μέσα σε οποιαδήποτε διάταξη.
Πώς επηρεάζει η διάταξη το SEO;
Η διάταξη επηρεάζει το SEO κυρίως μέσα από την εμπειρία χρήστη που δημιουργεί. Μια σελίδα με καθαρή, λογική διάταξη κρατά τους επισκέπτες περισσότερο στη σελίδα και μειώνει την πιθανότητα να φύγουν αμέσως. Αυτά τα σήματα συμπεριφοράς μετράνε για τις μηχανές αναζήτησης με τον καιρό.
Η διάταξη επηρεάζει και το πώς διαβάζουν οι μηχανές αναζήτησης τη δομή περιεχομένου της σελίδας. Το περιεχόμενο που εμφανίζεται νωρίς στο HTML της σελίδας τείνει να έχει μεγαλύτερο βάρος από αυτό που εμφανίζεται αργά, ακόμα κι αν η οπτική διάταξη το κάνει να φαίνεται το ίδιο εμφανές. Το να βάζεις τις πιο σημαντικές επικεφαλίδες και το περιεχόμενο στην αρχή του πηγαίου κώδικα της σελίδας, και όχι μόνο οπτικά, ταιριάζει με τον τρόπο που επεξεργάζονται οι μηχανές αναζήτησης τις σελίδες. Το άρθρο τι είναι το SEO καλύπτει τους τεχνικούς παράγοντες και τους παράγοντες περιεχομένου που επηρεάζουν την κατάταξη των σελίδων.
Πώς χειρίζεται το WEMASY τη διάταξη
Ο δημιουργός ιστοσελίδων του WEMASY περιλαμβάνει σύστημα διάταξης βασισμένο σε ενότητες, όπου διαλέγεις από μια βιβλιοθήκη έτοιμων μπλοκ διάταξης για κάθε ενότητα της σελίδας. Οι διατάξεις μίας στήλης, δύο στηλών, πλέγματος, πλήρους πλάτους και καρτών είναι όλες διαθέσιμες ως ενότητες drag and drop. Κάθε μπλοκ διάταξης προσαρμόζεται αυτόματα στο κινητό, μαζεύοντας στήλες και ρυθμίζοντας αποστάσεις, χωρίς ξεχωριστή ρύθμιση για κινητά. Ο οπτικός επεξεργαστής δείχνει προεπισκοπήσεις για υπολογιστή και κινητό, ώστε να επαληθεύσεις ότι η διάταξη δουλεύει σε όλες τις συσκευές πριν τη δημοσίευση.
Δες τι περιλαμβάνεται στον δημιουργό ιστοσελίδων του WEMASY ή δες τα πακέτα στη σελίδα τιμών.
Συχνές ερωτήσεις
Ποια είναι η πιο συνηθισμένη διάταξη ιστοσελίδας;
Η πιο συνηθισμένη διάταξη για επαγγελματικές ιστοσελίδες συνδυάζει μια ενότητα hero πλήρους πλάτους στην κορυφή με περιοχή περιεχομένου πολλών στηλών ή βασισμένη σε κάρτες από κάτω και footer μίας στήλης. Αυτή η δομή δίνει στην αρχική οπτικό αντίκτυπο στην κορυφή, ευελιξία για τις ενότητες λειτουργιών στη μέση και ένα σταθερό σημείο αναφοράς στο κάτω μέρος. Μέσα στις μεμονωμένες σελίδες, οι διατάξεις μίας στήλης είναι οι πιο συνηθισμένες για σελίδες με επίκεντρο το περιεχόμενο, όπως άρθρα blog και περιγραφές υπηρεσιών. Με τον δημιουργό ιστοσελίδων του WEMASY, μπορείς να το ρυθμίσεις απευθείας στην ιστοσελίδα σου.
Τι είναι ένα wireframe και πώς σχετίζεται με τη διάταξη;
Ένα wireframe είναι ένα απλοποιημένο διάγραμμα χαμηλής λεπτομέρειας της διάταξης μιας σελίδας, που δείχνει πού θα τοποθετηθούν τα μπλοκ περιεχομένου, η πλοήγηση και τα βασικά στοιχεία. Δημιουργείται πριν παρθεί οποιαδήποτε απόφαση οπτικού σχεδιασμού και εστιάζει καθαρά στη δομή και την τοποθέτηση του περιεχομένου. Τα wireframes χρησιμοποιούνται για να σχεδιάσεις και να δοκιμάσεις αποφάσεις διάταξης χωρίς την απόσπαση από χρώματα, γραμματοσειρές ή εικόνες. Για έναν επιχειρηματία που χρησιμοποιεί δημιουργό ιστοσελίδων, το πρότυπο που διαλέγεις λειτουργεί ουσιαστικά ως wireframe με σχεδιασμό πάνω του.
Πρέπει κάθε σελίδα μιας ιστοσελίδας να έχει την ίδια διάταξη;
Όχι απαραίτητα, αλλά πρέπει να φαίνονται συνεπείς. Μια αρχική, ένα άρθρο blog και μια σελίδα καταλόγου προϊόντων έχουν διαφορετικούς τύπους περιεχομένου και διαφορετικούς σκοπούς, οπότε ωφελούνται από διατάξεις κατάλληλες για την καθεμία. Αυτό που πρέπει να μένει συνεπές είναι η κεφαλίδα, η πλοήγηση, το footer και το γενικό οπτικό στυλ. Μέσα σε αυτά τα συνεπή στοιχεία, η διάταξη της περιοχής περιεχομένου μπορεί να αλλάζει ανάλογα με τον σκοπό της σελίδας. Ο στόχος είναι η ιστοσελίδα να φαίνεται συνεκτική, όχι να είναι κάθε σελίδα δομημένη πανομοιότυπα.
Τι είναι μια responsive διάταξη πλέγματος;
Μια responsive διάταξη πλέγματος είναι μια δομή πλέγματος που προσαρμόζει τον αριθμό των στηλών ανάλογα με το διαθέσιμο πλάτος οθόνης. Σε πλατιά οθόνη υπολογιστή μπορεί να εμφανίζει τέσσερις στήλες. Σε tablet μειώνεται σε δύο. Σε κινητό μαζεύεται σε μία. Το πλέγμα ανταποκρίνεται στο μέγεθος της οθόνης αυτόματα, χωρίς να χρειάζονται ξεχωριστά σχέδια για κάθε συσκευή. Οι περισσότεροι σύγχρονοι δημιουργοί ιστοσελίδων υλοποιούν responsive πλέγματα από προεπιλογή, ώστε η διάταξη να προσαρμόζεται σωστά χωρίς χειροκίνητη ρύθμιση για κάθε breakpoint.
Πώς επηρεάζει η επιλογή διάταξης την ταχύτητα φόρτωσης της σελίδας;
Η ίδια η διάταξη έχει ελάχιστο αντίκτυπο στην ταχύτητα φόρτωσης. Αυτό που επηρεάζει την ταχύτητα είναι το περιεχόμενο μέσα στη διάταξη: εικόνες, βίντεο, scripts και γραμματοσειρές. Μια σύνθετη διάταξη πλέγματος με βελτιστοποιημένες εικόνες φορτώνει πιο γρήγορα από μια απλή διάταξη μίας στήλης με μη βελτιστοποιημένες. Παρ' όλα αυτά, οι διατάξεις με πολλές εικόνες φόντου πλήρους πλάτους ή εφέ κύλισης parallax μπορούν να προσθέσουν χρόνο φόρτωσης αν οι εικόνες δεν έχουν συμπιεστεί σωστά. Η διάταξη είναι το δοχείο. Το τι μπαίνει μέσα του καθορίζει την ταχύτητα.