Μια φορά κι έναν καιρό, περίπου μία ώρα μακριά από το σημείο όπου ζουν σήμερα, εργάστηκε ένας σχεδιαστής ιστοσελίδων που αγαπούσε τις συνθέσεις του Photoshop και τις διατάξεις σταθερού πλάτους. Και καλά, δεν θέλω να χαλάω το τέλος, αλλά ο σχεδιαστής ήταν εγώ.
Στη συνέχεια, καθώς ασχολούμουν με τη δική μου επιχείρηση, η δημιουργική κοινότητα που βασίζεται στο διαδίκτυο έμεινε μπερδεμένη σε αυτό το νέο σχεδιασμό που αποκαλείται "ανταποκρινόμενος σχεδιασμός". Όπως θα έκανε οποιοσδήποτε νεαρός, λαμπερός, θαμνώδης επαγγελματίας, διερεύνησα. Μετά από όλα, το νεότερο, τελευταίο πράγμα πρέπει πάντα να δίνεται τουλάχιστον μια μακρόχρονη ματιά.
Αυτό που ανακάλυψα, όμως, με άφησε απογοητευμένο. Ένας κακός ηγέτης ονομάστηκε Ethan Marcotte είχε εξαπολύσει α απλό σχέδιο για να κάνουν οι σχεδιαστές ιστοσελίδων να δουλεύουν πιο σκληρά! Το βιβλίο του άφησε τους ανθρώπους να φωνάζουν και να χτυπούν για το πώς έπρεπε να «σκεφτούμε τους χρήστες των κινητών» και «να κάνουμε τους ιστοτόπους μας να εργάζονται σε όσο το δυνατόν περισσότερες πλατφόρμες» ... οι ειδωλολάτρες.
Φυσικά, αντιστάθηκα όσο μπορούσα. Έχω αγωνιστεί σκληρά και γενναία ενάντια σε αυτή την παλίρροια της καλής αίσθησης και της έξυπνης επιχείρησης. αλλά δεν ήταν καθόλου τίποτα. Στη συνέχεια, έπεσα πίσω στις δικαιολογίες: "Αλλά δεν έχω κινητές συσκευές για να δοκιμάσω με" Και αυτό, αγαπητέ αναγνώστη, είναι το σημείο. Αποδεικνύεται ότι δεν χρειάζεστε απολύτως τίποτα.
Με την πάροδο του χρόνου, έχω καταλήξει σε μερικές βασικές οδηγίες που, αν βρεθείτε χωρίς κινητό τηλέφωνο ή tablet, θα σας βοηθήσουν να σχεδιάσετε ιστότοπους που κάνουν τα πράγματα να φαίνονται καλά στα περισσότερα προγράμματα περιήγησης για κινητά.
... χτίζετε κάτι μεγαλύτερο από έναν μικρό ιστότοπο με γνώμονα το περιεχόμενο. Οι μεγάλες ιστοσελίδες και οι ιστότοποι που βασίζονται σε εφαρμογές θα πρέπει να δοκιμάζονται σίγουρα σε πραγματικές κινητές πλατφόρμες. Θέλω να πω, σίγουρα, θα μπορούσατε πιθανώς να το ψεύσετε, αλλά δεν θα το συμβούλευα.
Όταν εργάζεστε με άγνωστες μεταβλητές, η καλύτερη επιλογή σας είναι να κρατάτε τα πράγματα απλά απλά. Ναι, επικαλούμαι τον σχεδόν κλισέ KISS κανόνα, επειδή λειτουργεί.
Χωρίς ένα rack γεμάτο smartphones και ούτω καθεξής, θα πρέπει να βασιστείτε σε αυτό που γνωρίζουν άλλοι. Ευτυχώς, έχει δαπανηθεί πολύς χρόνος και ενέργεια εξετάζοντας τις δυνατότητες των δημοφιλέστερων προγραμμάτων περιήγησης για κινητά εκεί έξω και τον τρόπο σύγκρισης μεταξύ τους.
Μάθετε ποιο είναι το κοινό-στόχος σας και, στη συνέχεια, ανακαλύψτε τι είδους προγράμματα περιήγησης χρησιμοποιούν. Όπως πάντα, η Google είναι φίλος σας. Στη συνέχεια, το μόνο που έχετε να κάνετε είναι να σχεδιάσετε στατιστικά στοιχεία.
Αν το μεγαλύτερο μέρος της αγοράς στόχων για κινητά χρησιμοποιεί Android / iOS σε μία ή την άλλη μορφή, έχετε τύχη! Τα προεπιλεγμένα προγράμματα περιήγησης (και οι πιο δημοφιλείς εναλλακτικές λύσεις, όπως ο Firefox) είναι σύγχρονα ως επί το πλείστον. Οι προηγμένες τεχνικές διάταξης, τα βασικά εφέ CSS3, το jQuery ... όλα αυτά πιθανότατα θα αποδώσουν αρκετά καλά.
Αν όμως το κοινό-στόχος σας χρησιμοποιεί άλλες πλατφόρμες, θα χρειαστεί να κάνετε πιο συγκεκριμένες έρευνες για αυτούς και να μάθετε τι μπορούν και δεν μπορούν να κάνουν.
Τώρα, τι κάνετε αν έχετε λίγες ή καμία πληροφορία για τους χρήστες σας; Προσπαθήστε τουλάχιστον να καταλάβετε πού βρίσκονται. Οι περισσότεροι ιστότοποι έχουν, τουλάχιστον, μια γενική περιοχή από την οποία προέρχονται οι περισσότεροι χρήστες τους. Αποκτήστε τα στατιστικά στοιχεία για αυτήν την περιοχή.
Αν αποτύχει όλα αυτά, σχεδιασμός για το χειρότερο σενάριο.
Για να γίνει η δουλειά σας λίγο πιο εύκολη, βρήκα έναν ιστότοπο με μια αρκετά λεπτομερή σύγκριση του τι κάνουν και δεν υποστηρίζουν τα πιο δημοφιλή προγράμματα περιήγησης για κινητά. Ελέγξτε το mobilehtml5.org .
Και φυσικά, υπάρχει η πάντα δημοφιλής caniuse.com
Ξέρω ότι ορισμένοι σχεδιαστές ορκίζονται δημιουργώντας προσαρμοσμένο κώδικα ειδικά για κάθε έργο, αλλά όταν δουλεύετε τυφλά, έτσι ώστε να μιλήσετε, η επανεφεύρεση του τροχού δεν είναι πρακτική επιλογή. Πλαίσια που έχουν ήδη δοκιμαστεί σε κινητές πλατφόρμες παίρνουν πολλές από τις εικασίες από τη διαδικασία.
Η εικασία είναι κακή. Απόφυγέ το.
Τώρα, προφανώς δεν έχω δοκιμάσει ή δοκιμάσει προσωπικά κάθε πλαίσιο εκεί έξω, οπότε θα πρέπει να βρείτε ένα που κάνει ό, τι θέλετε να κάνει και να το ερευνήσει, συγκρίνοντάς το με τις δυνατότητες της επιδιωκόμενης πλατφόρμας κινητής τηλεφωνίας. Ακόμα, υπάρχουν μερικοί που θα μπορούσατε να ξεκινήσετε με:
Αυτά είναι αυτά που πιθανόν να αναφέρετε από την κορυφή του κεφαλιού σας. Χαρακτηρίζονται από την τεράστια πολυπλοκότητά τους. Φέρνουν συστήματα διάταξης, στοιχεία UI και plug-ins του jQuery σε ένα ισχυρό πακέτο.
Τα πιο διάσημα από αυτά είναι Bootstrap και θεμέλιο . Δεν θα ασχοληθώ με τη σύγκρισή τους εδώ, οπότε προχωρήστε και στο Google "Bootstrap vs. Foundation" εάν χρειάζεστε περισσότερες λεπτομέρειες. Το μόνο που χρειάζεται να γνωρίζετε τώρα είναι ότι σε κάθε πλαίσιο, κάθε στοιχείο έχει δοκιμαστεί εκτενώς από μια αρκετά μεγάλη βάση ανεμιστήρων και είναι έτοιμο για κινητά.
Αυτά δεν προσπαθούν να κάνουν τα πάντα για εσάς, αλλά μάλλον σας δώσουν αρκετά για να ξεκινήσετε. Αυτό κάνει την προσαρμογή των πραγμάτων λίγο πιο εύκολη, αλλά η δημιουργία και / ή το στυλ των πιο σύνθετων στοιχείων UI εξαρτάται από εσάς.
Αυτή η κατηγορία περιλαμβάνει Σκελετός , ΚΑΤΩ ΠΛΑΙΣΙΟ 4 και ούτω καθεξής…
Αυτή είναι η προσωπική μου αγαπημένη κατηγορία. Προτιμώ να ξεκινήσω με μια κενή οθόνη και ένα σύστημα διαρρύθμισης έτοιμο, το οποίο μου επιτρέπει να δημιουργήσω το είδος της ιστοσελίδας που θέλω χωρίς να χρειάζεται να αντικαταστήσω πολλά CSS ή να προσπαθήσω να αποσπάσω συγκεκριμένα τμήματα οποιουδήποτε πλαισίου.
Αυτά τα πλαίσια, ως επί το πλείστον, δεν φαίνεται να αφορούν τον εαυτό τους με τη δομή ή τη δομή των σελίδων. Έχουν σχεδιαστεί για να παρέχουν έναν εύκολο τρόπο να προσθέσετε φανταχτά, συμβατά με το κινητό στοιχεία διεπαφής εφαρμογών (διαβάστε: widgets).
Έχω δοκιμάσει μόνο ένα, αλλά η έρευνά μου λέει ότι τα τρία καλύτερα (ή τουλάχιστον τα δημοφιλέστερα) πλαίσια αυτής της κατηγορίας είναι jQuery Mobile , KendoUI , και Wijmo .
Αποδεικνύεται ότι η προσβασιμότητα δεν είναι μόνο για τους τυφλούς ή τους εντελώς τυφλούς. Πολλά από τα παλαιότερα προγράμματα περιήγησης για κινητά είναι τόσο περιορισμένα στις δυνατότητές τους, που είναι σχεδόν παρόμοια με την περιήγηση με όλα τα CSS και Javascript απενεργοποιημένα.
Το καλύτερο στοίχημά σας, σε αυτή την περίπτωση, είναι να είστε απολύτως βέβαιοι ότι ο ιστότοπός σας είναι χρησιμοποιήσιμος κάτω από αυτές τις συνθήκες. Γυρίστε όλα αυτά τα όμορφα πράγματα μακριά, και βεβαιωθείτε ότι εξακολουθεί να είναι δυνατό για τους χρήστες να επιτύχουν τους στόχους του δικτυακού τόπου χωρίς αυτούς.
Οι εξομοιωτές συσκευών συνήθως δεν είναι εκατό τοις εκατό ακριβείς, αλλά μπορείτε να δοκιμάσετε τα πιο σημαντικά πράγματα, όπως τη διάταξη και ούτω καθεξής. Τα σφάλματα που έχω συναντήσει είναι συχνά μικρότερα πράγματα, όπως οι γραμματοσειρές web που δεν αποδίδουν. Μην ανησυχείτε, θα πρέπει να δουλεύουν καλά στο πραγματικό υλικό.
Αλλά ποιοι εξομοιωτές πρέπει να χρησιμοποιείτε;
Αυτό Λειτουργεί λίγο αργά, αλλά λειτουργεί σαν γοητεία. Πρέπει να κατεβάσετε ολόκληρο το κιτ ανάπτυξης, αλλά αξίζει να έχετε ένα πρόγραμμα που μιμείται στενά όχι μόνο το προεπιλεγμένο πρόγραμμα περιήγησης Android, αλλά ολόκληρο το λειτουργικό σύστημα. Επιπλέον, μπορείτε να δοκιμάσετε τον ιστότοπό σας σε μια ποικιλία εικονικών "συσκευών".
Αλλο ένα που λειτουργεί ουσιαστικά όπως διαφημίζεται. Μπορείτε να το κατεβάσετε, να επιλέξετε τη συσκευή σας και να πάτε.
Ο Firefox διαθέτει αρκετές επιλογές για τη δοκιμή του περιεχομένου σας για κινητά. Ο πρώτος είναι ένας απλός εξομοιωτής που μιμείται τη λειτουργικότητα αποδόσεων του κινητού έργου Firefox του Mozilla, με κωδικό όνομα: Fennec.
Δεν είναι υπερβολικά περίπλοκο, παρέχοντας σας ένα απλό, αναδιπλούμενο παράθυρο, οπότε εναπόκειται σε εσάς να ρυθμίσετε με μη αυτόματο τρόπο το μέγεθος της οθόνης που θέλετε να δοκιμάσετε.
ο δεύτερη επιλογή είναι ένα πρόσθετο για την έκδοση desktop του Firefox. Ονομάστηκε το Simulator του Firefox, σας παρέχει μια ολόκληρη πλατφόρμα για να παίξετε, όχι μόνο το πρόγραμμα περιήγησης (όπως το Android SDK).
Δεν ήμουν σε θέση να δοκιμάσω αυτόν τον εξομοιωτή , καθώς απαιτεί την εγκατάσταση ενός πολύ μεγάλου SDK και η εγκατάσταση ήταν bugged, τουλάχιστον για μένα. Ακόμα, είναι έξω εκεί για να δοκιμάσετε κατά την κρίση σας.
Blackberry προσφέρει μια σειρά από προσομοιωτές για BB10. Ίσως είμαι εγώ, αλλά δεν είχα μεγάλη επιτυχία σε καμία από αυτές. Θα ήθελα πολύ να ακούσω από οποιονδήποτε καταφέρνει να τους κάνει να δουλέψουν.
Τελευταίο, αλλά σίγουρα όχι λιγότερο σημαντικό, η Apple παρέχει ένα δωρεάν προσομοιωτή iOS που μπορούν να χρησιμοποιηθούν για τη δοκιμή συσκευών της Apple ως μέρος του Xcode. Δυστυχώς, επειδή είναι μέρος του Xcode, είναι μόνο Mac.
Εάν έχετε τον προϋπολογισμό (ή μπορείτε να δοκιμάσετε πραγματικά γρήγορα, καθώς ο ελεύθερος χρόνος τους είναι περιορισμένος χρονικά) δεν μπορείτε να πάτε πάρα πολύ στραβά με BrowserStack . Θα σας επιτρέψουν να δοκιμάσετε σε πολλά επιτραπέζια και μια τεράστια ποικιλία κινητών τηλεφώνων. Δεν είναι τόσο ευαίσθητο όσο το πραγματικό πράγμα, θα σας δείξουν θέματα με θέματα όπως η διάταξη.
Τα προγράμματα περιήγησης για κινητά τείνουν να παίζουν με ρυθμίσεις μεγέθυνσης ή έτσι η εμπειρία μου ήταν. Εάν θέλετε ο ιστότοπός σας να φαίνεται όπως συμβαίνει όταν συρρικνώσετε το παράθυρο του προγράμματος περιήγησης στα μεγέθη για κινητά, χρησιμοποιήστε αυτό το όμορφο κομμάτι HTML στην κεφαλή του εγγράφου σας:
Επιτρέψτε μου να το επαναλάβω: ο μινιμαλισμός πέφτει στο κινητό. Η μινιμαλιστική αισθητική προσαρμόζεται καλά σε μικρότερα μεγέθη οθόνης με λιγότερα τσιμπήματα και ρυθμίσεις, εξοικονομώντας πολύ χρόνο. Ίσως αυτό να μοιάζει με ένα όχι-brainer σε μερικούς από σας, αλλά δεν μπορώ να τονίσω αρκετά.
Αυτό το κολάζ πληροφοριών είναι μόνο η κορυφή του παγόβουνου και φυσικά δεν ταιριάζει με την πραγματική δοκιμή των ιστότοπων σας σε πραγματικό υλικό κινητής τηλεφωνίας, αλλά θα πρέπει να σας επιτρέψει να ξεκινήσετε και να κερδίσετε αρκετά από το σχεδιασμό κινητών τηλεφώνων, τόσο πλούσια αξίζει.
Προτεινόμενη εικόνα / μικρογραφία, εικόνα κινητής συσκευής μέσω Shutterstock.