Προτού περάσετε πολύ καιρό εξετάζοντας ακριβείς αναλύσεις οθόνης για το σχέδιό σας, θα πρέπει να θυμάστε ότι όλες οι σύγχρονες ιστοσελίδες ανταποκρίνονται, πράγμα που σημαίνει ότι έχει σχεδιαστεί για προσαρμογή σε διάφορες αναλύσεις οθόνης. Με μια μοναδική σχεδίαση, πρέπει να υποστηρίξετε τα πάντα, από τις μικρότερες οθόνες για κινητές συσκευές έως και οθόνες επιτραπέζιου υπολογιστή ultra HD.
Με σχεδιασμός ιστοσελίδων προσαρμοζόμενος σε συσκευές, δημιουργείτε πιο γενικές διατάξεις για κινητά, tablet και επιτραπέζιους υπολογιστές. Πότε και πώς κάθε στοιχείο σελίδας αλλάζει στη θέση του για αυτές τις διατάξεις καθορίζεται από ειδικά σημεία διακοπής γραμμένα στο δικό σας CSS. Αυτά τα σημεία διακοπής καθορίζονται από ορισμένες κοινές αναλύσεις οθόνης.
Παρόλο που δεν θα στοχεύσετε συγκεκριμένες αναλύσεις ή δεν θα ορίσετε ένα σταθερό μέγεθος για τα σχέδιά σας, θα εξετάσετε το ενδεχόμενο οθόνης αναλύσεις για τη δημιουργία σημείων διακοπής και τη δημιουργία ομαλών μεταβάσεων, ώστε ο ιστότοπός σας να φαίνεται καλός σε κάθε συσκευή και Μέγεθος οθόνης.
Κοινές αναλύσεις επιφάνειας εργασίας
- 1280x720 Standard HD - Μπορεί να το γνωρίζετε καλύτερα ως 720p. Ήταν η τυπική ανάλυση HD όταν το HD έγινε πιο συνηθισμένο. Πιθανότατα δεν θα βρείτε πολλές νέες οθόνες που χρησιμοποιούν αυτήν την ανάλυση, αλλά υπάρχουν πολλές από αυτές ακόμα στη φύση από τότε που ήταν πιο δημοφιλείς.
- 1366x768 - Είναι κάτι ασυνήθιστο, αλλά είναι πολύ δημοφιλές σε μικρότερους φορητούς υπολογιστές και ορισμένα tablet. Εάν ασχολείστε με τα χαμηλότερα Chromebook, υπάρχει μια καλή πιθανότητα αυτή είναι η ανάλυση που στοχεύετε.
- 1920x1080 Το πιο κοινό - Όταν σκέφτεστε επιτραπέζιους υπολογιστές, πιθανότατα ασχολείστε με το 1920x1080, γνωστότερο ως 1080p. Αυτό το ψήφισμα είναι απολύτως παντού. Οι περισσότερες οθόνες επιτραπέζιων υπολογιστών είναι ακόμα 1080p, και πολλοί φορητοί υπολογιστές πλήρους μεγέθους είναι επίσης. Θα βρείτε επίσης ένα αξιοπρεπές μερίδιο tablet σε 1080p και στο τοπίο.
- 2560x1440 - Το 1440p είναι ένα άλλο παράξενο μεσαίο έδαφος στην εικόνα ανάλυσης της οθόνης. Είναι υψηλότερο από αυτό που θα θεωρούσατε 2k, αλλά δεν είναι αρκετά 4k. Τούτου λεχθέντος, είναι μια κοινή ανάλυση στην αγορά παρακολούθησης τυχερών παιχνιδιών και είναι μια προσιτή εναλλακτική λύση για να φτάσετε τα 4k. Ανάλογα με τον ιστότοπό σας, μπορεί να αξίζει ή όχι να υποστηρίζει 1440p.
- 3840x2160 Το εγγύς μέλλον - Αυτό είναι πλήρες 4k ή Ultra HD. Ενώ τα 4k συνήθως προορίζονται για υπολογιστές υψηλότερης τεχνολογίας τώρα, οι τιμές πέφτουν, η τεχνολογία γραφικών βελτιώνεται και η ζήτηση για 4k καθοδηγείται από την αγορά τηλεόρασης, όπου είναι πολύ πιο κοινό. Είναι ασφαλές να υποθέσουμε ότι τα επόμενα χρόνια, το 4k θα ξεπεράσει εύκολα τα 1080p ως το de-facto πρότυπο, οπότε αξίζει σίγουρα να αντιστοιχίσετε 4k τώρα.
Κοινές αναλύσεις Tablet / Landscape
Τα δισκία μπορεί να μην είναι τόσο δημοφιλή όσο κάποτε, και τα αυξανόμενα μεγέθη τηλεφώνου σε συνδυασμό με μετατρέψιμους φορητούς υπολογιστές φαίνεται να έχουν μειώσει σημαντικά το μερίδιο αγοράς τους. Ακόμα και πάλι, ο υπολογισμός των αναλύσεων tablet αλληλεπικαλύπτεται σημαντικά με επιτραπέζιους και φορητούς υπολογιστές. Ενδέχεται να μπορείτε να χρησιμοποιήσετε σημεία διακοπής tablet για να δημιουργήσετε σημεία διακοπής για ορισμένα ενοχλητικά στοιχεία που δεν ταιριάζουν σωστά σε συγκεκριμένες αναλύσεις.
- Πρέπει επίσης να λάβετε υπόψη σας τις αναλύσεις tablet για συσκευές που διατηρούνται σε κατακόρυφη λειτουργία. Δεν θα περιηγηθούν όλοι στο tablet τους σε οριζόντια θέση, επομένως θα πρέπει να προσθέσετε τουλάχιστον ένα σημείο διακοπής για ένα κοινό tablet που διατηρείται σε κατακόρυφο προσανατολισμό.
- 1280x800 Μια ανάλυση που ήταν συνηθισμένη - Τα παλαιότερα δισκία, τα δισκία χαμηλότερης ποιότητας και τα μικρότερα δισκία έχουν συνήθως ορισμένα από τα tablet Fire Amazon που εξακολουθούν να χρησιμοποιούν 1280x800 Αυτή είναι μια από τις τελευταίες πραγματικά φορητές αναλύσεις σε tablet.
- 1920x1200 Common σε tablet 7 "και 8" - Στο τοπίο, μπορείτε να βασίζεστε στα ίδια σημεία διακοπής με 1080p, τις περισσότερες φορές. Ωστόσο, όταν βλέπετε ένα από αυτά στο τοπίο, η κατάσταση είναι πολύ διαφορετική. Αυτή η ανάλυση είναι κοινή σε πολλά δισκία 7 και 8 ιντσών, συμπεριλαμβανομένου του Amazon Fire.
- 2048x1536 Apple Tablet -Αυτή είναι η πιο κοινή ανάλυση της Apple για tablet. Είναι αρκετά παρόμοιο με το 1440p για να κάνει πολύ μικρή διαφορά, αλλά και πάλι, το πορτρέτο είναι ασυνήθιστο. Σε κάθε περίπτωση, είναι καλή ιδέα να δοκιμάσετε τον ιστότοπό σας σε αυτήν την ανάλυση για να βεβαιωθείτε ότι δεν συμβαίνει τίποτα περίεργο στα iPad.
Τα tablet υψηλότερης ανάλυσης αρχίζουν να μπαίνουν στην επιφάνεια εργασίας. Τις περισσότερες φορές, δεν χρειάζεται καν να τους λογοδοτήσετε γιατί η ανάλυση εμπίπτει σε ένα εύρος που έχετε ήδη λογοδοτήσει. Είναι πάντοτε καλή ιδέα να δοκιμάζετε, ωστόσο, να είστε απολύτως σίγουροι.
Κοινές αναλύσεις για κινητά
Οι φορητές συσκευές είναι εύκολα οι πιο περίπλοκες. Υπάρχει μια τόσο μεγάλη γκάμα συσκευών, συμπεριλαμβανομένων παλαιότερων που εξακολουθούν να χρησιμοποιούνται. Δεν είναι εύκολο να τα καλύψουμε όλα. Αυτός είναι ο λόγος για τον οποίο η σχεδίαση για κινητά είναι τόσο δημοφιλής. Η φιλοσοφία είναι απλή. Ξεκινήστε πρώτα με τον απλούστερο σχεδιασμό για κινητά και δημιουργήστε το για μεγαλύτερες και μεγαλύτερες οθόνες. Με αυτόν τον τρόπο, ακόμη και οι παλαιότερες και οι μικρότερες συσκευές λειτουργούν, αλλά με λιγότερο περιεχόμενο και λιγότερες δυνατότητες. Ο ιστότοπος δεν παραμορφώνεται, εμφανίζει πρώτα μόνο τις πιο σημαντικές και κοινώς προσπελάσιμες πληροφορίες.
Εδώ είναι ένα ενδιαφέρον κόλπο για την αντιμετώπιση των τηλεφώνων? γυρίστε τις αναλύσεις της επιφάνειας εργασίας στο πλάι τους. Σίγουρα, υπάρχουν ασυνήθιστα ακραία σημεία, αλλά τα περισσότερα τρέχοντα τηλέφωνα ακολουθούν αυτό το μοτίβο.
- 720x1280 κοινό σε παλαιότερες συσκευές - Για αρκετά χρόνια, το 720p που ενεργοποιήθηκε ήταν το πιο κοινό πρότυπο για μια φορητή συσκευή. Σε αυτήν την περίπτωση, δεν χρειάζεται να ανησυχείτε για τη λειτουργία τοπίου, καθώς είναι ίδια με την επιφάνεια εργασίας 720p. Απλώς καλύψτε την ανάλυση πορτρέτου με πλάτος 720 pixel.
- 1080x1920 το μεσαίο έδαφος - Το 1080p είναι το πρότυπο για πολύ καιρό. Εξακολουθεί να είναι πολύ κοινό σε συσκευές μεσαίου εύρους. Εάν πρόκειται να υποστηρίξετε μόνο μία ανάλυση για κινητά, αυτό είναι.
- 1440x2560 τρέχον άκρο - Οι κινητές συσκευές συνεχίζουν να μεγαλώνουν και οι οθόνες συνεχίζουν να αυξάνονται και να αναλύονται υψηλότερες. Το 1440p είναι ένα ενδιαφέρον πρότυπο επειδή υπάρχει μια ποικιλία από πλάτη οθόνης - μήκη σε αυτήν την περίπτωση - που εμπίπτουν σε αυτό το εύρος. Σε επιτραπέζιους και φορητούς υπολογιστές, το πιο συνηθισμένο είναι 1440x2560. Αυτό δίνει στην οθόνη τον κοινό λόγο διαστάσεων 16: 9. Σε κινητά, έχει σημασία λίγο λιγότερο από τους επιτραπέζιους υπολογιστές, επειδή το μήκος της συσκευής δεν επηρεάζει πολύ τα σχέδιά σας.
Προτού υποστηρίξετε με ευχαρίστηση μόνο τρεις αναλύσεις για κινητά, θα πρέπει επίσης να συνειδητοποιήσετε ότι ορισμένα άτομα χρησιμοποιούν γελοία παλιά τηλέφωνα με μικροσκοπικές οθόνες. Θα πρέπει πάντα να δημιουργήσετε μια ελάχιστη ανάλυση κάτω από το βράχο για να διασφαλίσετε ότι ο ιστότοπός σας φαίνεται καλός ακόμη και σε κάποιον που χρησιμοποιεί τηλέφωνο από αρκετά χρόνια πίσω.
Απλές συμβουλές που πρέπει να θυμάστε
Είναι εύκολο να πάρετε πολλά γεγονότα σχετικά με τις αναλύσεις οθόνης, την απορροή και να αρχίσετε να κοροϊδεύετε τα σχέδια, και αυτό ακριβώς συμβαίνει όταν αντιμετωπίζετε προβλήματα. Υπάρχουν μερικές βασικές ιδέες που πρέπει να θυμάστε κάθε φορά που σχεδιάζετε έναν ιστότοπο και ισχύουν στις περισσότερες, αν όχι όλες, καταστάσεις.
- Ο ανταποκρινόμενος σχεδιασμός είναι ρευστός - Μπορεί να αισθανθείτε την τάση να δημιουργήσετε μια τεράστια σειρά σημείων διακοπής στο CSS σας για να λάβετε υπόψη κάθε πιθανό μέγεθος και κατάσταση οθόνης. Αυτός είναι ένας πολύ καλός τρόπος για να τρελαθείτε. Ο ανταποκρινόμενος σχεδιασμός ιστοσελίδων προορίζεται να είναι αρκετά ευέλικτος για να καλύψει τα κενά και τις παρατυπίες. Εάν διαπιστώσετε ότι ορίζετε πάρα πολλούς στατικούς αριθμούς, είτε πρόκειται για ερωτήματα πολυμέσων είτε για τα ίδια τα στοιχεία, πιθανότατα οδηγείτε σε λάθος διαδρομή.
- Οι άνθρωποι δεν μεγιστοποιούν πάντα το πρόγραμμα περιήγησής τους - Αυτό το είδος συμβαδίζει με το προηγούμενο σημείο. Μπορείς σχεδιασμός για μεγέθη οθόνης, αλλά όταν κάποιος δεν μεγιστοποιεί το παράθυρο του προγράμματος περιήγησής του, όλα αυτά ανεβαίνουν στον καπνό. Διατηρώντας τα ρευστά στο σχεδιασμό σας, μπορείτε να αποφύγετε προβλήματα με διάφορα μεγέθη παραθύρου του προγράμματος περιήγησης.
- Δοκιμάστε τα πάντα - Προσπαθήστε να σπάσετε τον ιστότοπό σας. Αυτός είναι ο μόνος τρόπος για να βρείτε όλα τα σφάλματα και ασυνέπειες που θα καταστρέψουν την εμπειρία ενός επισκέπτη. Το Chrome διαθέτει ενσωματωμένα εργαλεία για τη δοκιμή αναλύσεων συσκευών με μια πλήρη λίστα δημοφιλών συσκευών για εργασία. Έχετε πάντα την επιλογή να σύρετε το παράθυρο του προγράμματος περιήγησής σας σε διαφορετικά μεγέθη μόνοι σας για να δείτε τόσο τον τρόπο εμφάνισης του ιστότοπου σε διάφορα μεγέθη όσο και τον τρόπο προσαρμογής και διακοπής.
- Μην περιμένετε από τους χρήστες σας να έχουν τα πιο πρόσφατα και καλύτερα - Αυτό πηγαίνει στο προηγούμενο σημείο σχετικά με παλαιότερα τηλέφωνα και μικρές αναλύσεις. Δεν μπορείτε να περιμένετε από άτομα να έχουν νέες συσκευές. Αυτό ισχύει τόσο για ανάλυση οθόνης όσο και για ισχύ επεξεργασίας. Φόρτωση ιστότοπου με πάρα πολλά γραφικά και πάρα πολλά JavaScript είναι ένας καλός τρόπος για να αφήσετε άτομα με αργή συσκευή να φύγουν και να μην επιστρέψουν ποτέ.