Ανταποκρινόμενες διατάξεις διάταξης ιστού για εισαγωγές σε οθόνες κινητών τηλεφώνων, συμβουλές και παραδείγματα
Οι σχεδιαστές το έχουν τώρα πιο σκληρές από πριν. Δεν πρέπει μόνο να σχεδιάζουμε για σταθερές συσκευές, αλλά και για κινητές συσκευές όπως το tablet και τα smartphones, και αφού μιλάμε για πολλά διαφορετικά μεγέθη οθόνης και αναλύσεις εδώ, είναι ένα τεράστιο έργο στον ώμο. Υπό το πρίσμα αυτό, σχεδιασμός ιστοσελίδων προσαρμοζόμενος σε συσκευές θα μπορούσε να είναι η καλύτερη λύση. Προσφέρει κάτι περισσότερο από απλό πρότυπο κινητού. Αντίθετα, ολόκληρη η διάταξη του ιστότοπού σας έχει σχεδιαστεί ώστε να είναι αρκετά ευέλικτη ώστε να ταιριάζει σε οποιαδήποτε δυνατή ανάλυση οθόνης.
Με ένα τέτοιο σχέδιο σχεδιασμού υγρών υπάρχουν προφανή οφέλη και μειονεκτήματα. Εξετάστε τα παραδείγματα μου παρακάτω για το πώς ο ευαίσθητος σχεδιασμός ιστοσελίδων μπορεί να κάνει τη μετάβαση σε κινητές συσκευές πιο ομαλή.
Πώς λειτουργεί ο υπεύθυνος σχεδιασμός
Όταν χρησιμοποιώ τη λέξη “αποκριτικός” από την άποψη του σχεδιασμού ιστοσελίδων εννοώ ότι ολόκληρη η διάταξη ανταποκρίνεται με βάση την ανάλυση οθόνης του χρήστη. Φανταστείτε αυτό το σενάριο: διαβάζετε έναν ιστότοπο σε ένα tablet, κατόπιν αλλάζετε σε άλλη συσκευή για κάποιο λόγο. Το παράθυρο του προγράμματος περιήγησης τώρα έχει ξανά μέγεθος. Μια αντανακλαστική διάταξη σχεδίασης ιστοσελίδων θα περιλαμβάνει σχήματα και μια διάταξη που χωρίζει με χαρά και επανεμφανίζεται. Από την άποψη της χρηστικότητας, αυτή είναι μια λαμπρή τεχνική.
Ο ανταποκρινόμενος σχεδιασμός αφορά στη δημιουργία μιας ομοιογενούς εμπειρίας ανεξάρτητα από το μέγεθος του browser ή του μεγέθους της συσκευής. Βρήκα το τέλειο παράδειγμα από το 'A List Apart' για να επεξηγήσω το σημείο μου, το οποίο περιλαμβάνει επίσης δυναμικές εικόνες. Το πλάτος έχει οριστεί σε CSS χρησιμοποιώντας ποσοστά για το σύνολο σχεδόν των εσωτερικών στοιχείων δοχείων. Οι μεγαλύτερες ιστοσελίδες ανταποκρίνονται επίσης καλά στην κατάργηση δυναμικού περιεχομένου, όπως JavaScript, όταν δεν υποστηρίζονται.
Γιατί Σχεδιασμός για κινητά?
Έχει καταστεί προφανές ότι περισσότεροι χρήστες κινούνται προς κινητά, και όχι μόνο για την περιήγηση στο διαδίκτυο, είτε. Τα Tablet PCs έχουν αρχίσει να αλλάζουν στο πλαίσιο όταν οι χρήστες είναι online στην τάξη. Ο σχεδιασμός για κινητά είναι σίγουρα μια απαίτηση στα σύγχρονα πρότυπα ιστού. Το μόνο πρόβλημα είναι να επιλέξετε την μέθοδο ανάπτυξης και να στοχεύσετε σωστά το ακροατήριό σας.
Όταν ξεκινάτε την κωδικοποίηση για συγκεκριμένες αναλύσεις οθόνης καταλήγετε σε πάρα πολλά φύλλα στυλ για να τα αντιμετωπίσετε. Τα ερωτήματα των μέσων μαζικής ενημέρωσης στο CSS3 μπορούν να χρησιμοποιηθούν για την κατασκευή σχετικών διατάξεων iPhone για προβολή σε κατακόρυφο και οριζόντιο επίπεδο. Δεδομένου ότι μπορείτε να προκαθορίσετε την πυκνότητα των pixel, είναι εύκολο να ανανεώσετε οποιοδήποτε πρότυπο HTML για κινητά.
(Εικόνα Πηγή: bradfrostweb)
Αλλά όταν κωδικοποιείτε μια διάταξη για ευαίσθητο σχεδιασμό, οι κινητές πτυχές φροντίζονται από προεπιλογή. Τόσο οι χρήστες υπολογιστών όσο και οι χρήστες κινητής τηλεφωνίας θα έχουν μια παρόμοια εμπειρία και δεν θα χρειαστεί να ανησυχείτε για τις εξωτερικές ιδιότητες του CSS. Η μόνη έρευνα που πρέπει να εκτελέσετε σχεδιάζεται για τη μικρότερη δυνατή οθόνη. Τα δεδομένα επισκεψιμότητας του Google Analytics μπορούν να σας βοηθήσουν πολύ.
Δεν θα έχετε πιθανώς την ιστοσελίδα σας να λειτουργεί 100% σε κάθε συσκευή που εκτελεί κάθε πρόγραμμα περιήγησης. Αλλά μπορείτε να στοχεύσετε μια πλειοψηφία με βάση το μέσο πλάτος της οθόνης. Τα παλαιότερα μοντέλα iPhone χρησιμοποιούν ανάλυση οθόνης 320 × 480 που δεν είναι τόσο απίστευτη. Θα πυροβόληκα για ένα ελάχιστο πλάτος 240px, ή ακόμα μικρότερο, αν το χωράει.
Αφαίρεση του προεπιλεγμένου ζουμ
Εάν έχετε περάσει οποιαδήποτε στιγμή περιήγηση στο Web σε ένα smartphone θα παρατηρήσετε τον τρόπο με τον οποίο οι ιστότοποι έχουν κλιμακωθεί ώστε να εμφανίζονται πλήρως στην οθόνη. Αυτό είναι για την ευκολία του χρήστη, αφού οι περισσότεροι ιστότοποι δεν έχουν κινητό αντίγραφο, οπότε η πλήρης διάταξη είναι το ασφαλέστερο στοίχημα.
Αλλά όταν φτάσετε στην κατασκευή ενός ανταποκρινόμενου σχεδιασμού κινητού, το αυτόματο ζουμ μπορεί πραγματικά να βρωμίσει τα στοιχεία της διάταξης. Συγκεκριμένα, οι εικόνες και το περιεχόμενο πλοήγησης μπορεί να φαίνονται μικρές ή πολύ μεγάλες στη διάταξή σας. Υπάρχει μια ειδική μετα-ετικέτα που μπορείτε να προσθέσετε στην κεφαλίδα του εγγράφου, η οποία επαναφέρει αυτήν την ενέργεια στις περισσότερες συσκευές Android και iPhone.
Αυτό είναι γνωστό ως μετα-ετικέτα προβολής το οποίο δημιουργεί ορισμένες προσαρμοσμένες μεταβλητές μέσα στο περιεχόμενο. Η Apple έχει μια σελίδα τεκμηρίωσης σχετικά με μερικές άλλες ετικέτες meta που πρέπει να εξετάσετε, αν και αυτές είναι ειδικά προσαρμοσμένες σε ιστότοπους στο iOS. ο αρχική κλίμακα η αξία είναι σημαντική καθώς αυτή η προεπιλογή του ιστότοπού σας γίνεται με πλήρη ζουμ 100%.
Η τελευταία τιμή για με δυνατότητα κλιμάκωσης από το χρήστη θα αφαιρέσει πλήρως αυτή τη λειτουργία ζουμ έτσι ώστε ο χρήστης να μην μπορεί να αλλάξει το μέγεθος της διάταξης. Αυτό θα κλειδώσει το σχέδιο σε ένα μέγεθος με βάση το πλάτος της συσκευής. Λάβετε υπόψη ότι ακόμη και αν απενεργοποιήσετε τη λειτουργία ζουμ, ένα καλό σχεδιασμό που θα ανταποκρίνεται θα προσαρμοστεί ακόμα κατά τη μετάβαση από πορτραίτο σε τοπίο σε οποιαδήποτε συσκευή! Αλλά έχει νόημα να κλειδώσετε ένα σχέδιο που ανταποκρίνεται και να αφαιρέσετε τις γενικές επιλογές κλιμάκωσης.
Δυναμική κλιμάκωση εικόνας
Οι εικόνες είναι μια άλλη σημαντική πτυχή σχεδόν κάθε ιστοτόπου. Οι χρήστες κινητών ενδέχεται να μην ψάχνουν για ροή βίντεο, αλλά οι φωτογραφίες είναι μια εντελώς διαφορετική ιστορία. Αυτοί είναι επίσης οι μεγαλύτεροι ενόχοντες όταν πρόκειται για διατάξεις που ξεσπούν από το μοντέλο του κιβωτίου.
img μέγιστο πλάτος: 100%;
Ο τυπικός κανόνας για το CSS είναι να εφαρμόσει μια ιδιότητα μέγιστου πλάτους σε όλες τις εικόνες. Δεδομένου ότι θα είναι πάντα στο 100% δεν θα παρατηρήσετε ποτέ στρεβλώσεις. Όταν ο χρήστης ξαναδιαμορφώσει το παράθυρο του προγράμματος περιήγησης που είναι μικρότερο από το μέγεθος που μπορεί να χειριστεί η εικόνα, θα επανεκρυθμιστεί αυτόματα σε πλάτος 100%. Το πρόβλημα είναι ότι ο Internet Explorer δεν μπορεί να κατανοήσει αυτήν την ιδιότητα, οπότε θα πρέπει να δημιουργήσετε ένα συγκεκριμένο φύλλο στυλ IE χρησιμοποιώντας πλάτος: 100%..
Ευέλικτες εικόνες είναι επίσης δυνατές αν χρησιμοποιείτε plug-ins JavaScript ή jQuery. Υπάρχουν μερικοί πραγματικά έξυπνοι προγραμματιστές εκεί έξω που έχουν βάλει στο χρόνο να οικοδομήσουμε απίστευτα ανταποκρινόμενο περιεχόμενο εικόνας. Αυτό το νήμα είναι μόνο ένα από τα πολλά στο Overflow Stack το οποίο διαθέτει μια ξεχωριστή αλλά βολική προσέγγιση για την επίλυση των σφαλμάτων IE6 / 7.
Θα ήθελα προσωπικά να συστήσω να κολλήσει σε φυσική αλλαγή CSS εικόνας. Εάν ο ιστότοπός σας λειτουργεί σε ένα πρόγραμμα περιήγησης για κινητά με ενεργοποιημένη τη JavaScript, είναι πιθανό να υποστηρίξει και το CSS. Εάν θέλετε πραγματικά να σκάβετε βαθύτερα, ελέγξτε έξω αυτό το 24 τρόποι άρθρο Εικόνες για προσαρμοστικά σχέδια ...
Σχετικά με τα σχέδια
Οι προγραμματιστές Ιστού ίσως ξεχάσουν ότι οι χρήστες κινητών τηλεφώνων δεν βρίσκονται πλέον σε πληκτρολόγια όπως το BlackBerrys. Η πλειοψηφία των smartphones χρησιμοποιούν σήμερα διασυνδέσεις αφής, οι οποίες αποδίδουν διαφορετικό σενάριο από τις ρυθμίσεις του ποντικιού και του πληκτρολογίου.
Ως εκ τούτου, θα πρέπει να εξετάσετε εναλλακτικές λύσεις σε κινητά στοιχεία. Τα μενού αναπτυσσόμενων προγραμμάτων ενδέχεται να λειτουργούν καλύτερα όταν εμφανίζονται ως ένα μενού στη δεξιά πλευρά. Οι περισσότεροι χρήστες είναι σε θέση να αγγίξουν συνδέσμους στη δεξιά πλευρά πιο εύκολο από το αριστερό, αλλά κάθε στήλη λειτουργεί για να ανακουφίσει το χώρο. Χρησιμοποιώντας περιθωριακά περιθώρια, είναι εύκολο να προσδιορίσετε την ιεραρχία συνδέσμων χωρίς να απαιτήσετε κάποιο κωδικό jQuery.
Είναι επίσης καλή πρακτική η αύξηση του μεγέθους αυτών των συνδέσεων πλοήγησης. Οι χρήστες κινητής τηλεφωνίας δεν έχουν την πολυτέλεια μεγάλων οθονών που προσφέρονται στους επιτραπέζιους υπολογιστές ή ακόμα και στους φορητούς υπολογιστές. Θα χρειαστεί να κρατήσετε το κείμενο μεγάλο, μετωπικό, ικανό για βρύση και ευανάγνωστο με κάθε κόστος. Ίσως θελήσετε να αλλάξετε το μέγεθος εάν ο χρήστης αλλάζει μεταξύ κατακόρυφου και οριζόντιου προσανατολισμού - μια αρκετά συνηθισμένη επανάληψη κατά την περιήγηση στον ιστό του κινητού.
Προσαρμοσμένες διατάξεις CSS
Γενικά, είναι καλύτερο να προσαρμόσετε τη διάταξη και να επιτρέψετε τη φυσική υποβάθμιση του περιεχομένου σας. Αν έχετε μια πλευρική γραμμή και μια περιοχή περιεχομένου, πρέπει να τις ορίσετε σε πλάτη ποσοστών ή ems, οτιδήποτε θα ξαναδιαμορφωθεί με το παράθυρο του προγράμματος περιήγησης. Αν εφαρμόζετε ένα min-πλάτος αυτό τελικά θα σπάσει μέρος της διάταξης? έτσι ώστε το περιεχόμενο της πλευρικής γραμμής να εμφανίζεται πάνω από το περιεχόμενο της σελίδας.
(Πηγή εικόνας: Pepperson)
Όταν εξετάζετε πώς αυτό επηρεάζει τη συνολική σχεδίαση, είναι πολύ πιο εύκολο να αναπτύξετε εξωτερικά φύλλα στυλ. Ωστόσο, είναι πιθανό να εκτελέσετε αναλύσεις οθόνης που είναι πολύ μικρές για να σας δώσουν τη διάταξη. Αυτό είναι το τέλειο σενάριο για την προσθήκη προσαρμοσμένων ιδιοτήτων CSS για την κατάργηση τμημάτων της σελίδας ή για την αναμόρφωση του περιεχομένου εντελώς.
Εναλλαγή ενεργοποίησης / απενεργοποίησης επιπλέον περιεχομένου
Παραδείγματα μεγάλων μπλοκ περιεχομένου περιλαμβάνουν φόρμες ιστού, δυναμικά μενού, ρυθμιστικά εικόνας και άλλες παρόμοιες ιδέες. Αντί να αφαιρέσετε τελείως αυτά τα στοιχεία καθώς η διάταξη είναι μικρότερη γιατί να μην τα απλά να τα κρύψετε σε α “ελαχιστοποιηθεί” περιεχόμενο div; Θα μπορούσατε να χρησιμοποιήσετε το CSS ή το JavaScript για να εκτελέσετε τις επεξεργασίες, αλλά τελικά θα χρειαστείτε κάποιο κωδικό JS για να δημιουργήσετε ένα κουμπί εναλλαγής.
Αυτή η εναλλακτική λύση είναι ιδανική για τη διατήρηση της αρχικής σελίδας σας δυναμική και γεμάτη από πλούσια μέσα web. Αντί να απομακρύνετε εντελώς την πλοήγηση σας από το αναπτυσσόμενο μενού ή να αναδιατάξετε τη δομή σελίδας, μπορείτε να την αποκρύψετε μέσα σε ένα περιεχόμενο div. Αν ο χρήστης θέλει να εμφανίσει τους συνδέσμους σας, αγγίξτε ένα κουμπί εναλλαγής για να ανοίξετε / κλείσετε το μενού.
Αυτή η μορφοποίηση είναι απλή, διαισθητική και εύκολη στην εργασία με συσκευές αφής. Μέσα στο div μπορείτε να τοποθετήσετε κάθε ένα από τα αναπτυσσόμενα μενού δίπλα-δίπλα σε μορφή στήλης. Καθώς το παράθυρο αλλάζει ακόμη περισσότερο, θα πέσει φυσικά κάτω από το άλλο και θα αυξήσει το ύψος της σελίδας. Ωστόσο, η επιλογή να συρρικνωθεί ολόκληρο το μενού είναι εύκολο να επιτευχθεί και μόνο με ένα πάτημα μακριά. Αυτή η εναλλαγή div είναι επίσης ιδανική για τα ρυθμιστικά εικόνας σε συνεργασία με τη δυναμική αλλαγή μεγέθους φωτογραφιών.
Χρήση ερωτημάτων μέσων
Εάν μια οθόνη για κινητά θα σπάσει τη διάταξη των 2 ή 3 στηλών, θα καταλήξετε σε κάθε μία από τις περιοχές περιεχομένου στοιβαγμένες πάνω από την άλλη. Ολόκληρος ο χώρος φαίνεται να αιμορραγεί και μπορεί να αποβεί πολύ μπερδεμένος χωρίς διακεκριμένες περιοχές. Μια καλύτερη ιδέα είναι να προσθέσετε ένα κάτω όριο σε κάθε στήλη, μόνο για κινητές συσκευές, χρησιμοποιώντας ένα εξωτερικό φύλλο στυλ όπως mobile.css.
Με αυτά τα νέα στυλ το περιεχόμενό σας χωρίζεται σε διαιρέσιμα τμήματα. Το χαρακτηριστικό γνώρισμα των μέσων ενημέρωσης παραπάνω έχει σχεδιαστεί ειδικά για να στοχεύει τις παλαιότερες συσκευές iPhone σε οριζόντια προβολή. Αλλά θα ισχύει επίσης για συσκευές με οθόνες μικρότερες από 480 pixels. Χρησιμοποιήστε αυτό το πλεονέκτημα σας, ώστε να μπορείτε να καθορίσετε σε ποιο σημείο της διάταξης “χωρίζει”.
Υπάρχουν μερικές ακόμα επιλογές που μπορείτε να χρησιμοποιήσετε για τον εντοπισμό του προσανατολισμού της συσκευής. Αυτός ο φανταστικός οδηγός για τα μέσα ενημέρωσης του CSS μπορεί να σας δώσει μερικές ιδέες. Επιπλέον, το νέο κινητό έργο 320 και άνω προσφέρει ένα boilerplate για κινητό CSS @μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ στυλ. Αυτά μπορούν να συμπεριληφθούν απευθείας στο ίδιο αρχείο mobile.css και να εφαρμόσουν κανόνες για πολλές διαφορετικές συσκευές.
/ * Smartphones (πορτραίτο και οριζόντιος) ----------- * / @media μόνο οθόνη και (min-device-width: 320px) / / * Έξυπνα τηλέφωνα (οριζόντια) ----------- * / μόνο με οθόνη και (ελάχιστο πλάτος: 321px) / * Στυλ * / / * ------- * / μόνο οθόνη @media και (max-width: 320px) / * Styles * / / * iPads (πορτραίτο και τοπίο) ----------- * / @ Μόνο οθόνη μέσων και (ελάχιστο πλάτος συσκευής: 768px) και (max-device-width: 1024px) / * Styles * /
(Πηγή: ερωτήματα μέσων CSS3 σκληρού καπνού)
Χρήσιμα εργαλεία
- Σκελετός - Όμορφη πλατφόρμα για ευαίσθητο κινητό σχεδιασμό
- Προχωρώντας από την προσαρμοστική στην πλήρως ανταποκρινόμενη
Παρουσίαση: Όμορφα σχεδιαστικά σχέδια
Ελπίζω ότι αυτές οι συμβουλές και οι τεχνικές σχεδιασμού θα σας ενθαρρύνουν να προχωρήσετε στην οικοδόμηση συναρπαστικών διατάξεων που δεν ανταποκρίνονται μόνο στις οθόνες κινητής τηλεφωνίας αλλά και σε οποιαδήποτε κοινή συσκευή με περιήγηση στο διαδίκτυο. Για να διατηρήσω τη ροή των δημιουργικών χυμών, έχω βάλει μαζί μια μικρή βιτρίνα με ανταποκρινόμενα σχέδια για κινητά ιστό. Βεβαιωθείτε ότι έχετε ελέγξει μερικά από τα πιο μοναδικά χαρακτηριστικά και μοιραστείτε τις σκέψεις σας σχετικά με το σχεδιασμό ή το θέμα στην περιοχή συζήτησης.
κρεμάζοντας το φεγγάρι
Ξενοδοχεία Macdonald
CSS-Κόλπα
Happy Cog
Teixido
CSS Wizardry
Αρχιτέκτονες Πληροφοριών
ART = ΕΡΓΑΣΙΑ
Σχεδίαση με σκληρό καουτσούκ
Sony USA
Μελλοντικό φιλικό
Δεν μπορούμε να σταματήσουμε να σκέφτομαι
Αυθεντικές θέσεις εργασίας
Σχεδιασμός Colbow
320 και άνω
Fork CMS
Το χαρούμενο bit
Ηλεκτρικός πολτός
Foster Props
Πλεξικό
Κέικ Πρέτι
Περισσότερα Κίνδυνοι
Κέντρο Πληροφόρησης Οδοντιατρικής
Σχεδιασμός διασύνδεσης ριζών
Γεια σας Fisher
Διάσκεψη κορυφής του Κοινωνικού Εμπόρου
William Csete
Σκούρο ρομπότ
Meltmedia
Μείνετε συντονισμένοι!
Στη θέση του αύριο θα παρουσιάσουμε κάποια δωρεάν θέματα που ανταποκρίνονται στο WordPress μπορείτε να κάνετε λήψη για χρήση. Φροντίστε να συντονιστείτε για αυτό.
