Οι χρήστες που έχουν πρόσβαση στο Διαδίκτυο μέσω tablet και κινητών τηλεφώνων αυξάνονται. Αυτό, όπως γνωρίζετε ήδη, σημαίνει ότι δεν αρκεί να σχεδιάζουμε μόνο μια καλή ιστοσελίδα που φαίνεται καλή στον υπολογιστή μας: πρέπει επίσης να εμφανίζεται σε κάθε φορητή συσκευή. Το πρόβλημα? Διαφορετικά μεγέθη οθόνης και αναλύσεις. Γι 'αυτό είναι τόσο δύσκολο να φτιάξετε ένα σχέδιο που να προσαρμόζεται σωστά σε όλα τα μέσα (το περίφημο ανταποκρίνονται σχεδιασμό, μεταφράστηκε ως προσαρμοστικός σχεδιασμός).
Ακολουθούν μερικές συμβουλές που πρέπει να θυμάστε όταν κάνετε ένα σχέδιο με αυτά τα χαρακτηριστικά. Δώσε προσοχή!
Συμβουλές για προσαρμοστικό σχεδιασμό
- Δημιουργήστε ένα απλό πρότυποΜε απλά λόγια δεν εννοώ ήπια. Μιλώ για το δομή HTML του ιστότοπού σας: όσο πιο καθαρός είναι, τόσο το καλύτερο. Λάβετε υπόψη ότι μια οθόνη υπολογιστή μπορεί να χωρέσει τρεις κάθετες στήλες. στην οθόνη ενός κινητού, θα χωράτε μόνο ένα. Σκεφτείτε το και πώς θα επανατοποθετήσετε τα στοιχεία.
- Εξαλείψτε όλα τα περιττάΑποφύγετε τα εφέ jQuery, κινούμενες εικόνες Flash και οποιονδήποτε άλλο κώδικα που επιβραδύνει τη φόρτωση της σελίδας σας. Όσο λιγότερο περιεχόμενο αυτού του τύπου έχετε, τόσο πιο γρήγορα θα φορτωθεί ο ιστός.
- Ορίστε ένα στυλ css για κάθε "μέγεθος"Δημιουργήστε tiny.css, small.css και big.css (για παράδειγμα) που εκτελείται με βάση τη συσκευή στην οποία προβάλλεται. Για παράδειγμα:
@import url (tiny.css) (ελάχιστο πλάτος: 300 εικονοστοιχεία);
@import url (small.css) (ελάχιστο πλάτος: 600 εικονοστοιχεία);
@import url (big.css) (ελάχιστο πλάτος: 900 εικονοστοιχεία);
- Οι πιο χρησιμοποιούμενες αναλύσεις320px/480px/720px/768px/900px/1024px
- Κάντε το πρότυπό σας ευέλικτοΌποτε μπορείτε, εργαστείτε με ποσοστά αντί για σταθερά ποσά. Ακολουθούν μερικές ισοδυναμίες αναφοράς: 200px = 15'38% / 300px = 23'07% / 800px = 61'5384615384%
- Τυπογραφία πιο σημαντικό από ποτέ Μερικές φορές η οθόνη της συσκευής σας μπορεί να είναι τόσο μικρή που το μόνο που βλέπετε είναι κείμενο. Γι 'αυτό πρέπει να επιλέξουμε πολύ προσεκτικά τις καλύτερες γραμματοσειρές στον ιστότοπό μας, έτσι ώστε όταν έχουν μικρότερο μέγεθος να μην χάνουν την αναγνωσιμότητα. Επιπλέον, πρέπει να γνωρίζουμε πώς να συνδυάσουμε πιο ουδέτερες γραμματοσειρές με άλλους με προσωπικότητα που δίνουν στον ιστό τον απαραίτητο χαρακτήρα. Επομένως, η πρώτη συμβουλή είναι ότι ξοδεύετε χρόνο επιλέγοντας τις γραμματοσειρές που πρόκειται να χρησιμοποιήσετε.
- ΗΠΑ εικόνες υψηλής ποιότηταςΚαθώς ο χώρος μειώνεται, οι εικόνες θα το συνοδεύουν. Επιλέξτε αυτά που δεν χάνουν την ποιότητα όταν μειώνεται και λειτουργούν το ίδιο όταν κλιμακώνονται. Μια εικόνα χαμηλής ποιότητας θα κάνει τον ιστότοπό σας να φαίνεται κακό.
- Ότι οι εικόνες σας φαίνονται πάντα γεμάτοςΑποτρέψτε την αποκοπή των φωτογραφιών σας προσθέτοντας τον κώδικα img (πλάτος: 100%;) στα css σας. Με αυτόν τον τρόπο, λέτε στη συσκευή να υπολογίσει εκ νέου το ύψος που πρέπει να δοθεί στην εικόνα, έτσι ώστε το πλάτος της να μπορεί να φαίνεται εκατό τοις εκατό.
- Όλα χαμηλά το ίδιο URLΞεχάστε υποτομείς όπως το www.mysite.com/mobile, καθώς το ίδιο αρχείο index.html στον ριζικό φάκελο θα λειτουργήσει για όλες τις συσκευές (αν κάνετε σωστά την προσαρμοστική σχεδίαση). Γνωρίζετε ήδη το πλεονέκτημα: όσο λιγότεροι υποτομείς, τόσο πιο γρήγορη θα είναι η φόρτωση της σελίδας.
- Επωφεληθείτε από τα στηρίγματα: Να είστε ευφάνταστοι Δεν είναι το ίδιο να έχετε πρόσβαση σε έναν ιστότοπο από έναν επιτραπέζιο υπολογιστή παρά από ένα iPad ή ένα κινητό τηλέφωνο. Με το πρώτο, θα πλοηγηθείτε με ήρεμο και ήρεμο τρόπο. Με το τελευταίο, θα το κάνετε σε αδρανείς ώρες και θα κλείσετε το παράθυρο μόλις βαρεθείτε. Επωφεληθείτε από αυτές τις προϋποθέσεις για να διασκεδάσετε τον χρήστη και να τους διασκεδάσετε σε αυτά τα λίγα λεπτά που πρόκειται να σας αφιερώσουν. Ίσως όταν φτάσει στο σπίτι, θα αποφασίσει να σας επισκεφτεί με έναν πιο χαλαρό τρόπο.
- Εμπνέομαι Στις ψηφιακές δημοσιεύσεις, θα αναρωτιέστε γιατί αυτή η συμβουλή. Πολύ εύκολο: ψηφιακά περιοδικά (καλό) γνωρίζουν πώς να εκμεταλλευτούν την υποστήριξη και ο σχεδιασμός τους είναι πολύ έξυπνος. Εμπνευστείτε από αυτούς και δημιουργήστε έναν ιστότοπο που είναι δύσκολο να εγκαταλείψετε.
Περισσότερες πληροφορίες - Ψηφιακά περιοδικά
Πηγή - Σπλιό, 960.gs, στήλη
Υπάρχουν πράγματα που δεν συμφωνώ πάρα πολύ.
Στο σημείο 5 ... από 200px = 15,38% και τα ακόλουθα ... αυτή η σύγκριση αναφοράς δεν μπορεί να πραγματοποιηθεί χωρίς κανένα γονικό μέτρο, το μέγεθος ανά pixel δεν είναι σχετικό μέτρο όπως τα ποσοστά!
Προσδιορίστε τις εικόνες με πλάτος: 100% λάθος, δεν νομίζω ότι πρέπει να είναι μια πρόταση. Οι εικόνες τις ορίζουν καλύτερα με το πλάτος και το ύψος τους, οπότε ο διακομιστής παίρνει λιγότερο χρόνο για να επεξεργαστεί τις πληροφορίες (δεν χρειάζεται να υπολογίσει το μέγεθός του) και βελτιώνουμε την ταχύτητα φόρτωσης της σελίδας (η οποία είναι πολύ σημαντική σε προσαρμοστικούς ή αποκριτικούς ιστούς σχέδιο).
Θα συμπεριλάμβανα ήδη, παρόλο που είναι δουλειά μύτης ... εικόνες για οθόνες αμφιβληστροειδούς. Αν θέλουμε να κάνουμε αποκριτική σχεδίαση ιστού, είναι υποχρεωτικό να χρησιμοποιούμε εικόνες για εμφάνιση αμφιβληστροειδούς, καθώς ένα υψηλό ποσοστό προβολών κινητών και tablet χρησιμοποιούν αυτές τις οθόνες. Επομένως, δεν έχει νόημα να βάλουμε την προσπάθεια σε ένα σχέδιο για τους στο μισό γκάζι.
Καλό για τα υπόλοιπα
Στο σημείο 5, σας βάζουν στο πλαίσιο και σας λένε για μια συνολική διάταξη 1300 εικονοστοιχείων με 3 στήλες, μία από τις 200, 300 και 1000.
Εάν το μεταβιβάσετε σε ποσοστά, στην περίπτωσή τους είναι όπως λέτε, 15,38% ((200 * 100) / 1300) (δεκαδικό παρακάτω, διεθνές σύστημα: P)
Αλλά αν μιλάμε για διάταξη 500 εικονοστοιχείων και έχουμε 3 στήλες, μία από τις 200, άλλη από 200 και άλλη από 100 εικονοστοιχεία, τα ποσοστά δεν είναι πλέον τα ίδια, στην περίπτωση αυτή 200 εικονοστοιχεία = 40% ((200 * 100) / 500)
Θα ήταν: 200px = 40% και 100px = 10%
Έλα, όπως είπα, δεν είναι μια αναφορά που υποδεικνύεις, είναι μόνο μια αναφορά σε διάταξη 1300px.
αφορά
Τι αποτυχία, έχετε απόλυτο δίκιο στον κόσμο! Ευχαριστώ και πάλι ;)