Διακοπή χρήσης σημείων διακοπής συσκευής

Οπτικοποίηση ενός μικρού τμήματος μεγεθών παραθύρου προβολής

Το βλέπω όλη την ώρα. Σχεδιαστές και προγραμματιστές, ορίζοντας σημεία διακοπής σύμφωνα με την αγαπημένη τους συσκευή. Πότε θα μάθουμε από τα λάθη μας στο παρελθόν;

Όταν ήρθε ο ιστός, εγκαταστάσαμε πλάτη 640 pixel. Στη συνέχεια, μερικά χρόνια αργότερα, όταν μεγάλες οθόνες ήρθαν στην αγορά, εγκαταστάθηκαν σε 960 pixels. Δεν μας απασχολούσε πια τα άτομα με μικρότερες οθόνες.

Τότε πέρασαν περισσότερα χρόνια. Ο κινητός ιστός γεννήθηκε. Ή ακριβέστερα, θα μπορούσαμε να καταναλώσουμε ιστοσελίδες στα τηλέφωνά μας, τα οποία τυχαίνει να έχουν μικρές οθόνες. Ένα εκατομμύριο προγράμματα περιήγησης βγήκαν έξω. Ένα εκατομμύριο συσκευές βγήκαν έξω. Και τα προγράμματα περιήγησης μας έδωσαν ερωτήματα στα μέσα μαζικής ενημέρωσης.

Σχεδόν αυτή τη φορά, αποφασίσαμε να χρησιμοποιήσουμε 320 pixels για κινητά. Γιατί; Επειδή πολλοί από εμάς είχαν το iPhone, και αυτό ήταν το πλάτος του σε πορτρέτο.

Και μετά. Και μετά. Και μετά.

Στη συνέχεια, οριζόντια λειτουργία. Στη συνέχεια, tablet (αυτό είναι ακόμα σωστό για κινητά;). Στη συνέχεια, στην επιφάνεια εργασίας. Στη συνέχεια, μεγάλη επιφάνεια εργασίας όπως σούπερ οθόνες βροντή ή ο, τιδήποτε που ονομάζεται. (Δεν το Googling γιατί ξέρετε τι εννοώ). Στη συνέχεια τηλεόραση. Τότε ρολόι και στη συνέχεια ...

Παίρνετε το σημείο. Ο ιστός δεν εκτυπώνεται. Ο ιστός είναι ο ιστός και δεν έχουμε ιδέα ποια οθόνη μεγέθους έχουν οι χρήστες μας. Δεν μπορούμε να το ελέγξουμε. Και ακόμα κι αν μπορούσαμε, ο πολλαπλασιασμός των συσκευών σημαίνει ότι ο σχεδιασμός γι 'αυτούς είναι μάταιος.

Αλλά υπάρχουν λίγα πράγματα που γνωρίζουμε. Γνωρίζουμε τη μάρκα και το περιβάλλον χρήστη μας. Και, το πιο σημαντικό, γνωρίζουμε το περιεχόμενό μας. Το περιεχόμενο δεν είναι μόνο παραγράφους του κειμένου. Είναι τα πράγματα που κρατούνται ή περιλαμβάνονται σε κάτι.

Πρέπει πάντα να ξεκινάμε με περιεχόμενο. Χωρίς περιεχόμενο, ο σχεδιασμός δεν έχει νόημα. Σχεδιάζουμε να βοηθήσουμε τους χρήστες να καταναλώνουν περιεχόμενο. Δεν χρησιμοποιούμε περιεχόμενο για να βοηθήσουμε τους χρήστες να απολαύσουν τα σχέδιά μας.

Συχνά αρχίζουμε το σχεδιασμό με ένα κουτί. Και στη συνέχεια βάζουμε μικρότερα κουτιά μέσα σε αυτό. Στη συνέχεια θα συμπληρώσουμε αυτά τα κουτιά με το πραγματικό περιεχόμενο.

Όπως ο Frank Chimero εξηγεί όμορφα στο Grain The Web, αυτό είναι ακριβώς το χειρότερο πράγμα που μπορούμε να κάνουμε.

Πώς μπορούμε να σχεδιάσουμε κάτι μέχρι να ξέρουμε τι είναι το περιεχόμενο;

Έχω δει μάρτυρες των σχεδιαστών να τελειώνουν τις μακέτες τους και να ζητούν από το σχεδιαστή περιεχομένου κάτοικος να κάνει το περιεχόμενο να ταιριάζει. Ίσως ακόμη να τους ζητήσετε να συντομεύσουν το φιλικό προς το χρήστη περιεχόμενο για να βεβαιωθείτε ότι δεν τυλίγουν και ούτω καθεξής. Μπορεί να βοηθήσει τον σχεδιαστή. Δεν βοηθά τον χρήστη.

