Ο ευέλικτος σχεδιασμός ιστοσελίδων είναι ήδη η λέξη-κλειδί της δεκαετίας και είναι ιδανικός για τον κόσμο που συνδέεται με πολλές οθόνες στον οποίο ζούμε. Ωστόσο, η αντιστάθμιση γι 'αυτό είναι σε απόδοση λόγω των μεγαλύτερων μεγεθών αρχείων.
Αυτό οδήγησε μερικούς εμπειρογνώμονες να πούμε ότι, όπως και οι πρώτες μέρες του Flash, ο σχεδιασμός που ανταποκρίνεται είναι κάτι που όλοι μπορούμε να είμαστε ενθουσιασμένοι για κανέναν καλό λόγο. Ωστόσο, ενώ επί του παρόντος υπάρχουν προβλήματα επιδόσεων, αυτά μπορούν να ξεπεραστούν σε κάποιο βαθμό με κάποιες μικρές προσαρμογές, συμπίεση και αλλαγή μεγέθους εικόνας.
Ο υπεύθυνος σχεδιασμός φορτώνει όλα τα ίδια στοιχεία HTML για κάθε συσκευή, συμπεριλαμβανομένων εκείνων που προορίζονται για την παράδοση tablet και επιφάνειας εργασίας. Αυτό σημαίνει ότι όλο το περιεχόμενο παραδίδεται συχνά, συμπεριλαμβανομένων εικόνων και σεναρίων, ανεξάρτητα από τη συσκευή στην οποία βλέπετε.
Μια μελέτη που πραγματοποιήθηκε πέρυσι, έδειξε ότι το 86% των ιστοτόπων που ανταποκρίνονται αυτήν την περίοδο σε απευθείας σύνδεση παραδίδουν μια πλήρη σελίδα επιφάνειας εργασίας σε κινητές συσκευές. Αυτό είναι σαφώς μια τάση στην τεχνική σχεδιασμού που χρειάζεται να αντιμετωπίσει, αν θέλουμε να σταματήσουμε την πορεία των φουσκωμένων ιστοσελίδων στα ίχνη του.
Προς το παρόν, ο ευαίσθητος σχεδιασμός ωθεί τα μεγέθη των σελίδων και αυτή είναι η τάση που πρέπει να αντιμετωπιστεί, ειδικά αν σκεφτεί κανείς ότι το 57% των χρηστών κινητής τηλεφωνίας θα φύγει εάν ο ιστότοπος δεν φορτωθεί μέσα σε 3 δευτερόλεπτα.
Για όσους έχουν ήδη σχεδιάσει και θέλουν να βελτιστοποιήσουν τώρα, Mobitest μπορεί να χρησιμοποιηθεί για τη μέτρηση της απόδοσης προκειμένου να συνεχιστεί και να αντιμετωπιστεί. Φυσικά, κατά τον προγραμματισμό ενός σχεδιασμού, η βελτιστοποίηση θα είναι απλούστερη στο στάδιο αυτό και η απόδοση θα πρέπει πάντα να θεωρείται ουσιαστικό μέρος του σχεδιασμού, παρά μια δεύτερη σκέψη.
Προκειμένου να βελτιωθεί η απόδοση, το μέγεθος των σελίδων και των πόρων που έχουν φορτωθεί με αυτό πρέπει να μειωθεί. Αυτό μπορεί να γίνει χρησιμοποιώντας διάφορες τεχνικές, χωρίς να αλλοιώνεται σοβαρά η εμφάνιση και η αίσθηση του χώρου.
Το πρώτο πράγμα που πρέπει να εξετάσετε είναι πώς να διασφαλίσετε ότι μόνο οι πόροι που χρειάζονται αποστέλλονται στη συσκευή προορισμού. Αυτό μπορεί να γίνει με ελαχιστοποίηση του αριθμού αιτήσεων HTTP, έτσι ώστε ο χρήστης να ξοδεύει λιγότερο χρόνο αναμονής για φόρτωση του DOM. Αυτό μπορεί με τη σειρά του να γίνει με τη συμπίεση πόρων CSS και Javascript, για τα οποία εργαλεία, όπως Πυξίδα - ένα πλαίσιο δημιουργίας CSS ανοιχτής πηγής - μπορεί να χρησιμοποιηθεί. Αυτό επιτρέπει στους προγραμματιστές να δημιουργήσουν καθαρότερο markup και να δημιουργήσουν sprites και επεκτάσεις με ελάχιστη αναστάτωση.
Όσον αφορά τη JavaScript, εργαλεία όπως UglifyJS μπορεί να χρησιμοποιηθεί, η οποία συμπιέζει κώδικα.
Αυτό μπορεί να θεωρηθεί σημαντική τεχνική όταν πρόκειται για σχεδιασμό που ανταποκρίνεται, καθώς μπορεί να χρησιμοποιηθεί για να διασφαλίσει ότι οι χρήστες κινητών και smartphone δεν θα κατεβάσουν τις πτυχές του ιστότοπου που επιβραδύνουν ή δεν θα χρησιμοποιήσουν.
Η υπό όρους φόρτωση μπορεί να χρησιμοποιηθεί για να σταματήσει η φόρτωση όλων των ειδών περιεχόμενο, συμπεριλαμβανομένων των κοινωνικών γραφικών widgets, των εικόνων, των χαρτών και πολλά άλλα. Είναι σημαντικό να σημειωθεί σε αυτό το σημείο ότι ο ιστότοπος θα πρέπει να δοκιμάζεται διεξοδικά σε κάθε στάδιο βελτιστοποίησης, ώστε να είναι εύκολο να δείτε τι έχει κάνει τη διαφορά καθώς προχωράτε.
Όλοι γνωρίζουμε ότι οι εικόνες είναι συνήθως υπεύθυνες για την ανάληψη της μεγαλύτερης ποσότητας kilobytes σε μια ιστοσελίδα. Επίσης, είναι ασφαλές να πούμε ότι οι εικόνες που έχουν σχεδιαστεί για πρόγραμμα περιήγησης για υπολογιστές θα υποστούν καλύτερη απόδοση όταν μεταφέρονται σε μια κινητή συσκευή.
Εάν ένας ιστότοπος έχει επίσης πολύ παλαιό περιεχόμενο, τότε αυτό θα επηρεάσει ακόμη περισσότερο την απόδοση και θα πρέπει να εφαρμοστεί κάποιος τρόπος για να αποφευχθεί αυτό το περιεχόμενο από τη φόρτωση. Ενώ αυτό μπορεί να γίνει με τροποποίηση της σήμανσης αλλάζοντας τα στοιχεία src ή img, η λύση PHP Προσαρμοσμένες εικόνες είναι μάλλον ευκολότερη. Το λογισμικό εντοπίζει το μέγεθος της οθόνης και δημιουργεί αυτόματα, αποθηκεύει προσωρινά και παρέχει τις κατάλληλες μειωμένες ενσωματωμένες εικόνες HTML, χωρίς να χρειάζεται να αλλάξετε τη σήμανση. Για να χρησιμοποιηθεί σε συνδυασμό με τις τεχνικές Fluid Image, είναι μια εύχρηστη λύση και αυτή που θα εξοικονομήσει πολύ χρόνο. Η Adaptive Images χρησιμοποιεί ένα αρχείο htaccess, ένα αρχείο php και μία γραμμή Javascript για να καθορίσει το μέγεθος της οθόνης των επισκεπτών του ιστότοπου.
Αξίζει να σκεφτείτε και το κείμενο, καθώς αυτό θα αναδιπλώνεται φυσικά όταν η συσκευή είναι περιορισμένη και θα μπορούσε να προκαλέσει προβλήματα εμφάνισης. FitText είναι ένα εργαλείο που μπορεί να βοηθήσει στην αντιμετώπιση αυτού, ένα jQuery plugin που ενημερώνει αυτόματα το μέγεθος της γραμματοσειράς, με επιλογές για τα ελάχιστα και μέγιστα μεγέθη που θα επιτρέπονται.
Αυτό είναι ιδανικό για τίτλους που ενδέχεται να εμφανίζονται άσχημα σε μια κινητή συσκευή και επιτρέπουν να αγνοηθεί το μέγεθος γραμματοσειράς που καθορίζεται από το CSS3. Ωστόσο, το FitText προορίζεται μόνο για τίτλους και δεν πρέπει να χρησιμοποιείται μέσα στο κείμενο της παραγράφου.
Αν και ο ευαίσθητος σχεδιασμός έχει τα προβλήματά του, όπως και κάθε σχετικά νέα τεχνολογία ή τεχνική, αξίζει ακόμα να επιλέξουμε να οικοδομήσουμε μια τοποθεσία με αυτόν τον τρόπο. Κανείς δεν θέλει να πάει πίσω και ενώ μπορεί να είναι ευκολότερο να δημιουργηθεί ένας κινητός ιστότοπος, είναι πολύ καλύτερο να είναι όσο το δυνατόν πιο καινοτόμος.
Η Google συμφωνεί, συμβουλές τους είναι να χρησιμοποιήσετε τον αποκριτικό σχεδιασμό ως τον καλύτερο τρόπο σχεδιασμού για κινητά. Φυσικά στους γίγαντες της αναζήτησης, αυτό σημαίνει ότι έχουν μόνο μια διεύθυνση URL για ανίχνευση, αντί για πολλές διευθύνσεις URL για αυτό που ουσιαστικά είναι ο ίδιος ιστότοπος, έτσι είναι πραγματικά προς το συμφέρον τους.
Ωστόσο, αυτή τη στιγμή της μανίας κοινωνικής κατανομής έχει επίσης νόημα, καθώς οι χρήστες κινητών μπορούν να μοιράζονται μια σελίδα με κάποιον που χρησιμοποιεί μια επιφάνεια εργασίας. Προκειμένου να δημιουργηθεί μια ομοιόμορφη εμπειρία, αυτό θα πρέπει να παρέχει το ίδιο περιεχόμενο.
Επιπλέον, η ύπαρξη ενός ανταποκρινόμενου ιστότοπου βελτιώνει την παραγωγικότητα του εργατικού δυναμικού, καθώς ουσιαστικά είναι πολύ λιγότερο να το κάνουμε. Αυτό ισχύει για το περιεχόμενο, τις ενημερώσεις και το SEO, καθώς αυτό θα πρέπει να γίνει χωριστά αν δημιουργηθούν διαφορετικοί χώροι.
Οι κινητές συσκευές και τα ταμπλέτες καθίστανται ο κανόνας για τη σύνδεση στο διαδίκτυο και την περιήγηση σε αυτή την εποχή, σχεδόν μετά το PC. Οι πωλήσεις tablet παγκοσμίως αυξήθηκαν σε μόλις ένα χρόνο, υπερδιπλασιάζοντας την εποχή εκείνη και με πολλούς καταναλωτές επιλέγοντας τώρα διαφορετικές συσκευές που χρησιμοποιούν το Android, καθώς και το iOS.
Δεν υπάρχει αμφιβολία ότι μέχρι στιγμής ο ευαίσθητος σχεδιασμός έχει θετικό αντίκτυπο, παρά τις ανησυχίες απόδοσης. Σύμφωνα με μία έκθεση , η οποία ζήτησε από μερικές από τις κορυφαίες μάρκες παγκοσμίως να γνωρίσουν πόσο επηρεασμένη ήταν η κίνηση ενός ανταποκρινόμενου ιστότοπου, οι επισκέψεις σε όλες τις συσκευές αυξήθηκαν σημαντικά.
Αυτό περιελάμβανε μια μέση αύξηση 23% από τους επισκέπτες κινητής τηλεφωνίας, καθώς και ένα χαμηλότερο ποσοστό εγκατάλειψης 26%, με τους επισκέπτες να περνούν περίπου 7,5% περισσότερο χρόνο στους ιστότοπους από ό, τι είχε προηγουμένως δει.
Ο O'Neill, ο μοντέρνος λιανοπωλητής ειδών ρούχων surf, αναφέρει ένα ποσοστό μετατροπής που είναι 65,7% υψηλότερο στο iPad και το iPhone ως αποτέλεσμα της ανάπτυξης ενός ανταποκρινόμενου ιστότοπου. Αυτό αντιστοιχεί σε αύξηση εσόδων 101,2% μόνο σε αυτές τις συσκευές.
Όσον αφορά τις συσκευές Android, ο ρυθμός μετατροπής ήταν ακόμα καλύτερος, σε ένα επιβλητικό 407,3%, που αντιπροσωπεύει τεράστια αύξηση των εσόδων κατά 591,4%. Μικρότερος συντελεστής μετατροπής παρατηρήθηκε σε μη κινητές συσκευές, παρόλο που η ανάπτυξη εξακολουθούσε να παρατηρείται.
Αυτό είναι μόνο ένα από τα εμπορικά σήματα που απελευθερώνουν τα στοιχεία τους και είναι αρκετά δύσκολο να αποκτήσουν τα δεδομένα από τους άλλους αυτή τη στιγμή, όπως συνέβη και με τις επιπτώσεις των κοινωνικών μέσων πριν από μερικά χρόνια. Ωστόσο, πρόκειται σε κάποιο βαθμό να αποδείξει ότι οι αποδόσεις από το σχεδιασμό ενός ανταποκρινόμενου ιστότοπου μπορεί να είναι σημαντικές.
Λαμβάνοντας υπόψη αυτό, ποιος άλλος λόγος χρειάζεται ο σχεδιαστής να αρχίσει να σχεδιάζει ανταποκρινόμενα τους πελάτες του και να προσπαθεί να εξασφαλίσει ότι θα εκτελέσει όσο το δυνατόν καλύτερα; Δεν υπάρχει κανένας, και εκείνοι οι σχεδιαστές που δεν θέλουν να πάνε στον κόπο να μάθουν πώς να σχεδιάσουν, να οικοδομήσουν και να βελτιστοποιήσουν μια περιοχή χρησιμοποιώντας απαντητικές τεχνικές μπορεί να βρεθούν να παραμείνουν στη σκόνη.
Το 67% των χρηστών λένε ότι έχουν αγοράσει μέσω ενός ιστότοπου για κινητά και πιστεύει ότι η χρήση του κινητού διαδικτύου θα ξεπεράσει εκείνη της επιφάνειας εργασίας μέχρι το επόμενο έτος. Λαμβάνοντας υπόψη όλα αυτά, είναι εύκολο να καταλάβουμε γιατί οι επιχειρήσεις θα ενδιαφέρονται όλο και περισσότερο για τις καλύτερες λύσεις web για κινητά που μπορούν να προσφέρουν.
Ο ανταποκρινόμενος σχεδιασμός μπορεί να είναι ακόμη στα αρχικά στάδια, αλλά φαίνεται σαφές ότι η ζήτηση στην αγορά θα το κάνει να μεγαλώσει γρήγορα, οπότε αξίζει να μάθουμε τώρα όσο το δυνατόν περισσότερες πτυχές της πειθαρχίας.
Ποιες τεχνικές έχετε χρησιμοποιήσει για να βελτιστοποιήσετε τις τοποθεσίες απόκρισης; Παρέχει εναλλακτικό περιεχόμενο αναιρεί τα οφέλη του ανταποκρινόμενου σχεδιασμού; Ενημερώστε μας στα σχόλια.