Ένας ολοκληρωμένος οδηγός για τη διόρθωση Responsive Ζητήματα σχεδίασης το 2023

Εάν εγγραφείτε σε μια υπηρεσία από έναν σύνδεσμο σε αυτήν τη σελίδα, η Reeves and Sons Limited ενδέχεται να κερδίσει μια προμήθεια. Δείτε το δικό μας δήλωση ηθικής.

Οι περισσότεροι ιστότοποι χρησιμοποιούν responsive Ο σχεδιασμός το χρησιμοποιεί λανθασμένα, γεγονός που οδηγεί σε προβλήματα. Η γενική προσέγγιση για responsive Ο σχεδιασμός είναι τεμπέλης, και αν ακολουθήσετε αυτήν την προσέγγιση, μερικά από τα δικά σας responsive οι ιστότοποι θα λειτουργούν απολύτως άψογα, και πολλοί από αυτούς δεν θα λειτουργούν. Για εκείνους που λειτουργούν άψογα, μάλλον θα είναι θέμα τύχης.

Η έννοια της responsive Ο σχεδιασμός είναι απλός, αλλά η πολύ απλότητά του είναι αυτή που οδηγεί τους ανθρώπους να κάνουν λάθη τόσο εύκολα. Οι σχεδιαστές με χρόνια εμπειρίας έχουν συνηθίσει να σχεδιάζουν για το desktop, και έτσι συνήθως σχεδιάζουν ένα σχέδιο με βάση το α desktop σχέδιο.

Desktop Οι διατάξεις διαφέρουν από τις διατάξεις του tablet και των κινητών, επειδή είναι συνήθως πολλαπλές στηλών, συνήθως περιλαμβάνουν τεράστιες ποσότητες λευκού χώρου και όλα είναι απλώς "μεγάλα", λόγω έλλειψης καλύτερης λέξης. Αν responsive χρησιμοποιούνται τεχνικές σχεδίασης, αυτή η διάταξη πολλαπλών στηλών υποτίθεται ότι αναλύεται σε μία στήλη.

Αν αυτό είναι όλο δικό σου responsive Ο σχεδιασμός κάνει πραγματικά όταν προβάλλεται σε φορητή συσκευή, μπορεί να έχετε πρόβλημα. Το πόσο πρόβλημα εξαρτάται από τη στάση σας, αλλά οι καλοί σχεδιαστές ενδιαφέρονται για το καλό UX. Τους ενδιαφέρει ακόμη περισσότερο το κακό UX. Εάν ο ιστότοπός σας έχει κακό UX και θέλετε να είστε καλός σχεδιαστής, τότε πρέπει να το διορθώσετε.

Αυτό το πρόβλημα με τη σύμπτυξη μιας διάταξης πολλών στηλών σε μία στήλη είναι ότι δεν λειτουργεί σε αναλογική βάση. Εάν πρέπει να συρρικνώσετε κάτι οριζόντια και δεν κάνετε άλλες αλλαγές, προφανώς θα επεκταθεί κατακόρυφα.

Ρίξτε νερό από ένα κοντό παχύ ποτήρι σε ένα ψηλό λεπτό, και το νερό παίρνει το σχήμα του ψηλού λεπτού ποτηριού, ενώ ο όγκος του νερού παραμένει ακριβώς ο ίδιος. Αυτό που πρέπει να καταλάβουν οι σχεδιαστές είναι ότι με έναν ιστότοπο, χρειαζόμαστε όντως τον όγκο για να αλλάξει. Συνήθως δεν είναι καλή ιδέα να αλλάξετε το σχήμα αλλά να διατηρήσετε το περιεχόμενο ακριβώς το ίδιο. Κάτι πρέπει να δώσει.

Κάποιος που πραγματικά έχει κερδίσει τον τίτλο του σχεδιαστή θα καταλάβει ότι αυτό αντιπροσωπεύει ένα πρόβλημα που πρέπει να λυθεί, και αυτό που κάνουν οι σχεδιαστές στην πραγματικότητα είναι να βρίσκουν λύσεις για προβλήματα. Επομένως, είναι η τέλεια δουλειά για εσάς να βρείτε τον καλύτερο τρόπο για να παραδώσετε το βασικό περιεχόμενο του ιστότοπου χωρίς να μετατρέψετε την εμπειρία χρήστη σε μια απογοητευτική γιορτή κύλισης. Εδώ είναι μερικά από τα πράγματα που αξίζει να λάβετε υπόψη κατά την ανάλυση του α desktop σχεδίαση σε σχεδιασμό κινητού:

