7 δωρεάν εργαλεία για τη δοκιμή ευαίσθητων διατάξεων
Κάθε δικτυακός τόπος θα πρέπει να σχεδιάζεται με απόκριση. Για να σας κρατήσουμε στο σωστό δρόμο, δοκιμάζοντας νωρίς και συχνά, με οποιοδήποτε από αυτά τα εργαλεία απόκρισης, θα διασφαλίσετε ότι το σχέδιό σας φαίνεται σωστά σε όλα τα προγράμματα περιήγησης και σε όλα τα μεγέθη προβολής.
Κάθε σύγχρονη ιστοσελίδα χρειάζεται ένα ανταποκρινόμενο σχέδιο . Αυτό απαιτεί περισσότερη προσπάθεια, αλλά το τελικό αποτέλεσμα αξίζει τον κόπο.
Συνιστώ πραγματικά να δοκιμάσετε τις ιδέες σας με εργαλεία σχεδιασμού που ανταποκρίνονται στις ανάγκες σας, για να δείτε πώς ο ιστότοπός σας εξετάζει κάθε στάδιο. Μπορείτε να αναζητήσετε ζητήματα χρηστικότητας σε διαφορετικά μεγέθη οθόνης, όλα από ένα εύχρηστο εργαλείο.
Και αυτά τα δωρεάν εργαλεία είναι τα κορυφαία μου επιλογές για την απόκριση των δοκιμών δεδομένου ότι όλα είναι εξαιρετικά εύκολο στη χρήση. Το καλύτερο από όλα αυτά υποστηρίζει πολλά μεγέθη συσκευών, ώστε να μπορείτε να έχετε μια καλή αίσθηση για το πώς θα πρέπει να φαίνεται η διάταξή σας από smartphones σε επιτραπέζιους υπολογιστές.
1. XRespond
ο Εφαρμογή XRespond αποκαλεί το ίδιο "εργαστήριο εικονικών συσκευών" και θα έλεγα ότι αυτό είναι πολύ ενδιαφέρον.
Με αυτόν τον ιστότοπο μπορείτε να κάνετε προεπισκόπηση του τρόπου εμφάνισης οποιουδήποτε ιστότοπου σε μια ποικιλία συσκευών. Ο ιστότοπος λειτουργεί σε μεγάλο οριζόντιο στυλ, όπου πρέπει να μετακινηθείτε προς τα πλάγια για να δείτε όλες τις μορφές οθόνης.
Η ετικέτα πάνω από κάθε οθόνη σας δείχνει το ακριβές μέγεθος και σε ποια συσκευή ταιριάζει. Επιπλέον από το αναπτυσσόμενο μενού υπάρχει μια ευρεία επιλογή smartphones, tablet και φορητούς υπολογιστές για τη δοκιμή συγκεκριμένων συσκευών.
Αυτό το αναπτυσσόμενο μενού υποστηρίζει ακόμη και μια προσαρμοσμένη ρύθμιση πλάτους / ύψους, εάν θέλετε να δείτε πώς εμφανίζεται ο ιστότοπός σας σε συγκεκριμένες οθόνες. Ένα εξαιρετικό εργαλείο δοκιμών για ευαίσθητο σχεδιασμό και υποστηρίζει πολλή ποικιλία σε στυλ συσκευών.
2. Responsinator
Μια παρόμοια εφαρμογή που μπορείτε επίσης να απολαύσετε είναι Υπεύθυνος .
Αντί να χρησιμοποιήσετε μια οριζόντια γραμμή κύλισης, αυτός ο ιστότοπος παραθέτει κάθε προεπισκόπηση συσκευής σε κάθετη στήλη. Με αυτόν τον τρόπο μπορείτε να κάνετε κύλιση προς τα κάτω μέσα από κάθε συσκευή και να κάνετε προεπισκόπηση της τοποθεσίας σε κάθε μία.
Οι συσκευές περιλαμβάνουν τα πιο συνηθισμένα iPhones και τις συσκευές Android Nexus, και οι δύο με προεπισκόπηση πορτρέτου και τοπίου. Θα βρείτε επίσης προεπισκοπήσεις συσκευών iPad και σε κατακόρυφο και οριζόντιο προσανατολισμό.
Μια άλλη καλή λειτουργία είναι η εναλλαγή μεταξύ HTTP και HTTPS. Το Responsinator προσφέρει και τους δύο τύπους για προεπισκόπηση ιστότοπων ανάλογα με τη διεύθυνση URL που εισάγετε. Αυτό θα αντιστοιχεί αυτόματα στον ιστότοπο που προβαίνετε σε προεπισκόπηση για την αποφυγή σφαλμάτων SSL.
3. Ευαίσθητος Έλεγχος Σχεδίασης
Πρέπει να ελέγξετε γρήγορα αν ένας ιστότοπος ανταποκρίνεται πραγματικά; Στη συνέχεια, δοκιμάστε να το χρησιμοποιήσετε Έξυπνος Έλεγχος Σχεδίασης ειδικά για προσαρμοσμένα μεγέθη οθόνης.
Μόλις εισαγάγετε μια διεύθυνση URL, έχετε πλήρη έλεγχο στον χώρο δοκιμαστικής απόκρισης. Μπορείτε να αλλάξετε το πλάτος / ύψος που θέλετε, ακόμα και να το χρησιμοποιήσετε για να ταιριάζει σε συγκεκριμένες αναλογίες οθόνης αν χρησιμοποιείτε ένα εργαλείο αναλογίας διαστάσεων .
Στην πλαϊνή μπάρα θα βρείτε έναν τόνο προκαθορισμένων μεγεθών οθόνης για κοινές συσκευές όπως tablet Nexus, Kindles και ακόμη νεότερα τηλέφωνα όπως το Google Pixel.
Ο ιστότοπος υποστηρίζει επίσης μεγάλα μεγέθη οθόνης με οθόνες επιφάνειας εργασίας έως και 24 " . Παραδόξως, αυτά τα μεγάλα μεγέθη λειτουργούν καλά ακόμη και σε μικρές οθόνες επειδή το παράθυρο προεπισκόπησης αλλάζει με βάση την αναλογία και όχι το συνολικό πλάτος των εικονοστοιχείων.
Έτσι, εάν αγωνίζεστε να δοκιμάσετε οθόνες 1920px στη μικρότερη οθόνη MacBook σας, αυτό το εργαλείο αξίζει να κάνετε bookmarking.
4. Google Mobile Test
Η Google είναι γεμάτη από εξαιρετικά εργαλεία για webmasters και τους Φιλική δοκιμή για κινητά είναι ένα τέτοιο παράδειγμα.
Αυτό το εργαλείο δοκιμής δεν είναι πραγματικά προεπισκόπηση και δεν σας βοηθά να εντοπίσετε σφάλματα UI. Αντ 'αυτού, είναι ένα εξειδικευμένο εργαλείο κινητής τηλεφωνίας για τον εντοπισμό ζητημάτων στον ιστότοπό σας σε κινητά.
Μόλις ολοκληρωθεί η δοκιμή, θα περάσετε ή θα αποτύχετε ως φιλικός προς κινητά ιστότοπος. Αυτό είναι λίγο πολύ γενικό για τους σχεδιαστές, αλλά η Google προσφέρει συμβουλές βάσει προβληματικών περιοχών και στοιχείων σελίδας που θα μπορούσαν να χρησιμοποιήσουν βελτίωση.
Αποθηκεύστε αυτό ως αξιόπιστο εργαλείο δοκιμής για κινητά. Δεν είναι μια πλήρης πηγή για την απόκριση των δοκιμών, αλλά είναι ένα εξαιρετικό μέρος για τη συλλογή πληροφοριών και προέρχεται από ίσως την πιο έγκυρη εταιρεία στο διαδίκτυο.
5. Ανταποκριτικό εργαλείο του Matt Kersley
Σχεδιαστής και προγραμματιστής Ματ Κέρσλεϊ κυκλοφόρησε το δικό του δωρεάν εργαλείο δοκιμής για ανταποκρινόμενες διατάξεις. Αυτός είναι πολύ πιο απλός από τους άλλους και δεν έχει πολλά προπύργια.
Αντ 'αυτού, πρόκειται για μια απλή προεπισκόπηση προεπισκόπησης τοποθεσίας με 5 σταθερά πλάτη: 240px, 320px, 480px, 768px, 1024px.
Οι πίνακες προεπισκόπησης παρουσιάζουν γραμμές κύλισης για να μπορείτε να μετακινείτε εύκολα το περιεχόμενο. Ωστόσο, δεν μπορείτε να κάνετε κλικ σε οποιονδήποτε σύνδεσμο ή να περιηγηθείτε σε άλλες σελίδες μέσα στα πλαίσια, επομένως αυτό είναι καλύτερο για τη δοκιμή μοναδικών σελίδων.
Αλλά για ένα απλό εργαλείο που κάνει τη δουλειά αυτό το έργο είναι εξαιρετικό και είναι ένα από τα λίγα εργαλεία δοκιμών που προσφέρει ένα πλάτος 240px από προεπιλογή.
6. Είμαι υπεύθυνος;
Πιθανότατα δεν θα χρειαστείτε αυτό το εργαλείο αν ψάχνετε για τέλεια ακρίβεια pixel.
Αντ 'αυτού, το Είμαι Ανταπόκριτος; ο ιστότοπος λειτουργεί καλύτερα για γρήγορους ελέγχους και προεπισκοπήσεις σε μερικούς κοινούς τύπους συσκευών.
Απλά εισάγετε μια διεύθυνση URL του ιστότοπου και θα φορτωθεί σε τέσσερις πίνακες προεπισκόπησης συσκευών: ένα smartphone, tablet, φορητό υπολογιστή και επιφάνεια εργασίας. Αυτά δεν είναι σε κλίμακα, έτσι ώστε να βλέπετε μόνο τον ιστότοπο ως αναλογία.
Αλλά αυτό είναι πολύ cool για να πάρει screenshots του site σας για να επιδείξει πώς φαίνεται σε διάφορες συσκευές. Η απόδοση είναι ακριβής στην κλίμακα και εξαρτάται από το πρόγραμμα περιήγησής σας για σωστή απόδοση.
Συν το εργαλείο αυτό σας επιτρέπει να εκτελέσετε διευθύνσεις localhost έτσι ώστε να μπορείτε να ελέγξετε τα έργα που είστε οικοδόμηση τοπικά στον υπολογιστή σου.
7. Δοκιμή ευαισθησίας Designmodo
Ένα άλλο εργαλείο που μου αρέσει είναι το Ανταπόκριση Tester Design Web δημιουργήθηκε από το Designmodo. Αυτό το δωρεάν εργαλείο σας δίνει τη δυνατότητα να κάνετε προεπισκόπηση ενός ιστότοπου στο πρόγραμμα περιήγησης που βασίζεται σε συγκεκριμένα πλάτη.
Αλλά η μία δροσερή προσθήκη σε αυτό το εργαλείο είναι η ρύθμιση σελίδας με βάση το δίκτυο. Μπορείτε να ελέγξετε τη σελίδα σας για pixel σημεία και ακόμη και μελέτη το πλέγμα της σελίδας χρησιμοποιώντας αυτό το webapp.
Εκτός από τα προκαθορισμένα πλάτη συσκευών, μπορείτε επίσης να σύρετε το παράθυρο προεπισκόπησης για να ταιριάξετε τα πλάτη οθόνης που δοκιμάζετε. Έχει εισόδους για το πλάτος / ύψος αν χρειαστεί να εισαγάγετε τα μεγέθη και χειροκίνητα.
Αλλά κάθε εικονίδιο συσκευής στην πάνω δεξιά γωνία σάς επιτρέπει να επιλέξετε από δεκάδες κοινά μεγέθη οθονών, καθιστώντας το εργαλείο τέλειο για τον έλεγχο οποιασδήποτε συσκευής που μπορείτε να φανταστείτε.
