7 υπέροχα εργαλεία για τη δοκιμή των ανταποκριτικών ιστοσελίδων σας

Κάθε σύγχρονος σχεδιαστής ιστοσελίδων πρέπει να γνωρίζει τις αρχές της ανταποκριτικής σχεδίασης Ιστού - πώς να κάνει τους ιστότοπούς σας να αποδίδουν τέλεια σε οποιαδήποτε συσκευή ή μέγεθος οθόνης εμφανίζεται. (Εάν χρειάζεστε επανάληψη, ρίξτε μια ματιά στο δικό μας επαγγελματικός οδηγός για ανταποκρίσιμο σχεδιασμό ιστοσελίδων ).

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

Ωστόσο, οι περισσότεροι από εμάς δεν διαθέτουμε τον προϋπολογισμό για να εκμεταλλευτούμε τις εκατοντάδες φυσικές συσκευές που χρειάζεστε για να πραγματοποιήσετε μια πραγματική δοκιμή. Αλλά μην φοβάστε! Αυτά τα εργαλεία παρέχουν ένα μισό σπίτι, επιτρέποντάς σας να δοκιμάσετε τα ανταποκριτικά σας σχέδια σε ένα εικονικό περιβάλλον.



01 Αποκριτής

Δείτε πώς φαίνεται ο ιστότοπός σας σε διαφορετικά σημεία προβολής με το Responsinator

Δείτε πώς φαίνεται ο ιστότοπός σας σε διαφορετικά σημεία προβολής με το Responsinator

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

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

πώς να φτιάξετε ένα κολάζ στο picmonkey

02. Πεταλούδα

Ελέγξτε πώς εμφανίζεται ο ιστότοπός σας σε διαφορετικές συσκευές, συμπεριλαμβανομένων των τηλεοράσεων, με το Screenfly

Ελέγξτε πώς εμφανίζεται ο ιστότοπός σας σε διαφορετικές συσκευές, συμπεριλαμβανομένων των τηλεοράσεων, με το Screenfly

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

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

03. Λειτουργία συσκευής Google DevTools

Η λειτουργία συσκευής DevTools εξομοιώνει διαφορετικές συσκευές στο Chrome

Η λειτουργία συσκευής DevTools εξομοιώνει διαφορετικές συσκευές στο Chrome

Η λειτουργία συσκευής DevTools προσφέρει έναν εύκολο τρόπο στους προγραμματιστές να προσομοιώνουν κινητές συσκευές στο πρόγραμμα περιήγησης Chrome. Χρησιμοποιήστε τον για να μάθετε πώς εμφανίζεται ο ιστότοπός σας σε διαφορετικά μεγέθη οθόνης και αναλύσεις, συμπεριλαμβανομένων των οθονών αμφιβληστροειδούς.

Μπορείτε ακόμη και να προσομοιώσετε εισόδους συσκευής για αφής, γεωγραφική θέση και προσανατολισμό συσκευής μέσα στον εξομοιωτή.

ποιο από τα παρακάτω είναι ένα παράδειγμα ψυχαγωγίας επώνυμων

04. Google Resizer

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

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

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

Το Google Resizer σάς επιτρέπει να εισαγάγετε μια προσαρμοσμένη διεύθυνση URL και να προβάλετε έναν ιστότοπο σε σημεία αλλαγής σχεδιασμού υλικών για επιτραπέζιους υπολογιστές και κινητά. Εάν θέλετε να δείτε πρώτα μια επίδειξη, κάντε κλικ στη γραμμή διευθύνσεων και επιλέξτε ' Πέστο ' ή ' Ναός Από το αναπτυσσόμενο μενού.

05. Ghostlab

Η εστίαση του Ghostlab είναι στις ταυτόχρονες δοκιμές σε πολλές συσκευές και προγράμματα περιήγησης

Η εστίαση του Ghostlab είναι στις ταυτόχρονες δοκιμές σε πολλές συσκευές και προγράμματα περιήγησης

Μια εφαρμογή δοκιμής ιστότοπου επί πληρωμή, το Ghostlab σάς επιτρέπει να δοκιμάζετε τον ιστότοπό σας σε πολλά προγράμματα περιήγησης και κινητές συσκευές ταυτόχρονα. Ξεκινήστε τη δοκιμή σε ένα πρόγραμμα περιήγησης ή σε μια συσκευή και όλα τα άλλα θα αντικατοπτρίζουν τις ενέργειές σας, είτε κάνετε κλικ σε συνδέσμους, επιλέγετε κουμπιά, συμπληρώνοντας φόρμες είτε φορτώνετε ξανά τη σελίδα.

προμήθειες τέχνης που πρέπει να έχει κάθε καλλιτέχνης

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

06. Στοίβα προγράμματος περιήγησης

Το Browser Stack είναι ένα εργαλείο δοκιμών επί πληρωμή που απευθύνεται σε επιχειρήσεις

Το Browser Stack είναι ένα εργαλείο δοκιμών επί πληρωμή που απευθύνεται σε επιχειρήσεις

Το Browser Stack είναι ένα από τα πιο προηγμένα εργαλεία δοκιμών με πλήρη χαρακτηριστικά. Η εφαρμογή επί πληρωμή προσφέρει πρόσβαση σε περισσότερα από 1.000 προγράμματα περιήγησης για κινητά και επιτραπέζιους υπολογιστές για δοκιμαστικούς σκοπούς, μια λίστα που ενημερώνεται συνεχώς, με βάση τις τάσεις της αγοράς και τα στατιστικά χρήσης που βασίζονται στους 36.000 πελάτες του Browser Stack.

Με τους χρήστες, συμπεριλαμβανομένων των Twitter, Microsoft, AirBnB και Mastercard, προφανώς κάνει κάτι σωστό.

07. Δοκιμή CrossBrowser

Το CrossBrowserTesting προσφέρει μια τεράστια γκάμα συσκευών πραγματικού κόσμου και λειτουργιών δοκιμών

λειτουργεί το μολύβι μήλου με το ipad air 2
Το CrossBrowserTesting προσφέρει μια τεράστια γκάμα συσκευών πραγματικού κόσμου και λειτουργιών δοκιμών

Ο μεγαλύτερος αντίπαλος του Browser Stack στον χώρο δοκιμών είναι το CrossBrowserTesting, το οποίο προσφέρει περισσότερα από 1.500 προγράμματα περιήγησης και συσκευές για να δοκιμάσουν τον αποκριτικό ιστότοπό σας.

Η πλατφόρμα all-in-one σάς επιτρέπει να εκτελείτε παράλληλες αυτοματοποιημένες δοκιμές, να συγκρίνετε οπτικά στιγμιότυπα οθόνης, να σύρετε και να αλληλεπιδράσετε με τον ιστότοπό σας σε πραγματικές συσκευές και να εντοπίσετε τον κώδικά σας από απόσταση καθώς πηγαίνετε.