Ανταποκρινόμενος σχεδιασμός στον εταιρικό κόσμο

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

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

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

Μην συμβιβαστείτε στο σχεδιασμό

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

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

Υπάρχουν τρεις διαφορετικοί τρόποι για να αναπτύξετε ένα ανταποκρινόμενο σχέδιο. Δημιούργησα ονόματα γι 'αυτά ώστε να είναι ευκολότερο να συζητηθούν:

Ενισχυμένες διατάξεις

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

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

Το πρόβλημα με αυτή την τεχνική είναι ότι πρέπει να επιλέξετε ποια ψηφίσματα πρόκειται να βελτιστοποιήσετε την περιοχή σας. Οι περισσότεροι χρησιμοποιούν αριθμούς βάσει των συσκευών iOS-768px για το σχεδιασμό tablet και 320px για το σχεδιασμό για κινητά. Αλλά με όλα τα διαφορετικά έξυπνα τηλέφωνα και δισκία διαθέσιμα, υπάρχουν τόνοι διαφορετικών ψηφισμάτων. Επειδή οι εφαρμογές Purple Communications είναι διαθέσιμες για πολλά διαφορετικά τηλέφωνα, θέλαμε να διασφαλίσουμε ότι κάθε χρήστης θα έχει τη βέλτιστη εμπειρία. Έτσι, ενώ πιστεύω ότι αυτή η τεχνική θα ήταν τέλεια για έναν ιστότοπο εφαρμογής iPhone, δεν θα ταιριάζονταν στις ανάγκες μας για αυτό το έργο.

Πλέγμα υγρών

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

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

Υβριδικό υγρό / βαθμιδωτό

Τελικά, αποφάσισα σε συνδυασμό των δύο μεθόδων. Θα χρησιμοποιήσαμε την σταδιακή τεχνική για να φτιάξουμε ένα σχέδιο για επιφάνεια εργασίας, και έπειτα ένα μεγάλο βήμα κάτω σε ένα ρευστό σχέδιο με πλάτος 960px. Αυτό σήμαινε ότι για την επιφάνεια εργασίας, η διαδικασία μας ήταν σχεδόν η ίδια με ένα κανονικό έργο. Υποστηρίζουμε αναλύσεις 1024 × 768 και επάνω για επιφάνεια εργασίας, ώστε να φτιάχνουμε τους ιστότοπούς μας με το τυπικό πλάτος 960px (το οποίο επιτρέπει μια κάθετη γραμμή κύλισης και άλλα προγράμματα περιήγησης και OS Chrome). Οποιοδήποτε παράθυρο προβολής κάτω από αυτό το πλάτος κανονικά θα δείχνει απλώς μια γραμμή κύλισης.

Αντί να προσπαθήσουμε να επιλέξουμε ποιο ψήφισμα έδειξε την πιο νόημα για ένα μέγεθος tablet, το ρυθμίσαμε απλά όπου οτιδήποτε κάτω από το πλάτος της τοποθεσίας των 960px θα ενεργοποιούσε τη διάταξη ρευστού. Με αυτόν τον τρόπο κανείς δεν θα μπορούσε ποτέ να πάρει την επίφοβη οριζόντια scrollbar.

Ως μικρό πρόσθετο επίδομα, ένα tablet (πλάτος τουλάχιστον 960px) που προβάλλει τον ιστότοπο σε κατάσταση οριζόντιας προβολής λαμβάνει την πλήρη έκδοση επιτραπέζιου υπολογιστή. Λάβετε υπόψη ότι πιθανότατα θα θέλετε να κάνετε μερικές μικρές αλλαγές με τα ερωτήματα των μέσων ενημέρωσης για να κάνετε τους συνδέσμους και τα κουμπιά πιο εύκολο να αγγίξετε.

Κινητό πρώτα

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

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

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

Στο παρελθόν, το μόνο που πρέπει να δουλέψουμε είναι το CSS. Με τη νοοτροπία "κινητής πρώτης", πρόκειται να δημιουργήσουμε ένα αρχείο mobile.css που περιέχει όλα τα CSS που χρειάζονται τα κινητά. Αυτό θα είναι το μόνο αρχείο που κατεβάζουν τα τηλέφωνα. Στη συνέχεια, θα δημιουργήσουμε ένα δεύτερο αρχείο που ονομάζεται desktop.css που θα βασιστεί και θα αντικαταστήσει τα βασικά στυλ που έχουν δημιουργηθεί στο mobile.css. Για να βεβαιωθείτε ότι τα τηλέφωνα / ταμπλέτες παίρνουν το mobile.css μόνο και τα desktops παίρνουν και τα mobile.css και desktop.css, οι σύνδεσμοι μας μοιάζουν με αυτό:

Αυτός ο συνδυασμός έχει λειτουργήσει μέχρι στιγμής για όλα όσα έχω δοκιμάσει, εκτός από τις εκδόσεις του Internet Explorer πριν από το 9. Επειδή το πρότυπο της εταιρείας μας είναι να υποστηρίξουμε το IE7 +, έπρεπε να κάνουμε ένα τελευταίο tweak. Θα παρατηρήσετε ότι ο παραπάνω κωδικός μου εκτελείται στο διακομιστή. Στο backend, ελέγχουμε την έκδοση του IE και αν είναι μικρότερη από 9, αλλάζουμε το χαρακτηριστικό των μέσων σε "οθόνη, προβολή". Αυτό λειτούργησε το καλύτερο για εμάς, αλλά αν δεν τρέχετε οτιδήποτε πλευρά διακομιστή, θα μπορούσατε να χρησιμοποιήσετε αντ 'αυτού reply.js.

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

Παρέχει ακόμα τον έλεγχο του πελάτη

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