Το Ultimate Responsive Web Design Roundup
Ανταποκρινόμενος σχεδιασμός είναι η νέα αγάπη του κόσμου web design. Φαίνεται ότι δεν περνάει μια εβδομάδα από το γεγονός ότι δεν υπάρχουν νέοι πόροι για να το κάνουν, απόψεις για το πώς να το κάνεις ή ακόμα και αν θα το κάνεις καθόλου, και νέες ιστοσελίδες που κάνουν όμορφη χρήση του.
Μπορεί γρήγορα να πάρει συντριπτική προσπαθεί να συμβαδίσει με όλα αυτά.
Εδώ έχουμε καταρτίσει μια λίστα με περισσότερους από εβδομήντα πόρους για τη δημιουργία σχεδίων με δυνατότητα απόκρισης.
Περιλαμβάνονται άρθρα που αναλύουν το σχεδιασμό και τις συναφείς θεωρίες, τα πλαίσια και τις πλάκες βρασμού για ανταποκρινόμενες διατάξεις, εργαλεία για τη δοκιμή των ανταποκρινόμενων σχεδίων, τεχνικές για εικόνες με δυνατότητα αλλαγής μεγέθους και πολλά άλλα.
Στη συνέχεια, για να το ξεπεράσουμε όλα, έχουμε συγκεντρώσει εκατό από τα καλύτερα σχέδια που ανταποκρίνονται εκεί έξω τώρα για να σας εμπνεύσει και να σας δώσει μερικές ιδέες πραγματικού κόσμου.
Άρθρα και δημοσιεύσεις
Παρακάτω είναι μια σειρά από άρθρα υψηλής ποιότητας που μιλάνε για τον αποκρινόμενο σχεδιασμό και τις τεχνικές που εισέρχονται σε αυτό. Ορισμένοι ενδέχεται να περιλαμβάνουν μερικά αποσπάσματα κώδικα ή άλλες τεχνικές πληροφορίες, αλλά ως επί το πλείστον πρόκειται για συζητήσεις σε επίπεδο ιδεών.
Σχεδιασμός ιστοσελίδων προσαρμοζόμενος σε συσκευές
Αυτό είναι το αρχική δημοσίευση από τον Ethan Marcotte που δημοσιεύτηκε στην A List Apart. Εξετάζει το σκεπτικό και τις αρχές πίσω από την ανταποκρινόμενη σχεδίαση, καθώς και πρακτικές τεχνικές για τη δημιουργία ανταποκρινόμενων τοποθεσιών.
Ανοιχτό βιβλίο σχεδίασης ιστοσελίδων
Σχεδιασμός ιστοσελίδων προσαρμοζόμενος σε συσκευές από τον Ethan Marcotte, που δημοσιεύεται από το A Book Apart, καλύπτει την κατάσταση του ανταποκρινόμενου ιστού, των ευέλικτων πλεγμάτων, των ευέλικτων εικόνων, των ερωτημάτων των μέσων ενημέρωσης και του τρόπου δημιουργίας σχεδίων με δυνατότητα απόκρισης.
Οι πρακτικές των ερωτημάτων των μέσων ενημέρωσης του CSS, τα διδάγματα
Αυτό Θέση , από το Bloop, είναι μια φανταστική επισκόπηση του τρόπου χρήσης των ερωτημάτων των μέσων ενημέρωσης (και των πλεονεκτημάτων και των μειονεκτημάτων τους σε σύγκριση με τη δημιουργία ενός ειδικού ιστότοπου για κινητά), καθώς και ορισμένες χρήσιμες συμβουλές για την εφαρμογή τους. Περιλαμβάνονται επίσης ορισμένα χρήσιμα αποσπάσματα κώδικα.
Τα μεγάλα εναντίον των Μικρών: Προκλήσεις στο Αισθητή Σχεδίαση Ιστού
Αυτό άρθρο συζητά μερικές από τις προκλήσεις που μπορεί να παρουσιάσει η φιλοσοφία του web design, συμπεριλαμβανομένων των μοναδικών εκτιμήσεων που απαιτούνται καθώς τα μεγέθη της επιφάνειας εργασίας συνεχίζουν να αυξάνονται, ενώ ταυτόχρονα πολλοί χρήστες έχουν πλέον πρόσβαση στον ιστό σε tablet ή smartphones.
Οδηγός για αρχάριους για το Responsive Web Design
Αυτό Οδηγός για αρχάριους από το Think Vitamin προσφέρει μια μεγάλη εισαγωγή στο σχεδιασμό που ανταποκρίνεται, συμπεριλαμβανομένων των πληροφοριών σχετικά με τα πλέγματα υγρών και τα ερωτήματα των μέσων ενημέρωσης.
Ανταπόκριση Σχεδίαση Ιστού: Τι είναι και πώς να το χρησιμοποιήσετε
Αυτή η εισαγωγή στην ανταποκρινόμενη σχεδίαση από Smashing Magazine είναι ένα μεγάλο αστάρι για το θέμα. Καλύπτει τη βασική ιδέα, όπως περιγράφεται από τον Ethan Marcotte, καθώς και τις πρακτικές ανησυχίες για τη δημιουργία ανταποκρινόμενων σχεδίων. Περιλαμβάνονται επίσης παραδείγματα κώδικα.
Ανταπόκριση από προεπιλογή
Αυτό άρθρο από τον Andy Hume συζητά γιατί ο ιστός ανταποκρίνεται από προεπιλογή και ότι οι σχεδιαστές το αναγκάζουν να μην ανταποκρίνεται για χρόνια. Είναι μια ενδιαφέρουσα ιδέα, που συζητήθηκε κυρίως από την άποψη του προγραμματιστή.
Περιεχόμενο Χορογραφία
Συχνά μιλάμε για τον σχεδιασμό που ανταποκρίνεται αυστηρά στο τεχνικό τέλος των πραγμάτων, αλλά ολόκληρο το σημείο της απόκρισης του σχεδιασμού είναι να βελτιωθεί η εμπειρία του περιεχομένου. Αυτό Θέση από τον Τρεντ Γουόλτον μιλάει για αυτό ακριβώς, πώς το στοίβαγμα περιεχομένου δεν είναι πάντα η καλύτερη λύση και τι μπορεί να γίνει αντ 'αυτού.
Κατανόηση των στοιχείων της υπεύθυνης σχεδίασης ιστοσελίδων
Αυτή η ανάρτηση από Έξι αναθεωρήσεις καλύπτει τα βασικά χαρακτηριστικά του σχεδιασμού: ευέλικτο πλέγμα, εύκαμπτες εικόνες και ερωτήματα μέσων.
Μια σύντομη επισκόπηση του ανταποκρινούς σχεδιασμού
Εδώ είναι μια άλλη μεγάλη βασική καταγραφή του τι είναι ευαίσθητο σχέδιο και πώς να το επιτύχει, αυτή τη φορά από 1ος Σχεδιαστής Ιστού .
Ο υπεύθυνος σχεδιασμός ιστοσελίδων έχει δημιουργήσει ευκαιρίες σε όλο το διοικητικό συμβούλιο
Αυτό Θέση καλύπτει μερικές από τις ευκαιρίες που προσφέρει η σχεδίαση για σχεδιαστές και προγραμματιστές.
Σχεδιασμός για έναν ανταποκρινόμενο ιστό
Αυτό άρθρο από το Webdesigntuts + συζητάει για την ικανοποιητική σχεδίαση σε σχέση με το πλέγμα υγρών, τις εικόνες υγρών και τα ερωτήματα των μέσων ενημέρωσης.
Πειράματα με το Responsive Web Design
Αυτό άρθρο από τον Lee Munroe δίνει μια απλή επισκόπηση του ανταποκρινόμενου σχεδιασμού, ιδιαίτερα των ερωτήσεων των μέσων μαζικής ενημέρωσης, καθώς και μερικά παραδείγματα.
CSS3 Media Queries
Τείχος Σχεδιαστής Ιστού προσφέρει μια μεγάλη ροή από τα αποσπάσματα κώδικα ερωτημάτων μέσων, τα αντιπροσωπευτικά παραδείγματα σχεδίασης και πολλά άλλα σε αυτό το άρθρο.
20 εκπληκτικά παραδείγματα χρήσης ερωτημάτων μέσων για υπεύθυνο σχεδιασμό ιστοσελίδων
Αυτή η ανάρτηση από Design Shack προσφέρει μερικά υπέροχα παραδείγματα σχεδίασης που ανταποκρίνονται στις ανάγκες σας, καθώς και πολλές πληροφορίες σχετικά με τον τρόπο δημιουργίας των δικών σας ιστοτόπων.
Συμφραζόμενα
Αυτό Θέση από το Adactio καλύπτει μέρος της σύγχυσης που συχνά περιβάλλει τον αποκρινόμενο σχεδιασμό, σπάζοντας τον με απλούς όρους και προσφέροντας κάποια χρήσιμη γνώση.
Ένας πλουσιότερος καμβάς
Αυτό το άρθρο από Mark Boulton συζητά μερικά από τα πλεονεκτήματα που προσφέρει η σχεδίαση, το CSS3 και άλλα εργαλεία που δίνουν στους σχεδιαστές και τους δημιουργούς περιεχομένου, ειδικά ότι πρέπει να σχεδιάζουμε από το περιεχόμενο έξω, και όχι το αντίστροφο.
Κάποιες σκέψεις σχετικά με την υπεύθυνη σχεδίαση ιστοσελίδων και τα ερωτήματα των μέσων ενημέρωσης
Αυτό Θέση από τον Jon Phillips συζητά μερικά από τα πιθανά μειονεκτήματα για να ανταποκρίνεται στον σχεδιασμό και, το πιο σημαντικό, προσφέρει μερικές μεγάλες λύσεις.
Ανταπόκριση στο σχεδιασμό ιστοσελίδων και το περιβάλλον κινητής τηλεφωνίας
Αυτό Θέση περιγράφει τον τρόπο με τον οποίο χρησιμοποιούνται οι κινητές συσκευές για περιήγηση στο περιεχόμενο ιστού και τον τρόπο με τον οποίο αυτό μπορεί να επηρεάσει τις επιλογές σχεδίασης που ανταποκρίνονται στις ανάγκες σας.
Η νέα στοίβα σχεδίασης του εμπρόσθιου τμήματος: Ο ρόλος του αισιόδοξου σχεδιασμού
Αυτή η ανάρτηση από Acquia συζητά τη σημασία του ανταποκρινόμενου σχεδιασμού, προσφέρει μερικά εξαιρετικά παραδείγματα, τα τεχνικά στοιχεία που εμπλέκονται στη δημιουργία ανταποκρινόμενων σχεδίων και πολλά άλλα.
Ανταπόκριση στο Web Design από το μέλλον
Ανταπόκριση στο Web Design από το μέλλον είναι μια παρουσίαση από τον Kyle Neath που συζητά το μέλλον του σχεδιασμού ιστοσελίδων σε σχέση με τις ανταποκρινόμενες αρχές σχεδιασμού.
Στην Κόλαση με Κακές Συσκευές: Αισθητή Web Design και Web Standards
Αυτό είναι ένα σε βάθος ματιά σε ανταποκρινόμενο σχεδιασμό , συζητώντας το σχεδιασμό που σχετίζεται με τη συσκευή, τον τρόπο με τον οποίο ανταποκρίνεται ο σχεδιασμός για τις εφαρμογές και πολλά άλλα.
Τα πλεονεκτήματα και τα μειονεκτήματα του υπεύθυνου σχεδιασμού ιστοσελίδων
Πολλά άρθρα συζητούν πώς να δημιουργήσουν ένα ανταποκρινόμενο σχέδιο, αλλά όχι ότι πολλοί συζητούν τα καλά και τα κακά πράγματα σχετικά με τα σχέδια που ανταποκρίνονται. Η Παμ κάνει ακριβώς αυτό, δίνοντας μια αρκετά πλήρη λίστα των θετικών και των αρνητικών που σχετίζονται.
11 λόγοι για τους οποίους η υπεύθυνη σχεδίαση ιστοσελίδων δεν είναι τόσο δροσερή
Αυτή η ανάρτηση από WebDesignShock περιγράφει μερικές από τις πιθανές προκλήσεις και τα προβλήματα που μπορεί να παρουσιάσει η ανταποκρινόμενη σχεδίαση.
Εκπαιδευτικά σεμινάρια
Τα παρακάτω μαθήματα θα σας διδάξουν σχετικά με τα ερωτήματα των μέσων ενημέρωσης CSS και άλλες τεχνικές σχεδιασμού που ανταποκρίνονται στις ανάγκες σας.
Γρήγορη συμβουλή: Ένα μάθημα συντριβής σε ερωτήματα Media CSS
Αυτό Nettuts + φροντιστήριο προσφέρει μερικά βασικά στοιχεία για την εργασία με τα ερωτήματα των μέσων μαζικής ενημέρωσης, συμπληρωμένα με βίντεο φροντιστήριο και αποσπάσματα κώδικα.
Προσαρμοστικές διατάξεις με ερωτήματα μέσων
Αυτό φροντιστήριο από το .Net Magazine προσφέρει μια ματιά στις βασικές τεχνικές αναζήτησης μέσων CSS3. Περιλαμβάνει πολλά αποσπάσματα κώδικα και πρακτικές πληροφορίες σχετικά με τη δημιουργία των δικών σας προσαρμοστικών διατάξεων.
Ανταπόκριση Web Design: Ένας οδηγός Visual
Αυτό βίντεο φροντιστήριο από το Tuts + προσφέρει μια μεγάλη εισαγωγή σε αυτό που ανταποκρίνεται στο σχεδιασμό μοιάζει, με παραδείγματα. Στη συνέχεια, εξηγεί πώς μπορείτε να δημιουργήσετε το δικό σας σχέδιο που ανταποκρίνεται, λαμβάνοντας υπόψη τόσο τις οπτικές όσο και τις τεχνικές πτυχές.
CSS Media Queries & Χρήση διαθέσιμου χώρου
Αυτή η ανάρτηση από CSS-Κόλπα εξηγεί την έννοια της χρήσης ερωτημάτων μέσων για την αξιοποίηση του διαθέσιμου χώρου στο παράθυρο προβολής του προγράμματος περιήγησης. Περιλαμβάνει πολλά χρήσιμα αποσπάσματα κώδικα και παραδείγματα.
Εργασία με τα ερωτήματα των μέσων ενημέρωσης
Εδώ είναι ένα σύντομο φροντιστήριο για εργασία με ερωτήματα μέσων, με πολλά παραδείγματα κώδικα. Είναι βασικό και προς το σημείο, αλλά μια τέλεια εισαγωγή σε βασικά ερωτήματα των μέσων ενημέρωσης.
Τρόπος χρήσης των ερωτημάτων μέσων εστίασης CSS3
Τα ερωτήματα των μέσων μαζικής ενημέρωσης είναι ιδανικά για να ρυθμίσετε τον τρόπο με τον οποίο εμφανίζεται ο σχεδιασμός σας σε διαφορετικά μεγέθη προγράμματος περιήγησης, αλλά πολλοί σχεδιαστές παραβλέπουν το έλεγχοι προσανατολισμού . Αυτά σας επιτρέπουν να αλλάξετε τον τρόπο εμφάνισης του ιστότοπού σας βάσει του κατά πόσο μια συσκευή είναι προσανατολισμένη προς το πορτρέτο ή τη λειτουργία οριζόντιου προσανατολισμού, κάτι που είναι χρήσιμο και για τα έξυπνα τηλέφωνα και τα tablet.
Βελτιστοποίηση του μηνύματος ηλεκτρονικού ταχυδρομείου σας για κινητές συσκευές με το @media Query
Συχνά, παραβλέπουμε τα ενημερωτικά δελτία ηλεκτρονικού ταχυδρομείου HTML, όταν σκεφτόμαστε τον σχεδιασμό που ανταποκρίνεται, αλλά λαμβάνοντας υπόψη τον αριθμό των ατόμων που ενδέχεται να βλέπουν τα μηνύματα ηλεκτρονικού ταχυδρομείου HTML στο τηλέφωνό τους, είναι καλή ιδέα να χρησιμοποιήσετε ερωτήματα μέσων σε αυτήν την περίπτωση. Αυτή η ανάρτηση από Παρακολούθηση καμπάνιας εξηγεί πώς έχει γίνει.
Πώς να χρησιμοποιήσετε τα ερωτήματα μέσων CSS3 για να δημιουργήσετε μια κινητή έκδοση του ιστότοπού σας
Αυτή η ανάρτηση από Smashing Magazine εξηγεί τον τρόπο χρήσης ερωτημάτων μέσων για τη δημιουργία ενός ιστότοπου για κινητά ή τη σύνδεση ξεχωριστών φύλλων στυλ.
Προσαρμοστικός και υπεύθυνος σχεδιασμός με ερωτήματα μέσων CSS3
Αυτό το φανταστικό post από Τείχος Σχεδιαστής Ιστού περιλαμβάνει ένα πρότυπο σχεδίασης με δυνατότητα απόκρισης, καθώς και ένα σεμινάριο σχετικά με τον τρόπο δημιουργίας του προτύπου. Είναι ένας εξαιρετικός πόρος για όσους θέλουν να μάθουν νέες τεχνικές αναλύοντας τελικά έργα.
Ανταποκρινόμενος Σχεδιασμός Ιστού με HTML5 και Λιγότερο Πλαίσιο 3
Αυτό το άρθρο από SitePoint παρέχει λεπτομερείς οδηγίες για τη δημιουργία ενός ανταποκρινόμενου σχεδιασμού χρησιμοποιώντας το HTML5 και το Less Framework. Περιλαμβάνει όλο τον κώδικα που θα χρειαστείτε για τον τελικό σχεδιασμό, καθώς και μια καλή ανάλυση του τι κάνει αυτός ο κώδικας.
Εργαλεία και Τεχνικές
Οι τεχνικές και τα εργαλεία που ακολουθούν καθιστούν πολύ πιο εύκολο να δημιουργήσετε σχέδια που ανταποκρίνονται με τον τρόπο που θέλετε. Πολλοί είναι για το χειρισμό εικόνων (αναμφισβήτητα μια από τις πιο προκλητικές πτυχές του ανταποκρινόμενου σχεδιασμού), αλλά υπάρχουν και άλλοι.
Εφέ CSS: Διαχωρισμός εικόνων έξω για αντιστοίχιση Ύψους κειμένου
Ανάλογα με τη διάταξη σας, μπορεί να χρειαστείτε κείμενο που να ταξινομείται σωστά με τις εικόνες, ανεξάρτητα από τον τρόπο με τον οποίο βρίσκονται οι εικόνες και το κείμενο. Αυτό τεχνική από το Zomigi σας δείχνει πώς να το κάνετε ακριβώς αυτό.
Απόκρυψη και αποκάλυψη μερών εικόνων
Η αλλαγή μεγέθους των εικόνων μπορεί σε ορισμένες περιπτώσεις να σας μεταφέρει μόνο μέχρι τώρα. Κατά καιρούς, είναι πιο σημαντικό για ένα συγκεκριμένο τμήμα μιας εικόνας να είναι ορατό ή ευανάγνωστο από ό, τι για ολόκληρη την εικόνα που εμφανίζεται. Αυτό είναι όπου αυτή την τεχνική από το Zomigi μπορεί να έρθει σε πρακτικό. Επιτρέπει την δυναμική καλλιέργεια εικόνων φόντου και προσκηνίου καθώς αλλάζει το πλάτος διάταξης.
Δημιουργία συρόμενων σύνθετων εικόνων
Αυτή η τεχνική, από το Zomigi, σας επιτρέπει να δημιουργήσετε αυτό που φαίνεται να είναι μια ενιαία εικόνα, αλλά είναι στην πραγματικότητα πολλαπλές εικόνες που στοιβάζονται το ένα πάνω στο άλλο. Με αυτό τον τρόπο, μπορείτε να ελέγξετε την ακριβή τοποθέτηση διαφόρων στοιχείων της εικόνας καθώς το παράθυρο προβολής του προγράμματος περιήγησης αλλάζει μέγεθος και σχήμα.
Εύκολο ευαίσθητο πλέγμα φωτογραφιών
Αυτό εκθεσιακός χώρος από το CSS-Tricks προσφέρει ένα απλό πλέγμα φωτογραφιών που μετατρέπει αυτόματα τις εικόνες σας και το συνολικό πλέγμα ώστε να ταιριάζει στο παράθυρο προβολής του προγράμματος περιήγησης.
Ανταπόκριτοι πίνακες δεδομένων
Οι ανταποκρινόμενες τεχνικές σχεδιασμού δεν είναι πολύ φιλικές προς τους πίνακες δεδομένων. Είναι εύκολο να καταλήξουμε σε πίνακες όπου ο τύπος είναι τόσο μικρός που είναι αδύνατον να το διαβάσετε. Ή μπορείτε να ορίσετε ένα ελάχιστο πλάτος, αλλά τότε αυτό το είδος της νικώντας το σκοπό ενός ανταποκρινόμενο σχέδιο. Αυτό τεχνική από το CSS-Tricks προσφέρει μια λύση για την εκ των προτέρων απεικόνιση δεδομένων πίνακα σε μια κινητή συσκευή.
Εικόνες προσκηνίου που κλιμακώνονται με τη διάταξη
Έτσι, είναι αρκετά εύκολο να δημιουργήσετε εικόνες κλιμάκωσης φόντου, αλλά οι εικόνες στο προσκήνιο είναι λίγο πιο δύσκολο. Αυτό το άρθρο καλύπτει μια τεχνική από το Zomigi για τη δημιουργία εικόνων προσκηνίου στο περιεχόμενό σας που θα κλιμακώνεται με τη διάταξη σας.
FitText
FitText είναι ένα plugin jQuery για την κλιμάκωση του επικεφαλικού κειμένου στα ανταποκρινόμενα σχέδια. Χρησιμοποιώντας αυτό, το κείμενό σας θα καλύπτει πάντα το πλάτος του γονικού στοιχείου.
Sencha.io Src
Sencha.io Src είναι μια υπηρεσία φιλοξενίας εικόνων που διαστασιολογεί τις εικόνες σας στο κατάλληλο μέγεθος για τη συσκευή που τους ζητάει. Οι εικόνες βελτιστοποιούνται επίσης για αποτελεσματική επαναλαμβανόμενη παράδοση.
Η προσέγγιση του Goldilocks σε ανταποκρινόμενο σχεδιασμό
Αυτή η ανάρτηση από τον Chris Armstrong μιλάει για το " Προσέγγιση Goldilocks "Για τη δημιουργία ανταποκρινόμενων σχεδίων που είναι" ακριβώς σωστά "για οποιαδήποτε συσκευή.
Αντιληπτικές εικόνες
Αντιληπτικές εικόνες είναι ένα πείραμα σε πρώτες εικόνες για κινητά που προσαρμόζονται ανάλογα με το σχεδιασμό σας. Η ιδέα είναι να παραδώσει βελτιστοποιημένα, συμφραζόμενα μεγέθη εικόνας σε ανταποκρινόμενες διατάξεις.
Lettering.js
Lettering.js είναι ένα plugin jQuery που σας δίνει τον ακριβή έλεγχο του τρόπου εμφάνισης της τυπογραφίας του ιστού σας, που μπορεί να είναι ένα μεγάλο πλεονέκτημα για τη διατήρηση της αναγνωσιμότητάς σας σε ένα ανταποκρινόμενο σχέδιο.
Fluid Images
Αυτό τεχνική από τον Ethan Marcotte δημιουργεί εικόνες πλάτους υγρού για τα σχέδια υγρών. Λειτουργεί επίσης για ενσωματωμένα βίντεο και υπάρχει λύση για συμβατότητα με το IE.
Απαντώ
Απαντώ είναι ένα ελαφρύ σενάριο polyfill για ερωτήματα μέσων CSS3 ελάχιστου / μέγιστου πλάτους, για να τους κάνει να εργάζονται στον Internet Explorer 6-8. Είναι μόνο 3kb minified, ή 1kb gzipped.
Modernizr
Modernizr είναι μια εργαλειοθήκη για HTML5 και CSS3 που παρέχει εντοπισμό με γνώμονα το JavaScript, συνδυασμένο με ερωτήματα μέσων.
Ανταπόκριση φύλλα σκίτσο Web Design
Εάν μεταφέρετε τα σχέδια σας σε χαρτί, θα τα βρείτε Ανταπόκριση φύλλα σκίτσο Web Design να είναι πολύ χρήσιμη. Υπάρχουν μερικές διαφορετικές διατάξεις που μπορείτε να λάβετε δωρεάν, καθένα από τα οποία δείχνει μια χούφτα πιθανών παραθύρων προβολής συσκευών.
Πλαίσια και πλάκες πυροδότησης
Τα πλαίσια και οι πλάκες καυστήρων μπορούν να επιταχύνουν σημαντικά τη διαδικασία σχεδιασμού σας. Τα καλά νέα είναι ότι υπάρχουν τόνοι πυροκροτητών και πλαισίων που είναι ήδη διαθέσιμοι για τη δημιουργία σχεδίων που ανταποκρίνονται στις ανάγκες σας.
Σύστημα Golden Grid
ο Σύστημα Golden Grid χρησιμοποιεί βάση βάσης 16 στηλών για οθόνες ευρείας οθόνης. Στις ταμπλέτες, οι στήλες θα διπλωθούν σε διάταξη 8 στηλών. Και στις μικρότερες οθόνες smartphone, οι στήλες αναδιπλώνονται και πάλι σε 4 στήλες, επιτρέποντας στον σχεδιασμό να προσαρμοστεί σε οτιδήποτε από μια οθόνη πλάτους 2560 πίξελ κάτω σε μια οθόνη 240 pixel.
Το Σύστημα Σημασιολογικού Πλέγματος
Το Σύστημα Σημασιολογικού Πλέγματος επιτρέπει σχεδιασμό ρευστών και ανταποκρινόμενα σχέδια, ενώ ταυτόχρονα χρησιμοποιεί σημασιολογική σήμανση (η οποία λείπει πάρα πολύ από τα περισσότερα πλαίσια πλέγματος).
Χωρίς σχάρα
Χωρίς σχάρα είναι ένα boilerplate HTML5 και CSS3 για τη δημιουργία ιστοσελίδων που ανταποκρίνονται στις ανάγκες των κινητών. Δεν περιλαμβάνει κανένα προκαθορισμένο σύστημα πλέγματος και μη-σημασιολογικές κλάσεις.
Λιγότερο Πλαίσιο 4
ο Λιγότερο πλαίσιο είναι ένα σύστημα πλέγματος CSS για το σχεδιασμό ανταποκρινόμενων ιστότοπων που προσαρμόζονται στο μέγεθος του παραθύρου προβολής του προγράμματος περιήγησης. Διαθέτει τέσσερις μορφές: προεπιλογή (για υπολογιστές γραφείου και tablet με τρόπο λειτουργίας τοπίου), διάταξη tablet, ευρεία διάταξη κινητού και διάταξη κινητής τηλεφωνίας. Αυτή είναι μια καλή επιλογή για τους σχεδιαστές που θέλουν ένα ανταποκρινόμενο σχέδιο, αλλά δεν θέλουν απαραιτήτως ρευστοί κίονες.
Ανταπόκριση Είκοσι Δέκα
Ανταπόκριση Είκοσι Δέκα βασίζεται στο θέμα Twenty Ten WordPress. Υπάρχει επίσης ένα plugin που είναι διαθέσιμο για να μετατρέψει το θέμα των είκοσι δέκα παιδιών σας σε ένα ανταποκρινόμενο σχέδιο.
Columnal
Columnal είναι ένα σύστημα πλέγματος CSS που είναι ένα "remix" κάποιων άλλων πλεγμάτων, με προσθήκη προσαρμοσμένου κώδικα. Η βάση του ελαστικού πλέγματος λαμβάνεται από το cssgrid.net, ενώ άλλα κομμάτια κώδικα λαμβάνονται από 960gs.gr
1140 CSS Grid
ο 1140 CSS Grid System είναι ένα εύκαμπτο, υγρό πλέγμα που θα αναδιοργανωθεί με βάση το παράθυρο προβολής του προγράμματος περιήγησης. Έχει σχεδιαστεί για να ταιριάζει τέλεια σε μια οθόνη 1280 pixel, αλλά γίνεται ρευστό κάτω από αυτό.
320 και άνω
320 και άνω χρησιμοποιεί την αρχή της κινητής τηλεφωνίας για να εμποδίσει τις κινητές συσκευές να κατεβάζουν στοιχεία της επιφάνειας εργασίας. Πρόκειται για μια εναλλακτική λύση για την εκκίνηση με μια έκδοση για υπολογιστές και την κλιμάκωση.
Σκελετός
Σκελετός είναι ένα boilterplate για ευαίσθητα σχέδια κινητών φίλων. Ξεκινά με το πλέγμα 960, αλλά κλιμακώνεται για μικρότερες οθόνες και έχει σχεδιαστεί για να είναι τόσο γρήγορη για να ξεκινήσετε με ένα αγνωστικιστικό στυλ.
Σύστημα πλέγματος υγρών
ο Σύστημα πλέγματος υγρών βασίζεται σε ένα πλέγμα έξι στηλών και έχει 720 διαφορετικές δυνατότητες διάταξης. Λόγω της απλότητας του, αποικοδομείται καλά σε παλαιότερους φυλλομετρητές.
Fluid 960 Grid System
ο Fluid 960 Grid System βασίζεται στο 960.gs, αλλά έχει μια υγρή διάταξη ανεξάρτητα από το μέγεθος του προγράμματος περιήγησης.
Foldy960
Foldy960 είναι μια απόκριση εκδοχή των 960gs.gr Αποτελείται από μερικές επιπλέον κλάσεις και άλλα πράγματα για να μετατρέψετε ένα σχέδιο 960.gs σε ένα ανταποκρινόμενο σχέδιο.
SimpleGrid
SimpleGrid είναι ένα άλλο ευαίσθητο πλαίσιο πλέγματος που υποστηρίζει άπειρη φωλιά. Είναι διαμορφωμένο για οθόνες σε τέσσερα διαφορετικά μεγέθη, συμπεριλαμβανομένων των 1235px και 720px.
Εργαλεία δοκιμών
Αυτά τα εργαλεία καθιστούν πολύ πιο εύκολο να δοκιμάσετε τα σχέδια που ανταποκρίνονται στις ανάγκες σας χωρίς να χρειάζεται να χρησιμοποιήσετε μια δέσμη διαφορετικών συσκευών.
αλλαγή μεγέθουςMyBrowser
αλλαγή μεγέθουςMyBrowser είναι ένα χρήσιμο εργαλείο δοκιμών για ανταποκρινόμενα σχέδια. Απλά κάντε κλικ σε ένα από τα προκαθορισμένα πλήκτρα μεγέθους προγράμματος περιήγησης και το πρόγραμμα περιήγησης θα αλλάξει το μέγεθος. Κάθε μέγεθος επισημαίνεται με το όνομα τουλάχιστον μιας συσκευής που χρησιμοποιεί αυτήν την ανάλυση.
responsivepx
responsivepx είναι ένα εργαλείο ελέγχου του προγράμματος περιήγησης που σας επιτρέπει να εισάγετε μια διεύθυνση URL (τοπική ή online) και, στη συνέχεια, να προσαρμόσετε το ύψος και το πλάτος του παραθύρου προβολής του προγράμματος περιήγησης για να δείτε τα ακριβή πλάτη σημείων διάλειμμα σε εικονοστοιχεία.
Ανταποκρινόμενη Δοκιμή Σχεδιασμού
Ματ Κέρσλεϊ έχει δημιουργήσει αυτό το εργαλείο δοκιμής του προγράμματος περιήγησης που σας επιτρέπει να δείτε ακριβώς πώς εμφανίζεται ο ιστότοπός σας σε κοινά πλάτη προγράμματος περιήγησης ξεκινώντας από 240px και φτάνοντας έως και 1024px.
Σελίνα
Σελίνα σας δείχνει πώς θα προβληθεί ένας ιστότοπος σε διάφορες συσκευές, συμπεριλαμβανομένων των τηλεοράσεων με δυνατότητα Internet και των κινητών συσκευών.
Adobe Device Central
Υπάρχουν πολλά προϊόντα Adobe Creative Suite Device Central , το οποίο μπορεί να είναι ένα πολύτιμο εργαλείο για τη δοκιμή των ανταποκρινόμενων σχεδίων σας. Σας επιτρέπει όχι μόνο να κάνετε προεπισκόπηση, αλλά και να δοκιμάσετε τα σχέδιά σας στη συσκευή της επιλογής σας.
Παραδείγματα
Παρακάτω υπάρχουν 100 παραδείγματα φανταστικών σχεδιασμών που ανταποκρίνονται. Υπάρχουν πολύ περισσότερες τοποθεσίες έξω εκεί με τη χρήση της τεχνικής, και νέες ξεκινούν καθημερινά. Μια μεγάλη πηγή για την εύρεση νέων τοποθεσιών είναι Ερωτήματα Media , μια γκαλερί που αφιερώθηκε ειδικά σε ιστότοπους που χρησιμοποιούν τεχνικές ανταποκριτικής σχεδίασης.
Profi Span
Ξεχασμένοι Πρόεδροι
Ben Handzo
Ααρών Σέκι
Ο αυτοκινητόδρομος των τυφώνων
dConstruct 2011
Merlin Ord & Media
