10 Γλάστρες που πέφτουν ανταποκρινόμενες στις σελίδες προορισμού
Το «Respive» είναι το τελευταίο κίνημα στην ανάπτυξη ιστού - και αυτό που χρειάζεται αρκετά κακό. Κάθε μέρα αυξάνεται ο αριθμός των συσκευών, των πλατφορμών και των φυλλομετρητών που χρησιμοποιούνται για την πρόσβαση στο διαδίκτυο. Και ενώ η πλειοψηφία των χρηστών εξακολουθεί να έχει πρόσβαση στον ιστό από παραδοσιακές πλατφόρμες, η ζήτηση για υγρές και προσαρμοσμένες ιστοσελίδες είναι ισχυρότερη από ποτέ.
Πολλοί σχεδιαστές κάνουν αυτή την αλλαγή στην καρδιά και δημιουργώντας μερικά θεαματικά κομμάτια που ευδοκιμούν σε περιβάλλοντα κινητών, tablet και desktop.
Οι παρακάτω τοποθεσίες συγχώνευση ομορφιά με ανταποκρινόμενες τεχνικές σχεδιασμού ιστοσελίδων και πραγματικά επίδειξη τι μπορεί να επιτευχθεί με λίγη καινοτομία. Γι 'αυτό πιάσε μερικά ποπ κορν και ένα σημειωματάριο, θα θελήσετε να δώσετε προσοχή.
StephenCaver.com
Όταν ανοίγετε αυτό το μέρος στην επιφάνεια εργασίας σας, είναι αμέσως μαγευτική. Η τολμηρή, μαύρη, δικαιολογημένη κατεύθυνση αντιπαραβάλλεται όμορφα με την σχεδόν ακουαρέλα ποιότητα του υποβάθρου Mojave Desert. Όταν ο ιστότοπος αυτός προσαρμόζεται στο μέγεθος του κινητού, η αλλαγή είναι σημαντική και ο ιστότοπος εξακολουθεί να φαίνεται υπέροχος.
FoodSense.is
Με την ευρεία διάταξή του, τις καθαρές γραμμές και την απλή δομή αυτό το μέρος είναι ένα φανταστικό παράδειγμα του μινιμαλιστικού σχεδιασμού ιστοσελίδων. Όταν προβάλλεται σε ένα δισκίο ή σε ένα κινητό, προσαρμόζεται χωρίς να επηρεάζεται η σύνθεση ή η ροή.
Warface.co.uk
Η χρήση του χρώματος είναι εντυπωσιακή και η καινοτόμος τοποθέτηση των 3D ειδώλων στο προσκήνιο του site εμπλέκει πραγματικά τον θεατή. Η ιστοσελίδα είναι μοναδική και συναρπαστική, και καμία από τις επιπτώσεις δεν έχει χαθεί στο κινητό.
DanielVane.com
Και πάλι εδώ ο σχεδιαστής αφήνει την δουλειά του να μιλάει για τον εαυτό του. Η σελίδα προορισμού είναι πανέμορφη στην απλότητά της πλήρους μεγέθους και αυτό μεταφέρει τέλεια στο κινητό, αφήνοντας ένα ιδιαίτερα συγκλονιστικό εικονογράφηση που περιλαμβάνει ένα λεπτό λογότυπο.
SasquatchFestival.com
Αυτό το μέρος είναι διασκεδαστικό και παιχνιδιάρικο και μοναδικό μεταξύ των άλλων περιοχών αυτής της λίστας. Παρέχουν καθαρή απλότητα για να διασκεδάζουν με το χρώμα, τις εικόνες και τα εικονίδια με έναν τρόπο που εξακολουθεί να καταφέρνει να παραδώσει το στυλ. Αυτό μπορεί να είναι δύσκολο να γίνει σε ένα μικρό χώρο, αλλά οι σχεδιαστές του Sasquatch διαχειρίζονται αβίαστα.
GravitateDesign.com
Η χρήση του σχήματος στο αυτό το μέρος ξεχωρίζει αμέσως. Αποφεύγοντας τη χρήση των συνόρων και των πλαισίων περιεχομένου, κατάφεραν να δημιουργήσουν έναν ιστότοπο ο οποίος παρουσιάζει το έργο του όσο το δυνατόν καλύτερα.
VisualSupply.co
Ομοίως με το Warspace, είναι οι εικόνες που πραγματικά λειτουργούν αυτόν τον ιστότοπο . Είναι τέλεια δομημένη και φαίνεται όμορφη σε κάθε συσκευή.
StudioMds.co
Τα σκοτεινά χρώματα μπορούν μερικές φορές να αγνοηθούν στο σχεδιασμό ιστοσελίδων, αλλά Studio Mds να βελτιώσουν το περιεχόμενό τους με την τολμηρή τους απόφαση. Η διάταξη προσαρμόζεται ώστε να ταιριάζει σε μικρότερο μέγεθος οθόνης χάνοντας τίποτα αλλά περιττό σύνδεσμο.
ForefathersGroup.com
Αυτό το μέρος έχει μια μεγάλη, vintage αίσθηση και χρησιμοποιεί υφή, εικόνες και γραμματοσειρά για να δημιουργήσει αυτό. Είναι λεπτό κάτω από όμορφα (αλλά είναι κρίμα να χάσει αυτό το μαϊμού).
MapBox.com
Το χρώμα και η χρήση των φωτογραφιών δίνουν Mapbox ένα καθαρό χώρο για να παρουσιάσουν το προϊόν τους. Και πάλι η απλότητα κερδίζει πέρα από το σύνθετο ή κακό σχεδιασμό, και αυτός είναι ακριβώς γιατί λειτουργεί καλά σε μια μικρότερη οθόνη.
Πράγματα που πρέπει να θυμάστε καθώς σχεδιάζετε
Έτσι, τώρα που έχετε εξετάσει μερικές αστρικές περιοχές που ανταποκρίνονται, πιθανότατα έχετε φαγούρα να αρχίσετε να σχεδιάζετε το δικό σας. Αλλά πριν φύγετε, εδώ είναι μερικά πράγματα που πρέπει να θυμάστε.
Φωτογραφίες
Ένα εμπόδιο για την ικανοποιητική σχεδίαση είναι ο τρόπος με τον οποίο οι συσκευές προβάλλουν φωτογραφίες. Ένα MacBook Pro με οθόνη αμφιβληστροειδούς θα αποδώσει μια εικόνα σε πολύ υψηλότερη ανάλυση από ένα κινητό τηλέφωνο, κάτι που μπορεί συχνά να δημιουργήσει προβλήματα. Ένας τρόπος να προχωρήσετε σε αυτό το ζήτημα είναι να μεταφορτώσετε αντίγραφα υψηλής και χαμηλής ανάλυσης των φωτογραφιών σας. Με τη χρήση του CSS, μπορείτε στη συνέχεια να καθορίσετε ποια εικόνα φορτώνεται με βάση την ανάλυση οθόνης της συσκευής. Αν χρησιμοποιείτε φωτογραφίες αποθέματος, βεβαιωθείτε ότι έχετε χάσει την υψηλότερη επιλογή rez.
Προσδιορισμός σημείων διακοπής
Συχνά ανταποκρίνονται τα σχέδια που είναι γνωστά ως "σημεία διακοπής" - ή η ανάλυση στην οποία αλλάζει η διάταξη - βασισμένη κυρίως σε κοινά μεγέθη οθόνης συσκευών. Το πρόβλημα με αυτή την προσέγγιση, ωστόσο, είναι ότι δεν λαμβάνει υπόψη πόσο ποικίλα μεγέθη οθόνης είναι πραγματικά. Δεν υπάρχει πια "καθολικό" μέγεθος. Έτσι, αντί να προκαθορίσετε σημεία διακοπής σε 360px (κινητά), 768px (tablet) και 1024px (επιφάνεια εργασίας), είναι καλύτερο να αφήσετε το σχέδιό σας να μιλήσει από μόνο του. Ξεκινήστε με μια τελική διάταξη και, στη συνέχεια, αλλάξτε το μέγεθος του παραθύρου μέχρι να σπάσει το σχέδιο - κάντε αυτό ένα από τα σημεία διακοπής σας και στη συνέχεια συνεχίστε. Θα διαπιστώσετε ότι ο ιστότοπός σας ρέει πολύ πιο ομαλός.
Έχετε συναντήσει μια φανταστική ανταποκρινόμενη σελίδα προορισμού; Έχετε σχεδιάσει εσείς ο ίδιος; Ενημερώστε μας στα σχόλια.