1. Το «Mobile First» είναι ηθικό

Συγγνώμη, αλλά είναι. Όλοι παπαγαλίζουν αυτό, αλλά ως ιδέα δεν είναι πολύ χρήσιμο γιατί αν σχεδιάζετε πραγματικά «πρώτα το κινητό», τότε θα είναι εφιαλτικό να προσπαθήσετε να το αναβαθμίσετε σε desktop σχεδιάστε εκτός και αν μένετε σε μια διάταξη καθαρά μονής στήλης μέχρι το τέλος.

Η καλύτερη προσέγγιση είναι να σχεδιάσετε φυσικά τουλάχιστον τρεις (και έως και 11) διαφορετικές διατάξεις. Τα ελάχιστα που μπορείτε να λάβετε υπόψη περιλαμβάνουν:

  • Desktop
  • Τοπίο κινητό
  • Πορτραίτο για κινητά

Εάν θέλετε να είστε λίγο πιο εμπεριστατωμένοι, θα πρέπει επίσης να λάβετε υπόψη:

  • Tablet τοπίου
  • Πορτραίτο Tablet

Και η πλήρης λίστα, αν θέλετε να είστε απολύτως πλήρης θα ήταν:

  • Τεράστιος Desktop
  • Συνήθης Desktop
  • Μεγάλο tablet τοπίου
  • Μεγάλο πορτρέτο Tablet
  • Μικρό tablet τοπίου
  • Μικρό πορτρέτο Tablet
  • Μεγάλο τοπίο για κινητά
  • Μεγάλο πορτραίτο κινητό
  • Μικρό τοπίο κινητό
  • Μικρό πορτρέτο κινητό
  • Μικρό / φορετό

Με τόσες πολλές διαφορετικές δυνατότητες, είναι προφανές γιατί μια τεμπέλης προσέγγιση «ένα μέγεθος ταιριάζει σε όλους» είναι τόσο δελεαστική, αλλά είναι επίσης προφανές γιατί υπάρχουν τόσοι πολλοί τρόποι να την καταστρέψετε.

2. Εξακολουθήστε το υποσέλιδο της εκτεταμένης σελίδας

Η desktop Ο σχεδιασμός περιλαμβάνει ένα από αυτά τα τεράστια ογκώδη υποσέλιδα σελίδων με πολλούς εσωτερικούς συνδέσμους; Υπέροχο, αυτό πιθανότατα θα είναι πολύ βολικό σε ένα desktop. Σε ένα κινητό, φαίνεται γελοίο και είναι κάτι περισσότερο από ένα απλό άγγιγμα ενοχλητικό. Μπορείτε να σχεδιάσετε εντελώς διαφορετικά υποσέλιδα σελίδας για κάθε σημείο διακοπής συσκευής. Απλώς κάντε διαθέσιμους αυτούς τους συνδέσμους υποσέλιδου σε ένα παράθυρο διαλόγου και όλοι κερδίζουν.

3. Αποδεχτείτε κάποιες μικρές ιδιορρυθμίες σε σκοτεινές συσκευές

Εάν μια συγκεκριμένη συσκευή δεν είναι συνηθισμένη, τότε δεν είναι τόσο κακό αν υπάρχουν μερικές ιδιορρυθμίες στη σχεδίαση που εμφανίζονται μόνο κατά την προβολή σε αυτήν τη συσκευή. Όσο πιο δημοφιλής είναι μια συσκευή, τόσο περισσότερο θα πρέπει να εργαστείτε για να απαλλαγείτε από τυχόν παραξενιές που εμφανίζονται σε αυτήν.

4. Μπορείτε να αποκρύψετε περιεχόμενο που δεν συνεισφέρει στο βασικό μήνυμα

Το πιο σημαντικό μέρος ενός ιστότοπου είναι το βασικό μήνυμα. Ναι, σε ορισμένους ιστότοπους, το πιο σημαντικό μέρος είναι η διαφήμιση και υπάρχουν μόνο για την προβολή αυτής της διαφήμισης, αλλά αν πρέπει να επιλέξετε μεταξύ της εμφάνισης του βασικού μηνύματος ή της εμφάνισης της διαφήμισης, επιλέξτε το μήνυμα. Το Google είναι πιο πιθανό να σας θεωρήσει ως πρόσωπο όχι ευπρόσδεκτο εάν αποκρύψετε το βασικό περιεχόμενο και στη συνέχεια προβάλετε ένα σωρό διαφημίσεις. Οφείλεται στο ότι αυτό το βασικό περιεχόμενο είναι αυτό με βάση το οποίο η Google σας ευρετηρίασε και όταν αυτό το περιεχόμενο δεν εμφανίζεται, η Google το θεωρεί παραπλανητικό.

