Το πρώτο πράγμα που οι περισσότεροι σχεδιαστές λαμβάνουν υπόψη κατά την κατασκευή της ιστοσελίδας τους είναι τι ανάλυση για το σχεδιασμό για. Αυτό που πραγματικά σημαίνει είναι να αποφασίσουμε πόσο ευρύ πρέπει να είναι το σχέδιό σας. Δεν υπάρχει πια τυπικό πλάτος ιστότοπου.
Γιατί να εξετάσετε το ψήφισμα
Το 1995, οι τυπικές οθόνες 640-pixel-by-480-pixel ήταν οι μεγαλύτερες και καλύτερες διαθέσιμες οθόνες. Αυτό σήμαινε ότι οι σχεδιαστές ιστοσελίδων επικεντρώθηκαν στη δημιουργία σελίδων που φαίνονται καλές στα προγράμματα περιήγησης ιστού μεγιστοποιημένες σε μια οθόνη 12 ιντσών έως 14 ιντσών σε αυτήν την ανάλυση.
Αυτές τις μέρες, η ανάλυση 640 έως 480 αποτελεί λιγότερο από το 1 τοις εκατό της περισσότερης επισκεψιμότητας ιστότοπων. Οι άνθρωποι χρησιμοποιούν υπολογιστές με πολύ υψηλότερες αναλύσεις, συμπεριλαμβανομένων των 1366 έως 768, 1600 έως 900 και 5120 έως 2880. Σε πολλές περιπτώσεις, ο σχεδιασμός για οθόνη ανάλυσης 1366-768 λειτουργεί.
Τόντια, οι περισσότεροι άνθρωποι διαθέτουν μεγάλες οθόνες ευρείας οθόνης και δεν μεγιστοποιούν το παράθυρο του προγράμματος περιήγησής τους. Επομένως, εάν αποφασίσετε να σχεδιάσετε μια σελίδα πλάτους όχι μεγαλύτερη από 1366 εικονοστοιχεία, η σελίδα σας πιθανότατα θα φαίνεται ωραία στα περισσότερα παράθυρα του προγράμματος περιήγησης ακόμη και σε μεγάλες οθόνες με υψηλότερες αναλύσεις.
Πλάτος προγράμματος περιήγησης
Ένα πρόβλημα που συχνά παραβλέπεται όταν αποφασίζετε το πλάτος μιας ιστοσελίδας είναι το πόσο μεγάλος είναι ο πελάτης σας στα προγράμματα περιήγησής τους. Συγκεκριμένα, μεγιστοποιούν τα προγράμματα περιήγησής τους σε μέγεθος πλήρους οθόνης ή τα διατηρούν μικρότερα από την πλήρη οθόνη;
Αφού λάβετε υπόψη πελάτες που μεγιστοποιούν ή δεν κάνουν, σκεφτείτε τα περιγράμματα του προγράμματος περιήγησης. Κάθε πρόγραμμα περιήγησης ιστού χρησιμοποιεί μια γραμμή κύλισης και περιθώρια στις πλευρές που συρρικνώνουν τον διαθέσιμο χώρο από 800 σε περίπου 740 εικονοστοιχεία ή λιγότερο σε αναλύσεις 800-με-600 και περίπου 980 εικονοστοιχεία σε μεγιστοποιημένα παράθυρα στα 1024-με-768 ψηφίσματα. Αυτό ονομάζεται πρόγραμμα περιήγησης χρώμιο και μπορεί να αφαιρέσει από το χρησιμοποιήσιμο χώρο για τη σχεδίαση της σελίδας σας.
Σελίδες σταθερού ή υγρού πλάτους
Το πραγματικό αριθμητικό πλάτος δεν είναι το μόνο πράγμα που πρέπει να σκεφτείτε κατά το σχεδιασμό του πλάτους του ιστότοπού σας. Πρέπει επίσης να αποφασίσετε εάν θα έχετε σταθερό πλάτος ή υγρό πλάτος. Με άλλα λόγια, πρόκειται να ορίσετε το πλάτος σε έναν συγκεκριμένο αριθμό (σταθερό) ή σε ένα ποσοστό (υγρό);
Σταθερό πλάτος
Οι σελίδες σταθερού πλάτους είναι ακριβώς όπως ακούγονται. Το πλάτος καθορίζεται σε έναν συγκεκριμένο αριθμό και δεν αλλάζει ανεξάρτητα από το πόσο μεγάλο ή μικρό είναι το πρόγραμμα περιήγησης. Αυτή η προσέγγιση μπορεί να είναι καλή αν χρειάζεστε το σχέδιό σας ώστε να φαίνεται ακριβώς το ίδιο, ανεξάρτητα από το πόσο ευρύ ή στενό είναι το πρόγραμμα περιήγησης των αναγνωστών σας, αλλά αυτή η μέθοδος δεν λαμβάνει υπόψη τους αναγνώστες σας. Τα άτομα με προγράμματα περιήγησης στενότερα από το σχέδιό σας θα πρέπει να πραγματοποιήσουν οριζόντια κύλιση και τα άτομα με ευρύ πρόγραμμα περιήγησης θα έχουν μεγάλο κενό χώρο στην οθόνη.
Για να δημιουργήσετε σελίδες σταθερού πλάτους, χρησιμοποιήστε συγκεκριμένους αριθμούς εικονοστοιχείων για το πλάτος των τμημάτων σελίδας σας.
Πλάτος υγρού
Σελίδες πλάτους υγρού (μερικές φορές ονομάζονται ευέλικτες σελίδες) ποικίλλουν σε πλάτος ανάλογα με το πόσο ευρύ είναι το παράθυρο του προγράμματος περιήγησης. Αυτή η στρατηγική φέρνει σχέδια που εστιάζουν περισσότερο στους πελάτες. Το πρόβλημα με τις σελίδες υγρού πλάτους είναι ότι μπορεί να είναι δύσκολο να διαβαστούν. Εάν το μήκος σάρωσης μιας γραμμής κειμένου είναι μεγαλύτερη από 10 έως 12 λέξεις ή μικρότερη από 4 έως 5 λέξεις, μπορεί να είναι δύσκολο να διαβαστεί. Αυτό σημαίνει ότι οι αναγνώστες με μεγάλα ή μικρά παράθυρα του προγράμματος περιήγησης αντιμετωπίζουν προβλήματα.
Για να δημιουργήσετε ευέλικτες σελίδες πλάτους, χρησιμοποιήστε ποσοστά ή ems για τα πλάτη των τμημάτων σελίδας σας. Εξοικειωθείτε με το CSS μέγιστο πλάτος ιδιοκτησία. Αυτή η ιδιότητα σάς επιτρέπει να ορίσετε ένα πλάτος σε ποσοστά, αλλά στη συνέχεια να το περιορίσετε έτσι ώστε να μην είναι τόσο μεγάλο που οι άνθρωποι δεν μπορούν να το διαβάσουν.
Ερωτήματα πολυμέσων CSS
Η καλύτερη λύση αυτές τις μέρες είναι να χρησιμοποιήσετε ερωτήματα πολυμέσων CSS και σχεδιασμό απόκρισης για να δημιουργήσετε μια σελίδα που προσαρμόζεται στο πλάτος του προγράμματος περιήγησης που την βλέπει. Ένας ανταποκρινόμενος σχεδιασμός ιστοσελίδων χρησιμοποιεί το ίδιο περιεχόμενο για τη δημιουργία μιας ιστοσελίδας που λειτουργεί είτε την προβάλλετε σε πλάτος 5120 εικονοστοιχείων ή πλάτος 320 εικονοστοιχεία. Οι σελίδες διαφορετικού μεγέθους φαίνονται διαφορετικές, αλλά περιέχουν το ίδιο περιεχόμενο. Με το ερώτημα πολυμέσων στο CSS3, κάθε συσκευή λήψης απαντά στο ερώτημα με το μέγεθός της και το φύλλο στυλ προσαρμόζεται στο συγκεκριμένο μέγεθος.