Κατά τον σχεδιασμό του ιστότοπού σας, είναι σημαντικό να βεβαιωθείτε ότι φαίνεται υπέροχος σε οποιαδήποτε συσκευή, ανεξάρτητα από το μέγεθος και το σχήμα της οθόνης. Οι ανταποκρινόμενοι ιστότοποι έχουν σχεδιαστεί για να φαίνονται καλά σε κάθε είδους σύγχρονες συσκευές, όπως υπολογιστές, τηλέφωνα, tablet, τηλεοράσεις, φορετά, ακόμη και οθόνες αυτοκινήτων. Για να κάνετε έναν ιστότοπο ανταποκρινόμενο, θα πρέπει να τροποποιήσετε τον κώδικα CSS και HTML για να αλλάξετε αυτόματα το μέγεθος των στοιχείων του ανάλογα με συγκεκριμένες συνθήκες. Αυτό το wikiHow σας διδάσκει πώς να σχεδιάζετε και να εφαρμόζετε βασικό σχεδιασμό ιστοσελίδων με απόκριση.
Βήματα
Μέθοδος 1 από 3: Σχεδιασμός Responsive Design
Βήμα 1. Μάθετε πώς χρησιμοποιεί το κοινό σας τον ιστότοπό σας
Αυτές τις μέρες, η πλειοψηφία των ανθρώπων που περιηγούνται στον ιστό το κάνουν από κινητά τηλέφωνα και tablet. Για να αποκριθεί ένας ιστότοπος, πρέπει να διασφαλίσετε ότι εμφανίζεται σωστά, ανεξάρτητα από το πού προβάλλεται. Εάν ο χρόνος και τα χρήματα είναι ουσιαστικά, εστιάστε στους τύπους συσκευών που είναι πιο δημοφιλείς στους χρήστες σας (εάν αυτές οι πληροφορίες είναι διαθέσιμες) και πώς χρησιμοποιούν τον ιστότοπό σας. Χρησιμοποιώντας το λογισμικό ανάλυσης ή κάποια άλλη μορφή έρευνας, μάθετε:
- Τι είδους συσκευές χρησιμοποιούν συχνότερα για την προβολή του ιστότοπου, δίνοντας ιδιαίτερη προσοχή στις μάρκες κινητού τηλεφώνου/tablet/υπολογιστή και μεγέθη οθόνης/ανάλυσης.
- Ποια προγράμματα περιήγησης είναι πιο δημοφιλή στους χρήστες σας. Όσον αφορά τις παγκόσμιες στατιστικές, το Google Chrome είναι το πιο δημοφιλές πρόγραμμα περιήγησης ιστού παγκοσμίως, αλλά το Safari βρίσκεται σε δεύτερη μοίρα.
- Πώς χρησιμοποιούν οι επισκέπτες σας τον ιστότοπό σας, όπως πόσο χρόνο αφιερώνουν στην προβολή του, πού τον προβάλλουν και ποιο περιεχόμενο είναι πιο δημοφιλές. Αυτό μπορεί να σας βοηθήσει να προσδιορίσετε ποιο είδος περιεχομένου είναι σημαντικό να συμπεριληφθεί και ποιο μπορεί να παραλειφθεί.
Βήμα 2. Σχεδιάστε διαφορετικές διατάξεις για διαφορετικές συσκευές
Μπορείτε να χρησιμοποιήσετε έναν συνδυασμό CSS και JavaScript για να εντοπίσετε τη συσκευή ενός χρήστη, καθώς και τις δυνατότητές του (αν υποστηρίζει Java, Flash κ.λπ.) και να εμφανίσετε μια συγκεκριμένη έκδοση του ιστότοπού σας ανάλογα. Τα ερωτήματα πολυμέσων CSS είναι ιδιαίτερα χρήσιμα για τον προσδιορισμό του μεγέθους/ανάλυσης της συσκευής.
Βήμα 3. Λογαριασμός διαφορετικών τύπων αλληλεπιδράσεων
Ο επισκέπτης σας μπορεί να αλληλεπιδρά με τον ιστότοπό σας χρησιμοποιώντας ποντίκι, πληκτρολόγιο, οθόνη αφής ή ακόμα και αναγνώστη οθόνης για άτομα με προβλήματα όρασης. Λαμβάνοντας υπόψη αυτό, ο ιστότοπός σας θα πρέπει να ανταποκρίνεται σε κλικ του ποντικιού, πλήκτρα πληκτρολογίου (Tab, Enter, Return κ.λπ.) και αγγίγματα με τα δάχτυλα της οθόνης.
Τα εφέ Hover-over δεν λειτουργούν με τίποτα εκτός από το ποντίκι. Αντί να χρησιμοποιήσετε αυτά τα εφέ, μπορείτε να χρησιμοποιήσετε την απαίτηση από τον επισκέπτη να κάνει κλικ σε ένα κουμπί ή εικονίδιο για να εμφανίσει ό, τι εμφανίστηκε προηγουμένως σε έναν δείκτη του ποντικιού
Βήμα 4. Εξετάστε το ενδεχόμενο χρήσης συστήματος διαχείρισης περιεχομένου (CMS)
Ένας εύκολος τρόπος για να διασφαλίσετε ότι ο σχεδιασμός του ιστότοπού σας ανταποκρίνεται είναι να χρησιμοποιήσετε ένα CMS με ένα προκαθορισμένο αποκριτικό θέμα. Η χρήση ενός CMS όπως το Joomla, το Drupal ή το Wordpress σάς επιτρέπει να διασφαλίσετε ότι ο ιστότοπός σας φαίνεται υπέροχος σε όλες τις συσκευές χωρίς να χρειάζεται να κωδικοποιήσετε μόνοι σας τα αποκριτικά στοιχεία. Επικοινωνήστε με τον πάροχο webhosting για να δείτε ποια εργαλεία CMS είναι διαθέσιμα με την υπηρεσία σας.
Βήμα 5. Χρησιμοποιήστε διαδικτυακά εργαλεία για να δοκιμάσετε τον ιστότοπό σας
Τώρα που η απόκριση σχεδιασμού ιστοσελίδων έχει αυξηθεί σε δημοτικότητα, υπάρχει μια ποικιλία δωρεάν εργαλείων που μπορείτε να χρησιμοποιήσετε για να δοκιμάσετε τον ιστότοπό σας. Εάν έχετε ήδη κωδικοποιήσει τον ιστότοπό σας, χρησιμοποιήστε αυτά τα εργαλεία για να δοκιμάσετε την εμφάνισή του σε διάφορες συνθήκες, ώστε να γνωρίζετε πού πρέπει να βελτιώσετε την απόκριση:
- Δοκιμή για κινητά από την Google: Σας ενημερώνει εάν ο ιστότοπός σας λειτουργεί τόσο καλά σε κινητές συσκευές όσο και στις οθόνες υπολογιστών.
- resizeMyBrowser: Σας επιτρέπει να προβάλλετε τον ιστότοπό σας σε διαφορετικές αναλύσεις.
- Responsiator: Εμφανίζει τον ιστότοπό σας σε διαφορετικές οθόνες συσκευών σε διαφορετικές διατάξεις (πλάγια ή δεξιά).
Μέθοδος 2 από 3: Απόκριση της διάταξης της σελίδας
Βήμα 1. Εξετάστε ένα δωρεάν αποκριτικό πλαίσιο φύλλων στυλ
Ένα πλαίσιο είναι ένα προκαθορισμένο σύνολο HTML, CSS και/ή JavaScript που μπορείτε να χρησιμοποιήσετε ως σκελετό για τον ιστότοπό σας. Τα πλαίσια είναι όλα δοκιμασμένα και βελτιστοποιημένα για να λειτουργούν με όλα τα προγράμματα περιήγησης, οπότε το μόνο που χρειάζεται να κάνετε είναι να εισαγάγετε το περιεχόμενό σας, να προσθέσετε τις προτιμήσεις πολυμέσων και χρωμάτων και να δημοσιεύσετε τον ιστότοπό σας. Μερικά δημοφιλή πλαίσια είναι:
- Bootstrap
- Σκελετός
- θεμέλιο
Βήμα 2. Ορίστε το παράθυρο προβολής με μια μετα -ετικέτα
Εάν δεν χρησιμοποιείτε πλαίσιο, θα πρέπει να ξεκινήσετε με την πιο σημαντική πτυχή της κωδικοποίησης ενός αποκριτικού ιστότοπου: το Viewport. Το παράθυρο προβολής είναι το μέρος του ιστότοπου που είναι ορατό στον χρήστη. Το κλειδί για την σωστή εμφάνιση του ιστότοπού σας ανεξάρτητα από το μέγεθος της οθόνης είναι η κλιμάκωση του μεγέθους της θύρας προβολής στην ετικέτα META. Για να το κάνετε αυτό, συμπεριλάβετε αυτήν την ετικέτα στο επάνω μέρος κάθε σελίδας στον ιστότοπο:
Βήμα 3. Καθορίστε το μέγεθος του κειμένου σε σχέση με το παράθυρο προβολής
Μόλις οριστεί η θύρα προβολής, το κείμενο στη σελίδα σας θα κλιμακωθεί ώστε να ταιριάζει στην οθόνη. Ωστόσο, οι γραμματοσειρές μπορεί να εμφανίζονται πολύ μεγάλες ή πολύ μικρές εάν τα μεγέθη τους δεν καθορίζονται σε σχέση με το παράθυρο προβολής. Μπορείτε να το κάνετε αυτό καθορίζοντας το μέγεθος της γραμματοσειράς ως ένα συγκεκριμένο ποσοστό της θύρας προβολής με τη μονάδα vw. Αυτό το παράδειγμα λέει στις κεφαλίδες H1 να εμφανίζονται στο 10% του πλάτους της θύρας προβολής, ανεξάρτητα από το μέγεθός της:
wikiHow
Βήμα 4. Χρησιμοποιήστε ερωτήματα πολυμέσων για να εμφανίσετε διαφορετικά στυλ για διαφορετικά μεγέθη οθόνης
Τα ερωτήματα πολυμέσων σας επιτρέπουν να επιλέξετε αν θα εμφανίζονται ορισμένα στοιχεία CSS ανάλογα με το μέγεθος της οθόνης. Μπορείτε να καθορίσετε τις λεπτομέρειες του ερωτήματος πολυμέσων στο αρχείο CSS. Σε αυτό το παράδειγμα, το χρώμα φόντου του σώματος θα γίνει κόκκινο εάν το μέγεθος της οθόνης του χρήστη είναι 480 px ή μεγαλύτερο:
wikiHow
οθόνη @media και (min-width: 480px) {body {background-color: aqua; }}
Μέθοδος 3 από 3: Δημιουργία εικόνων που ανταποκρίνονται
Βήμα 1. Χρησιμοποιήστε την ιδιότητα πλάτους CSS για κλιμάκωση εικόνων
Αντί να ορίσετε το πλάτος της εικόνας σε μια συγκεκριμένη ποσότητα εικονοστοιχείων (π.χ., 500px), χρησιμοποιήστε ένα ποσοστό (π.χ., 100%), έτσι ώστε η εικόνα να κοιτάζει το πλάτος του γονέα της και να προσαρμόζεται ανάλογα. Η ρύθμιση του πλάτους μιας εικόνας στο 100% αναγκάζει την εικόνα να κλιμακωθεί πάνω -κάτω ανάλογα με το μέγεθος της οθόνης του θεατή. Για να το κάνετε αυτό σε απευθείας σύνδεση:
Βήμα 2. Χρησιμοποιήστε την ιδιότητα max-width για να περιορίσετε την κλιμάκωση του πραγματικού μεγέθους της εικόνας
Εάν χρησιμοποιείτε την ιδιότητα πλάτους στο προηγούμενο βήμα για να κλιμακώσετε μια εικόνα στο 100%, η εικόνα θα μεγαλώσει ή θα συρρικνωθεί ώστε να χωράει στο 100% του κοντέινερ της, ανεξάρτητα από το μέγεθος. Αυτό σημαίνει ότι εάν η εικόνα είναι στη μικρότερη πλευρά, θα κλιμακωθεί σε μεγαλύτερο βαθμό από το αρχικό της μέγεθος και εμφάνιση μικρότερης ποιότητας. Για να μην συμβεί αυτό, χρησιμοποιήστε το max-width για να ορίσετε το μέγιστο μέγεθος κλίμακας της εικόνας στο 100% (το πραγματικό της μέγεθος). Να πώς:
Βήμα 3. Χρησιμοποιήστε το στοιχείο εικόνας HTML για να εμφανίσετε διαφορετικές εικόνες σε διαφορετικά μεγέθη οθόνης
Εάν θέλετε να δημιουργήσετε εικόνες προσαρμοσμένου μεγέθους για προβολή σε οθόνες διαφορετικού μεγέθους, μπορείτε να καθορίσετε ποιες φωτογραφίες θα εμφανίζονται στον κώδικα HTML σας. Δημιουργήστε εικόνες διαφορετικού μεγέθους και, στη συνέχεια, χρησιμοποιήστε αυτόν τον κώδικα ως παράδειγμα για να καθορίσετε ποια εικόνα θα χρησιμοποιηθεί σε οθόνες πλάτους 600px και 1500px:
