Πώς να φτιάξετε μια responsive ιστοσελίδα; Εδώ μπορείτε να λάβετε πληροφορίες σχετικά με αυτήν την προσαρμοστική τεχνική που βασίζεται στα σημερινά μοντέλα ιστού, πράγμα που σημαίνει ότι με ένα μόνο σχέδιο, μια πύλη Ιστού μπορεί να προσπελαστεί και να προβληθεί σωστά από οποιονδήποτε υπολογιστή ή ηλεκτρονική συσκευή.
¿Πώς να φτιάξετε έναν Responsive Ιστότοπο?
Είναι πολύ βολικό να κάνετε έναν ιστότοπο να ανταποκρίνεται ή να είναι ευαίσθητος σε πιθανές προσαρμογές. Εκτός από την εγγύηση της επιτυχίας της σωστής εργασίας στο διαδίκτυο από οποιαδήποτε ηλεκτρονική πλατφόρμα. Στις παρακάτω γραμμές, αποσαφηνίζεται ο τρόπος δημιουργίας ενός ανταποκρινόμενου ιστού, ο οποίος συλλαμβάνεται από την ίδια τη φύση της προσαρμοστικότητας των ιστοσελίδων. Επομένως, όταν σχεδιάζετε μια ιστοσελίδα με το αποκριτικό μοντέλο, η εμφάνιση ή η εικόνα του εν λόγω ιστού θα μπορεί να προσαρμοστεί και να δει ανάλογα με την ηλεκτρονική συσκευή που χρησιμοποιείται για πλοήγηση.
Κανείς δεν αγνοεί την πολύμορφη ποσότητα εξοπλισμού ή ηλεκτρονικών συσκευών που υπάρχουν επί του παρόντος για την πλοήγηση στο Διαδίκτυο, όπως: υπολογιστές, tablet, smartphone, φορητοί υπολογιστές κ.λπ. Στις πρώτες μέρες του Διαδικτύου, οι προγραμματιστές ιστοτόπων συνήθισαν να δημιουργούν σελίδες με κοινό πλάτος pixel. Για παράδειγμα, τη δεκαετία του '90, οι οθόνες που υπήρχαν είχαν ένα μέγεθος οθόνης 14" με σταθερό πλάτος 640 pixel. Οι σχεδιαστές ιστοσελίδων προσάρμοσαν τα σχέδιά τους στις τυπικές διαστάσεις των μόνων οθονών που υπήρχαν.
Κοντά στις αρχές του 2000 και μέχρι την άφιξη της δεκαετίας του 2010, τα μοντέλα οθόνης και τα πλάτη των εικονοστοιχείων διέφεραν. Ο σχεδιασμός ιστοσελίδων προσαρμόστηκε σε κάθε μία από τις παραλλαγές. Ήταν από το έτος 2010 που συνέβη η μεγάλη τεχνολογική επανάσταση, προκαλώντας μια ανισορροπία στο σενάριο σχεδιασμού ιστοσελίδων. Η πλοήγηση μέσω κινητής τηλεφωνίας εισήχθη στον τομέα του Διαδικτύου. Αυτή η νέα τηλεφωνία χρησιμοποιούσε προγράμματα περιήγησης όπως ένας υπολογιστής. Με αυτή τη μεγάλη τεχνολογική επανάσταση, ήρθε η ώρα να προχωρήσουμε σε αυτό που είναι γνωστό ως Responsive Design ή Adaptive Design ιστοσελίδων.
Η σημασία της γνώσης πώς να δημιουργήσετε ένα Responsive Web
Είναι τόσο σημαντικό οι προγραμματιστές ιστοσελίδων να γνωρίζουν πώς να δημιουργούν έναν ανταποκρινόμενο ιστό. ότι ακόμη και η εταιρεία μεγάλου κύρους στο διαδίκτυο Google το υποδεικνύει ως κάτι εξαιρετικά απαραίτητο. Επειδή μια ιστοσελίδα που έχει σχεδιαστεί με το μοντέλο απόκρισης επιτρέπει τη βελτιστοποίηση πλοήγησης, αποφεύγει το διπλότυπο περιεχόμενο και παρέχει μια εξαιρετικά σταθερή ποιότητα εικόνας. Άλλες πτυχές που είναι σημαντικές κατά τη δημιουργία ενός responsive ιστότοπου είναι:
- Με μία μόνο προσαρμογή της γλώσσας σήμανσης υπερκειμένου (HTML) και της γλώσσας CSS, μπορεί να επιτευχθεί η κάλυψη οποιασδήποτε ανάλυσης οθόνης. Αποφεύγοντας έτσι τη δημιουργία μιας ιστοσελίδας για κάθε τύπο συσκευής που σας επιτρέπει να την επισκεφτείτε ή να την περιηγηθείτε. Αυτή η πτυχή μειώνει επίσης τον χρόνο σχεδιασμού.
- Προσαρμόζεται αυτόματα κατά την περιήγηση, καθιστώντας δυνατή την ανάγνωση και την αλληλεπίδραση σε κάθε συγκεκριμένη επίσκεψη.
- Καταφέρνουν να τοποθετηθούν καλύτερα και πιο γρήγορα στις μηχανές αναζήτησης. Επειδή αυτός ο τύπος σχεδίασης αποφεύγει τις επικαλύψεις και τις ανακατευθύνσεις.
- Οι ιστοσελίδες που δημιουργούνται με αυτόν τον σχεδιασμό επιτρέπουν στο περιεχόμενό τους να γίνεται viral πιο γρήγορα, λόγω του αρχικού και απλού τρόπου κοινής χρήσης τους.
Τι είναι ένα Responsive Web Design
Το Responsive web design, γνωστό και ως adaptive web design, είναι ένας τρόπος σχεδιασμού ή ανάπτυξης ιστοσελίδων. Αυτό το σύστημα έχει την ιδιαιτερότητα να επιτρέπει την επίσκεψη ή την πρόσβαση στον ιστότοπο που δημιουργήθηκε με ένα ενιαίο σχέδιο από οποιονδήποτε υπολογιστή ή ηλεκτρονική πλατφόρμα. Το όνομα responsive είναι ένας αγγλικός όρος που αναφέρεται σε κάτι που ανταποκρίνεται, προσαρμόζεται, γίνεται αντιληπτό, ορατό κ.λπ.
Αυτή η τεχνική λαμβάνει αυτό το όνομα λόγω της ικανότητας αυτού του τύπου ιστότοπου να προσαρμόζεται σε κάθε μέτρηση πλάτους οθόνης. Δυνατότητα εμφάνισης και σωστής λειτουργίας, χωρίς να γίνεται διάκριση ως προς τη συσκευή που χρησιμοποιείται για την πλοήγηση.
Αυτό είναι δυνατό χάρη στην οργάνωση των εικόνων και του περιεχομένου, καθώς και στην απλότητα του ανταποκρινόμενου μενού web. Τα τέσσερα κύρια κριτήρια που καθορίζουν και κάνουν αυτόν τον τύπο σχεδίασης ιστοσελίδων πολύ δημοφιλή είναι ότι είναι:
- Απλός
- Οικονομικά
- Γρήγορα
- Και πάνω από όλα τα παραπάνω, είναι πλήρως λειτουργικά
Πώς να φτιάξετε ένα Responsive Design Web και η πολυπλοκότητά του
Η πολυπλοκότητα όσον αφορά τη σχεδίαση και την ανάπτυξη ιστοσελίδων, μπορούμε να πούμε ότι προέκυψε από τη δεκαετία του 2010, όταν άρχισαν να εμφανίζονται στη σκηνή του Διαδικτύου κινητά τηλέφωνα με πλοήγηση. Το οποίο χρησιμοποιούσε προγράμματα περιήγησης όπως Google, Firefox, Explorer, μεταξύ άλλων, ακριβώς όπως ένας υπολογιστής. Με αυτόν τον τρόπο νέες δυνατότητες επίσκεψης στις διάφορες ιστοσελίδες. Σε αυτούς τους καιρούς άρχισαν να εμφανίζονται και τα πρώτα ηλεκτρονικά tablet με πρόσβαση στο διαδίκτυο.
Από εκεί και πέρα οι ανάγκες για το σχεδιασμό ιστοσελίδων έγιναν πιο περίπλοκες. Λόγω της μεγάλης ποικιλίας μεγεθών οθόνης που υπήρχαν για την προβολή και λειτουργία ιστοσελίδων. Έπρεπε να βρείτε έναν τύπο σχεδίασης που να λειτουργεί για κάθε τύπο συσκευής και να προσαρμόζεται αυτόματα.
Δεν θα μπορούσατε πλέον να σχεδιάζετε για μία, δύο ή τρεις μεγάλες αναλύσεις οθόνης. Ήταν απαραίτητο να καταλάβουμε ότι οι αναλύσεις των συσκευών θα ήταν ολοένα και πιο μεταβλητές, εκτός από το ότι θα ήταν πολύ μικρότερες από μια οθόνη υπολογιστή.
Αυτή η στιγμή σήμανε το τέλος της ακαμψίας του web design. Και όχι μόνο στη μεγάλη ποικιλία συσκευών, αλλά και καθεμία από αυτές έχει συγκεκριμένα χαρακτηριστικά, όπως:
- Μέγεθος οθόνης
- Ανάλυση οθόνης
- Ισχύς CPU
- Sistema operativo
- Χωρητικότητα μνήμης μεταξύ άλλων.
Στη συνέχεια εισάγεται το νέο μοντέλο σχεδίασης ιστοσελίδων, στόχος του οποίου είναι ότι με ένα μόνο σχέδιο, η σωστή οπτικοποίηση του θα ήταν δυνατή ανεξάρτητα από τη συσκευή περιήγησης. Ωστόσο, η ανάπτυξη αυτού του τύπου ιστότοπου έχει τον βαθμό πολυπλοκότητάς της.
Ποιος είναι ο λόγος για την πολυπλοκότητα της ανάπτυξης ενός Responsive Web;
Η ανάπτυξη ενός ιστότοπου με τον σχεδιασμό προσαρμοστικότητας που ονομάζεται responsive έχει τον βαθμό πολυπλοκότητάς του, ακόμη και σήμερα. Λόγω δύο βασικών αιτιών, οι οποίες αναφέρονται παρακάτω:
1-Είναι μια τεχνολογία που δεν έχει αναπτυχθεί εδώ και πολύ καιρό και λόγω των πολλαπλών μέσων εφαρμογής, δεν κατέστη δυνατό να προσδιοριστεί ποια μπορεί να είναι η καλύτερη από όλες τις επιλογές. Πάντα αναδύονται καινοτομίες όσον αφορά αυτόν τον τύπο σχεδιασμού ιστοσελίδων που πρέπει να αναπτύσσεται κάθε στιγμή. Ως εκ τούτου, είναι δύσκολο να καθοριστεί το καλύτερο πλαίσιο ή η καλύτερη τεχνολογία υποστήριξης, ούτε ένας γενικός κανόνας που να διασφαλίζει τη λύση στον μεγαλύτερο αριθμό πιθανών εμποδίων. Προκειμένου να γίνει πιο εύκολη η ανάπτυξη αυτού του τύπου ιστότοπου.
2- Η δεύτερη αιτία είναι ότι το σύστημα προσαρμοστικού σχεδιασμού δεν βασίζεται αποκλειστικά από την τεχνολογική άποψη. Όσον αφορά τον τρόπο με τον οποίο ο ιστότοπος θα διαφέρει ανάλογα με τις διαφορετικές οθόνες ή συσκευές. Αντίθετα, πρέπει να σχεδιαστεί με μια ιδέα για το πώς θα λειτουργήσει σε κάθε ένα από τα πιθανά σενάρια πλοήγησης. Αυτή η αιτία προσθέτει ένα υψηλό επίπεδο πολυπλοκότητας στο αποκριτικό μοντέλο σχεδίασης ιστοσελίδων που πρέπει να εκκαθαριστεί από τα άτομα που εργάζονται ως προγραμματιστές τοποθεσιών.
Η άσκηση και η απόκτηση αρκετών δεξιοτήτων για να εργαστείτε με προσαρμοστικά ή ανταποκρινόμενα σχέδια ιστού απαιτεί περισσότερο χρόνο από ό,τι με οποιοδήποτε άλλο είδος σχεδίασης ιστοσελίδων. Ελπίζεται όμως ότι, με την πρόοδο στον τομέα των υπολογιστών, ο βαθμός πολυπλοκότητας θα είναι μικρότερος. Προκειμένου να εξελιχθεί περαιτέρω από αυτή την άποψη, από προσωπικό με γνώσεις ιστότοπου που ασχολούνται με τους τύπους responsive σχεδίων, επαγγελματικό προσωπικό όπως:
- Διατάξεις
- Σχεδιαστές
- Προγραμματιστές
- Εμπορικό και ψηφιακό προσωπικό μάρκετινγκ
Μειώστε το χρόνο σχεδίασης
Εάν επιλυθούν οι δύο προηγούμενες αιτίες, ίσως αυτό να μειώσει την περίοδο ανάπτυξης ή δημιουργίας ενός ανταποκρινόμενου ιστού. Ταυτόχρονα είναι δυνατό να διατεθεί για χρήση των συνηθισμένων ιστοσελίδων.
Εν τω μεταξύ, σε σχέση με αυτό που έχουμε σήμερα, ίσως είναι πιο γρήγορο να αναπτύξουμε ένα νέο σχέδιο ιστού για κινητές συσκευές από την αρχή. να μεταμορφώσει ή να επανασχεδιάσει τον ιστό για να τον κάνει προσαρμόσιμο ή να αποκρίνεται. Πάντα θα υπάρχει η ελπίδα ότι μια μέρα κάποιος θα βρει τρόπο να το κάνει και να το πετύχει, ας το ελπίζουμε.
Εν τω μεταξύ, τι μπορεί να γίνει;
Το γεγονός ότι εξακολουθεί να είναι πολύ περίπλοκο να επανασχεδιάζουμε έναν ολόκληρο ιστότοπο που έχουμε στο διαδίκτυο, για να τον κάνουμε προσαρμόσιμο. Δεν σημαίνει ότι σταματάμε να κάνουμε κάποιες μικρές αλλαγές στον ιστότοπο. Για να το βελτιώσουμε και να το κάνουμε να ανταποκρίνεται στην προσαρμογή σε διαφορετικά προγράμματα περιήγησης καθώς και σε διαφορετικές ηλεκτρονικές συσκευές.
Το πρώτο πράγμα που πρέπει να κάνετε είναι να επαληθεύσετε τον τύπο σχεδίασης ιστού που έχει ο ιστότοπος πλοήγησης. Κυρίως έλεγχος:
- Η διάταξη της ιστοσελίδας
- Ποια είναι η δομή του από άποψη Html και CSS
Αναλύοντας αυτά τα δύο βασικά σημεία, μπορεί να διαπιστωθεί ότι μπορούν να γίνουν μικρές τροποποιήσεις για τη βελτίωση της ιστοσελίδας.
Προηγούμενες σκέψεις που πρέπει να λάβετε υπόψη για να μάθετε πώς να δημιουργήσετε έναν Responsive Web
Εάν έχετε ήδη μια πύλη ιστού, μια σελίδα προορισμού ή ένα ιστολόγιο περιεχομένου, το οποίο αναπτύχθηκε με συνηθισμένο σχεδιασμό και θέλετε να το μετατρέψετε σε ιστότοπο σχεδιασμού με απόκριση ή προσαρμοστικότητα. Απλώς παίρνεις την απόφαση και κάνεις το πρώτο βήμα για να την πετύχεις, παίρνεις την απόφαση να το κάνεις!
Το γεγονός της μετατροπής μιας ιστοσελίδας από συμβατική σχεδίαση σε responsive δεν σημαίνει ότι θα χαθεί όλη η αρχική δουλειά. Επειδή δεν θα απορριφθεί όλο το περιεχόμενο, αλλά θα υποστεί μικρές και μικρές αλλαγές σε αυτό. Περιεχόμενο όπως εικόνες, κείμενα και κάποιο άλλο στοιχείο του υπάρχοντος ιστότοπου μπορεί να χρησιμοποιηθεί και να λειτουργήσει σωστά με τον μετασχηματισμό.
Ωστόσο, αντιμετωπίζοντας την εναλλακτική της προσαρμογής και της βελτίωσης της τοποθεσίας, είναι βολικό να γνωρίζουμε κάποιες εκ των προτέρων εκτιμήσεις που θα ευνοήσουν την εργασία που θα αναληφθεί.
Ελέγξτε το υπάρχον Web Movement
Πριν πραγματοποιήσετε οποιεσδήποτε αλλαγές στον υπάρχοντα ιστό, συνιστάται να επαληθεύσετε την επισκεψιμότητα που έχει. Δηλαδή τα στατιστικά σχετικά με τον αριθμό των ατόμων που επισκέπτονται την ιστοσελίδα. Με βάση αυτές τις πληροφορίες, θα εργαστούμε για την τροποποίηση του σχεδιασμού, με σκοπό να έχουμε μεγαλύτερη επιτυχία και καλύτερη θέση αναζήτησης. Στον επανασχεδιασμό και την προσαρμογή του ιστού είναι βολικό να γνωρίζετε για το Εργαλεία SEO, γιατί είναι οι καλύτεροι όταν πρόκειται για καλύτερη τοποθέτηση στο δίκτυο.
Μια καλή έμπνευση είναι απαραίτητη
Καλό είναι επίσης να ρίξετε μια ματιά και να κάνετε ένα ανάλυση ανταγωνιστών ή σελίδες με περιεχόμενο παρόμοιο με τον ιστότοπο στον οποίο θα εφαρμοστούν οι αλλαγές προς ένα responsive web design. Αυτή η προεπισκόπηση προορίζεται για τη διεξαγωγή έρευνας για πιθανές βελτιώσεις περιεχομένου. Αλλά και πώς λειτουργούν αυτές οι παρόμοιες σελίδες σε διαφορετικές συσκευές. Οι πτυχές που πρέπει να λαμβάνονται υπόψη για την επιλογή των τοποθεσιών που μπορούν να αποτελέσουν έμπνευση ή μοντέλα στις βελτιώσεις. Θα είναι η ευκολία πλοήγησης σε αυτές τις σελίδες και σε εκείνες που απαιτούν λιγότερο ζουμ ή κύλιση. Εδώ μπορείτε να βρείτε τα καλύτερα κόλπα για Βελτιώστε το SEO για να πετύχετε καλό περιεχόμενο Εφαρμόστε τα!
Σημασιολογικές εύνοιες Html
Η χρήση σημασιολογικού Html υποδηλώνει ότι η διάταξη του αρχικού ιστότοπου δημιουργήθηκε σωστά. Αυτό ευνοεί ή βοηθάει πολύ, γιατί χρησιμοποιήθηκαν μόνο τα βασικά στοιχεία Html. Έχοντας κατά νου στην ανάπτυξη του Ιστού, τη σημασιολογία κάθε ετικέτας πάνω από τη σχεδίαση του ίδιου ιστού. Αφήνοντας στο CSS τη δική του δουλειά του σχεδίου, σύμφωνα με τις κλάσεις και τα ID.
Κατά τη διαδικασία δημιουργίας ενός responsive ιστότοπου, στοιχεία όπως:
- DIV
- P
- UL
- LI, μεταξύ άλλων
Ωστόσο, εάν είναι απαραίτητο να συμμορφωθείτε με το βήμα της απαλλαγής ολόκληρου του σχεδιασμού του μοντέλου. Επειδή δεν μπορείτε να χρησιμοποιήσετε ένα παρεμβατικό CSS, δηλαδή, μην χρησιμοποιείτε κανένα χαρακτηριστικό Style στον κώδικα. Δεδομένου ότι όσο πιο εκλεπτυσμένο και με λιγότερα DIV είναι το Html, θα σας βοηθήσει να κάνετε πιο εύκολη την εκτέλεση των προσαρμογών ή να κάνετε τον ιστό πιο ευαίσθητο. Επειδή το CSS θα βελτιωθεί στο αποτέλεσμα που προκύπτει.
Ρυθμίστε σωστά το ζουμ για το πώς να δημιουργήσετε έναν ιστότοπο με απόκριση
Συνιστάται η σωστή επιλογή ζουμ σε προγράμματα περιήγησης για κινητά, προκειμένου να επιτευχθεί η πλήρης εμφάνιση των ιστοσελίδων. Τα προγράμματα περιήγησης σε κινητές συσκευές προϋπήρχαν πριν αρχίσει να αναπτύσσεται ο αποκριτικός σχεδιασμός ιστού. Για την πλήρη προβολή ιστοτόπων σε αυτές τις συσκευές, τα προγράμματα περιήγησης πρέπει να καταφεύγουν σε εργαλεία ζουμ. Έτσι, όταν έχετε πρόσβαση σε έναν παραδοσιακά σχεδιασμένο ιστότοπο από φορητή συσκευή. Η φυσική ανάλυση του κινητού δεν θα φαίνεται, αλλά θα εμφανίζεται μια προσαρμογή που πραγματοποιείται από ένα εργαλείο ζουμ μέχρι να προσαρμοστεί σε πλάτος 960 pixel.
Επειδή δεν υπήρχε άλλος τρόπος να γίνει, οι προγραμματιστές δημιουργούσαν Html που πραγματοποιούσε την αλλαγή ή την προσαρμογή του ζουμ. Αυτός είναι ο τρόπος με τον οποίο, κατά την εκτέλεση της προσαρμογής της ανάλυσης στις συσκευές, πρέπει να πούμε στην ομάδα να χρησιμοποιήσει άλλο τύπο κλιμάκωσης. Ένας κατάλληλος τύπος για χρήση είναι η μετα-ετικέτα γνωστή ως θύρα προβολής, η οποία εισάγεται στην κεφαλίδα του ιστότοπου. Με αυτήν τη μετα-ετικέτα μπορείτε να αναλύσετε τη διαδικασία που θα εκτελέσει το πρόγραμμα περιήγησης στον μετασχηματισμένο ιστό. Δείτε την ακόλουθη σύνταξη, γραμμένη κατά λέξη:
Αυτή η συμβολική διάταξη της μετα-ετικέτας της θύρας προβολής είναι αυτή που χρησιμοποιείται συχνότερα στο responsive web design. Ωστόσο, υπάρχουν πολλές άλλες διαμορφώσεις που μπορούν να χρησιμοποιηθούν για αυτό το σκοπό. Μόνο που η σύνταξη που παρουσιάζεται περιέχει δύο μεταβλητές που κάνουν το πρόγραμμα περιήγησης για κινητά να προσαρμοστεί στον ιστό και όχι το αντίστροφο. Αυτές οι μεταβλητές είναι:
Συσκευή-πλάτος ή πλάτος της συσκευής
Η μεταβλητή πλάτος=πλάτος συσκευής περιλαμβάνεται στη διαμόρφωση έτσι ώστε το πλάτος σε pixel της οθόνης να ταιριάζει με το πλάτος της κινητής συσκευής. Με αυτόν τον τρόπο εμφανίζεται η ανάλυση του ίδιου του κινητού.
Προκειμένου να παρέχεται η καλύτερη δυνατή χρήση, τα προγράμματα περιήγησης για κινητά εμφανίζουν τη σελίδα παρόμοιο με το πλάτος μιας οθόνης επιφάνειας εργασίας. Αυτό το πλάτος μπορεί να διαφέρει ανάλογα με την κινητή συσκευή. Αλλά συχνά είναι συνήθως ένα από περίπου 980 pixel. Στη συνέχεια, επιδιώκει να βελτιστοποιήσει την εμφάνιση του περιεχομένου μεγεθύνοντας το μέγεθος της γραμματοσειράς, καθώς και αλλάζοντας την κλίμακα περιεχομένου ώστε να ταιριάζει στην οθόνη της συσκευής.
Αυτό θα μπορούσε να κάνει τους χρήστες να το βρουν κάπως ασυνάρτητο ή μπερδεμένο και, στη συνέχεια, να πρέπει να πατήσουν δύο φορές για μεγέθυνση για να αλληλεπιδράσουν με το περιεχόμενο. Χρήση της μεταβλητής μετα-ετικέτας θύρας προβολής: width=device-width απαιτεί μια ενέργεια στη διάταξη για να προσαρμόσετε το πλάτος. Με τέτοιο τρόπο ώστε η σελίδα να μπορεί να προσαρμόσει ξανά το περιεχόμενο ώστε να ταιριάζει σε διαφορετικές διαστάσεις οθόνης, είτε εμφανίζεται σε μικρό κινητό τηλέφωνο είτε σε οθόνη υπολογιστή.
Initial-Scale ή Initial Scale
Η μεταβλητή αρχικής κλίμακας= περιλαμβάνεται στη διαμόρφωση για τον προσδιορισμό μιας σχεσιακής κλίμακας μεταξύ των εικονοστοιχείων CSS και των εικονοστοιχείων κινητών, ανάλογα με τη συσκευή. Στη διαμόρφωση που φαίνεται παραπάνω, υποδεικνύεται για την αρχική κλίμακα: αρχική κλίμακα=1.0. Εδώ η σύνταξη υποδεικνύει ότι η αναλογία μεταξύ των εικονοστοιχείων είναι 1:1, ένα εικονοστοιχείο CSS διαβάζεται σε ένα εικονοστοιχείο συσκευής. Στη συνέχεια δίνεται η εντολή στο πρόγραμμα περιήγησης για κινητά να υιοθετήσει αυτήν την τιμή για το ζουμ και θα είναι αυτή που θα χρησιμοποιηθεί από τη συσκευή. Ωστόσο, ας δούμε τις ακόλουθες δύο επιλογές:
- Όταν η μεταβλητή αρχικής κλίμακας είναι ίση με 1.0, αναφέρεται σε μια οθόνη χωρίς ζουμ, επειδή είναι ένα προς ένα.
- Ενώ εάν αρχική κλίμακα = 2.0, η μεταβλητή αναφέρεται σε μεγέθυνση διπλάσιου μεγέθους σε ολόκληρη τη σελίδα.
Επομένως, η κατάλληλη επιλογή για χρήση σε έναν ιστότοπο σχεδιασμένο να ταιριάζει στο πλάτος ενός κινητού θα ήταν η πρώτη. Αυτό λέει στη συσκευή να μην εφαρμόζει κανένα ζουμ. Αλλά επίσης, μπορεί να υπάρχουν περιπτώσεις στις οποίες η καλύτερη επιλογή θα είναι να μην συμπεριληφθεί ή να μην εφαρμοστεί αυτή η μεταβλητή. Αφήνοντας έτσι ότι το ίδιο κινητό είναι αυτό που προσαρμόζει από μόνο του το ζουμ, στο πλάτος που έχει υποδειχθεί στο σχέδιο.
Βασικές διαμορφώσεις θυρών προβολής – Παραδείγματα εφαρμογών:
Είτε έχετε πλάτος 500 pixel και δίνεται μια εντολή αρχικής κλίμακας, ο ιστός αποκτά την εμφάνιση πλάτους οθόνης 500 pixel. Ωστόσο, στο κινητό, η αρχική του διαμόρφωση θα εμφανίζεται με μια κατά προσέγγιση ισοδύναμη αναλογία 320 pixel από τα 500 συνολικά pixel του Ιστού.
Τώρα, εάν, από την άλλη πλευρά, δεν δοθεί μια σειρά αρχικής κλίμακας, εμφανίζεται ολόκληρος ο ιστός, δηλαδή τα 500 pixel, κάτω από ένα προσαρμοσμένο ζουμ. Η σύνταξη αυτών των δύο τυπικών διαμορφώσεων της ετικέτας θύρας προβολής θα είναι ως εξής:
Η προηγούμενη διαμόρφωση θα ήταν για έναν ιστότοπο με αποκριτικό σχεδιασμό κατάλληλα προσαρμοσμένο στην ανάλυση για κινητά. Ενώ για έναν ιστότοπο που δεν έχει προσαρμοστεί πλήρως στην ανάλυση για κινητά, η διαμόρφωση θα είναι η εξής:
Εκτός από τις τυπικές, υπάρχουν και κάποιες άλλες διαμορφώσεις. Ένα από αυτά είναι να σχεδιάσετε μια ιστοσελίδα με το πλάτος ενός κινητού, εφαρμόζοντας ζουμ. Αλλά αυτό το είδος σχεδίασης θα ήταν πολύ περίεργο και μπερδεμένο για τον χρήστη.
Πώς να δημιουργήσετε έναν ανταποκρινόμενο ιστότοπο - Τα ερωτήματα πολυμέσων
Όταν θέλετε να μάθετε πώς να δημιουργήσετε έναν αποκριτικό ιστότοπο ή μια προσαρμόσιμη σελίδα, θα πρέπει να γνωρίζετε ότι πρέπει να εφαρμόσετε το σύστημα που είναι γνωστό ως ερωτήματα πολυμέσων. Αυτή η τεχνική σάς επιτρέπει να δημιουργήσετε, μέσω μιας συνθήκης, διαφορετικά σχήματα ή στυλ ανάλογα με την ανάλυση της οθόνης. Τι είναι όμως τα Media Query;
Τα ερωτήματα πολυμέσων
Τα ερωτήματα πολυμέσων είναι μια τεχνική που συνίσταται στη δημιουργία προτάσεων CSS. Με το οποίο μπορείτε να κάνετε δηλώσεις που ισχύουν για σχέδια ιστοσελίδων, εφόσον πληρούνται ορισμένες προϋποθέσεις που έχουν ήδη δοθεί ή έχουν καθοριστεί. Αυτές οι δηλώσεις ερωτημάτων μέσων μπορούν βασικά να εφαρμοστούν σε δύο σημεία στον Ιστό:
- Αρχικά, στην κλήση προς το αρχείο CSS, προσδιορίζοντας σε κάθε ένα ποιες είναι οι προϋποθέσεις για να το φορτώσει. Παράδειγμα:
- Δεύτερον, στο ίδιο αρχείο CSS, δημιουργώντας έναν ξεχωριστό χώρο όπου περιλαμβάνονται κλάσματα CSS που θα χρησιμοποιηθούν. Παράδειγμα:
οθόνη @media και (ελάχ. πλάτος: 320 εικονοστοιχεία) και (μέγ. πλάτος: 480 εικονοστοιχεία){
/*Δηλώσεις στυλ για αυτό το εύρος πλάτους */
Στην πραγματικότητα, τα ερωτήματα πολυμέσων είναι ένα ισχυρό εργαλείο που επιτρέπει τη δυνατότητα να εγκαταλείψουμε το responsive web design, για να αναλάβουμε άλλα διαφορετικά ζητήματα εντός του web. Αξίζει να τεκμηριωθεί αργότερα, λίγα περισσότερα για αυτήν την τεχνική των ερωτημάτων μέσων.
Εν τω μεταξύ, προς το παρόν αρκεί να γνωρίζουμε δύο σημεία σχετικά με το σύστημα ερωτημάτων μέσων:
- Ο τρόπος για να κάνετε τις δηλώσεις των ερωτημάτων μέσων στο αρχείο CSS
- Τρόπος ενημέρωσης με την προικοδότηση της τεχνικής ερωτημάτων πολυμέσων στα παλιομοδίτικα προγράμματα περιήγησης στο Διαδίκτυο
Δήλωση ερωτήματος μέσων
Σε προηγούμενες παραγράφους ήταν δυνατό να παρατηρηθούν οι δύο τρόποι εκτέλεσης των ερωτημάτων μέσων. Πρώτον σε μια εξωτερική σελίδα στυλ και ο δεύτερος τρόπος για να γράψετε απευθείας στη σελίδα στυλ.
Στο πλαίσιο του τρόπου δημιουργίας μιας αποκριτικής σχεδίασης ιστοσελίδων, θα πρέπει να γίνει κατανοητό ότι ένα ερώτημα μέσων είναι μια δήλωση CSS που χρησιμοποιείται ως δείκτης που πρέπει να γνωρίζετε πότε πρέπει να γίνει μια άλλη δήλωση στυλ με βάση τις μετρήσεις ή τις τιμές του κινητού ή άλλη συσκευή όπου θα εμφανίζεται ο ιστός.
Παράδειγμα, ο τρόπος δήλωσης ενός κλάσματος CSS, το οποίο βρίσκεται μέσα σε ένα υπό όρους που ορίζεται από ένα ερώτημα μέσων, έχει την ακόλουθη συντακτική διαμόρφωση:
οθόνη @media και ([CONDITION]) {
/* Οι νέοι μας κανόνες με αυτό το πλάτος οθόνης ή λιγότερο */
}
Ομοίως, ανάλογα με το πλάτος της οθόνης, μπορούν να δημιουργηθούν τρεις τύποι δηλώσεων ερωτήματος μέσων. Έτσι μπορείτε να είστε σίγουροι για την αίτησή σας σε κάθε περίπτωση
-Η πρώτη δήλωση πρέπει να εφαρμόζεται μόνο σε εκείνες τις αναλύσεις που είναι μικρότερες από πλάτος pixel = X:
οθόνη @media και (μέγιστο πλάτος:[WIDTH]px) {
/* Οι νέοι μας κανόνες με αυτό το πλάτος οθόνης ή λιγότερο */
}
-Η δεύτερη δήλωση πρέπει να εφαρμόζεται μόνο σε εκείνες τις αναλύσεις που είναι μεγαλύτερες από πλάτος pixel = X:
οθόνη @media και (ελάχ. πλάτος:[WIDTH]px) {
/* Οι νέοι μας κανόνες με αυτό το πλάτος οθόνης ή περισσότερο */
}
-Η τρίτη δήλωση θα εφαρμοστεί σε εκείνες τις αναλύσεις που έχουν πλάτος μεταξύ μιας περιοχής pixel που ορίζεται μεταξύ X και Y:
οθόνη @media και (ελάχ. πλάτος:[WIDTH X]px) και (μέγιστο πλάτος:[WIDTH Y]px) {
/* Οι νέοι μας κανόνες με αυτό το πλάτος οθόνης ή περισσότερο */
}
Ποιο από τα τρία;
Η απόφαση θα βασίζεται στο γούστο του προγραμματιστή. Περισσότερο, ωστόσο, είναι σύνηθες να εφαρμόζεται η πρώτη δήλωση ερωτήματος μέσων που φαίνεται παραπάνω. Μόνο ότι συνιστάται η αθροιστική εφαρμογή του. Με τέτοιο τρόπο ώστε, κάθε φορά που το πλάτος γίνεται μικρότερο, να τροποποιούνται τα στοιχεία του σχεδίου.
Κάντε τα ερωτήματα πολυμέσων συμβατά με τον Internet Explorer
Ο Internet Explorer ήταν ένα από τα πρώτα προγράμματα περιήγησης που υπήρχαν στον Ιστό. Επομένως, είναι πολύ πιθανό αυτό το πρόγραμμα περιήγησης να μην υποστηρίζει ή να είναι συμβατό με πολλά συστήματα, παραμέτρους ή τεχνικές που χρησιμοποιούνται συχνά από χρήστες του Διαδικτύου. Υπάρχει όμως πολύ τεχνικό προσωπικό στην ανάπτυξη ιστοσελίδων, που συμμετέχει πλήρως στην αναζήτηση καινοτομιών. Οι οποίες έχουν δημιουργήσει μια σειρά από βιβλιοθήκες για να ενεργοποιήσουν και να κάνουν συμβατά αυτά τα παλιά προγράμματα περιήγησης.
Για να κάνετε συμβατές εκδόσεις μικρότερες από τον αριθμό εννέα (9) του Internet Explorer. Απλώς εφαρμόζει την ακόλουθη βιβλιοθήκη javascript: css3-mediaqueries-js.
Τοποθετώντας το παρακάτω σενάριο στην κεφαλίδα του ιστότοπου, θα μπορείτε να εργάζεστε με ερωτήματα πολυμέσων χωρίς καμία ταλαιπωρία.
Το αποτέλεσμα που προκύπτει μπορεί να μην είναι το πιο τέλειο, αλλά γενικά επιτρέπει έναν καλό βαθμό συμβατότητας.
Πώς να φτιάξετε έναν Responsive ιστότοπο – Τα βασικά σχέδια
Μπορεί να υπάρχουν διαφορετικοί τρόποι προσαρμογής και μεταμόρφωσης ενός ιστότοπου, ωστόσο ένας ανταποκρινόμενος ιστότοπος έχει επί του παρόντος τρεις βάσεις ή μορφές σύλληψης σχεδιασμού. Προηγουμένως, οι προεπισκοπήσεις προγραμματιστών εμφανίζονταν με ορισμένες νέες λεπτομέρειες για εφαρμογή σε αυτά τα σχέδια. Προέρχεται από τη συνήθεια της ανάπτυξης ιστοσελίδων που χαρακτηρίζονται ως άκαμπτες ή σταθερές. Για να μετακινηθείτε σε ιστότοπους σχεδιασμένους με απόκριση, αλλάζοντας αυτό το χαρακτηριστικό της ακαμψίας.
Σήμερα μπορείτε να βρείτε ατελείωτες ηλεκτρονικές συσκευές με τις οποίες μπορείτε να περιηγηθείτε στον Ιστό. Και με την πάροδο του χρόνου το ποσό θα είναι μεγαλύτερο. Οι προγραμματιστές ιστοτόπων απαιτούν αυτοί οι ιστότοποι να μπορούν να προσαρμοστούν σωστά σε αυτό το ευρύ φάσμα συσκευών.
Σχέδια βάσης για απλοποίηση της εργασίας
Ένας τρόπος για να απλοποιήσετε το έργο του responsive design είναι να τα χωρίσετε ή να τα ταξινομήσετε σε τρεις βασικές ομάδες για να ξέρετε πώς να τα αντιμετωπίσετε. Αυτοί οι τρεις μεγάλοι προκριματικοί όμιλοι είναι:
- Μεγάλες οθόνες: στις οποίες ο ιστότοπος έχει αρκετό χώρο και ακόμη περισσότερο για να μπορεί να προβληθεί πλήρως χωρίς καμία ταλαιπωρία.
- Παλιές ή μικρές οθόνες: στις οποίες το web δεν βρίσκει το κατάλληλο πλάτος για την πλήρη οπτικοποίησή του, δηλαδή δεν χωράει στο πλαίσιο της οθόνης. Εμφανίζει ακόμη και μια άβολη κάτω γραμμή, χωρίς καμία χρήση που μάλλον σας επιτρέπει να βλέπετε ακόμη λιγότερο το περιεχόμενο.
- Οθόνες φορητών συσκευών: Ο ιστός βρίσκει τόσο μικρό χώρο σε αυτές τις συσκευές που μόνο με τη γενική σχεδίαση είναι δυνατή η ανάγνωση των πληροφοριών του περιεχομένου του.
Έτσι, εάν θέλετε να μετατρέψετε το αρχικό σχέδιο και τη διάταξη ενός ιστότοπου σε ένα ενημερωμένο που μπορεί να χρησιμοποιηθεί και να είναι βιώσιμο. Αυτό που απαιτείται είναι να λυθούν αυτές οι τρεις ομάδες βάσης. Ο βαθμός δυσκολίας στην απόκτηση της λύσης θα εξαρτηθεί γενικά από το πώς έχει διαμορφωθεί το μοντέλο. Όμως, γενικά, με τη σημερινή τεχνολογία, μπορούν να επιτευχθούν κάποιες αλλαγές στο διαδίκτυο.
Πώς να φτιάξετε ένα Responsive Web για μεγάλες οθόνες – Λύση
Σε αυτό το σημείο βάσης συνήθως δεν αντιπροσωπεύει κάποια σημαντική δυσκολία. Επειδή ο ιστός σχεδιάστηκε για προβολή σε αυτές τις μορφές μεγάλης οθόνης. Το τρέχον πρότυπο είναι ότι οι ιστότοποι βασίζονται σε ένα κεντρικό πλαίσιο πλάτους οθόνης σε pixel 960. Με τέτοιο τρόπο ώστε όταν φορτώνεται σε κινητά τηλέφωνα με το προσαρμοσμένο ζουμ, να ταιριάζει στα περισσότερα από αυτά σωστά. Αλλά στην περίπτωση παλαιότερων ιστοτόπων, αυτό το κεντρικό πλαίσιο πλάτους pixel σχεδιάστηκε πιθανώς για οθόνες με πλάτος 1024 pixel. Σε οποιαδήποτε από τις περιπτώσεις, για αυτήν την ομάδα βάσης είναι λογικό να χρησιμοποιηθούν κοντέινερ όπως υποδεικνύεται από την ακόλουθη σύνταξη:
#main { πλάτος:960px; περιθώριο: 0 αυτόματο; }
Αυτή η διαμόρφωση υποστηρίζει τη ρύθμιση ενός "κύριου" κοντέινερ που του επιτρέπει να είναι web-centric. Μαζί με αυτό το κοντέινερ, μπορούν να προστεθούν διαφορετικά υπόβαθρα για να εμπλουτίσουν την εξωτερική εμφάνιση του ιστού. Αναπτύξτε λίγο το σχέδιό του για να αποφύγετε όσο το δυνατόν περισσότερο μια ασπρόμαυρη σελίδα.
Εν ολίγοις, σε αυτό το επίπεδο μεγάλων οθονών, δεν γίνονται πολλά για να μεταμορφωθεί ο ιστός. Αν και είναι πιθανό να υπάρχουν χρήστες του διαδικτύου που θέλουν να το δουν από την τηλεόραση με μεγάλη οθόνη αλλά και σε μικρή απόσταση θέασης.
Αυτές οι περιπτώσεις απαιτούν μεγάλες αλλαγές όπως στην ομάδα βάσης για κινητά. Αλλά επειδή συνήθως δεν είναι πολλοί αυτοί που χρησιμοποιούν την τηλεόραση για πλοήγηση, οι προγραμματιστές συνήθως δεν επενδύουν πολύ χρόνο σε αυτές τις προσαρμογές. Εάν εξακολουθείτε να θέλετε να εργαστείτε σε αυτόν τον τύπο προσαρμογής, συνιστάται η θέσπιση κανονισμών παρόμοιων με αυτούς που ισχύουν στην ομάδα κινητών, που υποδεικνύονται παρακάτω.
Πώς να φτιάξετε ένα Responsive Web για μικρές οθόνες – Λύση
Από αυτή τη βασική ομάδα σχεδιασμού, ξεκινά η πολυπλοκότητα του μετασχηματισμού του ιστού που πρόκειται να προσαρμοστεί. Το σενάριο είναι η ακόλουθη σελίδα που δημιουργήθηκε για να λειτουργεί σε ένα δεδομένο πλάτος οθόνης. Ότι στην πραγματικότητα, πολλοί άνθρωποι το επισκέπτονται από υπολογιστές προσαρμοσμένους σε αυτό το πλάτος. Αλλά υπάρχει επίσης ένα μεγάλο ποσοστό ατόμων που πρέπει να λάβετε υπόψη, που έχουν συσκευές με αναλύσεις χαμηλότερες από αυτές του σχεδιασμού για να επισκεφθούν τον ιστό.
Σε αυτήν την ομάδα ταξινόμησης, οι συσκευές με ανάλυση οθόνης χαμηλότερη από τη σχεδίαση πρέπει να διαχωρίζονται από τις κινητές συσκευές. Λοιπόν, αυτές οι περιπτώσεις αναλύονται στην τρίτη περίπτωση σχεδιασμού. Επομένως, είναι απαραίτητο να ξεκινήσετε από έναν σαφή ορισμό του σημείου όπου τελειώνει η συσκευή με τη μικρή οθόνη και του σημείου όπου ξεκινά η κινητή συσκευή.
Για μικρές οθόνες με τον ίδιο τρόπο, η ανάλυση του αρχικού ιστότοπου πρέπει να μειωθεί για να προσαρμοστεί σε αυτές τις συσκευές. Μόνο που πρέπει να είναι ξεκάθαρο σε ποιο βαθμό πρόκειται να πραγματοποιηθεί αυτή η μείωση, χωρίς να ξεπεραστεί. Για να μην συγκεντρώνεται μεγάλος αριθμός στοιχείων σε μικρές οθόνες, μειώνοντας την εμφάνιση του ιστού.
Πληροφορίες που απαιτούνται για τον καθορισμό ορίων
Πληροφορίες από κινητές συσκευές κοινοποιούνται παρακάτω. Κάτι που θα έχει μεγάλη σημασία όταν πρόκειται να τεθούν τα όρια του πότε θα πάψει να είναι μια μικρή οθόνη, για να γίνει μια φορητή συσκευή. Αυτό θα κάνει την απόφαση πιο εύκολη.
δεδομένα κινητού:
- Κινητά που χρησιμοποιούνται κάθετα, που είναι η πιο συχνά χρησιμοποιούμενη μορφή. Συνήθως υιοθετεί ανάλυση πλάτους 320 pixel.
- Στην οριζόντια θέση, η ανάλυση του κινητού προσαρμόζεται στο πραγματικό μέγεθος της οθόνης της συσκευής. Αυτή η ανάλυση είναι γενικά πλάτος μεταξύ 400 και 600 pixel.
- Από την άλλη πλευρά, στα tablet, η ανάλυση θα εξαρτηθεί από τη συσκευή. Γενικά, λαμβάνοντας υπόψη τα στατιστικά των μοντέλων με τις μεγαλύτερες πωλήσεις, η ανάλυση είναι περίπου 600 pixel πλάτος. Μπορεί να φτάσει ακόμη και τα 1024 pixel πλάτος.
Όρια πλάτους οθόνης
Το μεγαλύτερο τυπικό όριο πλάτους που πρέπει να υιοθετηθεί στην αποκριτική σχεδίαση ιστοσελίδων σε αυτήν την ταξινόμηση, σύμφωνα με τις προηγούμενες πληροφορίες, είναι έως πλάτος 400 pixel. Από αυτή τη μέτρηση πλάτους, η αλλαγή στην οπτικοποίηση του ιστού πρέπει να ξεκινήσει δραστικά, καθώς και η βασική λειτουργία του θα παρουσιάσει ορισμένες αλλαγές.
Ωστόσο, ορισμένοι προγραμματιστές έθεσαν αυτό το όριο σε πλάτος 600 pixel. Δημιουργώντας από αυτήν την ανάλυση, ενδιάμεσες προσαρμογές μεταξύ μικρών οθονών και φορητών συσκευών.
Στην πλευρά του κάτω ορίου, έχει ρυθμιστεί να υιοθετεί ένα ελάχιστο πλάτος οθόνης έως και 320 pixel. Σε κάθε περίπτωση, εναπόκειται στον προγραμματιστή ιστού να καθορίσει ένα εύρος μεγαλύτερο από αυτά τα δεδομένα όρια. Αλλά δεν είναι σκόπιμο να προσπαθήσετε να καλύψετε όλες τις συσκευές με μικρή οθόνη.
Κύρια στυλ πλοήγησης στη λύση μικρής οθόνης
Η λήψη τουλάχιστον αυτών των τριών βασικών στυλ πλοήγησης μπορεί να αρκεί σε μια προσαρμοστική λύση μικρής οθόνης. Τα οποία παρατίθενται παρακάτω:
- Φορητές συσκευές που χρησιμοποιούνται κάθετα: Σε αυτήν την περίπτωση, η οθόνη της συσκευής επιτρέπει μόνο πολύ απλοποιημένη ανάγνωση και πλοήγηση, με εύρος ανάλυσης μεταξύ 320 και 400 pixel.
- Κινητές συσκευές που χρησιμοποιούνται οριζόντια και tablet: Σε αυτήν την περίπτωση, μπορεί ήδη να επιτευχθεί μια παραδοσιακή οριζόντια απεικόνιση. Ωστόσο, είναι απαραίτητο να σημειωθεί ότι η πλοήγηση δημιουργείται με το άγγιγμα και όχι με το κλικ. Σύμφωνα με αυτό, οι ενέργειες πρέπει να αποφεύγονται: onMouseOver σε 400, 600 ή 800 pixel.
- επιτραπέζιες συσκευές: Σε αυτές τις περιπτώσεις, η κανονική σχεδίαση ιστού λειτουργεί χωρίς κανένα πρόβλημα με πλάτη οθόνης άνω των 800 pixel.
Έχοντας πει όλα τα παραπάνω, μια μικρή οθόνη είναι κατανοητό ότι σημαίνει μια ποικιλία υπολογιστών, φορητών συσκευών και tablet. Αυτή η ποικιλομορφία καλύπτει αυτήν την ομάδα με μια μαλακή πολυπλοκότητα για την προσαρμογή του ιστού σε μια αποκριτική σχεδίαση. Σε αυτή την περίπτωση, έχει μεγάλη σημασία για την απλοποίηση της εργασίας, τις εργασίες διάταξης που πραγματοποιούνται από μπλοκ. Προκειμένου να ενωθούν οι τρεις τύποι συσκευών σε μια ενιαία δράση.
Εάν ορίζεται σαφώς από ποιο πλάτος θεωρείται οθόνη κινητού. Η μορφή της ενδιάμεσης οθόνης που θα εμφανιστεί διευκρινίζεται. Για να μεταμορφωθούν τα μπλοκ της τρέχουσας διάταξης έτσι ώστε να αλλάζουν μέγεθος ανάλογα με την οθόνη και να μπορούν να λειτουργούν και να εμφανίζονται σωστά.
Εμπορευματοκιβώτια παγκόσμιου πλάτους
Τα καθολικά κοντέινερ εντός του ιστότοπου εκπληρώνουν τη λειτουργία κατάδειξης ή ένδειξης των καθολικών πλάτη. Δηλαδή, με αυτά τα στοιχεία μπορείτε να κεντράρετε και να ορίσετε ένα συγκεκριμένο πλάτος στον ιστότοπο. Δίνουν στη διαμόρφωση κάποια ευελιξία αλλάζοντας από σταθερό πλάτος σε μέγιστο ή πλάτος καπακιού. Καθιερώνεται στην αρχική δήλωση για το πλαίσιο web, αλλάζει από πλάτος a max-width. Με τον ίδιο τρόπο καθορίζεται το ελάχιστο πλάτος σύμφωνα με τα προηγούμενα εύρη, με τη δήλωση ελάχ. Έτσι, θα είναι δυνατός ο έλεγχος των πλάτη εκείνων των συσκευών που θεωρήθηκε ότι δεν ήταν εντός του ελέγχου. Λαμβάνοντας το εύρος των ορίων πλάτους οθόνης που δίνονται παραπάνω. Η σύνταξη της δήλωσης θα είναι η εξής:
#main {max-width:960px; min-width:320px; περιθώριο: 0 αυτόματο;}
Για μεγάλες οθόνες η λύση είναι η ίδια. Περισσότερο, ωστόσο, όταν ο ιστός μειώνεται σταδιακά σε μέγεθος ταυτόχρονα, το κεντρικό πλαίσιο θα το κάνει σε πλάτος.
Πρακτικό παράδειγμα
Παρακάτω είναι ένα πρακτικό παράδειγμα σχετικά με τις ρυθμίσεις για έναν μετασχηματισμό πλαισίου πλάτους. Σε αυτό το παράδειγμα υπάρχει ένας ιστότοπος με πλάτος 1080 pixel, ο οποίος εφαρμόζεται στα στοιχεία κεφαλίδας, κύριου περιεχομένου και υποσέλιδου. Το πρώτο πράγμα που πρέπει να κάνετε είναι να υποδείξετε αυτό το πλάτος στα διάφορα καθολικά μπλοκ κοντέινερ, όχι ως σταθερό πλάτος, αλλά ως μέγιστο πλάτος σελίδας. Όσο για τις προτάσεις, θα εξαρτηθούν από τον αριθμό των μπλοκ αυτού του τύπου που πρόκειται να χρησιμοποιηθούν. Ας δούμε λοιπόν την ακόλουθη σύνταξη:
#header #top {position:relative; μέγιστο πλάτος: 1074 px; min-width:320px; ύψος: 115 px; περιθώριο: 0 αυτόματο; […]}
[...]
#header ul.menu {position:relative; μέγιστο πλάτος: 1008 px; min-width:320px; ύψος: 95 px; […]}
[...]
#aux-main{position:relative; μέγιστο πλάτος: 1008 px; min-width:320px; περιθώριο: 0 αυτόματο; […]}
[...]
#footer ul {max-width:768px; min-width:320px; περιθώριο: 10 px auto;}
Εσωτερικά δοχεία
Από αυτό το σημείο, θα εμβαθύνουμε λίγο περισσότερο στο πώς να φτιάξετε έναν ανταποκρινόμενο ιστότοπο μεταμορφώνοντάς τον. Είναι σχεδόν βέβαιο ότι η σελίδα που θα μετασχηματιστεί αποτελείται από ένα σχέδιο ή διάταξη, χωρισμένη σε διαφορετικά στοιχεία, για παράδειγμα, θα μπορούσαν να είναι:
- Κεφαλίδα πλάτους εκατό τοις εκατό
- Ένα περιεχόμενο που καταλαμβάνει σημαντικό μέρος του πλάτους
- Σε ένα μέρος της πλευράς μία ή περισσότερες πλαϊνές ράβδους ή πλευρικές ράβδους
- Καταλαμβάνει εκατό τοις εκατό του πλάτους, ένα υποσέλιδο
Έτσι θα έχετε πολλά κοντέινερ που ίσως έχουν σταθερό πλάτος που ορίζουν στήλες στη σελίδα. Αυτά τα δοχεία μπορεί να έχουν μετατραπεί σε στήλες μέσω της εφαρμογής διαφόρων τεχνικών, όπως:
- Επιπλέει στη μεγαλύτερη ποσότητα
- Εμφάνιση: ενσωματωμένη σε ορισμένες περιπτώσεις
- Εμφάνιση:πλαίσιο σε άλλα από αυτά
Το επόμενο βήμα που πρέπει να κάνετε θα είναι να μπορέσετε να μετατρέψετε αυτά τα στοιχεία σε όχι και τόσο ακριβείς δηλώσεις. Έτσι ώστε το γονικό κοντέινερ να μην βαθμονομεί ακριβώς την αρχική δήλωση στην οποία αναφέρεται. Ή το ίδιο, πρέπει να αλλάξετε από pixel σε ποσοστιαίες τιμές σε όλα εκείνα τα στοιχεία που αναφέρονται σε ένα διάστημα στο πλάτος του ιστότοπου, όπως τα παρακάτω:
- πλάτη
- μέγιστα πλάτη
- Περιθώρια και
- υλικό παραγεμίσματος
Με την εργασία διάταξης που έχει γίνει προηγουμένως, αυτό το βήμα γίνεται πολύ απλό. Δεδομένου ότι κάνει μόνο μια διαίρεση, για να μπορεί να προσδιορίσει τι αντιστοιχεί στο μέτρο σε pixel του στοιχείου κοντέινερ σε ποσοστιαίες τιμές. Επομένως, το ποσοστό θα υπολογιστεί με την εφαρμογή της ακόλουθης μαθηματικής εξίσωσης:
[Px πλάτους εσωτερικού στοιχείου] / [Px πλάτους γονικού στοιχείου] * 100
Είναι μια καλή μέθοδος για τους προγραμματιστές ιστού να συνηθίσουν να εργάζονται στο μοντέλο Ιστού με μετρήσεις σε ποσοστά, γιατί αυτό το βήμα θα είχε ήδη λυθεί.
Ο υπολογισμός των ποσοστών
Το επόμενο βήμα που πρέπει να εκτελέσετε είναι ο υπολογισμός των ποσοστών. Σε αυτό το μέρος μπορεί να παρουσιαστεί κάτι ενοχλητικό όσον αφορά τις στήλες. Επειδή η προηγούμενη στήλη κατασκευάστηκε με στοιχεία float και όταν συρρικνώνετε το πλαίσιο, η πλαϊνή γραμμή μετακινείται κάτω από το περιεχόμενο. Ωστόσο, εφαρμόζεται η προαναφερθείσα εξίσωση. Και με αυτόν τον τρόπο εκτελούνται οι ποσοστιαίοι υπολογισμοί κάθε στοιχείου εντός του καθολικού κοντέινερ DIV. Το οποίο όπως προαναφέρθηκε είχε πλάτος 1080 pixels. Μετατρέποντας αυτές τις μετρήσεις σε ποσοστιαίες τιμές, προκύπτει η ακόλουθη σύνταξη:
#main #content { float:left; πλάτος:63.9880952%; περιθώριο:30px 0 0 1.98412698%; }
[...]
#main #sidebar { float:left; περιθώριο:20px 0 0 3.47222222%; πλάτος:28.7698413%; }
Όπως φαίνεται, τόσο τα πλάτη όσο και τα οριζόντια περιθώρια έχουν μεταμορφωθεί. Με αυτόν τον τρόπο η ιστοσελίδα θα διατηρήσει μια τετράγωνη εμφάνιση. Ένα άλλο σημαντικό σημείο που πρέπει να σημειωθεί είναι ο αριθμός των δεκαδικών που υποδεικνύονται στα ποσοστά. Σκοπός του οποίου είναι ο υπολογισμός να είναι όσο το δυνατόν ακριβέστερος στην αρχική τιμή σε pixel.
Λύση για χαλαρά εσωτερικά στοιχεία που αυξάνονται σε μέγεθος
Κατά τη διαδικασία μετασχηματισμού της ιστοσελίδας, είναι δυνατό να βρεθούν ορισμένα χαλαρά στοιχεία στο μοντέλο που, λόγω της τυπολογίας τους, μπορούν να αυξηθούν πάνω από το μέγιστο παγκόσμιο κοντέινερ, το μέγιστο πλάτος. Αυτά τα στοιχεία μπορούν να εντοπιστούν παίζοντας με το μέγεθος του προγράμματος περιήγησης, καθώς ανιχνεύονται διορθώνονται. Ένας άλλος γρήγορος τρόπος για να διορθώσετε ή να αποφύγετε αυτά τα στοιχεία είναι να επιλέξετε τα δοχεία και να δώσετε τη σειρά ότι κανένα εσωτερικό στοιχείο δεν μεγαλώνει πάνω από το μέγεθος του ίδιου του δοχείου.
Στο παράδειγμα που αναπτύσσεται, εφαρμόζεται αυτή η τελευταία μορφή διόρθωσης, εντός του κύριου περιεχομένου και της πλαϊνής γραμμής. Έτσι, ορισμένα προβλήματα που μπορεί να προκύψουν από τα γραφικά στοιχεία μπορούν να λυθούν από μόνα τους. Σύμφωνα με αυτό, η διαμόρφωση για την επίλυση των χαλαρών εσωτερικών στοιχείων θα είναι η εξής:
#main #content { float:left; πλάτος:63.9880952%; περιθώριο:30px 0 0 1.98412698%; }
#main #content * {max-width:100%}
[...]
#main #sidebar { float:left; περιθώριο:20px 0 0 3.47222222%; πλάτος:28.7698413%; }
#main #sidebar * {max-width:100%}
Στοιχεία τοποθετημένα στο απόλυτο
Για όλα εκείνα τα στοιχεία που είναι τοποθετημένα καθόλου στην ιστοσελίδα για να μεταμορφωθούν. Η ίδια προηγούμενη διαδικασία πρέπει να εφαρμοστεί σε αυτά με τα πλάτη, προσαρμόζοντάς τα σε τιμές σε ποσοστά στον άξονα της τετμημένης για να μεταβάλλεται το πλάτος τους. Υποθέτοντας ότι στο παράδειγμα που αναπτύσσεται, υπάρχουν κάποια στοιχεία τοποθετημένα καθόλου στην κεφαλίδα. Οι θέσεις τους πρέπει να προσαρμόζονται σε αυτά τα στοιχεία, ώστε να μην μένουν να επιπλέουν στον αέρα όταν μειώνονται οι διαστάσεις του ιστού. Για αυτό, η διαμόρφωση θα είναι η εξής:
[...]
#header #top p.breadcrumb {position:absolute; top:90px; αριστερά:3.72439479%; άσπρο χρώμα;}
[...]
#header #top p.like { position:absolute; top:10px; αριστερά:54.0037244%; }
[...]
#header #top div.vcard{position:absolute; top:11px; δεξιά:5.49348231%; πλάτος:27.9329609%;}
Εφαρμογή των ερωτημάτων πολυμέσων σε εσωτερικά στοιχεία
Κατά την προσαρμογή των πλάτη της σελίδας, είναι πιθανό να υπάρχουν στοιχεία που λόγω του περιεχομένου τους δεν βρίσκουν χώρο στον επανασχεδιασμό. Αυτά μπορούν να παρεμποδίσουν, κάνοντας τις προσαρμογές να φαίνονται άσχημες. Προκειμένου να αποφευχθεί αυτή η δύσκολη κατάσταση, χρησιμοποιούνται απλά ερωτήματα μέσων που επιτρέπουν τη δραστική τροποποίηση του CSS, όταν προκύπτουν ορισμένες συγκεκριμένες διαστάσεις.
Τα ερωτήματα πολυμέσων είναι ένα πολύ ισχυρό εργαλείο με το οποίο μπορούν να γίνουν πολλά τεχνάσματα. Αυτή τη φορά θα εφαρμοστούν για τον καθορισμό συγκεκριμένων συνθηκών σχετικά με το πλάτος της οθόνης και από πού θα αλλάξει το CSS. Για αυτό θα θυμηθούμε την ακόλουθη σύνταξη:
οθόνη @media και (μέγιστο πλάτος:[WIDTH]px) {
/* Οι νέοι μας κανόνες με αυτό το πλάτος οθόνης ή λιγότερο */
}
Αυτή η δήλωση ερωτήματος πολυμέσων επιδιώκει συγκεκριμένα να προσαρμόσει τη διάταξη σε διαφορετικές αναλύσεις. Έτσι, μπορεί να χρησιμοποιηθεί περισσότερο από οτιδήποτε άλλο για την απόκρυψη ορισμένων δευτερευόντων στοιχείων, τα οποία, δεδομένου του συγκεκριμένου πλάτους οθόνης, μπορούν να ενοχλήσουν περισσότερο παρά να βοηθήσουν τον χρήστη. Εκτός από το να χρησιμεύει για την κατασκευή μικρών συνδέσμων, έτσι ώστε ορισμένα στοιχεία να μπορούν να χωρέσουν στον επανασχεδιασμό σε διαφορετικά σενάρια.
Για να παραδειγματιστούμε αυτά που ειπώθηκαν, ορισμένα στοιχεία αναλύσεων κάτω των 800 και 600 pixel θα είναι κρυφά. Ότι σε μία περίπτωση εμποδίζουν τη σωστή προβολή του περιεχομένου της κύριας σελίδας της προς προσαρμογή ιστοσελίδας. Σύμφωνα με την ακόλουθη σύνταξη:
Οθόνη @media και (μέγιστο πλάτος: 800 εικονοστοιχεία) {
#header #top p.like,
#header #top p.breadcrumb,
#header #top div.vcard p.twitter,
#header #top div.vcard p.linkedin,
#header #top div.vcard p.delicious,
#header #top div.vcard p.google,
.vcard h2{ display:none;}
}
Οθόνη @media και (μέγιστο πλάτος: 600 εικονοστοιχεία) {
#sidebar .twitter {display:none;}
}
Όπως φαίνεται, κρύβονται σε αναλύσεις μικρότερες από 800 pixel:
-Τα likes
-Η φρυγανιά
-Κουμπιά κοινωνικής δικτύωσης, μεταξύ άλλων
Από 600 pixel κάτω τα τελευταία tweets αφαιρούνται από την πλαϊνή γραμμή
Τα ερωτήματα πολυμέσων σάς επιτρέπουν επίσης να τροποποιήσετε ορισμένα στυλ
Όπως μπορείτε ήδη να δείτε, τα ερωτήματα πολυμέσων σας επιτρέπουν να αποκρύψετε ορισμένα εσωτερικά στοιχεία. Αλλά σας επιτρέπουν επίσης να κάνετε αλλαγές σε ορισμένα στυλ. Αυτή η ιδιαιτερότητα μπορεί να χρησιμοποιηθεί αν ένα στοιχείο, εκτός από το ότι δεν είναι προσαρμοσμένο ως προς το πλάτος, δεν θέλει ή δεν θέλει να γίνει για να εξαφανιστεί ή να κρυφτεί. Εάν προκύψει αυτή η κατάσταση στον ιστό, θέλετε να μεταμορφωθείτε. Στη συνέχεια, μέσω της χρήσης ερωτημάτων μέσων, θα επιδιωχθεί να αλλάξει διακριτικά το στυλ του, ώστε να προσαρμοστεί.
Υποθέτοντας ότι στον ιστό που εργάζεται, τα κουμπιά κοινωνικής δικτύωσης προκαλούν αυτού του τύπου προβλήματα. Και αποφασίζει να αλλάξει διακριτικά τη μορφοποίησή της, αφαιρώντας εικονίδια και μειώνοντας το μέγεθος της γραμματοσειράς, όταν η σελίδα πέσει κάτω από τα 960 pixel πλάτος. Τότε η διαμόρφωση θα είναι η εξής:
οθόνη @media και (μέγιστο πλάτος:960 pixel) {
#header #top div.vcard p {font-size:9px;}
#header #top div.vcard p.twitter σε,
#header #top div.vcard p.linkedin a ,
#header #top div.vcard p.delicious a,
#header #top div.vcard p.google a {background:none; padding:0;width:50%; float:αριστερά;}
}
Τι να κάνετε με τα μενού
Τι γίνεται με τα μενού, στο πλαίσιο της διαδικασίας δημιουργίας ενός responsive ιστότοπου σε μικρές οθόνες; Η απάντηση σε αυτό το ερώτημα είναι ότι είναι ένα κάπως περίπλοκο πρόβλημα προς επίλυση. Επειδή είναι ένα σύνολο στοιχείων που είναι συνήθως κάπως μεγάλα, καθώς και το ίδιο το μενού, δεν είναι το κύριο περιεχόμενο του Ιστού. Επομένως, δεν επιτρέπεται όταν ανοίγει η σελίδα σε μικρές οθόνες, το μενού να καταλαμβάνει πολύ χώρο.
Στις συσκευές αφής, μπορεί να είναι ενοχλητικό για τον χρήστη η εμφάνιση μιας λίστας μικροσκοπικών συνδέσμων, επομένως η συρρίκνωση των συνδέσμων δεν θα ήταν η πιο βιώσιμη λύση. Μια εναλλακτική που μπορεί να είναι ευνοϊκή είναι η αντικατάσταση του μενού με ένα επιλεγμένο στοιχείο. Το οποίο αντιπροσωπεύει ένα στοιχείο ελέγχου που εμφανίζει ένα μενού επιλογών, όπου ο χρήστης μπορεί να επιλέξει άνετα. Το στοιχείο επιλογής μειώνει τις μεγάλες λίστες μενού σε ένα μικρό μπλοκ, επομένως η χρήση του είναι ιδανική για συσκευές όπως tablet και κινητά.
Όταν κάνετε αυτήν την αντικατάσταση στη νέα αποκριτική σχεδίαση, συνιστάται η χρήση του πρόσθετου tinynav jquery. Το οποίο είναι απλό και εξαιρετικά συμβατό, αυτό το πρόσθετο αναφέρεται σε όλα τα στοιχεία UL στο μενού. Και αυτό με τη σειρά του προσθέτει ένα στοιχείο επιλογής στην αρχή της λίστας με τα υποδεικνυόμενα χαρακτηριστικά. Στη συνέχεια, το βήμα που μένει να γίνει είναι να αποκρύψετε το UL ή το Select με τα ερωτήματα πολυμέσων, μέχρι να επιτευχθεί μια ευνοϊκή λύση.
Διαδικασία με το στοιχείο επιλογής
Η διαδικασία αντικατάστασης του μενού με επιλεγμένο στοιχείο θα γίνει μέσω του πρόσθετου που αναφέραμε παραπάνω. Το οποίο πρέπει να τοποθετηθεί στην κεφαλίδα της λίστας συνδέσμων. Έτσι, όταν η σελίδα αρχίσει να μειώνεται σε αναλύσεις πλάτους μικρότερες από 800 pixel, οι σύνδεσμοι θα αντικατασταθούν από επιλογή. Στη συνέχεια, πρέπει να ακολουθήσετε τα ακόλουθα βήματα:
- Προσθέστε το σενάριο και στο πρόσθετο jquery έτοιμο ορίστε την κλήση στο νέο στοιχείο. Σύμφωνα με τα ακόλουθα:
$(".menu ul").tinyNav();
Αυτή η διαμόρφωση προσθέτει την επιλογή σε καθεμία από τις λίστες συνδέσμων στο επάνω μενού
- Πείτε στο βασικό CSS να αποκρύψει τα νέα επιλεγμένα στοιχεία, με την ακόλουθη δήλωση:
.tinynav { display: none }
- Χρησιμοποιήστε ένα κατάλληλο ερώτημα μέσων και προσθέστε μέσα σε αυτό τη μορφή της επιλογής και τη σειρά απόκρυψης της ίδιας της λίστας. Αφήνοντας τη διαμόρφωση ως εξής:
Οθόνη @media και (μέγιστο πλάτος: 800 εικονοστοιχεία) {
#header ul.menu li ul {display:none}
.tinynav { display: block; θέση:απόλυτη; bottom:5px; πλάτος:79%; margin-left:15%}
}
Με αυτόν τον τρόπο, το μενού web θα έχει αντικατασταθεί από ένα επιλεγμένο στοιχείο, μειώνοντας την ανάλυση της οθόνης σε λιγότερο από 800 pixel πλάτος.
Αποκλεισμός φόντου στον τρόπο δημιουργίας ενός Responsive Web
Σε αυτό το σημείο της προσαρμογής του ιστού, ο βαθμός δυσκολίας θα εξαρτηθεί από το πώς είναι το μοντέλο. Κατά τη σχεδίαση του ιστού, στο σημείο CSS, τα μπλοκ είναι συνήθως διακοσμημένα με φόντο εικόνας. Ένας τεράστιος αριθμός τεχνικών χρησιμοποιούνται στη διαδικασία διακόσμησης. Μερικά από τα οποία είναι πιο εύκολα από άλλα όταν πρόκειται για αλλαγή μεγέθους.
Μερικές λύσεις
Γι' αυτό, ανάλογα με την τεχνική που χρησιμοποιείται, η διαδικασία μπορεί να είναι λιγότερο ή περισσότερο απλή. Μπορεί ακόμη και το φόντο που έχει ο ιστός να χάνει τον στόχο του όταν οι άκρες είναι κρυφές. Με αποτέλεσμα σε αυτές τις περιπτώσεις ένα μεγάλο πρόβλημα να ξεπεραστεί. Εδώ είναι μερικές λύσεις σε αυτό:
- Τροποποιήστε όσο το δυνατόν περισσότερα από τα φόντα σε στυλ CSS3. Το οποίο θα προσαρμοστεί πολύ καλά στις αλλαγές. Είναι πλέον απλό να γίνουν συμβατά τα περισσότερα προγράμματα περιήγησης, όταν χρησιμοποιείτε στρογγυλεμένες άκρες, σκιές ή διαβαθμίσεις. Με τις τρεις καταστάσεις CSS είναι δύσκολο για τα σχέδια να απαιτούν μεγάλο αριθμό εικόνων για τη δημιουργία των μπλοκ.
- Κάντε χωρίς εικόνες φόντου, για να τις αντικαταστήσετε όσο το δυνατόν περισσότερο με το πλησιέστερο CSS3 στον τρόπο με τον οποίο τα ερωτήματα πολυμέσων και τα προσαρμοστικά πλάτη κάνουν τη δουλειά τους
- Εάν πρόκειται για κεφάλαια που ήδη κυριαρχούν στην κατάσταση ενός μπλοκ. Συνιστάται να αντιγράψετε αυτό το στυλ στο μπλοκ και να αναζητήσετε το αρχικό φόντο για να διακρίνεται ελάχιστα
Άλλες λύσεις σε τρεις τύπους εικόνων φόντου που μπορεί να είναι ενοχλητικές είναι:
- Εικόνες με περιθώρια στο πλαίσιο της σελίδας, που ακόμα και παραμένοντας εκτός του τμήματος που εμφανίζεται, το τελικό αποτέλεσμα δεν ενοχλεί, επομένως αφήνεται
- Εικονίδια σε ορισμένους τίτλους, τα οποία διορθώνονται κρύβοντάς τα με ερωτήματα πολυμέσων όταν αρχίζουν να γίνονται ενοχλητικά
- Το γενικό φόντο της κεφαλίδας περιλαμβάνει το λευκό πλαίσιο όπου εμφανίζεται το όνομα του συγγραφέα του ιστού. Για αυτό, το ίδιο στυλ μπορεί να επαναληφθεί στο πλαίσιο του συγγραφέα, έτσι ώστε το ένα φόντο να κρύβεται με το άλλο, μειώνοντας τη διάσταση της σελίδας.
Πώς να φτιάξετε έναν Responsive Web για οθόνη κινητών – Λύση
Πολλές πτυχές του τρόπου δημιουργίας ενός ανταποκρινόμενου ιστότοπου σε μικρές οθόνες έχουν ήδη δει στο παρελθόν. Με αυτή τη γνώση, μπορείτε να μεταβείτε από ένα άκαμπτο σχέδιο ιστού με σταθερό πλάτος 1080 pixel σε ένα σχέδιο που είναι αρκετά προσαρμόσιμο σε μικρές οθόνες, από μεγάλο αριθμό συσκευών. Λείπει όμως η αποκριτική σχεδιαστική λύση για οθόνες κινητών.
Με την εφαρμογή αυτού που φάνηκε για τις μικρές οθόνες στη σχεδίαση για κινητά, οι αλλαγές το κάνουν να φαίνεται αποδεκτό. Πρέπει να τελειοποιηθούν περισσότερα, καθώς η διάταξη δύο στηλών με στοιχεία συγκολλημένα στην κεφαλίδα είναι πολύ μη πρακτική για κινητά
Επομένως, είναι σκόπιμο να ξεκινήσετε τη διαδικασία για να επιτύχετε σωστή εμφάνιση σε κινητές συσκευές. Είναι σημαντικό να σημειωθεί ότι η χρήση της πλοήγησης σε ένα κινητό δεν είναι η ίδια όπως σε έναν κανονικό ιστότοπο. Στη συνέχεια, μπορεί να θέλετε να προχωρήσετε περισσότερο από απλές αλλαγές προσαρμοστικότητας πλάτους οθόνης ή απόκρυψη στοιχείων.
Η ετικέτα Viewport σε αυτήν την περίπτωση
Το στοιχείο προβολής είναι ένα καλό εργαλείο για την προσαρμογή του ιστού σε κινητά. Πρώτον, επειδή η θύρα προβολής χρησιμεύει για να υποδεικνύει στο κινητό τον τρόπο με τον οποίο θέλετε να λειτουργεί το ζουμ του, όταν η συσκευή εμφανίζει τον ιστότοπο. Τούτου λεχθέντος, βασικά μπορούν να παρουσιαστούν δύο επιλογές, που υποδεικνύονται παρακάτω:
Επιλογή 1: Για ιστότοπους με αποκριτική σχεδίαση επαρκώς συνδεδεμένη με αναλύσεις για κινητά, είναι διαθέσιμα τα ακόλουθα:
Αυτή η επιλογή είναι η πιο ιδανική, αλλά και η πιο επίπονη. Επειδή όταν μειώνετε τα πλάτη των στηλών κάτω από 500 ή 400 εικονοστοιχεία, τα πλάτη γίνονται εντελώς μη διαχειρίσιμα. Επομένως, πρέπει να γίνουν ριζικές αλλαγές στην οπτικοποίηση του Ιστού.
Επιλογή 2: Εάν πρόκειται για ιστότοπους που δεν έχουν ακόμη προσαρμοστεί τέλεια στην ανάλυση ενός κινητού, έχουμε τα εξής:
Αυτή η άλλη επιλογή μπορεί να είναι πιο γρήγορη. Επειδή στο σχέδιο υποδεικνύεται μόνο ότι το κινητό μπορεί να εμφανιστεί στην επιθυμητή ανάλυση. Με άλλα λόγια, ο Ιστός θα συνεχίσει να είναι η κανονική σελίδα, μόνο σε μια πιο μειωμένη ή προσαρμοσμένη έκδοση.
Πιθανές συνέπειες
Εάν επιλέξετε τη δεύτερη επιλογή, ενδέχεται να προκύψουν δύο προβλήματα με τον ιστότοπο που πρόκειται να προσαρμοστεί ή να σχεδιαστεί σε απόκριση.
-Πρώτη: Η θύρα προβολής σε αυτήν την περίπτωση θα λειτουργούσε καθολικά σε όλα τα προγράμματα περιήγησης για κινητά. Δεδομένης της περίπτωσης, για παράδειγμα, που υποδεικνύεται μια ετικέτα θύρας προβολής πλάτους 500 pixel, θα έχει ως αποτέλεσμα οι συσκευές Ipad με πλάτος περίπου 800 pixel να εμφανίζουν μια σελίδα πλάτους μόνο 500 pixel. Αποτυχία εκμετάλλευσης του εκατό τοις εκατό του διαθέσιμου χώρου.
-Δεύτερος: Συνέχεια με την περίπτωση ένδειξης θύρας προβολής πλάτους 500 pixel. Σε αυτήν την περίπτωση, οι αναλύσεις πλάτους 320 pixel, το περιεχόμενο του ιστού που εργάζεται θα εμφανίζεται σε πολύ μειωμένη λειτουργία. Επομένως, εάν δεν γίνουν κάποιες προσαρμογές, θα είναι μη λειτουργικό. Από την άλλη πλευρά, εάν γίνουν ορισμένες προσαρμογές για την προσαρμογή των μενού ή των πηγών, η έκδοση web θα τροποποιηθεί με τον ίδιο τρόπο ώστε να εμφανίζεται σε tablet, στην περίπτωση μικρής οθόνης. Συμπερασματικά, η λύση της ένδειξης ενός σταθερού πλάτους με μια ετικέτα θύρας προβολής μπορεί να είναι η ταχύτερη, αλλά δεν είναι πλέον αποτελεσματική.
Βλέποντας τις συνέπειες της επιλογής 2 της ετικέτας θύρας προβολής, η επιλογή 1 είναι η πιο προτεινόμενη. Με αυτόν τον τρόπο, επιτρέπεται στο ίδιο το κινητό να εμφανίζει την ανάλυση που μπορεί, όταν χρησιμοποιεί τη θύρα προβολής που υποδεικνύεται παραπάνω ως επιλογή 1 στην Επικεφαλίδα της σελίδας.
Με αυτήν την απόφαση οπτικοποίησης, θα εργαστείτε αργότερα στο ερώτημα πολυμέσων, για την έκδοση για κινητά. Αυτό απαιτεί μετακίνηση από στήλες σε μπλοκ με πλάτος εκατό τοις εκατό. Επίσης, διαγράψτε, συμπιέστε ορισμένα στοιχεία, προσαρμόστε τις γραμματοσειρές ώστε να είναι φιλικό στην ανάγνωση σε πλάτος 320 pixel.
αφαίρεση στηλών
Όπως αναφέρθηκε παραπάνω, για την προσαρμογή που ανταποκρίνεται σε κινητά, είναι απαραίτητο να τελειοποιηθεί η σχεδίαση στην εμφάνιση των δύο στηλών, προκειμένου να αποφευχθεί η συσσώρευση στοιχείων στην κεφαλίδα. Για αυτήν τη διαδικασία, μια στήλη θα εξαλειφθεί τοποθετώντας τη μία πάνω στην άλλη, αλλά υπάρχουν δύο σενάρια που θα μπορούσαν να συμβούν:
-Ότι οι στήλες είναι ήδη ταξινομημένες στο Html: Εάν συμβαίνει αυτό, παρουσιάζονται ήδη με τον επιθυμητό τρόπο για κινητά. Θα χρειαστεί μόνο να εξαφανιστούν τα Floats ή να τροποποιηθεί το display:inline-block ή το display:box, για να αντικατασταθεί με ένα κανονικό display:block. Εφαρμόζοντας την ακόλουθη σύνταξη:
Οθόνη @media και (μέγιστο πλάτος: 400 εικονοστοιχεία) {
#content {display:block; float:none; }
}
-Εάν οι στήλες δεν είναι διατεταγμένες: Σε αυτό το σενάριο, πρέπει να εργαστείτε με απόλυτες θέσεις, έτσι ώστε τα κάτω μπλοκ να καταλαμβάνουν το επάνω μέρος της σελίδας. Καθώς και χρήση περιθωρίων για να μετακινήσετε τα επάνω μπλοκ στο κάτω, ώστε να μην επικαλύπτονται. Παράδειγμα, υποθέτοντας την ακόλουθη κατανομή:
Σε αυτή τη δόμηση, είναι επιθυμητό στο κινητό τα στοιχεία των πλαϊνών γραμμών να βρίσκονται πριν από το περιεχόμενο. Στη συνέχεια το CSS παρουσιάζεται ως εξής:
Οθόνη @media και (μέγιστο πλάτος: 400 εικονοστοιχεία) {
#main {position:relative; πλάτος:100%; }
#content{margin-top:80px; πλάτος:100%; float:none;}
#sidebar{height:80px; θέση:απόλυτη; κορυφή:0; πλάτος:100%; float:none; }
}
Για να απεικονίσετε το δεύτερο σενάριο, στο οποίο πρέπει να χρησιμοποιηθούν απόλυτες θέσεις στην έκδοση για κινητά, παρουσιάζεται το ακόλουθο παράδειγμα δομής
Οθόνη @media και (μέγιστο πλάτος: 450 εικονοστοιχεία) {
#main #sidebar {display:block; float:none !important; πλάτος:100%; θέση:απόλυτη; κορυφή:-80px; περιθώριο: 0 !σημαντικό; border-bottom:1px στερεό #aaa; padding:0 0 20px 0;}
#main #content { float: none; πλάτος:αυτόματο; περιθώριο: 100 px 0 0 0; }
}
Σε αυτή την περίπτωση υπάρχει επίσης μια αλλαγή στα 450 pixel πλάτος στην έκδοση για κινητά.
Προσαρμογή γραμματοσειρών
Μια άλλη πτυχή που πρέπει να αντιμετωπιστεί στην προσαρμογή απόκρισης στην έκδοση για κινητά είναι η προσαρμογή των γραμματοσειρών. Διότι, όταν σχεδιάστηκε το web, φτιάχτηκε έχοντας κατά νου τις μεγάλες οθόνες. Όταν μεταβαίνετε σε εκδόσεις για κινητά που έχουν μικρές κάθετες οθόνες, οι ιστότοποι συχνά δεν είναι άνετοι για ανάγνωση ή προβολή. Οι τίτλοι του ιστού καταλαμβάνουν πολύ χώρο, το κείμενο του περιεχομένου, λόγω του μεγέθους της γραμματοσειράς, δυσκολεύει την ανάγνωση. Σύμφωνα με αυτό, είναι απαραίτητο να επανεξεταστούν όλες οι πηγές, φέρνοντάς τες σε μια βιώσιμη διαμόρφωση για εμφάνιση σε οθόνη κινητού.
Ακολουθούν προσαρμογές σχετικά με αυτήν την πτυχή, όπου οι γραμματοσειρές του μενού τροποποιήθηκαν, το μέγεθος γραμματοσειράς των τίτλων μειώθηκε και αυτές του περιεχομένου αυξήθηκαν. Παρατηρήστε την ακόλουθη διαμόρφωση:
#header ul.menu li,
#header ul.menu li.analytics,
#header ul.menu li.development {background:none;}
#header ul.menu li h4 {margin:30px 0 0 0px; μέγεθος γραμματοσειράς: 12 px; κείμενο-εσοχή:10%;}
#main #content .hnews h3 a,
#main #content .hnews h1 a{ font-size:22px; }
#main #content .hnews .entry-content {font-size:16px;}
Άλλες προσαρμογές όσον αφορά την αισθητική και το στυλ
Έχω κάνει όλη την προηγούμενη διαδικασία για το πώς να φτιάξω έναν ανταποκριτικό ιστότοπο στη σχεδίαση για την έκδοση για κινητά. Αυτό που μένει είναι να βάλουμε τις τελευταίες πινελιές στην εμφάνιση και το στυλ του ιστού. Σε αυτήν την περίπτωση, μπορείτε να επανασχεδιάσετε εκείνα τα στυλ που δεν προσαρμόζονται στη νέα έκδοση και να απορρίψετε αυτά που έρχονται να έχουν θέση σε αυτήν. Με τον ίδιο τρόπο, μπορείτε να μετακινήσετε ορισμένα στοιχεία, όπως τις πλαϊνές γραμμές, για παράδειγμα, για να τα τοποθετήσετε σε άλλη θέση ή επίσης να κάνετε αλλαγές στα περιθώρια, μεταξύ άλλων προσαρμογών. Για να επιτύχουμε επιτέλους έναν όμορφο ιστό για κινητά, έτοιμο να ξεκινήσει.
Πώς να φτιάξετε έναν Responsive Ιστότοπο; – Τα τεστ και τα τεστ
Όταν σχεδιάζετε όχι μόνο από την άποψη της ανάπτυξης ιστοσελίδων, αλλά σε οποιαδήποτε δημιουργία ή δόμηση κάτι νέου. Υπάρχει ένα στάδιο δοκιμής ή δοκιμής, όπου μπορείτε να ελέγξετε τα αποτελέσματα, εάν είναι βέλτιστα ή απαιτούν βελτιώσεις.
Τούτου λεχθέντος, είναι βολικό να πραγματοποιήσετε έναν έλεγχο ή δοκιμή αφού έχετε εκτελέσει όλη την προηγούμενη διαδικασία. Αυτές οι δοκιμές θα πρέπει να εκτελούνται καθώς εκτελούνται τα βήματα και να είναι δυνατή η επαλήθευση των αλλαγών που επιτυγχάνονται σε κάθε ένα. Κατά τον ίδιο τρόπο, είναι απαραίτητο να πραγματοποιηθούν οι παρακάτω δύο έλεγχοι στη λειτουργία του ιστού
Πηγαίνετε σε δοκιμή στο πρόγραμμα περιήγησης
Καθώς εργάζεστε στη σχεδίαση με απόκριση, πρέπει να προσαρμόσετε το πλάτος της οθόνης. Για να ελέγξουμε τις νέες προσαρμογές, που παίρνουν νέες μορφές. Με τον ίδιο τρόπο, μπορούν να εντοπιστούν μικρά σφάλματα και, επομένως, να είναι δυνατή η πραγματοποίηση προσαρμογών στα ερωτήματα των μέσων που χρησιμοποιούνται. Για να ελέγξετε τα πλάτη της οθόνης, υπάρχουν δύο τρόποι για να το κάνετε:
- Ενεργήστε ζωντανά καταργώντας τη μεγιστοποίηση του προγράμματος περιήγησης για να δοκιμάσετε το πλάτος του.
- Χρησιμοποιήστε πράγματα όπως το ISH ένα χρήσιμο εργαλείο για να πραγματοποιήσετε αυτές τις ρυθμίσεις δοκιμής με απλές εντολές.
Παράκαμψη της προσωρινής μνήμης για κινητά
Οι κινητές συσκευές από τη φύση τους αποθηκεύουν δεδομένα σε κρυφή μνήμη πέρα από αυτό που είναι απαραίτητο, ακόμη περισσότερο από ό,τι ένα κανονικό πρόγραμμα περιήγησης. Στα συνηθισμένα, συνήθως αρκεί να εκτελέσετε το συνδυασμό πλήκτρων CTRL+F5 για να προκαλέσετε φορτία χωρίς προσωρινή μνήμη. Αν και αυτός ο τύπος ενέργειας είναι δύσκολος σε κινητά τηλέφωνα, ακόμη και ορισμένα προγράμματα περιήγησης έχουν την επιλογή να απενεργοποιήσουν την προσωρινή μνήμη. Προκειμένου να διευκολυνθεί η καλύτερη εργασία χωρίς την προσωρινή μνήμη, συνιστώνται τα ακόλουθα:
- Εργαστείτε με μεταβλητές στην κλήση Css, όπως:
"/styles.css?version=xxxx"
Κάνοντας την τροποποίηση σε κάθε συγκεκριμένη περίπτωση τον αριθμό έκδοσης. Για να είναι διαφορετική η διεύθυνση URL, ώστε να μην χρησιμοποιεί την κρυφή μνήμη.
- Εργαστείτε απευθείας στο πρόγραμμα περιήγησης. Αυξάνοντας απαλά την ελάχιστη ανάλυση για κινητά, μεταξύ 420 και 450 pixel. Με αυτόν τον τρόπο μπορείτε να κάνετε την εμφάνισή του στο πρόγραμμα περιήγησης με το να συρρικνωθεί αρκετά. Ένας άλλος τρόπος είναι μέσω της χρήσης εργαλείων που αλλάζουν μέγεθος ιστοσελίδων.
Με αυτές τις ενέργειες, χωρίς αμφιβολία, θα έχετε ένα πιο πρακτικό και άνετο αποτέλεσμα κατά τη διεξαγωγή των δοκιμών.
Πώς να φτιάξετε έναν Responsive Ιστότοπο; - Συμπέρασμα
Σε όλα τα παραπάνω ήταν δυνατό να γνωρίζουμε κάποιες τεχνικές, τεχνολογικά εργαλεία και διαδικασίες που εφαρμόζονται συχνά στη σχεδίαση ενός responsive web. Όλες αυτές οι γνώσεις μπορούν επίσης να εφαρμοστούν σε έναν υπάρχοντα ιστότοπο που θέλετε να φέρετε σε μια προσαρμοστική σχεδίαση. Χωρίς να χρειάζεται να εργαστείτε για τη δημιουργία μιας νέας ιστοσελίδας.
Επομένως, στην επόμενη ερώτηση: Κάνοντας όλα όσα έχετε μάθει, είναι δυνατόν να φτιάξετε μια ιστοσελίδα με responsive design; Προφανώς η απάντηση είναι ένα ηχηρό Όχι. Γιατί; Επειδή ήταν δυνατό μόνο να γίνει ένας ιστότοπος ευαίσθητος στις προσαρμογές, κάτι που αρχικά δεν ήταν. Εφόσον συνελήφθη υπό άκαμπτο ή σταθερό χαρακτήρα.
Πιθανές συνέπειες ή σφάλματα
Κατά τη διαδικασία προσαρμογής ενός παραδοσιακού ιστότοπου ή ενός πιο ευαίσθητου σε αλλαγές, μπορεί να οδηγήσει σε ορισμένα λάθη και επομένως θα προκύψουν ορισμένες συνέπειες, ας δούμε:
-Πρέπει να εξαλειφθούν ορισμένα στοιχεία που ήταν ζωτικής σημασίας κατά τη δημιουργία της σελίδας. Από την άλλη, η ενέργεια της εξάλειψής τους έγινε με βάση την εμφάνιση και όχι λόγω της σημασίας του περιεχομένου που πρέπει να μεταδοθεί στον επισκέπτη του διαδικτύου.
-Μπορεί να μην έχει επιτύχει την τελειότητα στο συνολικό οπτικό κομμάτι. Να μπορείς να βελτιώσεις μόνο την υπάρχουσα. Εντελώς διαφορετική περίπτωση εάν δημιουργήθηκε ένας ιστός από την αρχή.
-Ανάλογα με το μοντέλο του αρχικού ιστότοπου, μπορεί να φτάσει ή να μην φτάσει στο τέλος της προσαρμογής στις αλλαγές. Με κάποιες μακέτες οι προγραμματιστές σε αυτή την προσπάθεια, θα μπορούν να κάνουν μόνο ενδιάμεσες λύσεις.
Τέλος σχετικά με το responsive design
Τελικά, αυτό που πραγματοποιήθηκε ήταν μόνο απλές λεπτομέρειες. Επισήμανση της σημασίας της εργασίας για την απόκτηση ενός μοντέλου προσαρμόσιμου σε ένα σχέδιο που δεν ήταν αρχικά. Όταν διαβάζετε Responsive Design, καταλαβαίνετε ότι μιλάτε για σχέδιο και όχι για εργασία διάταξης. Επομένως, ο τρόπος δημιουργίας ενός responsive ιστότοπου πρέπει να προέρχεται από το πλαίσιο ενός πρωτότυπου νέου σχεδίου.
Ωστόσο, η δυνατότητα εμφάνισης ενός ιστότοπου που μπορεί να αλλάξει και να προσαρμοστεί στην ανάλυση ενός κινητού, ξεκινώντας από έναν άκαμπτο, είναι ένα αρκετά μεγάλο και χρήσιμο επίτευγμα. Αυτό που εξηγείται εδώ δεν σημαίνει ότι έχετε ήδη εκπαιδευτεί στο responsive design. Για αυτό χρειάζεται πολύ περισσότερη έρευνα.
Επειδή θα χρειαζόταν πολύ περισσότερη βάση, γνώση και εκμάθηση διαφορετικών πιο γενικευμένων, πιο τεχνικών διαδικασιών.
Πώς να δημιουργήσετε έναν αποκρινόμενο ιστότοπο – Τελικές συμβουλές
Συμπερασματικά, είναι σημαντικό να γνωρίζουμε ότι ο ανταποκρινόμενος σχεδιασμός είναι αυτό που υπάρχει στο διαδίκτυο. Αυτός ο τύπος σχεδίασης ιστοσελίδων απαιτεί έναν νέο τρόπο σκέψης. Η ανάπτυξη αυτών των ιστότοπων μπορεί να είναι ευκολότερη ακολουθώντας τις ακόλουθες συμβουλές:
- Σκεφτείτε πρώτα το κινητό: Όταν σχεδιάζετε, είναι βολικό να ξεκινήσετε πρώτα προσαρμόζοντας το μικρό μέγεθος μιας οθόνης κινητού. Έτσι, μετά την προσαρμογή του περιεχομένου στις οθόνες μεγαλύτερων μεγεθών. Γιατί, όταν σχεδιάζετε έχοντας στο μυαλό σας ένα κινητό τηλέφωνο, μπορείτε να είστε πιο αντικειμενικοί με το περιεχόμενο που πρέπει να εμφανίζεται στη σελίδα, αφήνοντας μόνο ό,τι είναι πραγματικά σημαντικό να παρουσιάσετε.
- ΜΗΝ βελτιστοποιήσετε τη σχεδίαση για ένα συγκεκριμένο κινητό ή tablet
- Ακολουθήστε τα πρότυπα και τις καλές πρακτικές: Για παράδειγμα, μη χρήση στυλ CSS που ορίζονται στο ίδιο το αρχείο, μέσα στις ετικέτες Html.
- Αποφύγετε να είστε σκλάβοι του pixel στο σχέδιο: Λάβετε υπόψη ότι τα στοιχεία βρίσκουν τη θέση που τους αντιστοιχεί. Αυτό συμβαίνει επειδή φροντίζουν για τη ρευστότητα των δοχείων και τη διαστασιολόγηση. Όταν συμβαίνει ότι δεν εμφανίζεται όπως επιθυμείτε, απλώς διορθώστε τη διάταξη των στοιχείων εφαρμόζοντας τα ερωτήματα πολυμέσων.