Ανταπόκριση Headers & Λογότυπα - Συμβουλές και Παγίδες

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

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

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

Thinner Navbars

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

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

Πάρτε για παράδειγμα τη διάταξη Brew Cartoon σε οθόνη πλήρους μεγέθους και σε κινητή συσκευή.

Στο σημείο διακοπής 600px, η πλοήγηση συρρικνώνεται στο μισό περίπου ύψος της σελίδας. Αυτό κάνει τόσο το λογότυπο όσο και το μενού επίσκεψης clic μικρότερο, αλλά είναι πολύ πιο αναλογική στο σχετικό διάστημα της οθόνης.

Επίσης, θεωρείτε ότι το Cartoon Brew έχει ένα αναπτυσσόμενο πλαίσιο ως ανταποκρινόμενο μενού στην οθόνη του κινητού. Αυτό σημαίνει αυτό επικαλύπτει περιεχόμενο στη σελίδα όταν ανοίγετε, γι 'αυτό είναι σημαντικό να αφήσετε αρκετό χώρο γι' αυτό.

Ένα παρόμοιο παράδειγμα μπορεί να βρεθεί στην ιστοσελίδα του Jacksonville Art Walk. Το επάνω Navbar παραμένει σταθερό κατά την κύλιση, αλλά συρρικνώνεται σε μικρότερες συσκευές. Αυτό είναι καλύτερο για την ανταπόκριση του σχεδιασμού, επειδή η λεπτότερη navbar αφήνει περισσότερο χώρο για περιεχόμενο σε μικρότερη οθόνη κινητής τηλεφωνίας.

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

Η πλοήγηση Art Walk αλλάζει σε ένα αναπτυσσόμενο μενού με σταθερούς συνδέσμους γύρω από το σημείο διακοπής 770px. Τα εικονίδια είναι κρυμμένα στο αναπτυσσόμενο μενού επειδή θα ήταν πολύ μικρά και πολύ περιορισμένα σε μικρότερες συσκευές.

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

Ανακοινώστε το λογότυπο

Τα περισσότερα λογότυπα ενσωματώνουν κάποιο κείμενο και ένα εικονίδιο ή γραφικό που αντιπροσωπεύει το εμπορικό σήμα. Αυτό σημαίνει ότι μπορείτε πάντα εικονίδιο (ναι είναι μια πραγματική λέξη) αυτό το λογότυπο κάτω από ένα σύμβολο της πλήρους έκδοσής του.

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

Ελέγξτε το λογότυπο για τα Νέα του Web Designer και δείτε πώς αλλάζει καθώς αλλάζετε το μέγεθος του προγράμματος περιήγησης.

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

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

Δεν χρειάζεται πάντα να βασίζεστε σε γραφικά για αυτήν την τεχνική συμπυκνωμένου λογότυπου. Η κεφαλίδα του Young And Hungry χρησιμοποιεί λαμπερό πράσινο κείμενο για το λογότυπο το οποίο τελικά συμπυκνώνεται στο κείμενο "Y & H".

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

Χειρισμός φόντου πλήρους οθόνης

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

Έτσι πώς χειρίζεστε αυτό σε μια μικρότερη οθόνη; Γενικά, οι σχεδιαστές είτε αφαιρέστε την εικόνα φόντου πέρα από ένα συγκεκριμένο σημείο διακοπής, ή την ίδια την εικόνα γίνεται επανευθυγραμμισμένη για να χωρέσει στο παράθυρο.

Το Cap Radio Radio Raffle χρησιμοποιεί αυτή την τεχνική στην αρχική σελίδα τους. Η εικόνα φόντου διατηρεί το επίκεντρο στο προσκήνιο ανά πάσα στιγμή, ανεξάρτητα από το μέγεθος της οθόνης.

Αυτό το είδος λύσης τυπικά απαιτεί κάποια τοποθέτηση CSS αλλά είναι πραγματικά απλό όταν παίρνετε το κρέμονται από αυτό. Μόλις κρατήστε το σημείο εστίασης στο προσκήνιο ανά πάσα στιγμή και αλλαγή μεγέθους του δοχείου εικόνας για να ταιριάζει ανάλογα με τη συσκευή.

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

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

Απλοποιήστε την πλοήγηση

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

Παρόλο που αν έχετε τη σωστή στρατηγική είναι ακόμα δυνατό να διατηρήσετε όλα τα dropdowns in-tact. Για παράδειγμα, το Kidscreen χρησιμοποιεί α flyout με μικρά εικονίδια βέλους υποδεικνύοντας υποσυνδέσεις στο απόκριτο μενού.

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

Στην πραγματικότητα, θα πρέπει να πιέσετε σκληρά για να βρείτε έναν ανταποκρινόμενο ιστότοπο που δεν βασίζεται στο μενού με τα τρία bar hamburger. Το CyberChimps είναι ένα εξαιρετικό παράδειγμα χρησιμοποιεί ένα κατακόρυφο αναπτυσσόμενο μενού αντί για ένα slide-in.

Η δομή πλοήγησης για CyberChimps παίρνει αναδιαταγμένη για να σύρετε κάτω στο πάνω μέρος της σελίδας. Το μενού πέφτει από πάνω με μεγάλα στοιχεία μπλοκ για συνδέσμους.

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

Φτιάξε το δικό σου

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

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

• Δημιουργήστε ένα μενού πλοήγησης Responsive Navigation Basic CSS (teamtreehouse.com)
• Βέλτιστη πρακτική για υπεύθυνη επικεφαλίδα ιστοτόπου (ux.stackexchange.com)
• Πώς μπορώ να κάνω την εικόνα κεφαλίδας μου να ανταποκρίνεται σωστά? (stackoverflow.com)