Επιπλέον, πράγματα όπως εικόνες που είναι καθαρά διακοσμητικές ή αισθητικές, αλλά που δεν συμβάλλουν σημαντικά στο βασικό μήνυμα, είναι υποψήφιοι για μείωση ή απόκρυψη.

Μερικοί άνθρωποι έχουν προτείνει ότι η απόκρυψη περιεχομένου «τιμωρεί» τους χρήστες κινητών, αλλά αυτό είναι λίγο παράλογη ιδέα. Η πραγματικότητα είναι ότι κρύβετε το περιεχόμενο επειδή υπάρχει για να το βελτιώσει desktop εμπειρία, αλλά δεν συμβάλλει επαρκώς στο βασικό μήνυμα του ιστότοπου ώστε να είναι απαραίτητο

5. Μπορείτε να χρησιμοποιήσετε εναλλακτικά υπόβαθρα

Πρόσφατα μου δόθηκε μια γελοία εργασία όπου ο ιδιοκτήτης του ιστότοπου είχε πληρώσει για ένα συγκεκριμένο υπόβαθρο και ήθελε να προσαρμοστεί όλο το περιεχόμενο ώστε να ταιριάζει σε αυτό το φόντο. Τα στοιχεία κουκκίδων πρέπει να είναι ένας πολύ ακριβής αριθμός χαρακτήρων, ο συνολικός αριθμός γραμμών πρέπει να είναι ακριβής και ούτω καθεξής.

Αυτό είναι σίγουρα κακή πρακτική στο σχεδιασμό ιστοσελίδων, γιατί πρέπει ποτέ περιεχόμενο σχεδιασμού για να ταιριάζει σε μια διάταξη. Η διάταξη πρέπει πάντοτε σχεδιαστεί για να συγκρατεί το περιεχόμενο. Εάν για κάποιο λόγο η διάταξη δεν μπορεί να συγκρατήσει το περιεχόμενο, τότε θα πρέπει να επανασχεδιαστεί η διάταξη και όχι το περιεχόμενο. Είναι πολύ πιθανό να χρησιμοποιήσετε διαφορετικά υπόβαθρα για διαφορετικές συσκευές. Είσαι σχεδιαστής. Χρησιμοποιήστε τη φαντασία σας.

Το περιεχόμενο είναι το ζωτικό αίτημα ενός ιστότοπου και η τροποποίησή του ή ο περιορισμός του βάσει των περιορισμών μιας διάταξης είναι ένα σαφές σημάδι ερασιτεχνικότητας εκ μέρους του κατόχου του ιστότοπου και ένα σημάδι ότι η διάταξη δεν ήταν καλά σχεδιασμένη στην πρώτη θέση. Συμμορφωθείτε με τις αρχές σας, γιατί αυτός ο πελάτης θα είναι πρόβλημα αν συναινέσετε.

Ο πελάτης έχει πάντα δίκιο, εκτός εάν αυτός ο πελάτης είναι πελάτης σχεδίασης ιστοσελίδων. Οι πελάτες σπάνια γνωρίζουν τι είναι καλύτερο για αυτούς και είναι σημαντικό να επιβεβαιωθείτε ως σχεδιαστής ιστοσελίδων που ξέρει πώς να προσφέρει το σωστό αποτέλεσμα για τον πελάτη. Αλλαwise κινδυνεύετε να δημιουργήσετε έναν ακόμη ιστότοπο βδέλυγμα.

6. Ελέγξτε μη αυτόματα τη σειρά σύμπτυξης (ή αποφύγετε χωρικές αναφορές στο περιεχόμενο)

Αυτό είναι ένα σύνθετο πρόβλημα. Η σειρά σύμπτυξης ενός ιστότοπου εξαρτάται από τη σειρά με την οποία στοιβάζονται τα div. Πρέπει να στοιβάζετε τα div σας με τη σωστή σειρά, ώστε να συμπτύσσονται με τη σωστή σειρά.

