Η τεχνολογία ανάπτυξης ιστοτόπων είναι μια πολύ πολύπλευρη διαδικασία. Ωστόσο, όλα τα στάδια του μπορούν να χωριστούν σε δύο κύρια συστατικά - το λειτουργικό και το εξωτερικό κέλυφος. Ή, όπως συνηθίζεται μεταξύ των webmasters, back-end και front-end, αντίστοιχα. Οι άνθρωποι που παραγγέλνουν τις ιστοσελίδες τους από στούντιο ανάπτυξης ιστοσελίδων συχνά πιστεύουν αφελώς ότι αξίζει να εστιάσουμε μόνο στη λειτουργικότητα και αυτή θα είναι η σωστή απόφαση. Αλλά αυτό ισχύει σε πολύ, πολύ σπάνιες περιπτώσεις, συνήθως για έργα εκκίνησης στο στάδιο της δοκιμής beta. Διαφορετικά, η γραφική σχεδίαση και η διεπαφή χρήστη απαιτείται απλώς να συμμορφώνονται με τα πρότυπα ανάπτυξης ιστού και να είναι βολικά.
Ο πρώτος ακρογωνιαίος λίθος που αντιμετωπίζει ο σχεδιαστής διεπαφής ή ο σχεδιαστής είναι το πλάτος της διάταξης του ιστότοπου. Μετά από όλα, γι 'αυτό είναι απαραίτητο να σχεδιάσετε διεπαφές. Καθαρά διαισθητικά, προκύπτουν δύο προσεγγίσεις - είτε να δημιουργήσετε ξεχωριστές διατάξεις για κάθε δημοφιλή ανάλυση οθόνης ή να δημιουργήσετε μία έκδοση του ιστότοπου για όλες τις οθόνες. Και οι δύο επιλογές θα είναι λανθασμένες, αλλά πρώτα πρώτα.
Τυπικό πλάτος ιστότοπου σε pixelγια Runet
Πριν από την ανάπτυξη της προσαρμοστικής διάταξης, η ανάπτυξη μιας τοποθεσίας με πλάτος χιλίων pixel ήταν ένα μαζικό φαινόμενο. Αυτό το σχήμα επιλέχθηκε για έναν απλό λόγο - έτσι ώστε ο ιστότοπος να ταιριάζει σε οποιαδήποτε οθόνη. Και αυτό έχει τη δική του λογική, αλλά ας υποθέσουμε ότι ένα άτομο εξακολουθεί να έχει τουλάχιστον μια οθόνη HD σε έναν επιτραπέζιο υπολογιστή. Σε αυτήν την περίπτωση, η διάταξή σας θα φαίνεται σαν μια μικροσκοπική λωρίδα στη μέση της οθόνης, όπου όλα είναι κολλημένα μεταξύ τους σε έναν σωρό και στα πλάγια υπάρχει ένας τεράστιος αχρησιμοποίητος χώρος. Τώρα ας υποθέσουμε ότι ένα άτομο έχει πρόσβαση στον ιστότοπό σας σε ένα tablet με ευρεία οθόνη 800 px και η "Εμφάνιση πλήρους ιστότοπου" είναι επιλεγμένη στις ρυθμίσεις. Σε αυτήν την περίπτωση, ο ιστότοπός σας θα εμφανίζεται επίσης εσφαλμένα, καθώς απλά δεν θα χωράει στην οθόνη.
Από αυτές τις σκέψεις, μπορούμε να συμπεράνουμε ότι ένα σταθερό πλάτος για τη διάταξη σίγουρα δεν είναι κατάλληλο για εμάς και πρέπει να αναζητήσουμε άλλο τρόπο. Ας αναλύσουμε την ιδέα μιας ξεχωριστής διάταξης για κάθε πλάτος οθόνης.
Διατάξεις για όλες τις περιπτώσεις
Εάν έχετε επιλέξει ως στρατηγική τη δημιουργία διατάξεων για όλα τα μεγέθη οθόνης στην αγορά, τότε ο ιστότοπός σας θα είναι ο πιο μοναδικός σε ολόκληρο το Διαδίκτυο. Άλλωστε, είναι απλά αδύνατο σήμερα να καλύψει όλη τη γκάμα των συσκευών, προσπαθώντας να τελειοποιήσεις για κάθε επιλογή. Αλλά αν εστιάσετε στις πιο δημοφιλείς αναλύσεις οθονών και οθονών συσκευών, τότε η ιδέα δεν είναι κακή. Το μόνο του μειονέκτημα είναι το οικονομικό κόστος. Εξάλλου, όταν ένας σχεδιαστής διεπαφής, ένας σχεδιαστής και ένας κωδικοποιητής αναγκάζονται να κάνουν την ίδια δουλειά 5 ή 6 φορές, το έργο θα κοστίσειδυσανάλογα υψηλότερη από την αρχική τιμή του προϋπολογισμού.
Επομένως, μόνο οι ιστότοποι μιας σελίδας μπορούν να καυχηθούν για μια πληθώρα εκδόσεων για διαφορετικές οθόνες, σκοπός των οποίων είναι να πουλήσουν ένα προϊόν και να φροντίσουν να το κάνουν καλά. Λοιπόν, εάν δεν έχετε μία από αυτές τις προσγειώσεις, αλλά έναν ιστότοπο πολλών σελίδων, τότε θα πρέπει να σκεφτείτε περαιτέρω.
Πιο δημοφιλή μεγέθη ιστότοπου
Ένας συμβιβασμός μεταξύ των δύο άκρων είναι η απόδοση της διάταξης για τρία ή τέσσερα μεγέθη οθόνης. Μεταξύ αυτών, ένα πρέπει να είναι μια διάταξη για κινητές συσκευές. Τα υπόλοιπα θα πρέπει να προσαρμοστούν για μικρές, μεσαίες και μεγάλες οθόνες επιτραπέζιου υπολογιστή. Πώς να επιλέξετε το πλάτος του ιστότοπου; Παρακάτω παρουσιάζουμε τα στατιστικά της υπηρεσίας HotLog για τον Μάιο του 2017, τα οποία μας δείχνουν την κατανομή της δημοτικότητας των διαφόρων αναλύσεων οθόνης συσκευών, καθώς και τη δυναμική αυτού του δείκτη.
Από τον πίνακα μπορείτε να μάθετε πώς να προσδιορίσετε το μέγεθος του ιστότοπου που θέλετε να χρησιμοποιήσετε. Επιπλέον, μπορούμε να συμπεράνουμε ότι η πιο κοινή μορφή σήμερα είναι μια οθόνη 1366 επί 768 pixel. Τέτοιες οθόνες εγκαθίστανται σε φορητούς υπολογιστές προϋπολογισμού, επομένως η δημοτικότητά τους είναι φυσική. Η επόμενη πιο δημοφιλής είναι η οθόνη Full HD, η οποία είναι το χρυσό πρότυπο για βίντεο, παιχνίδια και επομένως για τη δημιουργία διατάξεων ιστότοπου. Περαιτέρω στον πίνακα βλέπουμε την ανάλυση των φορητών συσκευών 360 επί 640 pixel, καθώς και διάφορες επιλογές για επιτραπέζιους υπολογιστές και οθόνες κινητών μετά από αυτήν.
Σχεδίαση διάταξης
ΛοιπόνΑφού αναλύσουμε τα στατιστικά στοιχεία, μπορούμε να συμπεράνουμε ότι το βέλτιστο πλάτος τοποθεσίας έχει 4 παραλλαγές:
- Έκδοση φορητού υπολογιστή με πλάτος 1366 px.
- Έκδοση Full HD.
- Διάταξη ευρείας 800 px για εμφάνιση σε μικρές επιτραπέζιες οθόνες.
- Έκδοση του ιστότοπου για κινητά - πλάτος 360 pixel.
Ας υποθέσουμε ότι έχουμε αποφασίσει ποιο μέγεθος θα χρησιμοποιήσουμε για την πηγή που δημιουργήθηκε για τον ιστότοπο. Αλλά ένα τέτοιο έργο θα ήταν ακόμα δαπανηρό. Ας δούμε λοιπόν περισσότερες επιλογές, αυτή τη φορά χωρίς να χρησιμοποιήσουμε σταθερό πλάτος.
Κάνοντας τη διάταξη ευέλικτη
Υπάρχει μια εναλλακτική προσέγγιση, όταν αξίζει να προσαρμόζεται μόνο στο ελάχιστο μέγεθος οθόνης και τα ίδια τα μεγέθη του ιστότοπου θα ορίζονται κατά ποσοστά. Ταυτόχρονα, στοιχεία διεπαφής όπως μενού, κουμπιά και λογότυπο μπορούν να ρυθμιστούν σε απόλυτες τιμές, εστιάζοντας στο ελάχιστο μέγεθος του πλάτους της οθόνης σε pixel. Τα μπλοκ με περιεχόμενο, αντίθετα, θα τεντωθούν σύμφωνα με το καθορισμένο ποσοστό του πλάτους της περιοχής της οθόνης. Αυτή η προσέγγιση σάς επιτρέπει να σταματήσετε να αντιλαμβάνεστε το μέγεθος των τοποθεσιών ως περιορισμό για τον σχεδιαστή και να ξεπερνάτε επιδέξια αυτήν την απόχρωση.
Τι είναι η χρυσή τομή και πώς μπορεί να εφαρμοστεί στη διάταξη ιστοσελίδων;
Ακόμη και στην Αναγέννηση, πολλοί αρχιτέκτονες και καλλιτέχνες προσπάθησαν να δώσουν στις δημιουργίες τους το τέλειο σχήμα και αναλογία. Για απαντήσεις σε ερωτήσεις σχετικά με τις τιμές μιας τέτοιας αναλογίας, στράφηκαν στη βασίλισσα όλων των επιστημών - τα μαθηματικά.
Από την αρχαιότητα, έχει επινοηθεί μια αναλογία που το μάτι μας αντιλαμβάνεται ως το πιο φυσικό και κομψό,γιατί είναι πανταχού παρούσα στη φύση. Ο ανακάλυψε τη φόρμουλα για μια τέτοια αναλογία ήταν ένας ταλαντούχος αρχαίος Έλληνας αρχιτέκτονας ονόματι Φειδίας. Υπολόγισε ότι αν το μεγαλύτερο μέρος της αναλογίας σχετίζεται με το μικρότερο όπως το σύνολο σχετίζεται με το μεγαλύτερο, τότε μια τέτοια αναλογία θα φαίνεται η καλύτερη. Αλλά αυτό συμβαίνει εάν θέλετε να διαιρέσετε το αντικείμενο ασύμμετρα. Αυτή η αναλογία αργότερα ονομάστηκε χρυσή τομή, η οποία εξακολουθεί να μην υπερεκτιμά τη σημασία της για την παγκόσμια ιστορία του πολιτισμού.
Επιστροφή στο σχεδιασμό ιστοσελίδων
Είναι πολύ απλό - χρησιμοποιώντας τη χρυσή τομή, μπορείτε να σχεδιάσετε σελίδες που θα είναι όσο το δυνατόν πιο ευχάριστες στο ανθρώπινο μάτι. Υπολογίζοντας σύμφωνα με τον ορισμό του τύπου χρυσής αναλογίας, παίρνουμε τον παράλογο αριθμό 1, 6180339887 …, αλλά για ευκολία, μπορούμε να χρησιμοποιήσουμε μια στρογγυλεμένη τιμή 1, 62. Αυτό θα σημαίνει ότι τα μπλοκ της σελίδας μας πρέπει να είναι 62 % και 38% του συνόλου, ανεξάρτητα από το μέγεθος της πηγής που δημιουργείται για τον ιστότοπο που χρησιμοποιείτε. Μπορείτε να δείτε ένα παράδειγμα σε αυτό το διάγραμμα:
Χρησιμοποιήστε νέες τεχνολογίες
Οι σύγχρονες τεχνολογίες διάταξης ιστότοπου καθιστούν δυνατή την ακριβή μετάδοση της ιδέας ενός σχεδιαστή και σχεδιαστή, επομένως τώρα μπορείτε να αντέξετε οικονομικά να εφαρμόσετε πιο τολμηρές ιδέες από ό,τι στην αυγή των τεχνολογιών του Διαδικτύου. Δεν χρειάζεται πλέον να σκέφτεστε πολύ για το μέγεθος του ιστότοπου. Με την εμφάνιση τέτοιων πραγμάτων όπως η προσαρμοστική διάταξη μπλοκ, η δυναμική φόρτωση περιεχομένου και γραμματοσειρών, η ανάπτυξη ιστοτόπων έχει γίνει πολύ πιο ευχάριστη. Άλλωστε αυτές οι τεχνολογίες είναιλιγότεροι περιορισμοί, αν και εξακολουθούν να υπάρχουν. Αλλά όπως ξέρετε, χωρίς όρια δεν θα υπήρχε τέχνη. Σας προτείνουμε να χρησιμοποιήσετε μια πραγματικά δημιουργική σχεδιαστική προσέγγιση - τη χρυσή τομή. Με αυτό, μπορείτε να γεμίσετε αποτελεσματικά και όμορφα τον χώρο εργασίας, ανεξάρτητα από τα μεγέθη ιστότοπου που ορίζετε στα πρότυπά σας.
Πώς να αυξήσετε τον χώρο εργασίας του ιστότοπου
Υπάρχει μεγάλη πιθανότητα να μην έχετε αρκετό χώρο για να χωρέσετε όλα τα στοιχεία διεπαφής χρήστη σε μια μικρή διάταξη. Σε αυτήν την περίπτωση, θα πρέπει να αρχίσετε να σκέφτεστε δημιουργικά ή ακόμα πιο δημιουργικά από ό,τι κάνατε πριν.
Μέγιστο ελεύθερο χώρο στον ιστότοπο αποκρύπτοντας την πλοήγηση στο αναδυόμενο μενού. Είναι λογικό να χρησιμοποιείται αυτή η προσέγγιση όχι μόνο σε κινητές συσκευές, αλλά και σε επιτραπέζιους υπολογιστές. Εξάλλου, ο χρήστης δεν χρειάζεται να κοιτάζει συνεχώς ποιες επικεφαλίδες υπάρχουν στον ιστότοπό σας - ήρθε για το περιεχόμενο. Και οι επιθυμίες του χρήστη πρέπει να γίνονται σεβαστές.
Ένα παράδειγμα ενός καλού τρόπου απόκρυψης του μενού είναι η ακόλουθη διάταξη (φωτογραφία παρακάτω).
Στην επάνω γωνία της κόκκινης περιοχής, μπορείτε να δείτε έναν σταυρό, κάνοντας κλικ στον οποίο θα κρύψει το μενού σε ένα μικρό εικονίδιο, αφήνοντας τον χρήστη μόνο του με το περιεχόμενο του ιστότοπου.
Ωστόσο, αυτό είναι προαιρετικό, μπορείτε να αφήσετε την πλοήγηση, η οποία θα είναι πάντα ορατή. Αλλά μπορείτε να το κάνετε ένα όμορφο στοιχείο σχεδίασης και όχι απλώς μια λίστα δημοφιλών συνδέσμων στον ιστότοπο. Χρησιμοποιήστε διαισθητικά εικονίδια επιπλέον ή ακόμα και αντί για συνδέσμους κειμένου. είναι το ίδιοθα επιτρέψει στον ιστότοπό σας να κάνει πιο αποτελεσματική χρήση του χώρου της οθόνης στη συσκευή του χρήστη.
Ο καλύτερος ιστότοπος είναι responsive
Αν δεν ξέρετε ποια διάταξη να επιλέξετε για τον ιστότοπο, τότε όλα είναι απλά για εσάς. Για να εξοικονομήσετε κόστος ανάπτυξης και ταυτόχρονα να μην χάσετε το κοινό σας λόγω κακής διάταξης για κάποια συσκευή, χρησιμοποιήστε αποκριτική σχεδίαση.
Η σχεδίαση με απόκριση είναι μια σχεδίαση που φαίνεται εξίσου καλή σε διαφορετικές συσκευές. Αυτή η προσέγγιση θα επιτρέψει στον ιστότοπό σας να είναι κατανοητός και βολικός ακόμη και σε φορητό υπολογιστή, ακόμη και σε tablet, ακόμη και σε smartphone. Αυτό το αποτέλεσμα επιτυγχάνεται με αυτόματη αλλαγή του πλάτους της περιοχής εργασίας της οθόνης. Χρησιμοποιώντας αποκριτικά φύλλα στυλ για τον ιστότοπό σας, λαμβάνετε την καλύτερη δυνατή απόφαση.
Ποια είναι η διαφορά μεταξύ του responsive design και των εκδόσεων ιστότοπου
Η αποκριτική σχεδίαση διαφέρει από την έκδοση για φορητές συσκευές του ιστότοπου, καθώς στην τελευταία περίπτωση, ο χρήστης λαμβάνει έναν κωδικό html που είναι διαφορετικός από τον επιτραπέζιο υπολογιστή. Αυτό είναι ένα μειονέκτημα όσον αφορά τη βελτιστοποίηση απόδοσης διακομιστή καθώς και τη βελτιστοποίηση μηχανών αναζήτησης. Επιπλέον, γίνεται πιο δύσκολος ο υπολογισμός στατιστικών στοιχείων για διαφορετικές εκδόσεις του ιστότοπου. Η προσαρμοστική προσέγγιση δεν έχει αυτά τα μειονεκτήματα.
Η απόκριση για διάφορες συσκευές επιτυγχάνεται μέσω μιας διάταξης με ένα ποσοστό του καθορισμένου πλάτους ή με μεταφορά μπλοκ στον διαθέσιμο χώρο (στο κατακόρυφο επίπεδο σε ένα smartphone αντί γιαοριζόντια στην επιφάνεια εργασίας) ή δημιουργία μεμονωμένων διατάξεων για διαφορετικές οθόνες.
Μάθετε περισσότερα σχετικά με τον ανταποκρινόμενο σχεδιασμό και την ανάπτυξη στα εκπαιδευτικά μας προγράμματα.