Και όταν ελέγχουν το σχέδιό τους στο τοπίο ή σε μια συσκευή που δεν κατέχουν, γίνονται φλεγμονώδεις. Αυτό που βλέπουν ως έλεγχο, είναι πραγματικά ένας περιττός περιορισμός στο σχεδιασμό τους σε ένα γνωστό σύνολο μεγεθών συσκευών.

Αντ 'αυτού πρέπει να αφήσουμε το περιεχόμενο να είναι ο οδηγός μας. Πρέπει να ορίσουμε ένα σημείο διακοπής όταν και αν το απαιτεί το περιεχόμενο. Μπορούμε να τους ονομάσουμε σημεία διακοπής περιεχομένου ή ό, τι ο Frank αναφέρεται ως σημεία ανασυγκρότησης.

Πάρτε για παράδειγμα τη φόρμα εγγραφής στο MaintainableCSS. Λαμβάνοντας μια πρώτη προσέγγιση μικρής οθόνης με γνώμονα το περιεχόμενο, το κουμπί βρίσκεται κάτω από το πλαίσιο κειμένου. Και όταν υπάρχει χώρος, κάθονται δίπλα στο άλλο.

Ανταποκρινόμενη φόρμα συνδρομής βάσει σημείων διακοπής περιεχομένου

Το ερώτημα μέσων χρησιμοποιεί ένα σημείο διακοπής 36εμ. Γιατί; Γιατί αυτό είναι όταν υπάρχει μια ευκαιρία για ανακατασκευή περιεχομένου. Το κουμπί και ο έλεγχος κειμένου χάνουν την προσφορά τους όταν γίνονται πραγματικά ευρείες σε μεγαλύτερες οθόνες. Έτσι μπορούμε να το διορθώσουμε.

Και αυτό ισχύει μόνο για τη φόρμα εγγραφής. Δεν υπάρχει γενικός κανόνας που να δηλώνει ότι το 36em σημαίνει "μεγάλο". Το σημείο διακοπής αντικατοπτρίζει την ανάγκη της συγκεκριμένης ενότητας και περιεχομένου.

Τεχνικά είναι ένα ερώτημα μέσων. Αλλά η νοοτροπία και η προσέγγιση είναι αυτό που την ξεχωρίζει. Ο σχεδιασμός υποστηρίζει το περιεχόμενο. Οχι αντίστροφα.

Αυτός είναι ο λόγος για τον οποίο τα πλαίσια CSS προκαλούν προβλήματα περιορίζοντας άσκοπα το περιεχόμενό μας ώστε να ταιριάζει σε ένα προκαθορισμένο δίκτυο. Πώς μπορεί ένα πλαίσιο CSS να γνωρίζει ποιο είναι το περιεχόμενό μας; Δεν μπορεί.

Ο όρος κινητό πρώτα μας ενθαρρύνει να σκεφτούμε από την άποψη της συσκευής. Αλλά ο ιστός δεν είναι ένα σύνολο συσκευών. Ο ιστός είναι μια συνέχεια της ακμής. Αυτή είναι η πιο ωραία πρόταση που έχω γράψει ποτέ.

Συγγνώμη για τη χρήση ορολογίας. Αυτό που σημαίνει αυτό είναι αυτό. Δεν υπάρχει απολύτως κανένα σημείο - εν πάση περιπτώσει - να προσπαθήσουμε να υπολογίσουμε το μέγεθος μιας συγκεκριμένης συσκευής, προκειμένου να καθορίσουμε ένα κωδικοποιημένο δίκτυο απόκρισης.

Στην καλύτερη περίπτωση είναι περιοριστική και στη χειρότερη της, προκαλεί προβλήματα.

Αντ 'αυτού, αφήστε το περιεχόμενο να είναι ο οδηγός σας. Εάν και όταν σπάσει μπορούμε να το επανασυναρμολογήσουμε με το απαραίτητο σημείο διακοπής περιεχομένου.

Ανταποκρινόμενος σχεδιασμός μας ελευθερώνει από τα δεσμά του σχεδιασμού με βάση τις συσκευές, η οποία είναι αδύνατο να πάρει μια λαβή. Τα σημεία διακοπής περιεχομένου δίνουν στους ανθρώπους καλύτερες εμπειρίες ανεξάρτητα από το μέγεθος της συσκευής τους.

Αυτό είναι το τέλος. Αλλά, αν σας άρεσε αυτό το άρθρο, θα πρέπει να εγγραφείτε στην ιδιωτική λίστα μου. Στέλνω ένα άρθρο σαν αυτό περίπου μία φορά το μήνα κατευθείαν στα εισερχόμενά σας. Είναι ένας καλός τρόπος για να συνεχίσετε τη συζήτηση.