30 Χρήσιμα Απαντητικά Tutorials Σχεδίασης Ιστού
Έτσι φτάσαμε στο τέλος της δικής μας "Αισθητική εβδομάδα Web Design", η σημερινή θέση θα είναι η τελευταία της σειράς. Θα πάμε όλοι έξω για να σας βοηθήσουμε να ακονίσετε τις δεξιότητές σας στο χειρισμό αυτών των κωδικών για να απαντήσετε κατά βούληση όταν εμφανίζονται σε διαφορετικές συσκευές. Και για να το κάνουμε αυτό, είμαστε χαρούμενοι 30 Responsible Tutorials Web Design βρήκε online. Αυτός ο κατάλογος δεν προορίζεται να είναι εξαντλητικός αλλά θα σας ξεκινήσει την κατανόηση των βασικών στοιχείων του σχεδιασμού ενός προσαρμοστικού δικτυακού τόπου που θα εξυπηρετεί όλα τα είδη των μεγεθών οθόνης.
Θα ξεκινήσουμε με εισαγωγικά μαθήματα στο 'Breaking the Ice', κάτι σαν μια κατηγορία RWD: 101 που θα πρέπει να παρακολουθήσετε για να πάρετε το κρέμονται από την ιδέα προτού προχωρήσουμε στις ασκήσεις 'Start Building'.
Τέλος, θα τελειώσουμε με μια ενότητα 'Do More' στην οποία θα παρουσιάσουμε μαθήματα που παίζουν με οριζόντια διάταξη, 'ελαστικά' βίντεο, drop-down μενού και πλοήγησης με αμορτισέρ, μικρογραφίες και το κολλώδες θέμα με τραπέζια.
Αλλά πρώτα…
Ακολουθεί μια ανασκόπηση των δύο εκπαιδευτικών προγραμμάτων που παρουσιάστηκαν νωρίτερα αυτή την εβδομάδα από τους συγγραφείς μας:
Ευαίσθητη ιστοσελίδα Πλοήγηση
Από τον Thoriq Firdaus - [Δείτε φροντιστήριο]
Εδώ είναι ένα σεμινάριο για να σας βοηθήσει να κάνετε τη δική σας ευαίσθητη πλοήγηση ιστοτόπων. Μια από τις πιο σημαντικές πτυχές μιας ιστοσελίδας είναι πόσο εύκολο είναι να πλοηγηθείτε σε διάφορα μέρη του ιστότοπου. Μάθετε πώς να το βελτιστοποιήσετε με το CSS3 με αυτό το σεμινάριο.
Ανταπόκριση Επαναφορά
Από τον Jake Rocheleau - [Δείτε φροντιστήριο]
Εάν είστε επαγγελματίας ιστού και ένα ηλεκτρονικό βιογραφικό είναι ήδη μέρος της καριέρας σας, τότε θα πρέπει να εκμεταλλευτείτε την ευκαιρία για να μετατρέψετε αυτό το βιογραφικό, επίσης. Διευκολύνετε τους εργοδότες και τους πελάτες να σας βρίσκουν σε οποιαδήποτε συσκευή. Και ενώ είστε σε αυτό, το δικό σας βιογραφικό διπλασιάζεται ως χαρτοφυλάκιο του τι μπορείτε να κάνετε ως προγραμματιστής.
Σπάζοντας τον πάγο
Τώρα, πού βρισκόμαστε; Αχ ναι, ας ξεκινήσουμε κάποια παγοδρομία!
Οδηγός για αρχάριους για το Responsive Web Design
Με τον Nick Petit - [Δείτε φροντιστήριο]
Αυτό το σεμινάριο είναι ένα καλό σημείο εκκίνησης για αρχάριους, καθώς περιγράφει ποια είναι η σχεδίαση που ανταποκρίνεται στον ιστό, πώς φάνηκε, καθώς και εξηγήσεις σχετικά με τα πλέγματα υγρών και τα ερωτήματα των μέσων ενημέρωσης μεταξύ άλλων. Ελέγξτε τους πόρους που αναφέρονται στο κάτω μέρος του σεμιναρίου.
Εισαγωγή στον υπεύθυνο σχεδιασμό ιστοσελίδων: Βίντεο
Με τον Nick Petit - [Δείτε φροντιστήριο]
Πρόκειται για ένα σεμινάριο που έχει μήκος περίπου 9 λεπτά και το οποίο απομακρύνει την επιφάνεια του σχετικού σχεδιασμού ιστοσελίδων, πώς συνέβη, του αντίκτυπου που έχει στην σχεδίαση μιας ιστοσελίδας και ποια στοιχεία εμπλέκονται στην παραγωγή ενός ανταποκρινόμενου web design . Αν ψάχνετε να κατανοήσετε τι είναι σχεδιαστεί η σχεδίαση ιστοσελίδων, χωρίς να ξεκινάτε με την κωδικοποίηση, θα πρέπει να ξεκινήσετε με αυτό το βίντεο.
Πώς να μετατρέψετε οποιαδήποτε ιστοσελίδα σε μια ανταποκρινόμενη τοποθεσία
Από τον Ρότσεστερ Ολιβέιρα - [Δείτε φροντιστήριο]
Αυτό είναι ένα άλλο φροντιστήριο που ξεκινά από τα βασικά αλλά σπάει τα πάντα κάτω από λίγο, συμπεριλαμβανομένου του λειτουργικού συστήματος και των φυλλομετρητών που μετατρέπετε τον ιστότοπό σας που ανταποκρίνεται, καθώς και τα στοιχεία που επηρεάζονται όταν ο ιστότοπος προβάλλεται από διαφορετικές συσκευές. Ο συγγραφέας χαρακτήρισε επίσης κάποια χρήσιμα plug-ins του WordPress και του jQuery για να διευκολύνει την εργασία σας.
Ανταπόκριση στο σχεδιασμό σε 3 βήματα
Με τον Νικ Λα - [Δείτε φροντιστήριο]
Αυτό το σεμινάριο θα σας εξηγήσει πώς μπορείτε να δημιουργήσετε ένα ανταποκρινόμενο σχέδιο ιστού με μετα-ετικέτες, δομή HTML και όλες τις σημαντικές ερωτήσεις μέσων. Χρειάζεστε κάποια γνώση του CSS για να το καταλάβετε ...
Σχεδίαση για έναν ανταποκρινόμενο ιστό
Με τον Max Luzuriaga - [Δείτε φροντιστήριο]
Εδώ είναι ένα άρθρο που δεν είναι τόσο ένα φροντιστήριο, καθώς είναι ένας οδηγός για τη δημιουργία ευαίσθητου σχεδιασμού ιστοσελίδων. Τούτου λεχθέντος, ο συγγραφέας σας λέει κυριολεκτικά τα πράγματα και τα πράγματα που δεν ανταποκρίνονται στο σχεδιασμό ιστοσελίδων. Υπάρχουν εξηγήσεις σχετικά με το γιατί ορισμένα χαρακτηριστικά δεν ανταποκρίνονται αρκετά, πώς να δουλεύουν με αναλογίες και ενότητες, και το καλύτερο από όλα είναι σχετικά σύντομο και εύκολο να απορροφηθεί.
Ανταπόκριση Web Design: Ένας οδηγός Visual
Από τον Andrew Gormley - [Δείτε φροντιστήριο]
Εάν τα διδακτικά εγχειρίδια που είναι γεμάτα κείμενο δεν είναι βιώσιμες επιλογές, δοκιμάστε αυτό το εκπαιδευτικό βίντεο. Είναι ακόμα αρκετά τεχνικό, αλλά αν σας κάνει να αισθάνεστε καλύτερα, δεν χρειάζεται να κάνετε πολλά ανάγνωση. Έχει διάρκεια περίπου 25 λεπτών και ο κατασκευαστής βίντεο προχωρά γρήγορα μέσα από τα μέρη όπου κωδικοποιεί, στη συνέχεια πηγαίνει πίσω για να εξηγήσει τι κάνουν οι κώδικες.
Ξεκινήστε την οικοδόμηση
Εντάξει, ας αρχίσουμε να δημιουργούμε κάποια σχέδια που ανταποκρίνονται, ξεκινώντας από ...
Ρευστά πλέγματα
Από τον Ethan Marcotte - [Δείτε φροντιστήριο]
Πείτε το πλέγμα και θα σκεφτόσαστε «άκαμπτες δομές», λέτε ρευστό και θα πίστευε ότι θα μπορούσε να ρέει από τη μια πλευρά της οθόνης στο κάτω μέρος ή στην κορυφή ή στην πλευρά όταν ασκείστε πίεση στο πρόγραμμα περιήγησης, αλλά τα βάζετε μαζί και πιθανότατα θα σκεφτόσαστε ότι πρέπει να εξετάσετε αυτό το σεμινάριο για να εκτιμήσετε πλήρως πώς τα υγρά πλέγματα μπορούν να σας βοηθήσουν να κάνετε το σχέδιό σας πιο ευαίσθητο.
Fluid Images
Από τον Ethan Marcotte - [Δείτε φροντιστήριο]
Μέχρι το τέλος αυτού του άρθρου, θα πρέπει να γνωρίζετε ποιος είναι ο Ethan Marcotte. Εδώ είναι μια υπαινιγμός: είναι αυτός που ήρθε με την έννοια και τον όρο για web responsive σχέδια. Το όνομά του θα εμφανιστεί λίγο πολύ σε κάθε άλλο σεμινάριο αυτής της λίστας, οπότε γιατί να μην πάρετε συμβουλές σχετικά με τις υγρές εικόνες κατευθείαν από τον ίδιο τον Δάσκαλο?.
Ευέλικτα μοτίβα πλοήγησης στον υπεύθυνο σχεδιασμό ιστοσελίδων
Με τον Michael Mesker - [Δείτε φροντιστήριο]
Αυτό το σεμινάριο μιλά για τα διδάγματα που έμαθε ο συγγραφέας από μια εργασία σε ένα μεγάλης κλίμακας σχέδιο ανταποκρίσεων web design. Διαβάστε το "walkthrough" του σχετικά με τον τρόπο δημιουργίας προτύπων τα οποία είναι ευκολότερα διαμορφωμένα για φιλικά προς τον χρήστη και ανταποκρινόμενα αποτελέσματα. Είναι μια υπέροχη ματιά πίσω από τις σκηνές για να κατανοήσετε πώς να σχεδιάσετε διεπαφές με τον καλύτερο τρόπο για προβολές για υπολογιστές, tablet και κινητά.
Ανταπόκριση σχεδιασμού ιστοσελίδων με ερωτήματα μέσων CSS3 Media
Με τον Νικ Λα - [Δείτε φροντιστήριο]
Και ένα άλλο εξαιρετικό φροντιστήριο για να σας κάνει να μάθετε πώς να σχεδιάζετε ένα πρότυπο ιστότοπου που ανταποκρίνεται στον φυλλομετρητή με HTML5 και CSS3. Πρόκειται για μια προσέγγιση βήμα προς βήμα και υπάρχουν demos ενός σχεδιασμού ιστοσελίδων πριν και μετά την εφαρμογή των ερωτημάτων των μέσων ενημέρωσης για να εκτιμήσουν καλύτερα τον αντίκτυπο των ερωτημάτων των μέσων μαζικής ενημέρωσης.
Εφαρμογές CSS: Εικόνες χώρου έξω για να αντιστοιχίσουν το ύψος κειμένου
Από τη Ζωή Μίλκεϊ Γιλλέντγουερ - [Δείτε φροντιστήριο]
Αυτό το σεμινάριο σας κάνει να μάθετε το τέχνασμα της λήψης εικόνων σταθερού πλάτους αλλάζοντας το μέγεθος και την απόσταση τους, ώστε να ευθυγραμμιστεί με το συνοδευτικό κείμενο, ανεξάρτητα από το μέγεθος του παραθύρου του προγράμματος περιήγησης.
Προσαρμοσμένες διατάξεις με ερωτήματα μέσων
Από τον Ααρών Γκουστάφσον - [Δείτε φροντιστήριο]
Μάθετε πώς να χρησιμοποιείτε προσαρμοστικές ή ευέλικτες διατάξεις με ερωτήματα μέσων CSS. Απλά ακολουθήστε την άσκηση για να μάθετε να προσαρμόσετε το σχέδιό σας σε προβολή διπλής στήλης ή προβολή μονής στήλης, καθώς και να προετοιμάσετε το σχέδιο για το iPhone και το iPad.
Ανταπόκριτες εικόνες: Πειραματισμός με το μέγεθος του μεγέθους εικόνας που λαμβάνει υπόψη το περιβάλλον
Από τον Scott Jehl - [Δείτε φροντιστήριο]
Ακολουθεί ένα σεμινάριο που χρησιμοποίησε την προσέγγιση build-από-mobile-first. Αυτή η τεχνική καθορίζει ένα μεγαλύτερο μέγεθος για τις εικόνες που μπορούν να χρησιμοποιηθούν σε μεγαλύτερες αναλύσεις οθόνης, μείον αιτήσεις εικόνας καθώς και UA sniffing.
Κάνει περισσότερα
Ελαστικά βίντεο
Με τον Νικ Λα - [Δείτε φροντιστήριο]
Αυτό το σεμινάριο ασχολείται με την κλιμάκωση των βίντεο καθώς αλλάζει το μέγεθος του παραθύρου του προγράμματος περιήγησης. Είναι ουσιαστικά ένα τέχνασμα CSS και υπάρχει ένα demo για να δείτε το κόλπο στην εργασία στο ίδιο το σεμινάριο.
Απόκρυψη και αποκάλυψη μερών εικόνων
Από τη Ζωή Μίλκεϊ Γιλλέντγουερ - [Δείτε φροντιστήριο]
Το σεμινάριο λαμβάνεται πραγματικά από το βιβλίο του συγγραφέα, περιγράφοντας τον τρόπο αποκάλυψης ή απόκρυψης τμημάτων εικόνων ανάλογα με τις αναλύσεις οθόνης. Σας διδάσκει πώς να περικόψετε δυναμικά τις εικόνες όταν αλλάζει το μέγεθος της οθόνης, δείχνοντας μόνο μέρος της πλήρους εικόνας όταν υπάρχει περιορισμένος χώρος.
Ευαίσθητος Περιηγητής Περιεχομένου με CSS3
Με τη Μαίρη Λου - [Δείτε φροντιστήριο]
Προτιμήστε έναν πιο φτηνό τρόπο για τους χρήστες να περιηγούνται γύρω σας; Στη συνέχεια, θα πρέπει να διαβάσετε αυτό το σεμινάριο για να μάθετε πώς να κωδικοποιήσετε σε μερικές δροσερές μεταβάσεις: ξεθωριάζει, διαφάνειες, περιστροφές και κλιμάκωση. Οι μεταβάσεις είναι ουσιαστικά στρώματα περιεχομένου που παρουσιάστηκαν ή αποκρύπτονταν με συγκεκριμένη κωδικοποίηση.
Δημιουργήστε ένα ευαίσθητο πρότυπο σχεδίασης ιστοσελίδων
Με τον Χάρι Άτκινς - [Δείτε φροντιστήριο]
Αυτό είναι ένα σύντομο φροντιστήριο για την παραγωγή ενός ανταποκρινούς πρότυπο ιστού που λειτουργεί τόσο στην επιφάνεια εργασίας όσο και στο iPhone.
Ανταπόκριση οριζόντιας διάταξης
Με τη Μαίρη Λου - [Δείτε φροντιστήριο]
Αυτό το σεμινάριο σας διδάσκει πώς να δημιουργήσετε μια οριζόντια διάταξη με διάφορα πλαίσια με δυνατότητα κύλισης. Χρησιμοποιώντας Η καταγωγή των ειδών ως δείγμα κειμένου, κάθε κεφάλαιο του βιβλίου χωρίζεται σε στήλες τοποθετημένες το ένα δίπλα στο άλλο σε πλήρη λειτουργία προγράμματος περιήγησης, αλλά όταν μειώνεται σε αρκετά μικρό μέγεθος, η διάταξη αλλάζει σε ένα πλήρως κατακόρυφο βιβλίο κύλισης,.
Μετατροπή ενός μενού σε μια μείωση για μικρές οθόνες
Από τον Chris Coyier - [Δείτε φροντιστήριο]
Αυτό το σεμινάριο θα σας δείξει πώς να μετατρέψετε ένα μενού σε μια αναπτυσσόμενη λίστα όταν το παράθυρο του προγράμματος περιήγησης είναι στενό ή όταν βρίσκεστε σε μια κινητή συσκευή. Η σειρά συνδέσεων στην επάνω δεξιά γωνία της σελίδας μετατρέπεται σε αναπτυσσόμενο μενού για εξοικονόμηση χώρου χωρίς να θυσιάζονται επιλογές πλοήγησης.
Ευέλικτη Ακρόαση Slide-to-Top
Με τη Μαίρη Λου - [Δείτε φροντιστήριο]
Μάθετε πώς μπορείτε να δημιουργήσετε μια απλή και ευέλικτη διάταξη ακορντεόν, με μεταβάσεις με ξεθώριασμα και ρυθμιζόμενα πλάτη ανάλογα με το μέγεθος και την ανάλυση της οθόνης.
Πώς να χρησιμοποιήσετε τα ερωτήματα μέσων εστίασης CSS3
Από τον Ryan Seddon - [Δείτε φροντιστήριο]
Με βάση τον απλό κανόνα που καθορίζει τις καταστάσεις πορτρέτου (ύψος μεγαλύτερο από πλάτος) και τοπίο (πλάτος μεγαλύτερο από ύψος), μπορείτε να γράψετε ένα ερώτημα μέσων για να στοχεύσετε συγκεκριμένα στυλ με βάση τη λειτουργία στην οποία βλέπετε. Αυτό το σεμινάριο θα μας δείξει πώς να το κάνουμε ακριβώς αυτό και έρχεται πλήρης με ένα σύνδεσμο σε ένα chameleon που αλλάζει χρώματα που χρησιμοποιεί χρώμα για να επιδείξει αυτή την αλλαγή καθώς συρρικνώνετε το παράθυρο του προγράμματος περιήγησης.
Ανταπόκριτοι πίνακες δεδομένων
Από τον Chris Coyier - [Δείτε φροντιστήριο]
Οι πίνακες αποτελούν πηγή πονοκεφάλων όταν πρόκειται για μικρά μεγέθη οθόνης, αλλά αυτό δεν σημαίνει ότι πρέπει να αποφύγουμε τους πίνακες. Μάθετε πώς να χρησιμοποιείτε τα ερωτήματα μέσων για να μετατρέψετε πλήρως τις μορφές αλλαγής τραπέζης όταν αλλάζετε σε μεγέθη οθόνης για κινητά. Δείτε το demo για να πάρετε μια ιδέα για τη μαγεία που μπορείτε να κάνετε με βάση αυτό το σεμινάριο.
Εμφάνιση διαφανειών υγρού CSS3 με αποτέλεσμα Parallax
Με δαχτυλίδι δαχτυλίδι - [Δείτε φροντιστήριο]
Δημιουργήστε μια παρουσίαση CSS3 όπου χρησιμοποιούνται δύο εικόνες φόντου και όταν αλλάζουν οι θέσεις των φόντων, εμφανίζεται ένα φαινόμενο parallax. Εκτός από αυτό, το slideshow είναι ευέλικτο, αλλάζοντας το μέγεθος, καθώς κλείνει το παράθυρο του προγράμματος περιήγησης.
Πώς να δημιουργήσετε μια ευαίσθητη συλλογή μικρογραφιών
Από τον Joshua Johnson - [Δείτε φροντιστήριο]
Αυτό είναι ιδανικό για ιστότοπους που διαθέτουν μικρογραφίες σε μια γκαλερί. Καθώς το παράθυρο του προγράμματος περιήγησης αλλάζει μέγεθος, η διάταξη αλλάζει ώστε να καταλαμβάνει μεταξύ δύο στηλών (μικρότερα μεγέθη οθόνης) και πέντε (μέγιστων) στηλών. Για περισσότερες παρόμοιες slideshows και ρυθμιστικά, δείτε τα Top 10 Ελεύθερα Ευαίσθητα Αρχεία Galleries / Slideshows.
Βελτιστοποίηση του μηνύματος ηλεκτρονικού ταχυδρομείου σας για κινητές συσκευές
Με τον Ροτ Χότζεκις - [Δείτε φροντιστήριο]
Ακόμα και τα μηνύματα ηλεκτρονικού ταχυδρομείου μπορούν να βελτιστοποιηθούν για προβολή μικρής οθόνης όπως είναι οι ιστοτόποι. Τις περισσότερες φορές το κείμενο σε ένα μήνυμα ηλεκτρονικού ταχυδρομείου HTML μετατρέπεται σε ένα σημείο που δεν γίνεται για άνετη ανάγνωση. μάθετε πώς να διαχειριστείτε αυτό και πολλά άλλα από αυτό το σεμινάριο.
χρησιμοποιώντας πλαίσια
Δημιουργήστε μια υπεύθυνη για κινητά ιστοσελίδα με Skeleton
Από τον Joshua Johnson - [Δείτε φροντιστήριο]
Το Skeleton είναι ένα φοβερό πλαίσιο για την ανάπτυξη ανταποκρινόμενων ιστοσελίδων μαζί του. Αυτό το σεμινάριο θα σας οδηγήσει σε ένα βήμα προς βήμα οδηγό για το πώς να χρησιμοποιήσετε πλαίσιο Σκελετός για να οικοδομήσουμε εκπληκτικά σχέδια που ανταποκρίνονται. Θα εκπλαγείτε για να δείτε πόσο εύκολο είναι να υλοποιηθεί.
Ανταποκρινόμενος Σχεδιασμός Ιστού με HTML5 & Λιγότερο Πλαίσιο 3
Με τον Louis Simoneau - [Δείτε φροντιστήριο]
Εάν δεν έχετε εισαχθεί σωστά στο Less, τότε ελέγξτε πρώτα το δικό μας Less CSS tutorial για να πάρετε μια γεύση του Less. Σε αυτό το σεμινάριο, το πλαίσιο "Λιγότερα" χρησιμοποιήθηκε για να σας επιτρέψει να δείτε καθαρά τα αποτελέσματα των ερωτημάτων των μέσων ενημέρωσης.
συμπέρασμα
Και αυτό κλείνει μας Σχεδιασμός ιστοσελίδων προσαρμοζόμενος σε συσκευές σειρά. Ελπίζουμε ότι τα θέματα, τα εργαλεία και οι άλλοι πόροι που περιλαμβάνονται σε αυτή τη σειρά βοήθησαν στην παρουσίαση της έννοιας του ανταποκριτικού σχεδιασμού ιστοσελίδων στους αναγνώστες μας. Αλλά πώς θα ξέρουμε αν δεν μας πείτε?
Ενημερώστε μας τα σχόλιά σας στη σειρά και αν έχετε προτάσεις για περισσότερες ιδέες που θέλετε να δείτε στο hongkiat.com. Αφήστε μας μια γραμμή ή ένα σχόλιο παρακάτω.
