Περιεχόμενο
- Εργαλεία για να ξεκινήσετε
- 01. Φύλλα σκίτσων σχεδιασμού ιστοσελίδων
- 02. Σχέδιο Sketching Responsive Design
- 03. Αποκριτικά πλαίσια καλωδίων
- 04. Μοτίβα διάταξης πολλαπλών συσκευών
- 05. Πλακάκια στυλ
- Εργαλεία για εύκαμπτο / ρευστό πλέγμα
- 06. Σύστημα Golden Grid
- 07. Foldy960
- 08. SimpleGrid
- 09. Το πλέγμα CSS 1140 εικονοστοιχείων
- 10. Σύστημα πλέγματος στήλης CSS
- 11. Σημασιολογικό σύστημα δικτύου
- 12. SUSY
- 13. Gridpak
- 14. Πλέγμα
- 15. Ένα καλύτερο πλέγμα Photoshop για RWD
- 16. Πλέγματα ρευστών
- 17. Αποκριτική αριθμομηχανή
- Εργαλεία για αποκριτικές εικόνες (και κείμενο)
- 18. Αποκριτικές εικόνες
- 19. Προσαρμοστικές εικόνες
- 20. Sencha.io Src (πρώην Tinysrc)
- 21. FitText
- 22. slabText
- Εργαλεία για ερωτήματα πολυμέσων
- 23. Απάντηση.js
- 24. CSS3-Mediaqueries.js
- 25. Adapt.js
- 26. Κατηγορία
- Αποκριτικός σχεδιασμός (και κινητός) λέβητας
- 27. 320 και άνω
- 28. Χωρίς πλέγμα
- 29. Σκελετός
- 30. Bootstrap
- Plugins, shims και polyfills
- 31. Αποκριτική προσθήκη
- 32. Ανατροπή
- 33. Πίνακας μέσων
- "Δοκιμή, δοκιμή: 1-2-3 ..."
- 34. resizeMyBrowser
- 35. responsivepx
- 36. Έλεγχος απόκρισης σχεδιασμού
- 37. Ο υπεύθυνος
- 38. Ανταπόκριση
- 39. Screenqueri.es
- 40. Άπτος
- 41. Σελιδοδείκτης Responsive Design
- 42. Σελιδοδείκτης Test Responsive Design
- 43. Screenfly
- 44. Δείκτης ερωτήματος μέσων
- 45. Σιμ
- 46. Οδήγηση σε
- 47. Adobe Shadow
- 48. Opera Mobile Emulator + Remote Debug
- Περαιτέρω έμπνευση
- 49. MediaQueri.es
- 50. @ RWD
- Σας άρεσε αυτό; Διαβάστε αυτά!
Όπως παρουσιάστηκε / επινοήθηκε από τον Ethan Marcotte τόσο στο άρθρο του "Responsive Web Design" όσο και στο βιβλίο με τις καλύτερες πωλήσεις, χρειάζεται τρία στοιχεία για να κάνει έναν ιστότοπο ανταποκρινόμενο:
- Ένα εύκαμπτο / ρευστό πλέγμα
- Αποκριτικές εικόνες
- Ερωτήματα πολυμέσων
Υπάρχουν πολλά άλλα σπουδαία άρθρα που καλύπτουν κίνητρα, έννοιες και τεχνικές σχετικά με την απόκριση του σχεδιασμού ιστοσελίδων, επομένως θα διατηρήσουμε την εστίαση αυτού του άρθρου σε μερικά κορυφαία εργαλεία που θα σας βοηθήσουν να γίνετε υπεύθυνα.
Εργαλεία για να ξεκινήσετε
Πριν ξεκινήσετε με την κατασκευή του ιστότοπού σας, είναι καλύτερο να σκιαγραφήσετε πώς τα στοιχεία στη σελίδα θα προσαρμοστούν ώστε να ταιριάζουν στα διαφορετικά μεγέθη του προγράμματος περιήγησης των διαφόρων συσκευών στις οποίες θα προβληθούν και να αποφύγετε την αποσύνδεση που συχνά προέρχεται από το να σκεφτείτε κυρίως ο σχεδιασμός της επιφάνειας εργασίας και οι υπόλοιπες αποκριτικές επαναλήψεις ως μεταγενέστερη σκέψη (δείτε ειδικά το σχόλιο της Stephanie (Sullivan) Rewis).
01. Φύλλα σκίτσων σχεδιασμού ιστοσελίδων
Αυτό το σύνολο απόκεντρων φύλλων σκίτσων, από τον Jeremy P Alford, είναι ένα εξαιρετικό σημείο εκκίνησης για να αρχίσετε να χαρτογραφείτε πώς οι ενότητες σελίδων θα αλλάξουν σε διαφορετικές αναλύσεις.
02. Σχέδιο Sketching Responsive Design
Εάν προτιμάτε να διατηρήσετε όλα τα σκίτσα σας σε ένα μέρος, τότε ίσως θελήσετε να εξετάσετε αυτό το δεσμευμένο βιβλίο με 50 φύλλα απόκρισης σκίτσων από την εταιρεία App Sketchbook.
03. Αποκριτικά πλαίσια καλωδίων
Μία από τις δυσκολίες της δημιουργίας ιστοσελίδων που ανταποκρίνονται είναι η χρήση καλωδίων για να δείξει πώς θα λειτουργεί ο σχεδιασμός απόκρισης. Ο James Mellers της Adobe έχει συνθέσει αυτό το πειραματικό εργαλείο για να δείξει πώς μπορεί να λειτουργήσει το responsframing wire σύνθετων διατάξεων.
04. Μοτίβα διάταξης πολλαπλών συσκευών
Όταν σχεδιάζετε μια αποκριτική σχεδίαση, είναι χρήσιμο να δείτε πώς το έχουν προσεγγίσει άλλοι άνθρωποι μπροστά σας, οπότε τα μοτίβα διάταξης πολλαπλών συσκευών του Luke Wroblewski, τα οποία παραθέτουν δημοφιλή μοτίβα με συνδέσμους προς παραδείγματα, είναι ένα εξαιρετικό μέρος για να ξεκινήσετε.
05. Πλακάκια στυλ
Τα πλακάκια Style της Samanatha Warren προτείνουν μια νέα τεχνική σχεδιασμού στην εποχή απόκρισης. Αντί για κοροϊδία σχεδιασμού σταθερού πλάτους, αυτά είναι σαν δείγματα ή πίνακες διάθεσης που δείχνουν τη γενική προσέγγιση σχεδιασμού χωρίς να περνούν λεπτομερείς λεπτομέρειες.
Εργαλεία για εύκαμπτο / ρευστό πλέγμα
Όπως αναφέρθηκε προηγουμένως, το πρώτο συστατικό που απαιτείται για την απόκριση του σχεδιασμού είναι ένα εύκαμπτο / ρευστό πλέγμα.Τα παρακάτω είναι ήδη προκατασκευασμένα: απλά πρέπει να τα κατεβάσετε και θα μεταβείτε γρήγορα σε έναν ιστότοπο που να ανταποκρίνεται καλύτερα.
06. Σύστημα Golden Grid
Ο Joni Korpi, ο οποίος ανέπτυξε επίσης το Less Framework, κυκλοφόρησε πρόσφατα αυτήν τη νέα έκδοση ενός αξιόπιστου συστήματος πλέγματος για απόκριση σχεδίασης. Θεωρείται "αναδιπλούμενο" καθώς προσαρμόζεται εύκολα από 16, οκτώ, σε τέσσερις στήλες, το σύστημα Golden Grid διαθέτει επίσης μια μικρή επικάλυψη προγράμματος περιήγησης που εκθέτει το πλέγμα στις σελίδες σας για δοκιμή.
07. Foldy960
Οι ταλαντούχοι ιδιοκτήτες της Paravel, Inc. κυκλοφόρησαν το τροποποιημένο πλέγμα 960.gs που χρησιμοποιούν ως βάση για τα έργα που ανταποκρίνονται.
08. SimpleGrid
Το SimpleGrid, από τον Conor Muirhead, δημιουργήθηκε με ενσωματωμένη απόκριση, οπότε είναι εύκολο να ξεκινήσετε με το έργο σας που ανταποκρίνεται στον ιστότοπο.
09. Το πλέγμα CSS 1140 εικονοστοιχείων
Ένα άλλο εξαιρετικό σύστημα απόκρισης πλέγματος είναι το 1140px CSS Grid από τον σχεδιαστή της Μελβούρνης Andy Taylor, το οποίο πηγαίνει από μια ευρεία ανάλυση επιτραπέζιου υπολογιστή σε κινητό.
10. Σύστημα πλέγματος στήλης CSS
Το σύστημα πλέγματος Columnal, που δημιουργήθηκε από τον Pulp + Pixels γνωστό ως δημιουργικό διευθυντή Nick Gorsline, βασίζεται στο σύστημα πλέγματος 1140 εικονοστοιχείων, αλλά με μερικά επιπλέον καλούδια, όπως ένα κιτ σχεδιασμού με φύλλα σκίτσων και πρότυπα wireframing, καθώς και στυλ εντοπισμού σφαλμάτων CSS.
11. Σημασιολογικό σύστημα δικτύου
Οι προεπεξεργασμένες επεκτάσεις CSS όπως το Sass και το LESS γίνονται όλο και πιο δημοφιλείς και το σύστημα πλέγματος Semantic Tyler Tate τα χρησιμοποιεί για μέγιστο αποτέλεσμα σε αυτό το σύστημα πλέγματος το οποίο ισχυρίζεται ότι δεν χρησιμοποιεί περιττές τάξεις ή στοιχεία. Διαβάστε περισσότερα στο coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/.
12. SUSY
Όπως και το Σημασιολογικό σύστημα πλέγματος, το Oddbird's SUSY δημιούργησε ένα σύστημα πλέγματος που δεν χρησιμοποιεί επιπλέον σήμανση ή ειδικές τάξεις, αλλά το SUSY απευθύνεται μόνο σε χρήστες του Sass (και την επέκτασή του, Compass).
13. Gridpak
Το Gridpak, από την Erskine Design, είναι μια από τις νεότερες γεννήτριες απόκρισης δικτύου. Σας επιτρέπει να ορίσετε τις στήλες και τις υδρορροές σας σε διάφορα σημεία διακοπής, στη συνέχεια εξάγει αρχεία CSS, JavaScript και PNG, ώστε ολόκληρη η ομάδα σας να εργάζεται από το ίδιο σημείο εκκίνησης.
14. Πλέγμα
Υπάρχει ακόμα ένας μικρός αέρας μυστηρίου για το Gridset καθώς, τη στιγμή που το γράφω, δεν έχει κυκλοφορήσει ακόμη. Όμως, το εργαλείο του Mark Boulton Design υπόσχεται ξεχωριστά, μη συνταγογραφημένα, συστήματα πλέγματος και έναν τρόπο αποθήκευσης και διαχείρισης των δικτύων σας στο διαδίκτυο.
15. Ένα καλύτερο πλέγμα Photoshop για RWD
Η Elliot Jay Stocks προτείνει να εγκαταλείψει το παλιό πρότυπο πλέγματος 960 εικονοστοιχείων και να δουλέψει από μια βάση 1000 εικονοστοιχείων, καθιστώντας ευκολότερη την εργασία με όλους τους υπολογισμούς ποσοστού. Εάν συμφωνείτε, έχει δημιουργήσει ένα PSD για να ξεκινήσετε να εργάζεστε.
16. Πλέγματα ρευστών
Εάν το σχέδιό σας είναι εξαιρετικά εξειδικευμένο και πρέπει να δημιουργήσετε το δικό σας προσαρμοσμένο πλέγμα, μπορείτε να το κάνετε με την. Λαμπρή υπολογιστική πλέγμα υποψηφίων του νέου Robert.
17. Αποκριτική αριθμομηχανή
Ένα άλλο αριθμητικό στοιχείο pixel to calculator, αλλά αυτό από τον Stu Robson προχωρά ένα βήμα πιο πέρα από τα άλλα, δημιουργώντας όλους τους κανόνες CSS για εσάς, που σημαίνει ότι μπορείτε απλά να τους αντιγράψετε και να τους επικολλήσετε στα φύλλα στυλ σας.
Εργαλεία για αποκριτικές εικόνες (και κείμενο)
Ένα άλλο κρίσιμο στοιχείο του ανταποκριτικού σχεδιασμού ιστοσελίδων είναι οι ρευστές εικόνες. Ενώ η τεχνική για την επίτευξη ρευστών εικόνων είναι απλή, η βελτιστοποίηση της απόδοσης και της φόρτωσης σελίδας για διαφορετικές συσκευές φαίνεται να είναι μια από τις μεγαλύτερες προκλήσεις στον ανταποκρινόμενο σχεδιασμό ιστοσελίδων. Ακολουθούν ορισμένοι πόροι για την προσέγγιση του ζητήματος.
18. Αποκριτικές εικόνες
Η Filament Group επινόησε έναν τρόπο αποστολής εικόνας κατάλληλου μεγέθους βάσει ανάλυσης οθόνης. Αυτό το πείραμα με εικόνες για κινητές συσκευές που κλιμακώνονται με υπευθυνότητα και υπευθυνότητα απαιτούν αναφορά δύο εικόνων διαφορετικών μεγεθών.
19. Προσαρμοστικές εικόνες
Ο Matt Wilcox εμπνεύστηκε από το εργαλείο Responsive Images για να δημιουργήσει Adaptive Images, το οποίο χρησιμοποιεί PHP και λίγο JavaScript για την προβολή κατάλληλων εικόνων στη συσκευή του χρήστη χωρίς να απαιτείται επιπλέον σήμανση.
20. Sencha.io Src (πρώην Tinysrc)
Η Sencha παρέχει μια υπηρεσία cloud που στέλνει βελτιστοποιημένες εκδόσεις φιλοξενούμενων εικόνων για το μέγεθος της συσκευής που τις ζητά. Για να μάθετε πώς να το χρησιμοποιήσετε, ανατρέξτε στη διεύθυνση docs.sencha.com/io/src/.
21. FitText
Ακόμα ένα άλλο στολίδι από την Paravel, Inc είναι το FitText.js, ένα jQuery plug-in που κάνει τον επικεφαλής τύπο ιστού να ανταποκρίνεται στο σχεδιασμό και τη συσκευή. Για λεπτομέρειες δείτε trentwalton.com/2011/05/10/fit-to-scale/.
22. slabText
Εμπνευσμένο από το FitText και τον αλγόριθμο SlabType, το slabText του Brian McAllister είναι ένα πρόσθετο jQuery που δημιουργεί έντονα μπλοκ κειμένου που αλλάζουν απόκριση σε μέγεθος, διατηρώντας παράλληλα ένα καθορισμένο πλάτος.
Εργαλεία για ερωτήματα πολυμέσων
Τώρα που έχετε μια ιδέα για το πώς θα αλλάξει η διάταξή σας για διαφορετικές συσκευές, ένα πλέγμα ρευστού και εικόνες ρευστού, χρειάζεστε ερωτήματα πολυμέσων για να μετατοπίσετε τα στοιχεία της σελίδας σε κατάσταση απόκρισης.
23. Απάντηση.js
Το ένα πρόβλημα με την απόκριση σχεδίασης είναι ότι τα προγράμματα περιήγησης που δεν μπορούν να διαβάσουν ερωτήματα πολυμέσων παραμένουν πίσω. Αυτό μπορεί να μην αποτελεί πρόβλημα με το κοινό-στόχο σας, αλλά εξακολουθεί να είναι μια καλή πρακτική να εξυπηρετείτε χρήστες σε παλαιότερα προγράμματα περιήγησης. Το Respond.js, από τον Scott Jehl, υποστηρίζει ιδιότητες ελάχιστου πλάτους και μέγιστου πλάτους.
Για περισσότερα δείτε filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/.
24. CSS3-Mediaqueries.js
Το CSS3-Mediaqueries.js, από τον Wouter van der Graaf, επιτρέπει σε παλαιότερες εκδόσεις του IE και άλλων προγραμμάτων περιήγησης να ελέγχουν και να εφαρμόζουν αποτελεσματικά όλα τα είδη ερωτήσεων πολυμέσων.
25. Adapt.js
Ο Nathan Smith, συγγραφέας του αρχικού συστήματος πλέγματος 960.gs, έχει γράψει το Adapt.js, ένα σενάριο που ανιχνεύει τις διαστάσεις του προγράμματος περιήγησης και εξυπηρετεί μόνο τα απαιτούμενα φύλλα στυλ - όπως ερωτήματα πολυμέσων αλλά χωρίς ερωτήματα πολυμέσων, που σημαίνει ότι λειτουργεί και σε παλαιότερα προγράμματα περιήγησης.
26. Κατηγορία
Αυτή είναι η ανίχνευση συσκευών που προσεγγίζεται από την αντίθετη γωνία - το σενάριο Κατηγορίας του Brett Jankord υποθέτει ότι οι συσκευές είναι κινητές, εκτός αν εντοπιστούν διαφορετικά ως επιτραπέζιοι ή tablet, επιτρέποντάς σας να προβάλλετε πόρους σε προγράμματα περιήγησης με συμπαθητικό τρόπο.
Αποκριτικός σχεδιασμός (και κινητός) λέβητας
Στο πνεύμα μιας αποτελεσματικής ροής εργασιών, τα boilerplates διευκολύνουν τη διαδικασία μεταφοράς σχεδίων στο πρόγραμμα περιήγησης νωρίτερα από αργότερα. Τα περισσότερα από αυτά τα boilerplates συνδυάζουν τα καλύτερα από τα εργαλεία που αναφέρονται παραπάνω σε ένα τακτοποιημένο πακέτο: ένα ευέλικτο πλέγμα ενισχυμένο με σενάρια, ενώ εφαρμόζει τις φορητές φιλοσοφίες περιεχομένου για πρώτη φορά.
27. 320 και άνω
Το Andy Clarke's 320 and Up είναι ένα boilerplate για κινητά που συνδυάζεται με πολλά άλλα σύγχρονα εργαλεία σχεδιασμού ιστοσελίδων, όπως το LESS και το Bootstrap (βλ. # 30). Είναι ένας ελαφρύς και ευέλικτος τρόπος για να δημιουργήσετε έναν ιστότοπο γρήγορα και να λειτουργεί. Δείτε επίσης τη συνέντευξή μας με τον Andy, στην οποία μας λέει περισσότερα για τη νέα έκδοση.
28. Χωρίς πλέγμα
Το Gridless είναι ένα boilerplate HTML5 και CSS3 που μπορεί να χρησιμεύσει ως βάση για τα ανταποκριτικά σας σχέδια, με έμφαση στην τυπογραφία και την ενσωματωμένη συμβατότητα μεταξύ προγραμμάτων περιήγησης.
29. Σκελετός
Σε αντίθεση με τα δύο προηγούμενα boilerplates, του οποίου το σημείο εκκίνησης είναι με τη μικρότερη ανάλυση, το κιτ ανάπτυξης Skeleton, που δημιουργήθηκε από τον Dave Gamache, βασίζεται στο σύστημα πλέγματος 960.gs και κλιμακώνεται στο κινητό. Το Skeleton διαθέτει επίσης ένα εξαιρετικό πλαίσιο στυλ για τους προγραμματιστές για τη δημιουργία στυλ.
30. Bootstrap
Κατασκευασμένο από το Twitter και τώρα ανοιχτού κώδικα, το Bootstrap είναι ένα πλαίσιο και μια σειρά στοιχείων για γρήγορη πρόσβαση σε έναν ιστότοπο στο διαδίκτυο και από την έκδοση δύο όλα τα βασικά μέρη του λειτουργούν με ανταπόκριση.
Plugins, shims και polyfills
Παρόλο που τα σύγχρονα προγράμματα περιήγησης και το λογισμικό τείνουν να είναι έτοιμα για απόκριση, μερικές φορές πρέπει να χρησιμοποιήσουμε επιπλέον εργαλεία για να παρέχουμε μια συνεπή εμπειρία.
31. Αποκριτική προσθήκη
Ο Μάριος Λουλμπίνσκι έχει γράψει μια προσθήκη WordPress που υπόσχεται να μετατρέψει οποιοδήποτε τρέχον θέμα WP σε αποκριτικό. Πώς λειτουργεί αυτό δεν το γνωρίζω ακόμα, καθώς δεν έχει κυκλοφορήσει ως τη στιγμή αυτής της γραφής, αλλά αν ανταποκρίνεται στην υπόσχεσή του, θα πρέπει να είναι πολύ χρήσιμο.
32. Ανατροπή
Ο χειρισμός υπερχείλισης περιεχομένου λειτουργεί καλά σε προγράμματα περιήγησης επιτραπέζιων υπολογιστών, αλλά τα παλαιότερα προγράμματα περιήγησης για κινητά το χειρίζονται ασυνεπή. Το Overthrow polyfill από την εργατική ομάδα Filament προσθέτει συνεπή χαριτωμένη υποβάθμιση σε όλες τις συσκευές, διασφαλίζοντας ότι όλοι οι χρήστες κινητών συσκευών έχουν την καλύτερη δυνατή εμπειρία.
33. Πίνακας μέσων
Το πρόσθετο jQuery του Marco Pegoraro, MediaTable, συνεργάζεται με το Respond.js για να σας βοηθήσει να αντιμετωπίσετε το πρόβλημα του τρόπου εμφάνισης μεγάλων πινάκων δεδομένων σε συσκευές μικρής οθόνης, δημιουργώντας αποκριτικές στήλες και προσθέτοντας εναλλαγή εκπομπής / απόκρυψης όπου είναι κατάλληλο.
"Δοκιμή, δοκιμή: 1-2-3 ..."
Μια άλλη πτυχή της αποκριτικής ροής εργασίας είναι να γνωρίζετε τις συσκευές και τις αναλύσεις-στόχους σας και στη συνέχεια να τις δοκιμάσετε.
34. resizeMyBrowser
Το resizeMyBrowser, από τον προγραμματιστή frontend, Chen Luo, έχει αρκετές προκαθορισμένες διαστάσεις για το παράθυρο του προγράμματος περιήγησής σας, ώστε να δοκιμάζει τις σελίδες που έχουν σχεδιαστεί με απόκριση ή να δημιουργήσει μια νέα προεπιλογή, αν δεν μπορείτε να βρείτε αυτήν που ταιριάζει στις ανάγκες σας.
35. responsivepx
Όπως το resizeMyBrowser, responsivepx, που δημιουργήθηκε από τον Remy Sharp, φορτώνει τις σελίδες σας σε ένα παράθυρο όπου μπορείτε να δοκιμάσετε το πλάτος και το ύψος για να προσδιορίσετε πόσο καλά ενεργοποιούνται τα ερωτήματα πολυμέσων σας και πού βρίσκονται τα σημεία διακοπής στο σχεδιασμό.
36. Έλεγχος απόκρισης σχεδιασμού
Ένα απίστευτα χρήσιμο εργαλείο από τον σχεδιαστή και τον προγραμματιστή Matt Kersley: απλώς εισαγάγετε τη διεύθυνση URL του αποκριτικού ιστότοπού σας στο Responsive Design Testing για να δείτε πώς αποδίδεται σε διάφορα μεγέθη προγράμματος περιήγησης.
37. Ο υπεύθυνος
Εισαγάγετε μια διεύθυνση URL και το Responsinator θα σας δείξει πώς εμφανίζεται σε πολλά κοινά μεγέθη συσκευών - με ανελέητη ρομποτική απόδοση. Ο Tama Pugsley και ο Andy Hovey είναι υπεύθυνοι για αυτό.
38. Ανταπόκριση
Ένας άλλος εξομοιωτής συσκευών στη σελίδα, το Responsive.is σας επιτρέπει να πληκτρολογήσετε μια διεύθυνση URL και, στη συνέχεια, να αλλάξει το μέγεθός της μεταξύ μιας σειράς διαφορετικών προεπιλογών. Είναι κατασκευασμένο από την ομάδα πίσω από την επικείμενη εφαρμογή Typecast.
39. Screenqueri.es
Ένα ακόμη εργαλείο διαστάσεων του προγράμματος περιήγησης, αλλά το Screenqueri.es από το Mandar Shirke διαφοροποιείται έχοντας ένα εκτεταμένο σύνολο προεπιλογών για κινητά και tablet, καθώς και ένα πλέγμα και χάρακες που κάνουν τη λεπτή μέτρηση πολύ πιο εύκολη.
40. Άπτος
Μια άλλη εφαρμογή για τη δοκιμή ιστότοπων σε πολλά καθορισμένα μεγέθη, αλλά το Aptus είναι εγγενές για Mac. Διατίθεται μέσω του Mac App Store και το να είναι εγγενές προσφέρει επιπλέον δυνατότητες, όπως εύκολα στιγμιότυπα οθόνης και υποστήριξη εκτός σύνδεσης.
41. Σελιδοδείκτης Responsive Design
Ο Victor Coulon έκανε ένα πολύ απλό αλλά αποτελεσματικό σελιδοδείκτη. όταν το ενεργοποιείτε σε οποιαδήποτε ιστοσελίδα προσθέτει μια γραμμή εργαλείων που σας επιτρέπει να κάνετε εναλλαγή μεταξύ τεσσάρων κοινών διαστάσεων οθόνης, ώστε να μπορείτε να δείτε πώς αποδίδεται ο ιστότοπός σας σε διαφορετικά μεγέθη.
42. Σελιδοδείκτης Test Responsive Design
Αυτό το σελιδοδείκτη του Benjamin Keen επιτρέπει περισσότερη προσαρμογή, επιτρέποντάς σας να ορίσετε τα δικά σας μεγέθη συσκευών και όσα περισσότερα ή λίγα θέλετε. Όταν ενεργοποιηθεί, εμφανίζεται ο ιστότοπος σε όλα τα επιλεγμένα μεγέθη, δίπλα-δίπλα για εύκολη σύγκριση.
43. Screenfly
Το Screenfly, από την QuirkTools, σας επιτρέπει να δοκιμάσετε έναν ιστότοπο σε διαφορετικές αναλύσεις σε επιτραπέζιο, tablet, κινητό και τηλεόραση. Η δοκιμή επιτραπέζιου υπολογιστή περιορίζεται προς το παρόν στο Safari, ενώ το tablet και το κινητό έχουν περισσότερες επιλογές για συσκευές και προγράμματα περιήγησης. Η τηλεόραση περιορίζεται στην Όπερα.
44. Δείκτης ερωτήματος μέσων
Ο Johan Brook προσφέρει έναν καθαρό τρόπο CSS για να δοκιμάσετε πότε ενεργοποιήθηκε ένα ερώτημα πολυμέσων από το πρόγραμμα περιήγησης. Το Media Query Indicator είναι ένα άλλο καλό εργαλείο για τη δοκιμή και την αναπαραγωγή με σημεία σχεδίασης.
45. Σιμ
Ένα από τα εργαλεία που χρησιμοποιήθηκαν στον επανασχεδιασμό του Boston Globe, το αγόρι αφίσα του κινήματος RWD, το Shim είναι μια εφαρμογή Node.js που εκτελεί μια ιστοσελίδα σε πολλές συσκευές στο ίδιο δίκτυο Wifi, καθιστώντας τις δοκιμές μεταξύ συσκευών που είναι πολύ πιο εύκολες .
46. Οδήγηση σε
Εάν δεν διαθέτετε διακομιστή Node.js για να εκτελέσετε το Shim, ο Scott Jehl έχει κάνει μια απλούστερη έκδοση που ονομάζεται Drive-In, η οποία λειτουργεί ουσιαστικά με τον ίδιο τρόπο, αλλά χρησιμοποιώντας PHP, Apache και ένα αρχείο .htaccess.
47. Adobe Shadow
Η Adobe συνεχίζει την ώθηση στις τεχνολογίες ιστού με αυτό το εργαλείο απομακρυσμένου εντοπισμού σφαλμάτων. Εγκαταστήστε το Shadow και την επέκταση Chrome σε Mac ή Windows, καθώς και το πρόγραμμα-πελάτη Shadow σε Android ή iPhone και μπορείτε να μοιραστείτε ιστοσελίδες μεταξύ πολλών διαφορετικών συσκευών.
48. Opera Mobile Emulator + Remote Debug
Ένας ευκολότερος τρόπος για τον εντοπισμό σφαλμάτων σελίδων για κινητά είναι να εγκαταστήσετε το Opera και το Opera Mobile Emulator και να συνδέσετε τα δύο με την επιλογή Απομακρυσμένου εντοπισμού σφαλμάτων. Απλή και γρήγορη εγκατάσταση και έχει το πρόσθετο πλεονέκτημα των δοκιμών σε περισσότερα από το WebKit.
Περαιτέρω έμπνευση
Θέλετε να πάρετε μια ιδέα για το πώς οι άλλοι ανταποκρίνονται στα σχέδιά τους;
49. MediaQueri.es
Εάν δεν το έχετε δει ήδη, ο ιστότοπος Mediaqueri.es έχει έναν ολοένα αυξανόμενο αριθμό ιστότοπων που έχουν περάσει από την πλευρά της απόκρισης.
50. @ RWD
Ο Ethan Marcotte διαχειρίζεται έναν λογαριασμό Twitter που φέρνει τις τελευταίες ειδήσεις, εργαλεία και προθήκες από τον κόσμο της RWD.
Ο Denise Jacobs λατρεύει να είναι ομιλητής, συγγραφέας, εκπαιδευτής σχεδιασμού ιστοσελίδων και ευαγγελιστής δημιουργικότητας, ενώ ο Peter Gasston είναι ο συγγραφέας του βιβλίου CSS3 και ένας βετεράνος προγραμματιστής ιστού που κάνει blogs στο Broken Links.
Σας άρεσε αυτό; Διαβάστε αυτά!
- Επαγγελματικές συμβουλές για τη δημιουργία ιστότοπου για κινητά
- Κορυφαίες τεχνικές CSS και JavaScript
- Πώς να δημιουργήσετε μια εφαρμογή
- Οι καλύτερες δωρεάν γραμματοσειρές Ιστού για σχεδιαστές
- Ανακαλύψτε τι ακολουθεί για το Augmented Reality
- Κατεβάστε δωρεάν υφές: υψηλή ανάλυση και έτοιμο για χρήση τώρα
