Το πρώτο πράγμα που οι περισσότεροι σχεδιαστές θεωρούν κατά την οικοδόμηση της ιστοσελίδας τους είναι αυτό που θα σχεδιάσει η ανάλυση . Αυτό που πραγματικά ισοδυναμεί με αυτό είναι να αποφασίσετε πόσο ευρύ θα πρέπει να είναι το σχέδιό σας. Δεν υπάρχει πια κάτι τέτοιο πλέον ως πρότυπο πλάτος ιστότοπου.
Γιατί να εξετάσει την επίλυση
Το 1995, οι τυποποιημένες οθόνες ανάλυσης οθόνης 640x480 ήταν οι μεγαλύτερες και καλύτερες διαθέσιμες συσκευές παρακολούθησης. Αυτό σήμαινε ότι οι σχεδιαστές ιστοσελίδων επικεντρώνονταν στη δημιουργία σελίδων που φαινόταν καλά σε προγράμματα περιήγησης ιστού μεγιστοποιημένες σε μια οθόνη 12 ιντσών έως 14 ιντσών σε αυτό το ψήφισμα.
Αυτές τις μέρες, το ψήφισμα 640x480 αποτελεί λιγότερο από το 1% της μεγαλύτερης επισκεψιμότητας ιστότοπου. Οι άνθρωποι χρησιμοποιούν υπολογιστές με πολύ υψηλότερες αναλύσεις, συμπεριλαμβανομένων των 1366x768, 1600x900 και 5120x2880. Σε πολλές περιπτώσεις, ο σχεδιασμός για μια οθόνη ανάλυσης 1366x768 λειτουργεί.
Βρισκόμαστε σε ένα σημείο της ιστορίας του σχεδιασμού ιστοσελίδων, όπου δεν χρειάζεται να ανησυχούμε πολύ για την επίλυση. Οι περισσότεροι άνθρωποι έχουν μεγάλες οθόνες ευρείας οθόνης και δεν μεγιστοποιούν το παράθυρο του προγράμματος περιήγησης. Έτσι, αν αποφασίσετε να σχεδιάσετε μια σελίδα που δεν έχει πλάτος περισσότερο από 1366 pixels, η σελίδα σας θα φαίνεται πιθανώς ωραία στα περισσότερα παράθυρα του προγράμματος περιήγησης ακόμα και σε μεγάλες οθόνες με υψηλότερα ψηφίσματα.
Πλάτος προγράμματος περιήγησης
Πριν ξεκινήσετε να σκέφτεστε "εντάξει, θα κάνω τις σελίδες μου 1366 pixels πλάτος", υπάρχουν περισσότερα για αυτή την ιστορία. Ένα συχνά παραβλεπόμενο ζήτημα όταν αποφασίζετε το πλάτος μιας ιστοσελίδας είναι το πόσο μεγάλοι οι πελάτες σας διατηρούν τα προγράμματα περιήγησης. Συγκεκριμένα, μεγιστοποιούν τα προγράμματα περιήγησής τους σε μέγεθος πλήρους οθόνης ή τα κρατούν μικρότερα από την πλήρη οθόνη;
Σε μια άτυπη έρευνα των συναδέλφων που χρησιμοποίησαν όλοι ένα φορητό υπολογιστή με ανάλυση 1024x768, δύο κράτησαν όλες τις εφαρμογές τους μεγιστοποιημένες. Τα υπόλοιπα είχαν ανοίγματα διαφορετικού μεγέθους για διάφορους λόγους. Αυτό δείχνει ότι εάν σχεδιάζετε το intranet της εταιρείας αυτής σε πλάτος 1024 pixels, το 85% των χρηστών θα πρέπει να μετακινηθεί οριζόντια για να δει ολόκληρη τη σελίδα.
Αφού υπολογίσετε τους πελάτες που μεγιστοποιούν ή όχι, σκεφτείτε τα σύνορα του προγράμματος περιήγησης. Κάθε πρόγραμμα περιήγησης ιστού έχει μια γραμμή κύλισης και περιθώρια στις πλευρές που συρρικνώνουν τον διαθέσιμο χώρο από 800 σε περίπου 740 pixels ή λιγότερο σε ανάλυση 800x600 και περίπου 980 pixels στα μεγιστοποιημένα παράθυρα σε ανάλυση 1024x768. Αυτό ονομάζεται browser "chrome" και μπορεί να πάρει μακριά από τον χρησιμοποιήσιμο χώρο για το σχεδιασμό της σελίδας σας.
Σελίδες σταθερού ή υγρού πλάτους
Το πραγματικό αριθμητικό πλάτος δεν είναι το μόνο πράγμα που πρέπει να σκεφτείτε όταν σχεδιάζετε το πλάτος του ιστοτόπου σας. Πρέπει επίσης να αποφασίσετε εάν θα έχετε σταθερό πλάτος ή πλάτος υγρού . Με άλλα λόγια, πρόκειται να ορίσετε το πλάτος σε συγκεκριμένο αριθμό (σταθερό) ή σε ποσοστό (υγρό);
Σταθερό πλάτος
Οι σελίδες σταθερού πλάτους είναι ακριβώς όπως ακούγονται. Το πλάτος έχει καθοριστεί σε συγκεκριμένο αριθμό και δεν αλλάζει, ανεξάρτητα από το πόσο μεγάλο ή μικρό είναι το πρόγραμμα περιήγησης. Αυτό μπορεί να είναι καλό αν χρειάζεστε το σχέδιό σας να φαίνεται ακριβώς το ίδιο ανεξάρτητα από το πόσο ευρύ ή στενό είναι τα προγράμματα περιήγησης των αναγνωστών σας, αλλά αυτή η μέθοδος δεν λαμβάνει υπόψη τους αναγνώστες σας. Τα άτομα με προγράμματα περιήγησης στενότερα από το σχεδιασμό σας θα πρέπει να μετακινηθούν οριζόντια και τα άτομα με ευρεία προγράμματα περιήγησης θα έχουν μεγάλες ποσότητες κενών θέσεων στην οθόνη.
Για να δημιουργήσετε σελίδες σταθερού πλάτους, απλά χρησιμοποιήστε συγκεκριμένους αριθμούς pixel για τα πλάτη των διαχωριστικών σας σελίδων.
Υγρό πλάτος
Οι σελίδες υγρού πλάτους (μερικές φορές ονομάζονται εύκαμπτες σελίδες πλάτους) ποικίλλουν ανάλογα με το πλάτος ανάλογα με το μέγεθος του παραθύρου του προγράμματος περιήγησης. Αυτό σας επιτρέπει να σχεδιάζετε σελίδες που εστιάζουν περισσότερο στους πελάτες σας. Το πρόβλημα με τις σελίδες υγρού πλάτους είναι ότι είναι δύσκολο να διαβαστούν. Εάν το μήκος σάρωσης μιας γραμμής κειμένου είναι μεγαλύτερο από 10 έως 12 λέξεις ή μικρότερο από 4 έως 5 λέξεις, μπορεί να είναι δύσκολο να διαβαστεί. Αυτό σημαίνει ότι οι αναγνώστες με μεγάλα ή μικρά παράθυρα του προγράμματος περιήγησης έχουν προβλήματα.
Για να δημιουργήσετε ευέλικτες σελίδες πλάτους, απλώς χρησιμοποιήστε ποσοστά ή ems για τα πλάτη των διαχωριστικών σας σελίδων. Θα πρέπει επίσης να εξοικειωθείτε με την ιδιότητα μέγιστου πλάτους CSS. Αυτή η ιδιότητα σάς επιτρέπει να ορίσετε ένα πλάτος σε ποσοστά, αλλά στη συνέχεια να το περιορίσετε έτσι ώστε να μην είναι τόσο μεγάλο που οι άνθρωποι δεν μπορούν να το διαβάσουν.
Και τα ερωτήματα Media Winner Is: CSS Media
Η καλύτερη λύση αυτές τις μέρες είναι να χρησιμοποιήσετε τα ερωτήματα μέσων CSS και τον σχεδιασμό ώστε να δημιουργήσετε μια σελίδα που να προσαρμόζεται στο πλάτος του προγράμματος περιήγησης που την βλέπει. Ένας ανταποκρινόμενος σχεδιασμός ιστοσελίδων χρησιμοποιεί το ίδιο περιεχόμενο για να δημιουργήσει μια ιστοσελίδα που λειτουργεί είτε το βλέπετε με πλάτος 5120 pixel είτε πλάτος 320 pixel. Οι σελίδες διαφορετικού μεγέθους φαίνονται διαφορετικές, αλλά περιέχουν το ίδιο περιεχόμενο. Με το ερώτημα πολυμέσων στο CSS3, κάθε συσκευή λήψης απαντά στο ερώτημα με το μέγεθός του και το φύλλο στυλ προσαρμόζεται στο συγκεκριμένο μέγεθος.