320, 768 και 1024. Οι αριθμοί αυτοί σημαίνουν τίποτα σε σας;
Όχι, δεν είναι ο κώδικας Da Vinci, είναι τα πλάτη σε εικονοστοιχεία που πολλοί σχεδιαστές συνδέονται με τα πλάτη των κινητών, των tablet και της επιφάνειας εργασίας.
Το πρόβλημα που έχω με αυτό είναι ότι το κινητό μου δεν έχει πλάτος 320 pixel, το tablet μου δεν έχει πλάτος 768 pixel και η οθόνη επιφάνειας εργασίας μου σίγουρα δεν έχει πλάτος 1024 pixels. Υπάρχουν εκατοντάδες διαφορετικών μεγεθών οθόνης σε μια ποικιλία διαφορετικών συσκευών και εξακολουθούμε να πιστεύουμε ότι ανταποκρίνονται στον σχεδιασμό ιστοσελίδων όπως τα 320, 768 και 1024.
Έχω δει πολλούς ιστότοπους που χρησιμοποιούν αυτά τα τρία σημεία διακοπής για τα σχέδιά τους και απλά δημιουργούν 3 στατικές διατάξεις που βρίσκονται στο πλησιέστερο πλάτος.
Αυτό είναι καλύτερο από το να έχετε ένα παλιό, στατικό, desktop μόνο site δεδομένου ότι είναι τουλάχιστον εξυπηρετούν μια στήλη, απλοποιημένη έκδοση για κινητά και μια αφή φιλική έκδοση για tablet, αλλά τότε γιατί θα αποξενώσει όλα τα άλλα μεγέθη οθόνης, θεώρηση?
Σίγουρα το σχέδιο θα εξακολουθήσει να λειτουργεί στα άλλα μεγέθη, αλλά τι συμβαίνει όταν έχετε ένα tablet που είναι μικρότερο από 768; Θα έχουν την κινητή εμπειρία σε ένα tablet! Και όταν το βλέπετε σε οθόνη φορητού υπολογιστή μικρότερη από 1024; Απλώς θα τους στείλουμε τη διάταξη των δισκίων και θα τους γελάσουμε για να μην έχουμε ένα από τα 3 μεγέθη οθόνης που θεωρούμε άξια.
Όταν δημιουργείτε τις προσαρμοστικές διατάξεις σας, θα πρέπει πάντα να στοχεύετε να ορίζετε όσο το δυνατόν περισσότερες από τις διαστάσεις σας σε ποσοστά. Αυτό βοηθά να διασφαλιστεί ότι το περιεχόμενό σας θα αυξηθεί και θα συρρικνωθεί ομοιόμορφα μέσω διαφορετικών μεγεθών οθόνης και θα το κάνει ανάλογα με τη συσκευή στην οποία βλέπετε. Αυτή η προσέγγιση θα διασφαλίσει επίσης ότι το περιεχόμενό σας συμπληρώνει πάντα το 90% (ή όση καθορίζετε) της οθόνης αντί για το 50% πιθανώς της οθόνης, καθώς το περιεχόμενο επικεντρώνεται σε μέγεθος οθόνης που είναι μερικά pixel μικρότερο από το επόμενο διαθέσιμο σημείο διακοπής.
Κατά την επιλογή των σημείων διακοπής, θα πρέπει πάντα να λαμβάνετε τις αποφάσεις σας με βάση το σημείο όπου σπάει το περιεχόμενο και όχι τα πλάτη της οθόνης της συσκευής. Αντί να δημιουργήσετε ένα σχέδιο και στη συνέχεια να το τροποποιήσετε για να ταιριάζει άνετα στην οθόνη του iPad, θα πρέπει να μάθετε σε ποιο πλάτος το περιεχόμενό σας αρχίζει να αγωνίζεται.
Έχω την τάση να ξεκινήσω με ένα σχέδιο 1400 ευρύ και σιγά-σιγά να το πρόγραμμα περιήγησης μικρότερο μέχρι ένα κομμάτι του περιεχομένου σπάει τη διάταξη ή πλησιάζει να το κάνει. Αυτό καθορίζει τότε το επόμενο σημείο διακοπής μου. Δεν έχει σημασία αν είναι στα 1200, 800 ή 673, αν το περιεχόμενο εξακολουθεί να λειτουργεί, τότε γιατί να αλλάξετε τη διάταξη;
Θα διαπιστώσετε ότι θα καταλήξετε σε παράξενα σημεία διακοπής όπως 477 ή 982 και ότι μπορεί να έχετε 2, 6 ή 10 διαφορετικά σημεία διακοπής. Το θέμα είναι ότι το περιεχόμενο θα αποφασίσει παρά τα προβλεπόμενα μεγέθη οθόνης που επιθυμείτε να προβληθούν.
Με την απελευθέρωση των διάφορων συσκευών και μεγεθών οθόνης κάθε μήνα, είναι αδύνατο να προσδιοριστεί ένα σύνολο καθορισμένων σημείων διακοπής για τα προγράμματα που ανταποκρίνονται στις ανάγκες μας. Η αλήθεια είναι ότι ενώ χρησιμοποιούμε μια μεταβλητή όπως το πλάτος της οθόνης για να καθορίσουμε τις ανταποκρινόμενες διατάξεις μας, θα προσπαθήσουμε να εξυπηρετήσουμε μια τέλεια διάταξη σε κάθε διαφορετικό μέγεθος, αλλά ακολουθώντας μερικές από τις παραπάνω συμβουλές, μπορούμε τουλάχιστον να διασφαλίσουμε ότι το περιεχόμενο εμφανίζεται πάντα όσο το δυνατόν καλύτερα.
Ποια σημεία διακοπής συνήθως χρησιμοποιείτε; Αποφεύγετε εντελώς τα σημεία διακοπής; Ενημερώστε μας στα σχόλια.
Προτεινόμενη εικόνα / μικρογραφία, ευρεία εικόνα φορτίου μέσω Shutterstock.