Ένα από τα προβλήματα που προκύπτουν από τα προγράμματα δημιουργίας ιστότοπων του WYSIWYG με drag-n-drop είναι ότι συνήθως δεν μπορείτε να ορίσετε με ποια σειρά θα στοιβάζονται τα div και στις πολύ σπάνιες περιπτώσεις όπου μπορείτε να το κάνετε αυτό, η σκληρή δουλειά σας ακυρώνεται κάθε φορά κάνετε τη μικρότερη επεξεργασία και θα πρέπει να επιστρέψετε και να χακάρετε ξανά τον πηγαίο κώδικα.

Εάν δεν ελέγχετε τη σειρά σύμπτυξης, αυτή η εικόνα εξηγεί με σαφήνεια τι μπορεί να πάει στραβά. Επίσης, πρέπει να αποφεύγετε να κάνετε χωρικές αναφορές (όπως «στη στήλη προς τα αριστερά»), καθώς σε κινητό, ό, τι ήταν αριστερά ή δεξιά, μπορεί να μετατοπιστεί προς τα πάνω ή κάτω, συν Εάν κάνετε τον αναγνώστη να πιστεύει ότι είναι αρκετά σημαντικό να κάνει κύλιση για να δει, τότε θα πρέπει να κάνει κύλιση ξανά πίσω, και αυτό δεν είναι ωραίο.

7. Ίσως χρειαστείτε διαφορετικά μεγέθη γραμματοσειρών για διαφορετικές διατάξεις

Είναι εύκολο να ελέγξετε το μέγεθος της γραμματοσειράς με το CSS και μπορείτε να ορίσετε διαφορετικά μεγέθη γραμματοσειράς και ακόμη και διαφορετικές όψεις γραμματοσειράς (αν φαίνονται καλύτερα) για συγκεκριμένα μεγέθη προβολής. Μπορείτε να βρείτε το μέγεθος εμφάνισης με ερωτήματα μέσων CSS και, στη συνέχεια, να τροποποιήσετε το μέγεθος γραμματοσειράς ή την όψη γραμματοσειράς ώστε να είναι σε τιμές που θα εμφανίζουν το περιεχόμενο στο μέγιστο πλεονέκτημα στον τύπο συσκευής που στοχεύετε.

8. Είναι καλύτερο να το χρησιμοποιείτε responsive εικόνες

Όλες οι εικόνες πρέπει να είναι responsive όποτε είναι δυνατόν. Αυτό φέρνει μαζί του ότι μερικές φορές η λεπτομέρεια μιας εικόνας μπορεί να χαθεί εάν μειωθεί υπερβολικά. Μια λύση σε αυτό το πρόβλημα είναι να κάνετε την εικόνα με δυνατότητα κλικ, ώστε ο χρήστης να μπορεί να προβάλλει μια μεγεθυσμένη έκδοση της εικόνας ξεχωριστά από το περιεχόμενο. Ο κανονικός τρόπος για να γίνει αυτό είναι μέσω ενός πλαισίου διαλόγου modal.

Η εικόνα της κεφαλίδας είναι ευγενική προσφορά του

Μπογκντάν Ράνσα

Ο Bogdan είναι ιδρυτικό μέλος του Inspired Mag, έχοντας συγκεντρώσει σχεδόν 6 χρόνια εμπειρίας κατά τη διάρκεια αυτής της περιόδου. Στον ελεύθερο χρόνο του αρέσει να μελετά την κλασική μουσική και να εξερευνά εικαστικές τέχνες. Είναι επίσης πολύ παθιασμένος με τους fixies. Έχει ήδη 5.

Σχόλια Απάντηση 1

  1. Μ σελ λέει:

    Το κινητό πρώτα σημαίνει απλώς ότι στη βάση κώδικα, το "προεπιλεγμένο" css είναι για κινητά και δημιουργείτε αλλαγές για ευρύτερα formats από εκεί. Πραγματικά δεν καταλαβαίνω το πρώτο σου σημείο

Αφήστε μια απάντηση

Η διεύθυνση email σας δεν θα δημοσιευθεί. Τα υποχρεωτικά πεδία σημειώνονται *

Βαθμολογία *

Αυτός ο ιστότοπος χρησιμοποιεί το Akismet για να μειώσει το spam. Μάθετε πώς επεξεργάζονται τα δεδομένα των σχολίων σας.