Αληθινά εύκολη σχεδίαση
Δεν είναι μυστικό ότι πολλοί πιστεύουν ότι ο ανταποκρινόμενος ιστός είναι το μέλλον. Η δημιουργία ενός ανταποκριτικού ιστότοπου σημαίνει ότι είναι σε θέση να προσαρμοστεί στα πολλά διαφορετικά προγράμματα περιήγησης και μεγέθη που είναι διαθέσιμα. Εάν θέλω να σιγουρευτώ ότι ο ιστότοπος που έχω δημιουργήσει στην επιφάνεια εργασίας μου μπορεί να δει σε ένα tablet με μετακίνηση και ζουμ σε minium, θα ήθελα να ενδιαφέρομαι για τη δημιουργία ενός ανταποκρινόμενου ιστότοπου.
Ένας λόγος που ανταποκρίνεται στις τοποθεσίες έχουν γίνει δημοφιλείς είναι επειδή έχει νόημα. Είναι φθηνότερο από τη δημιουργία ενός ή περισσότερων επιπλέον ιστότοπων για κινητά τηλέφωνα και tablet. Εξασφαλίζει επίσης μια συνεπή εμπειρία προβολής μεταξύ των συσκευών και των επιτραπέζιων οθονών. Δεν είναι διασκεδαστικό να χρειάζεται να αυξήσετε το μέγεθος του παραθύρου σας ή να μετακινηθείτε οριζόντια για να δείτε έναν ολόκληρο ιστότοπο.
Ενώ δημιουργείτε ευαίσθητα σχέδια ιστού καθίσταται ευκολότερη, υπάρχουν μερικοί τρόποι για να γίνει ακόμα πιο γρήγορος. Χάρη σε κάποιες CSS και HTML, μπορούμε να το κωδικοποιήσουμε απευθείας στις τοποθεσίες μας. Άλλα στοιχεία απαιτούν λίγο περισσότερη δουλειά. Είτε έτσι είτε αλλιώς, έχουμε καταλήξει σε μια λίστα που θα σας βοηθήσει να τοποθετήσετε τον ανταποκρινόμενο ιστότοπό σας μαζί με την ελάχιστη αναστάτωση και τα μέγιστα αποτελέσματα.
jQuery plugins
Ισότοπο
Το ισότοπο είναι ένα plugin jQuery που ισχυρίζεται ότι δημιουργεί μαγικές διατάξεις που διαφορετικά δεν μπορούν να δημιουργηθούν από το CSS και το HTML. Έχει την ικανότητα να αναδιατάσσει τα στοιχεία μέσα σε ένα δοχείο έτσι ώστε να ταιριάζει μέσα σε αυτό καθώς αλλάζει το μέγεθός του. Μπορείτε επίσης να χρησιμοποιήσετε το Isotopope για να φιλτράρετε και να ταξινομήσετε τα στοιχεία κατά κατηγορίες και τέτοια.
Breakpoints.js
Σημείο διακοπής έγινε με προγραμματιστές και σχεδιαστές κατά νου. Είναι ένα πρόσθετο που σας επιτρέπει να δημιουργείτε σημεία διακοπής για διαφορετικά μεγέθη προγράμματος περιήγησης. Όταν το πρόγραμμα περιήγησής σας έχει αλλάξει μέγεθος σε ένα από αυτά τα μεγέθη, τα στοιχεία μπορούν να χωρέσουν στην οθόνη.
FitText.js
Αυτό είναι ένα από τα αγαπημένα μου jQuery plugins γιατί είναι για τις γραμματοσειρές. Πολύ συχνά σε ανταποκρινόμενο σχεδιασμό ιστοσελίδων, οι άνθρωποι δεν λαμβάνουν υπόψη ότι οι τίτλοι πρέπει να ανταποκρίνονται αντί να σπαταληθούν σε ένα συγκεκριμένο χώρο. Το FitText σας επιτρέπει να κάνετε ακριβώς αυτό, αλλά θυμηθείτε να το χρησιμοποιείτε μόνο για πρωτοσέλιδα!
Response.js
Εάν σας αρέσει η ιδέα του Breakpoint.js αλλά επιθυμείτε περισσότερη προσαρμογή, η Response.js είναι η απάντηση. Είναι πολύ ωραίο για όσους γνωρίζουν το jQuery καλύτερα από το CSS και το HTML και πρέπει να δημιουργήσουν ανταποκρινόμενες ιστοσελίδες. Χρησιμοποιείτε τα σημεία διακοπής σας, αλλά υπάρχει πολύ περισσότερη προσαρμογή, όπως το μέγεθος συσκευής, οι αναλογίες pixel και η δυνατότητα φόρτωσης διαφορετικών πηγών για διαφορετικά μεγέθη.
TinyNav.js
TinyNav είναι ένα ελαφρύ plugin jQuery που σας επιτρέπει να αλλάξετε οποιαδήποτε στοιχεία μενού χρησιμοποιώντας λίστες για να μετατραπούν σε αναπτυσσόμενα μενού κατά την αλλαγή μεγέθους του προγράμματος περιήγησης. Μπορείτε να καθορίσετε τα μεγέθη καθώς και τα μενού που αλλάζουν. Δεν είναι τόσο ευρεία σε λειτουργία, αλλά είναι πολύ αποτελεσματικό για αυτό που κάνει.
Δημοφιλή πλαίσια και συστήματα
Ευαίσθητο σύστημα πλέγματος
Αυτό το σύστημα ισχυρίζεται ότι δεν είναι ένα boilerplate ή πλαίσιο, αλλά απλά ένα σύστημα για να κάνει τα σχέδια σας απόκριση. Φαίνεται να είναι ένα από τα πιο ευέλικτα, καθώς δεν σας περιορίζει σε ένα συγκεκριμένο μέγεθος ή σε ένα ορισμένο μέγεθος πλέγματος. Χρησιμοποιούν διαφορετικές κλάσεις CSS που μπορούν να επιπλέουν και να δημιουργούν τις δικές τους στήλες.
Σύστημα Golden Grid
Το GGS είναι επίσης ένα σύστημα, και όχι ένα «πλαίσιο». Θα ήθελαν να αναφερθούν στον εαυτό τους ως σημείο εκκίνησης ή κατευθυντήρια γραμμή για όσους προσπαθούν να χρησιμοποιήσουν ένα ορισμένο αριθμό πλέγματος στο σχεδιασμό ιστοσελίδων τους. Σας δίνονται 18 στήλες στην οθόνη, αλλά 16 για να το χρησιμοποιήσετε στο σχεδιασμό σας. Κατασκευάζετε τα δικά σας πλάτη και υδρορροές για να τα χρησιμοποιήσετε και ουσιαστικά πηγαίνετε από εκεί.
1140 Grid System
Για κάποιο διάστημα, πολλοί σχεδιαστές χρησιμοποιούν σχέδια ιστού που ήταν 960px ευρύ. Τότε έγινε μικρός και ανέβηκαν. Τώρα πολλά σχέδια αναπτύσσονται με πλάτος 1140px. Αυτό το Σύστημα πλέγματος 1140 σας επιτρέπει να δημιουργήσετε 12 στήλες για χρήση σε ένα ευρύ πλάτος web design.
Twitter Bootstrap
Το Bootstrap είναι ένα από τα πιο δημοφιλή διαθέσιμα πλαίσια. Πρόκειται για ένα πλαίσιο 12 πλέγματος που έχει καταστεί εφικτό σε cross-browser (συμπεριλαμβανομένου του Internet Explorer 7) και μπορεί να χρησιμοποιηθεί με ευκολία σε φορητές συσκευές. Έρχεται με διάφορα εξαρτήματα styling, τυπογραφία και JavaScript για τη χρήση και τη δημιουργία κομψών, διαισθητικών τοποθεσιών.
SimpleGrid
Το SimpleGrid παίρνει την ιδέα των πλέγματος και το απλοποιεί. Με τα περισσότερα συστήματα πλέγματος και πλαίσια, έχετε αυτές τις άγνωστες κατηγορίες και άγνωστες στήλες. Το απλό πλέγμα έχει τάξεις που καθορίζουν ποιες στήλες είναι πρώτες, μεσαίες και τελευταίες. Επιπλέον, μπορείτε να προσθέσετε διαφορετικές 'υποδοχές' στις στήλες για να φανεί ότι υπάρχουν περισσότερες στήλες. Είναι ένα πολύ απλό και απλό πλαίσιο.
Άλλα εργαλεία απόκρισης
Ανταπόκριση φύλλα σκίτσο Web Design
Όπως και κάθε σχεδιαστής ή προγραμματιστής, μπορείτε πιθανώς να σκιαγραφήσετε τα σχέδιά σας προτού προχωρήσετε στην παραγωγή τους. Ας ελπίσουμε ότι το κάνετε. Αν όχι, ίσως πρέπει να ξεκινήσετε χρησιμοποιώντας αυτά τα φύλλα σκίτσων RWD. Έρχονται με διαφορές των συσκευών και των επιτραπέζιων υπολογιστών σε αυτά, ώστε να μπορείτε να σχεδιάσετε τα πάντα.
Ανταπόκριση Sketchbook σχεδίασης
Αν σας αρέσει η ιδέα του σκίτσου σε χαρτί, αλλά θέλετε να έχετε όλα τα dudles σας μαζί, μπορείτε να εξετάσετε το ενδεχόμενο να αποκτήσετε το σχεδιαστικό sketchbook. Έρχεται με 50 σελίδες, σπειροειδείς με διάφορα μεγέθη οθόνης σε κάθε σελίδα. Όλα τα πλέγματα και τα μαθηματικά γίνονται ήδη για εσάς, γι 'αυτό είναι ένα εξαιρετικό εργαλείο για αρχάριους και ειδικούς σε ανταποκρινόμενο σχεδιασμό.
Πλακάκια στυλ
Αυτή είναι μια ωραία μικρή πηγή για τους σχεδιαστές ιστοσελίδων αν ψάχνουν για κάτι για ανταποκρινόμενο σχέδιο ή όχι. Είναι ένα PSD που σας επιτρέπει να πάρετε την ουσία ενός δικτυακού τόπου προσθέτοντας επικεφαλίδες (τυπογραφία), λογότυπα, χρώματα και άλλα στοιχεία. Ο λόγος για τον οποίο αυτό λειτουργεί για την ικανοποιητική σχεδίαση ιστοσελίδων είναι επειδή δεν συνεπάγεται καμία διάσταση, απλώς μια ψηφιακή ιδέα χωρίς περιορισμούς.
Υποστηρικτικός Υπολογιστής
Υπάρχει ένας τόνος μαθηματικών που εμπλέκονται στη δημιουργία τέλειων επιδεικτικών σχεδιασμών pixel. Είναι απαραίτητο και το μαθηματικό σας να είναι σωστό, επειδή θα έχετε να αντιμετωπίζετε διαφορετικά ποσοστά, πλάτη και μεγέθη προγράμματος περιήγησης. Για να βοηθήσετε, εδώ είναι μια αριθμομηχανή που σας δίνει τα σωστά μαθηματικά και το CSS για να το ακολουθήσετε.
συμπέρασμα
Είναι επιτακτική ανάγκη να λάβουμε υπ 'όψιν το τι κάνει το διαδραστικό δίκτυο. Πολλοί πελάτες θα θέλουν να διαθέτουν τους ιστότοπούς τους σε μια ποικιλία συσκευών και είναι απλώς πιο οικονομικό να δημιουργηθούν ανταποκρινόμενες τοποθεσίες. Επιπλέον, τα περισσότερα από τα πλαίσια και οι άλλοι πόροι για την ικανοποιητική σχεδίαση συμβάλλουν πραγματικά στην καλλιέργεια οργανωμένων και υψηλής ποιότητας τυποποιημένων ιστοτόπων.
Ποιοι είναι οι αγαπημένοι σας τρόποι για να ξεκινήσετε σχέδια με ευαισθησία; Έχουμε χάσει έναν πόρο στον οποίο βασίζεστε; Ενημερώστε μας στα σχόλια.