Η προσαρμοστική σχεδίαση ιστότοπου είναι ένα βολικό σύστημα για την εμφάνιση του ίδιου ιστότοπου σε διαφορετικούς τύπους συσκευών στο διαδίκτυο. Με απλά λόγια, αυτή είναι η δυνατότητα προβολής μιας ιστοσελίδας σε φορητό υπολογιστή, smartphone και άλλα gadget.
Η ανταπόκριση στον ιστό έχει γίνει αναγκαιότητα από τότε που οι άνθρωποι απέκτησαν gadget διαφόρων μορφών με δυνατότητα σύνδεσης στο Διαδίκτυο. Εταιρείες, ηλεκτρονικά καταστήματα, ακόμη και απλώς ενημερωτικοί ιστότοποι προσπαθούν να ευχαριστήσουν το κοινό τους, προσαρμόζοντας σε αυτό με κάθε δυνατό τρόπο. Ο ανταποκρινόμενος σχεδιασμός λύνει το πρόβλημα της ευκολίας, επομένως είναι ένα απαραίτητο αντικείμενο εργασίας.
Χαρακτηριστικά του Responsive Web Design
Η ευκολία του σχεδιασμού χαρακτηρίζεται από πολλά βασικά κριτήρια.
- Μέγεθος. Ο αποκριτικός σχεδιασμός ιστότοπου θα πρέπει να έχει μικρές διαφορές κατά την εμφάνιση της σελίδας σε διαφορετικές συσκευές, επομένως τα μεγέθη των εικόνων, του κειμένου και άλλων στοιχείων που προβάλλονται πρέπει να αντιστοιχούν στα μεγέθη των ίδιων των συσκευών. Για να γίνει αυτό, οι προγραμματιστές ιστού προσαρμόζουν τη σχεδίαση έτσι ώστε να έχει εκδόσεις πολλαπλών προβολών.
- Προσαρμογή περιεχομένου. Υλικό που γεμίζει τον ιστότοπο (εικόνες, βίντεοκαι άλλα στοιχεία πολυμέσων) πρέπει επίσης να ταιριάζουν με τις απαιτούμενες αναλύσεις οθόνης χωρίς να χάνεται η ποιότητα της οθόνης.
- Ευελιξία σχεδιασμού. Συμπερίληψη στην ανάπτυξη στοιχείων που σας επιτρέπουν να προσαρμόζετε γρήγορα τη σχεδίαση του ιστότοπου όταν αλλάζετε την ιστοσελίδα που βλέπετε. Για παράδειγμα, ο χρήστης κάνει κύλιση στη σελίδα προς τα πάνω και προς τα κάτω, περιηγείται σε διάφορες ενότητες ή αλλάζει τη θέση της οθόνης από κάθετη σε οριζόντια και αντίστροφα.
- Απλοποιήστε τα στοιχεία ανά συσκευή για καλύτερη χρηστικότητα.
- Απόκρυψη ασήμαντων μπλοκ σε μικρότερες οθόνες.
Βασικά
Η δημιουργία ιστοσελίδων σχετίζεται σίγουρα με τις γλώσσες προγραμματισμού, γιατί απλά δεν μπορείτε χωρίς αυτές. Χρησιμοποιώντας HTML και CSS, το πρόγραμμα περιήγησης αναγνωρίζει τη σύνθεση και τη σειρά των αντικειμένων (κείμενα, εικονογραφήσεις, βίντεο) - έτσι σχηματίζεται ο ιστότοπος.
Η CSS είναι υπεύθυνη για το χρώμα, τα στυλ, τα μεγέθη, τις γραμματοσειρές, τις στοίχιση, την επένδυση, τα στοιχεία φόντου, τις φόρμες κ.λπ. Η HTML είναι υπεύθυνη για το συνολικό περιεχόμενο και τη δομή του ιστότοπου. Έτσι, ένας πόρος Ιστού δημιουργείται στο σύνολο των δύο πιο σημαντικών μεθόδων περιγραφής.
Το CSS, από την άλλη πλευρά, είναι ένα απαραίτητο εργαλείο σχεδιασμού. Διαθέτει ένα μεγάλο σύνολο δυνατοτήτων που είναι ανώτερες από την HTML:
- Παρέχει συνέπεια σχεδιασμού σε πολλές σελίδες, εμφάνιση ιστότοπου και ελέγχει την εμφάνιση εγγράφων HTML.
- Σας δίνει την ευκαιρία να κάνετε σχεδιασμό και περιεχόμενο ταυτόχρονα.
- Εφαρμόζει πολλά στυλ και τη δυνατότητα ναπροβολή σε διαφορετικές συσκευές.
- Λήψη σύνθετων σχεδιαστικών αποφάσεων.
- Χαρακτηρίζεται από υψηλή ταχύτητα.
Για να αναπτύξετε έναν ιστότοπο, πρέπει να γνωρίζετε ορισμένες βασικές έννοιες.
Ένας επιλογέας CSS υποδηλώνεται με το όνομα ενός στυλ που ορίζει ιδιότητες και επιλογές μορφοποίησης. Λέει στο πρόγραμμα περιήγησης σε ποιο συγκεκριμένο στοιχείο εφαρμόζονται οι ιδιότητες.
Ένα ακίνητο είναι μια δομική μονάδα. Καθορίζει εξωτερικές παραμέτρους (μέγεθος, τοποθεσία, χρώμα, σχήμα κ.λπ.) και εκφράζεται σε συγκεκριμένο κωδικό.
Υπάρχει ένα σύνολο καθορισμένων ιδιοτήτων CSS που περιγράφουν ένα μεμονωμένο αντικείμενο σε εμφάνιση και τοποθεσία.
Μαζί, αυτά τα στοιχεία σχηματίζουν το ακόλουθο σχήμα:
Επιλογέας { ιδιοκτησία1: τιμή; ιδιοκτησία2; τιμή }.
Μεγέθη και αναλύσεις διάταξης
Η ανάπτυξη σχεδίασης ξεκινά με την προετοιμασία της διάταξης στο Photoshop ή σε άλλα προγράμματα γραφικών. Για ευκολία, εισάγονται ειδικές σημάνσεις του αρθρωτού πλέγματος στον καμβά, παρατηρούνται ειδικές εσοχές. Έτσι, ο σχεδιαστής ιστοσελίδων δείχνει στον σχεδιαστή διάταξης τις αρχές της δομής του μελλοντικού ιστότοπου και τη σωστή διάταξη των στοιχείων Ιστού.
Αποκριτικές αναλύσεις και μεγέθη σχεδίασης ιστού για κύριους τύπους συσκευών:
- Αυτός ο σχεδιασμός τηρεί την αρχή της έναρξης εργασίας με άδεια κινητής τηλεφωνίας. Η διάταξη για το smartphone δημιουργείται σε μέγεθος 460 × 960 px.
- Το μέγεθος διάταξης tablet είναι 768 × 1024.
- Το μέγεθος του σημειωματάριου είναι 1280 × 802.
- Το μέγεθος υπολογιστή είναι 1600 × 992.
Στην έκδοση για κινητά του ιστότοπουθα πρέπει να είναι όσο το δυνατόν πιο απλοποιημένη, διατηρώντας παράλληλα όλες τις κύριες λειτουργίες. Εάν η διάταξη προετοιμάζεται για ένα ηλεκτρονικό κατάστημα, με όλη την απλοποίηση στη χρήση, θα πρέπει να έχει μια κύρια περιγραφή, έναν κατάλογο προϊόντων, μια επιλογή παραγγελίας, ένα καλάθι αγορών κ.λπ. - όλα τα απαραίτητα στοιχεία για την πλήρη λειτουργία, όπως και με την προβολή πλήρους μορφής σε υπολογιστή. Η ευκολία της έκδοσης για κινητά είναι ότι εδώ μπορείτε να αποφύγετε επιπλέον σελίδες για να εξοικονομήσετε χρόνο κατά τη φόρτωση.
Σε προσαρμοστικό περιεχόμενο, χρησιμοποιώντας κώδικα html, μπορείτε να αποκρύψετε ορισμένα στοιχεία που δεν χρειάζονται πραγματικά. Για παράδειγμα, σε υψηλή ανάλυση, ο ιστότοπος εμφανίζει μια κάρτα προϊόντος με την περιγραφή, την τιμή, τα στοιχεία παράδοσης και τη δυνατότητα προσθήκης στο "Καλάθι". Σε ανάλυση κινητού, η διαδικασία απλοποιείται σε μια φωτογραφία, μια τιμή και ένα κουμπί αγοράς.
Μεσαίες και ελάχιστες αναλύσεις για αποκριτική σχεδίαση θα πρέπει να λαμβάνουν υπόψη την ευκολία ανάγνωσης και προβολής από τον χρήστη.
Διάταξη
Ο σκοπός της προσαρμοστικής διάταξης σχεδίασης είναι η δημιουργία μιας ευέλικτης διάταξης ή όπως συνηθίζεται να λέμε: "λάστιχο πρότυπο". Η ουσία δεν είναι σε μονοψήφια μεγέθη σελίδας, αλλά στην αναλογική συμπιεστότητα του προτύπου για εύκολη προβολή σε όλες τις συσκευές.
Είναι χτισμένο κυρίως σε CSS. Κατά την ανάπτυξη, προσδιορίζονται τα σημεία ελέγχου των διαστάσεων της οθόνης. Έτσι, προσδιορίζεται το πλάτος των υπολοίπων αντικειμένων. Για να γίνει αυτό, το πλάτος της σελίδας ορίζεται από την ιδιότητα css max-width, ανάλογα με αυτά τα κριτήρια, το μέγεθος των άλλων στοιχείων επιλέγεται ως ποσοστό. Για παράδειγμα, το μέγεθος του μπλοκ στο κύριοη σελίδα είναι 600 εικονοστοιχεία και το πλάτος του μπλοκ πλαϊνής γραμμής (πλευρική γραμμή ιστότοπου) είναι 400 εικονοστοιχεία, αντίστοιχα, το πλάτος περιεχομένου θα είναι 60% και το πλάτος της πλευρικής γραμμής 40%.
Υπάρχουν διάφοροι τύποι αποκριτικών διατάξεων. Το καθένα επιλέγεται ξεχωριστά, ανάλογα με τα χαρακτηριστικά και την κατασκευή.
Προβολές:
- Ένας τύπος διάταξης που επιτρέπει στα μπλοκ να τυλίγονται όταν μειώνεται η ανάλυση οθόνης. Σε ιστότοπους με πολλές στήλες, επιπλέον μπλοκ μετακινούνται στο κάτω μέρος της οθόνης.
- Όταν επεξεργάζεται ένα ξεχωριστό μοτίβο για κάθε άδεια. Αυτός ο τύπος σχεδίασης με απόκριση διαρκεί περισσότερο, αλλά είναι ο πιο ευανάγνωστος.
- Ένας απλός τύπος σχεδίασης που στοχεύει στην κλιμάκωση όλων των στοιχείων. Δεν είναι ευέλικτο.
- Ο τύπος πίνακα είναι βολικός για χρήση σε εφαρμογές για κινητά, όταν εμφανίζονται πρόσθετες λειτουργίες κατά την αλλαγή της θέσης της ίδιας της οθόνης.
Η δημιουργία επιπέδων απόκρισης είναι μόνο ένα μέρος της εργασίας. Οι προσαρμοστικές εικόνες είναι μια ξεχωριστή περίπτωση, η οποία έχει τα δικά της προβλήματα και μεθόδους επίλυσής τους.
Η μεμονωμένη εικόνα πρέπει να εμφανίζεται καθαρά σε διαφορετικές αναλύσεις οθόνης. Υπάρχει ένα πρόβλημα εδώ - πώς να βεβαιωθείτε ότι η εικόνα παραμένει πάντα η ίδια, ανεξάρτητα από την αλλαγή στην ανάλυση. Η εισαγωγή ενός απλού κωδικού CSS σε αυτήν την περίπτωση δεν θα είναι αρκετή.
Παράδειγμα: img {max-width: 250px;} - εδώ θα πρέπει να εφαρμόσετε μια μέθοδο στην οποία το μέγεθος του κοντέινερ που περιέχει την εικόνα είναι περιορισμένο και όχι η ίδια η εικόνα. Θα μοιάζει κάπως έτσι: div img {max-width: 250px;}. Αυτή η μέθοδος λύνει το πρόβλημαδιάταξη μικρών εικόνων, αλλά δεν είναι κατάλληλη για μεγάλες απεικονίσεις.
Ως εκ τούτου, πολλοί προγραμματιστές προτιμούν να χρησιμοποιούν γλώσσες javascript που σας επιτρέπουν να προσαρμόσετε οποιαδήποτε εικόνα χωρίς να υπερφορτώνετε τον διακομιστή. Η Javascript προσφέρει μεγάλο αριθμό εναλλακτικών σεναρίων.
Πλεονεκτήματα και μειονεκτήματα της αποκριτικής διάταξης
Θετικά:
- Αποθηκεύστε τη θέση όλων των στοιχείων. Αυτό είναι βολικό όταν ο χρήστης είναι συνηθισμένος στην πλήρη έκδοση του ιστότοπου.
- Αποθήκευση τομέων και διευθύνσεων.
- Πλήρης προσαρμογή για άλλες μορφές δικαιωμάτων.
Αρνητικά:
- Η λειτουργική ευελιξία χάθηκε
- Οποιαδήποτε πληροφοριακή υπερφόρτωση είναι γεμάτη με μια μακρά εκκίνηση ενός πόρου ιστού, που αναγκάζει πολλούς χρήστες να αλλάξουν σε πιο γρήγορες επιλογές.
Δημιουργία ιστότοπου
Η δομή του ιστότοπου χωρίζεται σε πολλές ενότητες και μπλοκ. Παραδοσιακά, η διάταξη αποτελείται από το επάνω μέρος του ιστότοπου (κεφαλίδα), το λογότυπο, το μενού, το μπλοκ περιεχομένου και το τελικό μέρος του ιστότοπου (για παράδειγμα, λεπτομερή στοιχεία επικοινωνίας). Ας δούμε πώς να δημιουργήσετε μια αποκριτική σχεδίαση ιστότοπου από ένα απλό πρότυπο.
Βοηθητικές ετικέτες για γραφή:
- wrapper - ετικέτα που συνδυάζει όλα τα στοιχεία προτύπου;
- header h1 - logo;
- header - κεφαλίδα για το μενού και άλλα σημαντικά στοιχεία;
- περιεχόμενο - αποκλεισμός;
- colLeft - μέγεθος περιεχομένου;
- colRight - sidebar (πλευρική στήλη);
- footer - το τελευταίο μέρος του ιστότοπου;
- οθόνη πολυμέσων - σετεπιθυμητή ανάλυση.
Όταν γράφετε έναν ιστότοπο, αυτά τα στοιχεία μπορούν να μετακινηθούν με διαφορετική σειρά, ανάλογα με την ανάγκη. Για παράδειγμα, σε υψηλές αναλύσεις, το μενού μπορεί να εμφανίζεται κάθετα. Στην έκδοση για κινητά, η διάταξη μπορεί να κατασκευαστεί με τέτοιο τρόπο ώστε το μενού να ολισθαίνει σε οριζόντια θέση.
- viewport - μια ετικέτα που σας επιτρέπει να αποθηκεύσετε το μέγεθος του κειμένου σε μια μικρότερη έκδοση του σχεδίου. Βρίσκεται ανάμεσα στις ετικέτες.
- max-width - για βελτιστοποίηση του ιστότοπου ώστε να αποφευχθεί η επέκταση σε αναλύσεις άνω των 1000 pixel.
Κατά την υλοποίηση της διάταξης, η βιβλιοθήκη jQuery βοηθάει πολύ όταν χρειάζεται να αλλάξετε το στυλ και τη δομή των μπλοκ.
Ποια είναι η διαφορά μεταξύ του responsive και του mobile design
Για πλήρη κατανόηση, εξετάστε μερικά επεξηγηματικά παραδείγματα, καθώς η σύγχυση μεταξύ αυτών των δύο εννοιών δεν είναι ασυνήθιστη.
Πρέπει να καταλάβετε ότι η έκδοση για κινητά είναι ανάλογη του κύριου ιστότοπου με υποτομέα. Η εξωτερική παρουσίαση του ιστότοπου επαναλαμβάνει πλήρως το ύφος και τη λειτουργικότητα, ενώ η δομή και το περιεχόμενό του ενδέχεται να διαφέρουν από την κύρια έκδοση, αφού η έκδοση περιορίζεται στα απαραίτητα στοιχεία.
Η απόκριση σχεδίαση είναι η βέλτιστη για όλες τις αναλύσεις συσκευών. Είναι επεκτάσιμο και αποδίδεται σωστά ανεξάρτητα από τις συνθήκες προβολής.
Πρόκειται για δύο διαφορετικές παρουσιάσεις του ιστότοπου, γύρω από τις οποίες μαίνονται ακούραστα διαφωνίες ποια είναι καλύτερη. Να σημειωθεί ότι δεν έχει ληφθεί ακόμη οριστική απόφαση. Κάποιος επαινεί αυτό το σχέδιο, επισημαίνοντας την τάση της μόδας και πολλά πλεονεκτήματα. Η έκδοση για κινητά έχει επίσης αρκετά πλεονεκτήματα που δεν έχει η responsive σχεδίαση. Επομένως, για αρχή, θα πρέπει να κατανοήσετε τις βασικές ανάγκες.
Πλεονεκτήματα
Πώς είναι καλύτερος ο αποκριτικός σχεδιασμός από το κινητό;
Πολυχρηστικότητα. Στην εποχή μας, με μια τέτοια φρενήρη ανάπτυξη της αγοράς, είναι απλά απαραίτητο να παρουσιάζουμε πληροφορίες με διαφορετικό τρόπο, ικανοποιώντας τις επιθυμίες των καταναλωτών. Ο αποκριτικός σχεδιασμός λύνει αυτό το πρόβλημα.
Αποτελεσματική προώθηση στις μηχανές αναζήτησης. Τι δεν μπορεί να αποδοθεί στα κύρια πλεονεκτήματα μιας προσαρμοστικής συσκευής. Οι μηχανές αναζήτησης προτιμούν να παρέχουν στους χρήστες ιστοτόπους που αποκρίνονται.
Χρησιμότητα. Ο αποκριτικός σχεδιασμός σχεδιάζεται συνήθως με τις καλύτερες σχεδιαστικές λύσεις, κάτι που είναι ένα ωραίο δώρο για την οπτική αντίληψη των χρηστών.
Ευκολία και απλότητα τόσο στην υλοποίηση του έργου όσο και στη χρήση του.
Καλά ποσοστά μετατροπών. Δεδομένου ότι με την προσαρμοστική σχεδίαση υπάρχουν περισσότερες ευκαιρίες για εμφάνιση, η ίδια η μετατροπή αυξάνεται.
Οικονομία. Είναι σχετικά φθηνότερο από τη δημιουργία και την προώθηση μιας ξεχωριστής έκδοσης για κινητά.
Πλεονεκτήματα και μειονεκτήματα της έκδοσης για κινητά
Η δημιουργία ενός σχεδιασμού για κινητά που αποκρίνεται απαιτεί ευελιξία και συνέπεια. Πρώτα απ 'όλα, συνιστάται να γράψετε λεπτομερώς τους όρους αναφοράς, οι οποίοι, φυσικά, θα σας βοηθήσουν να αποφύγετε περιττή εργασία και να εξοικονομήσετε χρόνο, καθώς και να λάβετε υπόψη τις δυνατότητες του διακομιστή στον οποίο θα φιλοξενηθεί ο ιστότοπος.
Υπάρχουν ορισμένα πλεονεκτήματα και μειονεκτήματα στον αποκριτικό σχεδιασμό για κινητά.
Πλεονεκτήματα:
- Εάν έχετε έτοιμο ιστότοπο, δεν χρειάζεται να αναπτύξετε ένα σχέδιο για την έκδοση για κινητά από την αρχή. Μπορούν να γίνουν μόνο μερικές αλλαγές, απελευθερώνοντας αυτήν τη διάταξη από μη απαιτούμενη λειτουργικότητα.
- Λόγω όλων των ειδών απλοποιήσεων, η έκδοση για κινητά θεωρείται ταχύτερη κατά τη λήψη.
- Ο χρήστης βλέπει την πιο σημαντική πληροφορία σε όλο το περιεχόμενο.
- Γρήγορη υλοποίηση. Υπάρχουν πρόσθετα με τα οποία μπορείτε να εφαρμόσετε προσαρμογή για κινητά, ακόμα κι αν δεν γνωρίζετε ετικέτες και κωδικούς.
- Οι επιλογές μηχανών αναζήτησης ευνοούν τις προσαρμοστικές εκδόσεις επειδή χρειάζονται λιγότερο χρόνο για την ανάλυση.
Μειονεκτήματα:
- Μπορεί να μην αντιστοιχούν όλες οι εκδόσεις για κινητά τις αναλύσεις κινητής συσκευής. Ο ιστότοπος, φυσικά, θα ανοίξει, αλλά η ανάλυση της οθόνης δεν ταιριάζει πάντα με τη διάταξη. Μερικές φορές μια καλοσχεδιασμένη σχεδίαση smartphone μπορεί να φαίνεται διαφορετική όταν ανοίγει ως tablet.
- Οι εκδόσεις για κινητά απαιτούν ξεχωριστούς τομείς επί πληρωμή.
- Υπάρχουν ορισμένα μικρά ζητήματα με τη δημοσίευση περιεχομένου. Εάν υπάρχουν πολλές εκδόσεις ταυτόχρονα, το περιεχόμενο θα πρέπει να προσαρμοστεί για όλες τις μορφές ταυτόχρονα. Η υποβολή νέου υλικού στον κεντρικό ιστότοπο και η αντιγραφή του στην έκδοση για κινητά μπορεί να θεωρηθεί κλοπή. Για να αποφύγετε αυτό το πρόβλημα, ίσως χρειαστεί να αποδείξετε τη σύνδεση των πόρων.
Μέθοδοι υλοποίησης
Κύριες μέθοδοι υλοποίησης:
- Μετά τη δημιουργία του σχεδιασμού των διατάξεων και της διάταξης, φορτώνεται στις απαιτούμενες διαστάσεις χρησιμοποιώνταςτοποθεσία χειριστή και κύριο κωδικό. Αυτή είναι μια κλασική μέθοδος που χρησιμοποιείται κατά τη δημιουργία μεσαίων και μικρών εκδόσεων (tablet, smartphone κ.λπ.).
- Το BootStrap είναι ένα απλό και σαφές σύνολο εργαλείων προσαρμογής. Κατάλληλο για τη δημιουργία εκδόσεων για Landing Page και άλλα όχι πολύ περίπλοκα web projects. Δίνει μια καλή ευκαιρία να εφαρμόσετε πολλά διαφορετικά στυλ σε λειτουργίες διεπαφής.
- Το Responsive Grid System είναι ένα δημοφιλές σύνολο ευέλικτων εργαλείων. Εύκολο στην εφαρμογή και δεν απαιτεί βαθιά γνώση. Περιλαμβάνει μια μεγάλη ποικιλία από infographics.
- GUMBY - Ένα πλαίσιο CSS που διαθέτει ευέλικτη απόκριση και εξαιρετικά εργαλεία.
- Cookies - σας επιτρέπει να εφαρμόζετε εικόνες που αποκρίνονται. Συνοδεύει αυτόματα αρχεία που ζητούνται από το πρόγραμμα περιήγησης.
- Το ExpressionEngine είναι ένας άλλος τρόπος δημιουργίας εικόνων με απόκριση. Καθορίζει εάν η συσκευή είναι φορητή, ικανή να αλλάξει τις εικόνες στην απαιτούμενη ανάλυση.
- ProtoFluid - Παρέχει γρήγορη δημιουργία πρωτοτύπων. Κατάλληλο για όλα τα είδη συσκευών.
