Από το καλοκαίρι του 2015, η Google θα αλλάξει τη δουλειά της με τέτοιο τρόπο ώστε το πλεονέκτημα στα αποτελέσματα αναζήτησης να δοθεί σε όσους ιστότοπους έχουν έκδοση για κινητά. Αυτό και η συνειδητοποίηση ότι όλο και περισσότεροι άνθρωποι χρησιμοποιούν smartphone για να περιηγηθούν στον Ιστό, με παρακίνησαν να εξελιχθώ έκδοση για κινητάτον ιστότοπό σας.
Στη συνέχεια θα σας πω για την εμπειρία μου και πώς μπορείτε να το κάνετε μόνοι σας.
Προφανώς, το κύριο χαρακτηριστικό κατά την ανάπτυξη ενός ιστότοπου για κινητές συσκευέςείναι σημαντικά μικρότερο μέγεθοςοθόνη σε σύγκριση με μια πλήρη οθόνη υπολογιστή, φορητού υπολογιστή ή tablet. Σε γενικές γραμμές, το tablet είναι επίσης μια φορητή συσκευή, αλλά οι διαστάσεις της οθόνης του είναι τέτοιες που στις περισσότερες περιπτώσεις η πλήρης έκδοση του πόρου φαίνεται υπέροχη σε αυτό. Επομένως, κάτω από την έκδοση για κινητά, περαιτέρω θα εννοώ την έκδοση για το τηλέφωνο ή, πιο σωστά, το smartphone.
Λίγη θεωρία
Οι περισσότεροι σύγχρονοι ιστότοποι λειτουργούν με βάση το ένα ή το άλλο σύστημα διαχείρισης περιεχομένου (CMS) ή μια απλή μηχανή web. Για την εμφάνιση του ιστότοπου στη μηχανή web, δηλ. τότε πώς το βλέπουν οι επισκέπτες του πόρου ανταποκρίνονται στα λεγόμενα πρότυπα.
Ένα πρότυπο είναι, κατά κανόνα, ένα σύνολο αρχείων που καθορίζει την εμφάνιση ενός ιστότοπου. Κάθε μηχανή χρησιμοποιεί τα δικά της πρότυπα, αλλά όλα έχουν κάτι κοινό - αυτό είναι ένα αρχείο (α) με πίνακες στυλ cssκαι τα αρχεία που είναι υπεύθυνα για τη διάταξη της σελίδας, μπορεί να είναι PHP, ASP, κ.λπ. Είναι δυνατές περισσότερες εξωτικές επιλογές, αλλά σε κάθε περίπτωση, η έξοδος της μηχανής web θα είναι CSS και HTML, και πιθανώς κάτι άλλο. Λοιπόν, παρεκκλίνω.
Ένας τρόπος για να κάνετε τον ιστότοπό σας να φαίνεται εξίσου καλός σε όλες τις συσκευές είναι να χρησιμοποιήσετε πολλά πρότυπα για διαφορετικούς τύπους συσκευών.
Για παράδειγμα, μπορεί να υπάρχουν δύο:
- Το πρώτο είναι για πλήρης υπολογιστής, laptop, tablet, με άλλα λόγια για συσκευή με μεγάλη οθόνη.
- Το δεύτερο είναι για ένα smartphone ή άλλη συσκευή της οποίας η οθόνη είναι πολύ μικρότερη.
Ανάλογα με τη συσκευή από την οποία προήλθε ο επισκέπτης, η μηχανή Ιστού θα χρησιμοποιήσει ένα ή άλλο πρότυπο για να δημιουργήσει εμφάνισησελίδα, ο σχεδιασμός της, η διάταξη των στοιχείων και το περιεχόμενο.
Είναι εξαιρετικά σημαντικό να καταλάβουμε εδώ ότι είναι αδύνατο να φτιάξετε ένα πρότυπο που θα φαίνεται εξίσου καλό τόσο στο τηλέφωνο όσο και στο φορητό υπολογιστή. Σε κάποιο βαθμό, αυτός θα είναι ένας συμβιβασμός, και σε καμία περίπτωση ο καλύτερος.
Είναι επίσης δυνατή η χρήση τριών ή και περισσότερων προτύπων, για παράδειγμα, από μια ξεχωριστή έκδοση του ιστότοπου για ένα tablet, αλλά αυτή είναι μια ελαφρώς διαφορετική ιστορία, την οποία δεν θα εξετάσω εδώ.
Ας επιστρέψουμε στο πρότυπο για την έκδοση για κινητά.
Σε γενικές γραμμές, ένα τέτοιο πρότυπο είναι μια ελαφριά έκδοση του πλήρους, που διαφέρει ως προς το σχεδιασμό, το μέγεθος και τη διάταξη των στοιχείων.
Αυτή η απλοποίηση οφείλεται κυρίως στο γεγονός ότι η ανάλυση της οθόνης σύγχρονα smartphonesξεκινά, κατά κανόνα, με 800x480 pixel με μέγεθος οθόνης περίπου 4"" ίντσες.
Αυτό σημαίνει ότι περίπου αυτό το μέγεθος θα πρέπει να υπολογιστεί κατά την ανάπτυξη.
Η χαμηλή ανάλυση οθόνης σημαίνει ότι τα μεγάλα στοιχεία και τα στοιχεία που βρίσκονται σε μια σειρά απλά δεν χωρούν οριζόντια.
Αυτό ισχύει ιδιαίτερα εάν η ίδια η συσκευή βρίσκεται οριζόντια.
Ταυτόχρονα, σε ένα smartphone, η πυκνότητα εικονοστοιχείων της οθόνης είναι 2-3 φορές υψηλότερη από ό,τι σε μια οθόνη υπολογιστή ή φορητού υπολογιστή, γεγονός που οδηγεί στο γεγονός ότι το συνηθισμένο μέγεθος γραμματοσειράς θα φαίνεται πολύ μικρό. Για να δείτε κάτι, θα πρέπει να χρησιμοποιήσετε το ζουμ, κάνοντας συνεχώς σμίκρυνση ή μεγέθυνση σε αυτήν ή εκείνη την περιοχή της σελίδας, κάτι που είναι εξαιρετικά άβολο.
Σε αυτή τη θεωρία, περισσότερο από αρκετό, τώρα για τα πάντα με περισσότερες λεπτομέρειες.
Ρύθμιση της μηχανής Ιστού
Όπως γράφτηκε ήδη νωρίτερα, το σύστημα διαχείρισης περιεχομένου είναι υπεύθυνο για την επιλογή ενός ή του άλλου προτύπου.
Ορισμένες μηχανές Ιστού μπορούν αρχικά να προσδιορίσουν από ποια συσκευή ήρθε ο επισκέπτης και να περιλαμβάνουν ένα ή άλλο πρότυπο, ενώ άλλες θα χρειαστεί να εγκαταστήσουν τις κατάλληλες επεκτάσεις για αυτό.
Για παράδειγμα, θα σας δείξω τη ρύθμιση Mobile Detector από την BlackRed Designs, έχει ελάχιστες ρυθμίσεις και μετά την εγκατάσταση, το μόνο που χρειάζεται να κάνετε είναι να το δημοσιεύσετε και να επιλέξετε ένα πρότυπο που θα χρησιμοποιείται για την εμφάνιση σελίδων σε κινητές συσκευές.
Προφανώς, το πρότυπο για την έκδοση για κινητά θα πρέπει να είναι διαφορετικό από το κύριο.
Στην περίπτωσή μου, έφτιαξα ένα αντίγραφο του κύριου προτύπου, το μετονόμασα και μετά άρχισα να κάνω αλλαγές. Αυτή η προσέγγιση επέτρεψε να γίνει η έκδοση για κινητά όσο το δυνατόν πιο κοντά στην κύρια έκδοση και ταυτόχρονα να εξοικονομηθεί πολύς χρόνος.
Στη συνέχεια, θα μιλήσω αναλυτικά για τις βασικές αλλαγές που έχουν γίνει.
Δημιουργήστε ένα πρότυπο
Η δημιουργία ενός προτύπου εξαρτάται πλήρως από τη μηχανή Ιστού που χρησιμοποιείται και δεν είναι δυνατό να πούμε για τα πάντα στο πλαίσιο αυτού του υλικού. Ωστόσο, υπάρχουν μερικά κοινά πράγματα που είναι κοινά σε όλους.
Μετα-ετικέτες και κλιμάκωση
Ένα από τα κοινά πράγματα που πρέπει να υπάρχουν ανεξάρτητα από τον κινητήρα που χρησιμοποιείται είναι μια ειδική μετα-ετικέτα - θέαση.
Αυτή η μαθηματική ετικέτα πρέπει να βρίσκεται στην ενότητα κεφάλιδίπλα στις υπόλοιπες μετα-ετικέτες και μοιάζουν κάπως έτσι:
Η μετα-ετικέτα ενημερώνει τις μηχανές αναζήτησης και τις κινητές συσκευές ότι έχουν μια έκδοση για κινητές συσκευές του ιστότοπου μπροστά τους και ορίζει επίσης την αρχική κλίμακα της σελίδας.
Θυμηθείτε, στην αρχή έγραψα πώς να εξετάσετε αυτό ή εκείνο το στοιχείο στη σελίδα σε μη βελτιστοποιημένους ιστότοπους, συχνά πρέπει να χρησιμοποιήσετε ζουμ, μεγέθυνση και σμίκρυνση ξεχωριστές ενότητεςσελίδες; Έτσι, η παράμετρος αρχική κλίμακα=1,0απλώς ορίζει την αρχική κλίμακα της σελίδας στο 100%.
Εάν δεν καθορίσετε την αρχική κλίμακα για την κινητή συσκευή, τότε μπορεί να τη ρυθμίσει ανεξάρτητα ανάλογα με το σύστημα της συσκευής, όπως Android, iOS, Τηλέφωνο με Windows, καθώς και το πρόγραμμα περιήγησης που χρησιμοποιείται, όπως Firefox, Chrome, Safari, Opera κ.λπ.
Καλύτερα να το αποφύγεις εξαρχής. Για όσους δεν βρίσκουν τη ζυγαριά βολική, θα μπορούν να την κλιμακώσουν κατά βούληση, με την κατάλληλη χειρονομία.
Όρια τοποθεσίας
Αν για πλήρη έκδοσηΟ ιστότοπος στο πρότυπο χρησιμοποιεί padding από τα όρια του προγράμματος περιήγησης, για παράδειγμα, για να τονίσει το περιεχόμενο:
σώμα (
margin-top: 20px;
margin-left:100px;
margin-right:100px;
περίγραμμα: 1px συμπαγές #dfdfdf;
}
Τότε για την έκδοση για κινητά αυτό είναι ήδη απώλεια ενός ήδη μικρού χρησιμοποιήσιμου χώρου, ο οποίος είναι καλύτερο να χρησιμοποιηθεί 100%.
σώμα (
πλάτος:100%;
}
Καπέλο
Κατά κανόνα, δεν υπάρχουν θεμελιώδεις διαφορές μεταξύ της κινητής και της πλήρους έκδοσης στην κεφαλίδα, και εδώ πρέπει απλώς να θυμάστε ότι όλα τα στοιχεία ταιριάζουν σε ένα smartphone και φαίνονται κατάλληλα.
Μπορεί να χρειαστεί να αλλάξετε ελαφρώς την τοποθέτηση των στοιχείων, όπως στην περίπτωσή μου να μετακινήσετε τη γραμμή αναζήτησης από τη δεξιά άκρη:
Επικεφαλίδα-αναζήτηση
{
text-align:right;
float:right;
}
Ένα επίπεδο κάτω και θέση αριστερά:
Επικεφαλίδα-αναζήτηση
{
margin-top:5px;
text-align:left;
}
Μενού
Στον ιστότοπό μου, στην τυπική έκδοση, τα στοιχεία μενού είναι τοποθετημένα οριζόντια, το ένα μετά το άλλο.
Topmenu ul li
{
οθόνη: inline;
}Topmenu li α
{
display:block;
float: αριστερά;
}
Προφανώς, όλα τα στοιχεία μενού που ακολουθούν το ένα μετά το άλλο δεν θα ταιριάζουν σε όλα τα smartphone, ειδικά όταν είναι κατακόρυφα. Επομένως, είναι πιο σωστό να τακτοποιήσετε το μενού και κατακόρυφα.
Κορυφαίο μενού ul li (
display:block;
}Κορυφαίο μενού li a (
display:block;
}
Γραμματοσειρά
Κατά κανόνα, χρησιμοποιείται γραμματοσειρά 12-13 px για την πλήρη έκδοση του ιστότοπου:
p, li, dt, dd, legend
{
μέγεθος γραμματοσειράς: 13px;
}
Αλλά, όπως γράφτηκε ήδη νωρίτερα, το τηλέφωνο έχει πολύ μεγαλύτερη πυκνότητα pixel, είναι προφανές ότι το μέγεθος της γραμματοσειράς θα πρέπει επίσης να είναι μεγαλύτερο, διαφορετικά το κείμενο θα είναι πολύ μικρό και δυσανάγνωστο. Επομένως, συνιστάται να κάνετε την κύρια γραμματοσειρά 16 pixel:
p, li, dt, dd, legend
{
μέγεθος γραμματοσειράς: 16 px;
}
Από τις ίδιες σκέψεις, το μέγεθος γραμματοσειράς επιλέγεται για τα υπόλοιπα στοιχεία κειμένου, για παράδειγμα όπως αυτό:
h1(
μέγεθος γραμματοσειράς: 24 px;
}h2 (
μέγεθος γραμματοσειράς: 22 px;
βάρος γραμματοσειράς: κανονικό
}h3 (
μέγεθος γραμματοσειράς: 17 px;
margin-top: 5px;
margin-bottom:0px;
}h4(
μέγεθος γραμματοσειράς: 16 px;
}
εικόνες
Στο περιεχόμενο των τοποθεσιών, μαζί με πληροφορίες κειμένουεμφανίζονται συνεχώς εικόνες. Εδώ δεν εννοώ σχεδιαστικά στοιχεία, αλλά εικόνες που βρίσκονται στο περιεχόμενο, στο περιεχόμενο αναρτήσεων, άρθρων κ.λπ.
Όπως έγραψα νωρίτερα, η ανάλυση οθόνης των σύγχρονων smartphone ξεκινά από 800x480 pixel. Αυτό σημαίνει ότι το μέγεθος της εικόνας δεν πρέπει να ξεπερνά τα 480 pixel, αφού διαφορετικά δεν θα χωράει στην οθόνη και θα απαιτείται κλιμάκωση.
Από την άλλη πλευρά, για μια εικόνα υψηλής ποιότητας, τα 480 pixel στην πλήρη έκδοση του ιστότοπου είναι αρκετά μικρά.
Ως μικρό κόλπο, μια κατασκευή της φόρμας μπορεί να χρησιμεύσει:
img
{
μέγιστο πλάτος:100%;
ύψος:αυτόματο;
}
Αυτή η καταχώριση λέει ότι το πλάτος της εικόνας δεν μπορεί να είναι μεγαλύτερο από 100%, δηλαδή μεγαλύτερο από το πλάτος της οθόνης, για παράδειγμα 480 εικονοστοιχεία. Η δεύτερη καταχώρηση σάς επιτρέπει να διατηρήσετε τις αναλογίες της εικόνας.
Στην ιδανική περίπτωση, για την πλήρη έκδοση και την έκδοση για φορητές συσκευές, είναι επιθυμητό να χρησιμοποιείτε διαφορετικά μεγέθη εικόνας, αλλά αυτό δεν λύνεται πλέον μέσω ενός προτύπου και απαιτεί πιο σοβαρά μέσα.
τραπέζια
Μαζί με κείμενο και γραφικές πληροφορίεςπίνακες βρίσκονται συχνά σε ιστότοπους. Και αν περιέχουν πολλές πληροφορίες ή τα κελιά περιέχουν μεγάλα μπλοκ ή εικόνες, τότε δεν χωρούν όλα στην οθόνη.
Σε ορισμένες περιπτώσεις μπορεί να είναι χρήσιμο να γράψετε κάτι όπως:
τραπέζι tr td
{
display:block;
}
Αυτός ο σχεδιασμός κάνει κάθε κελί ένα στοιχείο μπλοκ, επεκτείνοντας έτσι τις σειρές του πίνακα κατακόρυφα. Δεν είναι ότι καλύτερο η καλύτερη λύσηαλλά σε ορισμένες περιπτώσεις δίνει καλό αποτέλεσμα.
Όσον αφορά τους πίνακες, όλα εξαρτώνται από τη συγκεκριμένη περίπτωση, και ίσως δεν υπάρχει καθολική λύση.
Τώρα είναι η ώρα να μιλήσετε για το πώς να ελέγξετε τα αποτελέσματα της εργασίας σας, γιατί απλά δεν είναι δυνατό να αναπτύξετε ένα πρότυπο χωρίς να δείτε πώς θα εμφανίζεται σε ένα smartphone.
Έλεγχος του αποτελέσματος, δοκιμή
Προφανώς, κατά τη διαδικασία ανάπτυξης ενός προτύπου, είναι καλύτερο να ελέγξετε πώς φαίνεται απευθείας στο τηλέφωνο. Κατά προτίμηση σε πολλά διαφορετικά, υπό έλεγχο διαφορετικά συστήματα: Android, iOS, Windows Phone, καθώς και σε πολλά προγράμματα περιήγησης Firefox, Chrome, Safari, Opera κ.λπ. Αυτός είναι ο μόνος τρόπος για να είστε απόλυτα σίγουροι ότι όλα φαίνονται όπως πρέπει.
Είναι σαφές ότι το να έχετε πολλά τηλέφωνα στη διάθεσή σας δεν είναι πάντα εφικτό και δεν είναι πολύ βολικό. Για αυτό, μπορείτε να χρησιμοποιήσετε εξομοιωτές για κινητές συσκευές, προγράμματα περιήγησης κ.λπ.
Για έλεγχο στο περιβάλλον iOS, για iPhone και iPod, υπάρχει ειδικό περιβάλλον ανάπτυξης από την Apple - Xcode. Με τη βοήθειά του, μπορείτε να μιμηθείτε σχεδόν οποιαδήποτε συσκευή Apple.
Δυστυχώς, το Xcode λειτουργεί μόνο με Mac OS και σχεδόν ο μόνος τρόπος για να το εκτελέσετε σε υπολογιστή είναι να δημιουργήσετε μια εικονική μηχανή.
Ένα αρκετά ενδιαφέρον εργαλείο επαλήθευσης είναι το Firefox OS Simulator, το οποίο αποτελεί προσθήκη Πρόγραμμα περιήγησης Firefox. Μπορείτε να το κατεβάσετε στο:
https://addons.mozilla.org/En-us/firefox/addon/firefox-os-simulator/
Στην πραγματικότητα, μια πλήρης συσκευή στο Firefox OS προσομοιώνεται εδώ.
Επίσης, κατά τη διαδικασία ανάπτυξης ενός προτύπου, είναι πολύ χρήσιμο να περάσετε το κανονικό πρόγραμμα περιήγησής σας ως κινητό. Για το FireFox, αυτό γίνεται με ένα πρόσθετο Πράκτορας χρήστη Switcher, που μπορεί να εγκατασταθεί από εδώ:
https://addons.mozilla.org/en/firefox/addon/user-agent-switcher/
Σε αυτήν την περίπτωση, έχετε την ευκαιρία να χρησιμοποιήσετε τα αρκετά ισχυρά εργαλεία ανάπτυξης ιστού που είναι ενσωματωμένα στο ίδιο το FireFox.
Φυσικά, υπάρχουν παρόμοια εργαλεία σε άλλα προγράμματα περιήγησης, αλλά αυτά είναι καθαρά ατομικές προτιμήσεις.
Πέρα από όλα τα άλλα μηχανή αναζήτησης Googleθα πρέπει επίσης να ελέγξει τον πόρο για την «κινητικότητά» του, γιατί μόνο σε αυτήν την περίπτωση ο ιστότοπος θα αποκτήσει πλεονέκτημα έναντι άλλων. Μπορείτε να ελέγξετε αν όλα αρέσουν στη μηχανή αναζήτησης στη διεύθυνση:
https://www.google.com/webmasters/tools/mobile-friendly/
Για να είστε απόλυτα σίγουροι ότι η Google είναι ευχαριστημένη με όλα, καλό είναι να ελέγξετε όλες τις σελίδες του ιστότοπου. Εναλλακτικά, προβάλετε το στοιχείο "Εμφανισιμότητα για κινητά" στο εργαλείο webmaster στη διεύθυνση:
http://www.google.com/webmasters/
συμπέρασμα
Στο άρθρο μου, προσπάθησα να μην επικεντρωθώ σε μια συγκεκριμένη μηχανή ιστού και μίλησα κοινές προσεγγίσειςκατά την ανάπτυξη και τη δοκιμή της έκδοσης για κινητές συσκευές του ιστότοπου. Είναι σαφές ότι εκτός από τα κύρια σημεία που περιέγραψα προηγουμένως, υπάρχουν πολλά άλλα, αλλά είναι απλά αδύνατο να καλυφθούν πλήρως, ειδικά στο πλαίσιο ενός άρθρου. Επομένως, εάν έχετε οποιεσδήποτε ερωτήσεις ή θέλετε να δημιουργήσετε μια έκδοση για κινητά του ιστότοπου, αφήστε σχόλια, γράψτε μέσω της ενότητας επαφών και θα προσπαθώ πάντα να σας βοηθήσω!
Η επισκεψιμότητα από κινητές συσκευές αυξάνεται και καταλαμβάνει, κατά μέσο όρο, ήδη περίπου το 25% όλων των επισκέψεων. Αν παλαιότερα η απώλεια αυτών των επισκεπτών ήταν ασήμαντη, τώρα είναι κάθε 4 ή 5 χρήστες. Δεν νομίζω ότι χρειάζονται στατιστικά στοιχεία. Είμαστε στενά και σοβαρά δεσμευμένοι στην ανάπτυξη μιας νέας έκδοσης του widget για φορητές συσκευές. Συλλέξαμε όλη την εμπειρία προηγούμενων λαθών και δοκιμάσαμε τα αποτελέσματα για εβδομάδες. Και πάλι, αναπτύσσαμε ένα widget για κινητά, όχι βελτιώνοντας τον δικό μας ιστότοπο. Ως αποτέλεσμα, έχουμε συγκεντρώσει μια λίστα με τα πιο θανατηφόρα λάθη στην έκδοση για κινητά του ιστότοπου. Πέρασε από τα λάθη σχεδιασμός κινητούκαι διάταξη κινητού. Όλα αυτά τα λάθη σκοτώνουν τη μετατροπή της κίνησης από κινητά. Και ήρθε η ώρα να δώσετε προσοχή σε αυτό:
1. Πολύ μεγάλες μορφές σύλληψης.
Αυτό είναι ένας πραγματικός δολοφόνος μετατροπών σε οποιονδήποτε ιστότοπο! Οι εκδόσεις για κινητά είναι ιδιαίτερα ευαίσθητες σε αυτό, καθώς η συμπλήρωση ερωτηματολογίων στο τηλέφωνο είναι εξαιρετικά άβολη. Ξεφορτώσου τους.Το παράδειγμα δείχνει πόσο ικανά ενήργησαν τα παιδιά από την Tinkoff Bank, που έσπασαν μια μακρά αίτηση "για δάνειο" σε βήματα. Συμπληρώνοντας μόνο 4 πεδία, ο επισκέπτης θα γίνει κύριος και αν πέσει στο δεύτερο βήμα, τότε οι επαφές του θα παραμείνουν.
2. Ο αριθμός τηλεφώνου της εταιρείας αναγράφεται χωρίς +7 ή ως εικόνα.
Αυτό είναι απλά κόλαση! Υπάρχει μια ειδική θέση στην κόλαση για τέτοιους ιστότοπους, όταν αντί για 1 κλικ, πρέπει να θυμάστε τον αριθμό και μετά να τον εισάγετε μόνοι σας. Σκατά! Κι αν οδηγώ;
3. Χρήση Flash στον ιστότοπο ή περιεχόμενο που δεν μπορεί να αναπαραχθεί σε κινητό.
Είναι επιθυμητό η έκδοση για κινητά να αποκλείει εντελώς τέτοιο περιεχόμενο. Δεν θα λειτουργήσει σωστά και θα προκαλέσει πολλές δυσκολίες στους επισκέπτες. Το βίντεο δεν θα λειτουργήσει, το παιχνίδι δεν θα παίξει και το ειδικό κινούμενο σχέδιο στο μενού θα διαβρώσει τον εγκέφαλο. μήλο συσκευές iosδεν υποστηρίζουν καθόλου Flash animation. Διαγράψτε τα περιττά, γιατί να περιπλέκετε την προβολή.
4. Γραφικά στοιχεία και αναδυόμενα παράθυρα στον ιστότοπο που δεν είναι φιλικά προς κινητά.
Διαδικτυακοί σύμβουλοι, widgets επανάκλησης, κοινωνικά. κοινοποιήσεις, συλλέκτες e-mail - αυτά τα εργαλεία θα βοηθήσουν στην αύξηση της μετατροπής του ιστότοπου, αλλά εάν δεν είναι προσαρμοσμένα σε κίνηση κινητής τηλεφωνίας, φορτώστε τον ιστότοπο, αποκλείστε περιεχόμενο, τότε πιθανότατα θα κάνουν περισσότερο κακό παρά καλό. Επομένως, φροντίστε να ελέγξετε τον ιστότοπό σας σε κινητές συσκευές μετά την εγκατάσταση μιας υπηρεσίας τρίτου μέρους.Πώς να ελέγξετε σωστά το γραφικό στοιχείο και τι πρέπει να προσέξετε, δείτε τη σύντομη ανασκόπηση βίντεο:
5. Έλλειψη προσαρμοσμένης έκδοσης για κινητά. Cross-browser και cross-platform.
Ποια είναι τα οφέλη της έκδοσης για κινητά;Πρώτον, οι μηχανές αναζήτησης δίνουν προτίμηση στην έκδοση. Αυτός είναι ο τρόπος με τον οποίο η Google επισημαίνει τους ιστότοπους ως "φιλικούς προς κινητά":
Δεύτερον, είναι βολικό για τους χρήστες να βλέπουν τον ιστότοπό σας από διαφορετικές συσκευές.
Για να γίνει αυτό, η έκδοση για κινητά πρέπει να λειτουργεί σωστά σε όλους τους τύπους κινητών συσκευών, συμπεριλαμβανομένων κινητών τηλεφώνων και tablet με διαφορετικά μεγέθη οθόνης. Ανεξάρτητα από πλατφόρμα, κατασκευαστή ή πρόγραμμα περιήγησης. Ναι, είναι προφανές, αλλά εξακολουθεί να είναι το πιο σημαντικό κριτήριο.
Υπάρχουν 3 βασικά ζητήματα ταχύτητας ιστότοπου - μέγεθος, απόσταση και γραφικά στοιχεία. Συνήθως, για έναν χρήστη κινητής τηλεφωνίας, δεν απαιτούνται ειδικά εφέ στον ιστότοπο, η συνηθισμένη διάταξη του ιστότοπου χωρίς τα "καμπανάκια και σφυρίχτρες" ισχύει. Προαιρετική οθόνη κινητό τηλέφωνο, τις περισσότερες φορές σε χαμηλή ανάλυση, επομένως για χρήστες κινητών μπορείτε να "αποστείλετε" μικρότερες εικόνες (και να χρησιμοποιήσετε μια πιο προοδευτική μορφή, όπως το WebP).
Για να λύσετε το πρόβλημα της απόστασης, πρέπει να βεβαιωθείτε ότι η φιλοξενία του ιστότοπου είναι κανονικά προσβάσιμη από τα κύρια δίκτυα. παρόχους κινητής τηλεφωνίας. Θα ήταν βέλτιστο να το τοποθετήσετε σε ένα καλό κέντρο δεδομένων της Μόσχας (ή περιφερειακό - για περιφερειακά έργα), το οποίο διεκδικεί καλή συνδεσιμότητα με τα δίκτυα των παρόχων κινητής τηλεφωνίας. Το ξένο hosting δεν είναι πολύ κατάλληλο (και έχει μια σειρά από προβλήματα με την ταχύτητα μεταφοράς δεδομένων από το εξωτερικό).
Για ολοκληρωμένη λύσηπροβλήματα με την ταχύτητα και τη διαθεσιμότητα τόσο ενός κινητού όσο και ενός κανονικού ιστότοπου, μπορούν επίσης να χρησιμοποιηθούν εξειδικευμένες υπηρεσίες. Για παράδειγμα, το Airi.rf
9. Λάθος ανακατεύθυνση. Έλλειψη μετάβασης στην πλήρη έκδοση του ιστότοπου.
Φυσικά, όλοι οι χρήστες κινητών θα πρέπει να μεταβούν στην έκδοση για κινητές συσκευές του ιστότοπου, αλλά μερικές φορές τυπικά λάθησε μια ανακατεύθυνση.Για παράδειγμα, πώς συμβαίνει;
Ο χρήστης αναζητά ένα συγκεκριμένο προϊόν στο Yandex και πηγαίνει σε εσάς. Το σύστημα εντοπίζει την είσοδο από ένα κινητό τηλέφωνο και ανακατευθύνει σε αρχική σελίδαέκδοση για κινητά, όχι αυτή που χρειάζεται ο πελάτης. Πρέπει να ψάξετε ξανά για αυτό το προϊόν στον ιστότοπο ή να προσπαθήσετε να πάτε σε ανταγωνιστές.
Πρόσθεση:Η έκδοση για κινητά δεν είναι πάντα αρκετή, ίσως έχετε κρύψει τις λειτουργίες, τους συνδέσμους που χρειάζεται ο πελάτης ή γενικά, ο πελάτης χρησιμοποιείται στην έκδοση για υπολογιστές. Να αφήνετε πάντα την επιλογή επιστροφής στην πλήρη έκδοση του ιστότοπου.
10. Αυτόματη συμπλήρωση. Ενεργοποίηση κλήσης.
Η μετατροπή αυξάνεται εάν μειώσουμε την αντίσταση για τον πελάτη. Κάθε πεδίο μπορεί να γίνει πιο βολικό στη συμπλήρωση. Για να γίνει αυτό, γράφουμε αναλόγως:
Πρόσθετο για ευκολία
Λίγοι γνωρίζουν ότι μπορείτε να προσθέσετε σελιδοδείκτη σε έναν ιστότοπο στην επιφάνεια εργασίας σας γρήγορη πρόσβαση. Το εικονίδιο μοιάζει με εφαρμογή και θα καρφιτσωθεί στην αρχική οθόνη του χρήστη.
Πως να το κάνεις:
Δημιουργήστε ένα εικονίδιο 180px επί 180px (χωρίς στρογγυλοποίηση) και προσθέστε μια ετικέτα στον ιστότοπο
Ελπίζω αυτά τα 10 σημεία να σας βοηθήσουν να βελτιώσετε την έκδοση για κινητά του ιστότοπού σας και να κάνετε τους πελάτες σας χαρούμενους. Μπορεί κάποια από αυτά να είναι ήδη γνωστά και προφανή σε εσάς, αλλά θα ήταν λάθος να μην τα συμπεριλάβετε στη λίστα με τα πιο θανατηφόρα λάθη.
Υψηλή μετατροπή της έκδοσης του ιστότοπου για κινητά!
Γεια σας αγαπητοί μου αναγνώστες του ιστολογίου. Ο Galiulin Ruslan είναι σε επαφή. Σήμερα θα μιλήσουμε για κινητές εκδόσεις ιστοτόπων που πρέπει να έχει κάθε ιστότοπος ή blog για να προχωρήσει στην κορυφή των μηχανών αναζήτησης. Στο άρθρο θα δώσω κωδικούς στυλ και έτοιμα παραδείγματα διάταξης σελίδας που μπορείτε να κατεβάσετε στον υπολογιστή σας.
Εάν ο ιστότοπός σας εξακολουθεί να μην είναι φιλικός προς κινητά, προτείνω να χρησιμοποιήσετε τις συμβουλές μου ή να επικοινωνήσετε με επαγγελματίες - http://www.mobile-version.ruπου θα κάνει τα πάντα σύμφωνα με τα πρότυπα των μηχανών αναζήτησης. Μπορείτε επίσης να ελέγξετε τον ιστότοπό σας για κινητικότητα χρησιμοποιώντας τον ίδιο σύνδεσμο.
Το 2013, η Google άρχισε να ασκεί πίεση στους webmasters ( https://webmasters.googleblog.com/2013/06/changes-in-rankings-of-smartphone_11.html), πείθοντας για την ανάγκη δημιουργίας ελαφρών τροποποιήσεων ιστότοπου και από το 2015, η κινητικότητα έχει γίνει μια από τις πτυχές κατάταξης ( https://webmasters.googleblog.com/2015/04/rolling-out-mobile-friendly-update.html). Η Yandex δεν υστερεί, έχοντας δημιουργήσει έναν ειδικό αλγόριθμο Vladivostok που λαμβάνει υπόψη την καταλληλότητα του ιστότοπου για προβολή από τηλέφωνα.
Το Mobile Friendly σήμερα δεν είναι απλώς η φροντίδα των επισκεπτών, αλλά απαραίτητη προϋπόθεση για την προώθηση.
Όταν ένας ιστότοπος δημιουργείται από την αρχή, εφαρμόζεται η προσέγγιση Mobile First. Αλλά οι περισσότεροι έχουν παλιά έργα εργασίας. Το κύριο ερώτημα που θέτει η έκδοση για φορητές συσκευές του ιστότοπου σε τέτοιες περιπτώσεις είναι πώς να το φτιάξετε χωρίς να καταστρέψετε το υπάρχον πρότυπο;
Υπάρχουν τρεις προσεγγίσεις:
- Ξεχωριστή διεύθυνση και διάταξη - τοποθετείται σε υποτομέα της φόρμας m.site.ru. Η ανακατεύθυνση πραγματοποιείται μέσω μιας ανακατεύθυνσης διακομιστή από τον παράγοντα χρήστη.
- Αποκριτική σχεδίαση - η διεύθυνση url και η html παραμένουν ίδια όπως στη μορφή επιτραπέζιου υπολογιστή, αλλά στο CSS, τα ερωτήματα πολυμέσων επιστρέφουν κανόνες για διαφορετικές οθόνες.
- Το RESS είναι μια αποκριτική σχεδίαση, η διεύθυνση παραμένει η ίδια, αλλά ο διακομιστής στέλνει σύνολα στυλ ανάλογα με τον τύπο υλικού που ζητά τη σελίδα.
Για τους ιδιοκτήτες παλαιών έργων, η καλύτερη επιλογή είναι να χρησιμοποιήσετε προσαρμοστική διάταξη. Πώς να το κάνετε μόνοι σας και χωρίς τη χρήση μη ασφαλών προσθηκών, θα εξετάσουμε βήμα προς βήμα.
Έκδοση του ιστότοπου για κινητά: πώς να το κάνετε σωστά
Τα περαιτέρω βήματα θα απαιτήσουν μια σταθερή βασική γνώση html και css ή τη δυνατότητα γρήγορης αναζήτησης ακατανόητων πραγμάτων στο google.
Πληροφορίες για αρχάριους: στο CSS, οι λέξεις πριν από τις σγουρές αγκύλες σημαίνουν τα συγκεκριμένα κομμάτια του αρχείου html που είναι υπεύθυνα για την εμφάνιση. Γράφεται πιο συχνά με μια τελεία ή ένα σημάδι κατακερματισμού - #place (ιδιότητα: τιμή;).
Βήμα 1. Καταργήστε τους περιορισμούς.
Οι κάτοχοι ρευστής διάταξης μπορούν να παραβλέψουν αυτό το βήμα. Οι υπόλοιποι θα πρέπει να δουλέψουν σκληρά.
Πλάτος- αναζητούμε μεγάλα τμήματα στον κώδικα με αυστηρά καθορισμένη οθόνη. Εάν η παράμετρος καθορίζεται σε pixel ή σημεία, πρέπει να αλλάξετε την τιμή της σε ποσοστά, ems και άλλες μονάδες που είναι ευαίσθητες στο περιβάλλον. Συχνά το κύριο δοχείο ή η περιοχή περιεχομένου έχει σταθερό πλάτος - στις περισσότερες περιπτώσεις, οι περιορισμοί αφαιρούνται αντικαθιστώντας το με μέγιστο πλάτος.
Εικόνες- αντί για καθαρά μεγέθη, ορίζουμε ιδιότητες για την ετικέτα img, η οποία θα δώσει προσαρμοστικότητα στις εικόνες. Οι φωτογραφίες θα αλλάξουν την αναλογία διαστάσεων εντός των γονικών κοντέινερ τους.
img(
Μέγιστο πλάτος: 100%
ύψος: αυτόματο;
τραπέζια- Δεν μπορεί να οριστεί η πλήρης προσαρμοστικότητα, αλλά μπορείτε να κάνετε σελίδες με αυτές κατάλληλες για κινητές συσκευές προσθέτοντας αυτόν τον κωδικό:
τραπέζι (
display:block;
Πλάτος: 100%;
υπερχείλιση-x: κύλιση;
υπερχείλιση-y: κρυφό;
ms-overflow-style: -ms-autohiding-scrollbar;
webkit-overflow-scrolling: άγγιγμα;
Wraps - ορίζονται από την ιδιότητα float. Η ρύθμιση αυτής της επιλογής θα επιτρέψει στα κουτιά να μετακινούνται με βάση τις ρυθμίσεις παραθύρου, προσαρμόζοντας σε στοιχεία με σταθερή θέση ή εντός γονικών κοντέινερ. Τα τυπικά div-στοιχεία από προεπιλογή μεταφράζουν το καθένα σε μια νέα γραμμή. Για παράδειγμα, τοποθετώντας μπλοκ div 200 px σε ένα κοντέινερ 1000 px, μπορείτε να δείτε αυτήν την εικόνα.
Τα μπλοκ στοιβάζονται το ένα πάνω στο άλλο. Η προσθήκη περιτυλίγματος αφαιρεί νέες γραμμές, τοποθετεί στοιχεία σε μια γραμμή σε όλο τον διαθέσιμο χώρο.
Βήμα 2: Σχέδιο για αναδιοργάνωση περιεχομένου.
Μάθετε ποιες λεπτομέρειες του ιστότοπου για υπολογιστές θα πρέπει να εμφανίζονται σε κινητές συσκευές. Για να το κάνετε αυτό, απαντήστε στον εαυτό σας τις ακόλουθες ερωτήσεις:
- Ποια μπλοκ εκτελούν μόνο διακοσμητικές λειτουργίες; - Πιο συχνά πρόκειται για ρυθμιστικά, διακοσμήσεις πλαϊνής γραμμής, ερωτηματολόγια, τυχαίες φωτογραφίες.
- Τι αγνοούν οι επισκέπτες; - Οι χάρτες θερμότητας με κλικ και διαδρομές θα σας βοηθήσουν να απαντήσετε σε αυτήν την ερώτηση. Κρύβουμε ανελέητα τα λιγότερο ενεργά στοιχεία.
- Τι πρέπει να παραμείνει στην έκδοση για κινητά; - Συνήθως πρόκειται για μια διαφήμιση, μια φόρμα σχολίων, συνδρομές ή κουμπιά μέσων κοινωνικής δικτύωσης.
- Σκεφτείτε πώς θα πρέπει να φαίνεται ο ιστότοπος σε tablet, smartphone και μικρά παλιά τηλέφωνα - μπορείτε να ορίσετε τη δική σας εμφάνιση για κάθε συσκευή.
Βήμα 3. Ευκολία.
Πλοήγηση: οι οθόνες του τηλεφώνου είναι πολύ μικρές, το συνηθισμένο μενού τοποθεσίας σπάνια χωράει σε τέτοια πλαίσια. Είναι σύνηθες να ορίσετε το μενού, αναπτυσσόμενο στο κουμπί.
Περιοχή περιεχομένου: Τα τηλέφωνα ορίζουν συνήθως το πλάτος του κύριου μπλοκ στο CSS στο 100% ανάλογα με τον διαθέσιμο χώρο. Αυτό σημαίνει ότι το κείμενο, οι λειτουργικές μονάδες, οι διαφημίσεις, το περιεχόμενο της πλευρικής γραμμής θα εμφανίζονται σε μικρές συσκευές σε μία στήλη.
Αισθητήρες: Τα δάχτυλα δεν είναι τόσο ακριβή όσο ένα ποντίκι, αφήστε άφθονο χώρο για αυτά. Ο χώρος γύρω από συνδέσμους και άλλα ενεργά στοιχεία πρέπει να είναι τουλάχιστον 28 x 28 pixel.
Βοηθήστε τους επισκέπτες σας να καθορίσουν τον ενεργό χώρο - συμπλήρωση, επισήμανση, αλλαγή χρώματος και άλλα πράγματα που μπορούν να ρυθμιστούν για πινελιές, συνταγογραφήστε την ψευδοκλάση αιώρησης για συνδέσμους και κουμπιά.
Υλοποίηση ερωτημάτων μέσων με παραδείγματα
Εάν έχετε δημιουργήσει ποτέ πίνακες CSS για εκτύπωση, έχετε ήδη μια ιδέα για τις δυνατότητες εκχώρησης μεμονωμένων στυλ ανάλογα με τις συνθήκες.
Τα ερωτήματα πολυμέσων είναι λογικές εκφράσεις, η πρόσβαση σε αυτά συνεπάγεται μια απάντηση με μια παράμετρο true ή false. Εάν το αποτέλεσμα του ερωτήματος είναι αληθές, δηλαδή οι διαστάσεις του παράγοντα χρήστη ή της συσκευής ταιριάζουν με τον συγκεκριμένο τύπο μέσου, τότε εφαρμόζονται αυτόματα οι κανόνες στυλ που καθορίζονται μέσα στο μπλοκ μέσων.
Τα ερωτήματα πολυμέσων μπορούν να αντιστοιχιστούν με παραμέτρους:
- Πλάτος και ύψος παραθύρου του προγράμματος περιήγησης.
- πλάτος και ύψος συσκευής.
- προσανατολισμός - οριζόντια ή κατακόρυφη λειτουργία.
- ανάλυση της οθόνης.
Μια ενημερωμένη λίστα επιχειρημάτων είναι διαθέσιμη στη διεύθυνση επίσημη προδιαγραφή.
Ας περάσουμε σε παραδείγματα. Υπάρχει ένα έτοιμο πρότυπο, το μέγεθος του τμήματος περιεχομένου του είναι 1000 pixel, όλα τα εσωτερικά στοιχεία και οι λεπτομέρειες διαμορφώνονται σε σχέση με αυτήν την παράμετρο.
Εάν η οθόνη του χρήστη είναι στενότερη από το καθορισμένο τμήμα περιεχομένου, θα εμφανιστεί μια γραμμή κύλισης. Τα κυμαινόμενα στοιχεία σχεδίασης μπορούν να συμπεριφέρονται με απρόβλεπτους τρόπους - να συναντούν το ένα το άλλο, να απλώνονται, να στενεύουν πάρα πολύ.
Πρώτα απ 'όλα αφαιρούμε το σταθερό μέγεθος που δημιουργεί τη λωρίδα για να μην παρεμβαίνει στη ρύθμιση. Στο πρότυπό μας, αυτό είναι το περιτύλιγμα πλοήγησης. Σε μια διάταξη αναγνώστη, αυτό μπορεί να είναι ένα ή περισσότερα στοιχεία. Εάν δεν έχετε τον ορισμό, ανοίξτε τα εργαλεία προγραμματιστή του προγράμματος περιήγησης - χρησιμοποιώντας την προβολή μοντέλου πλαισίου, βρείτε το στοιχείο που δεν ταιριάζει στις διαστάσεις της οθόνης.
Για να το διορθώσουμε, αφαιρούμε τα σταθερά πλαίσια προσθέτοντας στα στυλ προτύπου:
οθόνη @media μόνο και (μέγιστο πλάτος: 1000px) (
Nav (πλάτος: 100%; )
Τώρα αν το πλάτος της οθόνης του χρήστη είναι μικρότερο από 1000 px, τότε το πλάτος του μενού θα είναι ίσο με το 100% του μεγέθους του. Η κύρια έκδοση του προτύπου μοιάζει με την προηγούμενη. Η αντικατάσταση της ιδιότητας αφαίρεσε την κάτω γραμμή κύλισης κατά τη συρρίκνωση της οθόνης.
Αλλά τα μπλοκ εξακολουθούν να φαίνονται αμφίβολα - ας αλλάξουμε την εμφάνιση τους αυξάνοντας το πλάτος ως ποσοστό για να χωρέσουν στις επιθυμητές διαστάσεις.
Προσθέτουμε στο ίδιο mediaquery:
Μπλοκ (πλάτος: 35%;)
Πώς να μάθετε τα βέλτιστα μεγέθη για τα μπλοκ του ιστότοπού σας; Υπολογίστε χειροκίνητα ή λάβετε ως βάση οποιοδήποτε έτοιμο πλέγμα - πλέγμα υγρών. Μπορείτε να εστιάσετε στα υπάρχοντα πρότυπα: σε διατάξεις δύο στηλών με πλάτος παραθύρου 980-1050 px, το περιτύλιγμα λαμβάνεται ως 95%, το περιεχόμενο είναι 60% και το 30% αφήνεται για την πλαϊνή γραμμή. Ο υπόλοιπος χώρος πηγαίνει στον σχηματισμό περιγραμμάτων και περιθωρίου ακρίβειας.
Ωστόσο, μπορείτε να εφαρμόσετε το μέγεθος του κουτιού στο περιεχόμενο, ώστε να μην υπολογίζετε τα pixel κάθε φορά, αλλά να δουλεύετε σύμφωνα με τις συνολικές διαστάσεις.
Ας προχωρήσουμε στη ρύθμιση της εμφάνισης σε οθόνες χαμηλότερης ανάλυσης:
Οθόνη @media μόνο και (μέγιστο πλάτος: 600 pixel) (
ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ (
float:none;
Πλάτος:85%;
Περιθώριο: 1em auto;
Εάν η οθόνη είναι μικρότερη από 600 px, τότε τα μπλοκ μας πρέπει να χωρούν σε μία στήλη - αφαιρούμε το τύλιγμα, ορίζουμε νέες εσοχές, κεντράρουμε και αλλάζουμε το πλάτος. Τις περισσότερες φορές, ορίζεται το 100%, αλλά αν για κάποιο λόγο αυτό δεν είναι βολικό, ορίζουμε το δικό μας μέγεθος.
Έτσι, μπορείτε να ορίσετε όχι μόνο τις διαστάσεις των μπλοκ περιεχομένου, αλλά και την εμφάνισή τους. Για παράδειγμα, να απαγορεύσετε την εμφάνιση μεγάλων στοιχείων, αντικαθιστώντας τα με οποιαδήποτε βολικά.
Ας δείξουμε τις δυνατότητες χρησιμοποιώντας το παράδειγμα αλλαγής χρωμάτων και οθονών.
Στην έκδοση smartphone, το κύριο μενού είναι κρυφό και το χρώμα του μπλοκ αλλάζει σε μπλε, ενώ η μεγαλύτερη οθόνη εμφανίζει το σχέδιο χωρίς αυτές τις αλλαγές.
Η απόκρυψη της πλοήγησης απαιτείται στις περισσότερες περιπτώσεις - αντικαθίσταται από ένα κουμπί. Είναι πιο κατάλληλο να το κάνετε αυτό χρησιμοποιώντας javascript, μπορείτε να χρησιμοποιήσετε έτοιμες λύσεις.
Οι αλλαγές γίνονται κατά σημείο, το εύρος μπορεί να περιοριστεί τόσο από πάνω όσο και από κάτω. Είναι γρήγορο και βολικό - μια γραμμή ορίζει ένα ξεχωριστό CSS για διαφορετικές συσκευές, χωρίς να επηρεάζει την κύρια προβολή του ιστότοπου.
Μπορείτε να δηλώσετε κανόνες @media οπουδήποτε μέσα σε ένα υπάρχον φύλλο στυλ ή μπορείτε να δημιουργήσετε ένα ξεχωριστό για αυτές τις δηλώσεις και στη συνέχεια να το εισαγάγετε στο κύριο CSS χρησιμοποιώντας έναν κανόνα @import.
Έκδοση του ιστότοπου για κινητά: πώς να φτιάξετε και τι να αναζητήσετε
Το Mediacware είναι κατανοητό από όλα τα σύγχρονα προγράμματα περιήγησης, αλλά δεν θα λειτουργεί σε IE 8 και νεότερη έκδοση. Το πρόβλημα λύνεται με την αναφορά στον παλιό IE μέσω σχολίων υπό όρους. Πρέπει να γράφονται στον κώδικα του προτύπου, όχι σε CSS.
Το ίδιο το σενάριο είναι διαθέσιμο στο github ( https://github.com/scottjehl/respond), προσθέτει υποστήριξη για ελάχιστες και μέγιστες διαστάσεις και ερωτήματα μέσων σε παλαιότερους IE.
Ένα ακόμη πρόβλημα - προσαρμοστικός σχεδιασμόςυπονοεί τη χρήση του Html5, το οποίο και πάλι είναι ακατανόητο σε παλαιότερα προγράμματα περιήγησης. Αντιμετωπίζεται με hack:
Ο κώδικας είναι γραμμένος σε html, επιπλέον, η εμφάνιση μπλοκ των δημιουργημένων στοιχείων ορίζεται σε CSS:
κεφαλίδα, πλοήγηση, ενότητα, άρθρο, κατά μέρος, υποσέλιδο (εμφάνιση:μπλοκ;)
Ας εξετάσουμε αμέσως το ερώτημα - πώς να κάνετε ορισμένα σενάρια να εμφανίζονται μόνο όταν δεδομένων παραμέτρωνοθόνη. Εάν είναι εγκατεστημένο το jquery, θα χρειαστεί να προσθέσετε ένα απλό σενάριο στον κώδικα του προτύπου. Οι αριθμοί αλλάζουν στους απαραίτητους. Διαβάζεται ως εξής: εάν το πλάτος του παραθύρου υπερβαίνει τα 980 pixel, το σενάριο που καθορίζεται στη διαδρομή εφαρμόζεται στη σελίδα. Μπορείτε να καθορίσετε πολλά, η σύνταξη γράφεται κατ' αναλογία μέσω ενός ερωτηματικού μέσα σε σγουρά άγκιστρα.
Αν ($(document).width() > 980) (
$.getScript("διαδρομή στο σενάριο");
Ένα άλλο σημείο είναι το πώς πρόγραμμα περιήγησης για κινητάΤο iPhone πρέπει να επεξεργαστεί το δεδομένο περιεχόμενο, είτε επιτρέπεται η αύξησή του. Για να γίνει αυτό, η αρχική κλίμακα γράφεται στο κεφάλι:
Απομένει μόνο να ελέγξετε την ορθότητα - για αυτό μπορείτε να χρησιμοποιήσετε το δικό σας πρόγραμμα περιήγησης και τηλέφωνο ή να επικοινωνήσετε με τις υπηρεσίες.
Εάν ο ιστότοπος μετατραπεί σε τοπικός διακομιστής, η ορθότητα μπορεί να προσδιοριστεί σε ami.responsivedesign.is. Για σωστή εμφάνιση, οι κάτοχοι του Ντένβερ θα πρέπει να αλλάξουν την κωδικοποίηση σε utf-8 με επεξεργασία αρχείο διακομιστή httpd.conf.
Η υπηρεσία θα δείξει πώς φαίνεται το έργο σε διαφορετικές συσκευές.
Επιπλέον, το πρότυπο δοκιμάζεται https://developers.google.com/speed/pagespeed/insights/ή σε ειδική μορφή https://www.google.com/webmasters/tools/mobile-friendly, καθώς και σε webmasters.
Στο Yandex, αυτό φαίνεται λεπτομερές και η Google θα αναφέρει απλώς ότι δεν υπάρχουν προβλήματα.
Αν όλα γίνονται σωστά, δεν θα υπάρχει κύλιση, όχι επιπλέον στοιχεία. Η έκδοση για κινητά είναι έτοιμη και τώρα μάθατε πώς να τη φτιάχνετε μόνοι σας. Εάν το υλικό σας ήταν χρήσιμο, κάντε like και εγγραφή στο ενημερωτικό δελτίο του ιστολογίου. Τα καλύτερα.
Παρακάτω, κάνοντας κλικ σε ένα από τα κουμπιά, μπορείτε να κάνετε λήψη 2 παραδειγμάτων της σελίδας που διπλώθηκε σε αυτό το μάθημα και είναι εύκολο να εργαστείτε με τις έτοιμες σελίδες και να αντιγράψετε τον κώδικα.
Με εκτίμηση, Galiulin Ruslan.
Όπως υποσχέθηκα, ήρθε η ώρα να σας πω τι είναι η "Προσαρμοστική διάταξη" και πώς να δημιουργήσετε μια έκδοση για κινητά του ιστότοπου για smartphone και tablet, καθώς και να ευχαριστήσουμε τις μηχανές αναζήτησης!
Γιατί χρειάζονται καθόλου όλα αυτά; Άλλωστε, ζούσαν όπως πριν και τίποτα. Λοιπόν, τι να πω, το Διαδίκτυο αλλάζει, βελτιώνεται. Οι μηχανές αναζήτησης κάνουν ό,τι είναι δυνατό για την ευκολία και την άνεση των χρηστών... Τέλεια, πραγματικά
Ναι, και η επισκεψιμότητα από gadget αυξάνεται όλο και περισσότερο, μέρα με τη μέρα! Ο webmaster πρέπει να το λάβει αυτό υπόψη...
Πιθανότατα, Σύστημα αναζήτησηςΗ Google έχει ειδοποιήσει όλους τους webmasters ότι θα δώσει προτεραιότητα στους ιστότοπους που έχουν βελτιστοποιηθεί για κινητά για την κατάταξη. Όμως, μόνο υπό την προϋπόθεση ότι το αίτημα δεν έγινε μέσω προσωπικού υπολογιστή.
Δηλαδή, εάν ο χρήστης συνδεθεί μέσω smartphone ή tablet, τότε οι ιστότοποι και τα ιστολόγια που έχουν σχεδιαστεί για αυτόν θα είναι πάντα υψηλότερα από αυτά που δεν έχουν αυτό! Σε άλλες περιπτώσεις, όπως καταλαβαίνω, αυτός ο κανόνας δεν ισχύει.
Φαίνεται να εξηγείται ξεκάθαρα; Ποιος δεν κατάλαβε; Γράψτε στα σχόλια, ας συζητήσουμε μαζί.
Έτσι, πρόσφατα, έκανα διακοπές, το αποφάσισα περισσότερα άρθραγράψτε χρήσιμο, εφαρμόστε μερικά ενδιαφέρουσες ιδέες, γενικά, περάστε τις διακοπές με όφελος, και όχι ξαπλώστε στον καναπέ, αν και όπως θα θέλατε μμμ ....
Σε μια από τις ωραιότερες μέρες εγώ ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ(ωστόσο, όλοι το έλαβαν) έλαβαν το ακόλουθο μήνυμα:
Και όλα μου τα σχέδια κατέρρευσαν... Νομίζω ότι πρέπει να συμβαδίζουμε με την εποχή... και φεύγουμε! Πρώτα από όλα, φυσικά, αποφάσισα να βρω κάποιο plug-in στο δίκτυο που θα έκανε τα πάντα καθαρά και χωρίς εμένα
Ιστότοπος WordPress για κινητά με πρόσθετα!
Όπως αποδείχθηκε, τέτοια πρόσθετα υπάρχουν και, καταρχήν, εκτελούν τη λειτουργία τους! Αλλά, Επαλήθευση Google- στο ευκολία περιήγησης στον ιστότοποαπό φορητή συσκευή, δεν περνούν! Δεν ξέρω γιατί, αλλά η Google αρνείται πεισματικά να δει τις αλλαγές, δοκίμασε πολλές επιλογές ... Επομένως, δεν έχει νόημα να τις χρησιμοποιήσετε ...
Εάν εξακολουθείτε να θέλετε να χρησιμοποιήσετε πρόσθετα για αυτόν τον σκοπό, τότε τα καλύτερα είναι:
WPtouch Mobile Plugin - Μου άρεσε περισσότερο αυτό το πρόσθετο, όλα είναι αρκετά απλά και ξεκάθαρα, το blog μου εμφανίστηκε σωστά χωρίς εμπλοκές!
Δεν θα περιγράψω κάθε πρόσθετο, δοκιμάστε το μόνοι σας και αποφασίστε:
- MobilePress;
- WordPress Mobile Pack
- Duda Mobile Website Builder
- WordPress Mobile Pack
- WordPress PDA & iPhone;
- WPmob Lite;
- WPtap News Press;
- WP Mobile Detector;
- WiziApp.
Ένα άλλο μειονέκτημα των προσθηκών είναι ότι μερικές φορές παρουσιάζουν πρόβλημα, για παράδειγμα, περνάω από ένα smartphone - όλα είναι καλά, το επανέλαβα ή το ενημέρωσα - δείχνει έναν κανονικό ιστότοπο! Τι μυστήριο
Με λίγα λόγια δεν μου ταίριαζε και συνέχισα να ψάχνω για καλύτερη λύση!
Στη συνέχεια, αποφάσισα να εμπιστευτώ αυτή τη δουλειά σε έναν ειδικό στο ανταλλακτήριο ανεξάρτητων επαγγελματιών, αλλά μετά από πολλή σκέψη αποφάσισα να μάθω προσαρμοστική διάταξη και να κάνω τα πάντα μόνος μου! Τελικά, είμαι προγραμματιστής ιστότοπου και ήρθε η ώρα να βελτιώσω τις δεξιότητές μου ...
Αν κάποιος ενδιαφέρεται, τότε ο επανασχεδιασμός του ιστότοπου σε προσαρμοστικό κοστίζει περίπου 5.000 ρούβλια και περισσότερα ... Δεν συμβουλεύω την πρόσληψη ατυχών ειδικών που χρεώνουν φθηνότερα - ο τσιγκούνης πληρώνει δύο φορές! Και δείτε τις κριτικές...
Γενικά, άρχισα να μελετώ αυτό το θέμα, πρώτα θεωρία και μετά πρακτική στο blog μου! Λοιπόν, κατ 'αρχήν, το έμαθα, αποδείχθηκε ότι δεν υπάρχει τίποτα περίπλοκο σε αυτό, τώρα το ιστολόγιό μου είναι προσαρμοστικό και προσαρμόζεται σε οποιαδήποτε οθόνη και είμαι χαρούμενος ως ελέφαντας ... Πηγαίνετε στο ιστολόγιό μου από οποιοδήποτε smartphone και εσείς θα δεις τα πάντα μόνος σου. Βρες ένα τζάμπα - ενημέρωσε με...
Τώρα θα μοιραστώ τις γνώσεις μου μαζί σας και θα σας πω για τα πιο σημαντικά σημεία...
Επιλογές για τη δημιουργία ιστότοπου για κινητά;
Υπάρχουν, από όσο ξέρω, τρεις κατευθύνσεις. Ας αναλύσουμε κάθε τεχνολογία ξεχωριστά, ποια είναι τα υπέρ και τα κατά που μπορούμε να αντιμετωπίσουμε;!
Ξεχωριστή έκδοση ιστότοπου- Πρόκειται για ένα είδος ξεχωριστού ελαφρού ιστότοπου, που δημιουργήθηκε ειδικά για προβολή σε κινητές συσκευές ή με χαμηλή ταχύτητα Διαδικτύου..site ή http://mobile.site. Σε αυτήν την περίπτωση, χρησιμοποιείται μια ανακατεύθυνση.
- Δύο ανεξάρτητοι ιστότοποι - η δυνατότητα αλλαγής περιεχομένου χωρίς να επηρεάζεται κάποιος άλλος ιστότοπος.
- Ταχύτητα λήψης - δεδομένου ότι η έκδοση για κινητά είναι ανεξάρτητη από την κύρια, δεν θα είναι δύσκολο να γίνει εύκολη και γρήγορη.
- Ευκολία - η πλοήγηση και το περιεχόμενο είναι πιο ευκρινές, μέχρι την παραμικρή λεπτομέρεια, καθώς ο ιστότοπος είναι πλήρως σχεδιασμένος για κοινό σε κινητά.
- Διπλότυπο περιεχόμενο - αφού το ίδιο περιεχόμενο θα υπάρχει στην κύρια έκδοση και στην έκδοση για κινητά. Ίσως η μετα-ετικέτα rel=canonical να σώσει, αλλά υπάρχουν πολλά άλλα προβλήματα.
- Ένα κομμάτι λειτουργικότητας - ό,τι κι αν πει κανείς, αλλά ένας τέτοιος ιστότοπος θα είναι ένα περικομμένο αντίγραφο του κύριου ιστότοπου, επομένως εντελώς διαφορετικά στατιστικά στοιχεία. Και στην πλειοψηφία των επισκεπτών δεν αρέσουν οι διάφοροι περιορισμοί και πηγαίνουν πάντα στον κεντρικό ιστότοπο...
- Ανακατευθύνσεις - Όπως γνωρίζετε, διάφορα είδη ανακατευθύνσεων έχουν αρνητικό αντίκτυπο στο SEO.
Τεχνολογία ΑΠΕ- Εδώ, χρησιμοποιείται ένας υπολογισμός από την πλευρά του διακομιστή, ανάλογα με τη συσκευή από την οποία προήλθε η καταχώριση - δημιουργείται μία ή άλλη διάταξη (html και css). Αυτό το θαύμα ονομάζεται - προσαρμοστικός σχεδιασμός ιστοσελίδων + ειδικό λογισμικόστην πλευρά του διακομιστή (RESS - Responsive Web Design and Server Side Components).
- Ταχύτητα λήψης - η δυνατότητα αφαίρεσης διαφόρων περιττών σεναρίων, στυλ.
- Λιγότερο βάρος της σελίδας - αντί να κρύβετε στοιχεία όπως στην προσαρμοστική διάταξη, μπορείτε απλά να τα διαγράψετε.
- Πλοήγηση - η δυνατότητα προσαρμογής της δομής για ορισμένες συσκευές.
- Ορισμός - για έκδοση επιθυμητή έκδοσηιστότοπο, πρέπει να προσδιορίσετε με ακρίβεια τη συσκευή του επισκέπτη και με αυτό, όπως άκουσα, δεν πάνε όλα πάντα ομαλά.
Responsive διάταξη (σχεδίαση ιστοσελίδων)- Αυτή η διάταξη ιστότοπου προσαρμόζεται σε οποιαδήποτε ανάλυση οθόνης ορίζοντας την χρησιμοποιώντας ερωτήματα πολυμέσων CSS3. Κατά κανόνα, χρησιμοποιείται ο ίδιος πόρος, ο οποίος περιέχει διάφορες επιλογές για εμφάνιση σε smartphone, tablet και υπολογιστές...
- Ασφάλεια - ανεξάρτητα από τη συσκευή, χρησιμοποιείται το ίδιο περιεχόμενο και ένα σύνολο κωδικών html.
- Ενιαία διεύθυνση URL - τα ίδια URL και περιεχόμενο χρησιμοποιούνται για διαφορετικές διατάξεις, δεν υπάρχουν διπλότυπα.
- Ταχύτητα φόρτωσης - αφού φορτώνονται όλα τα στοιχεία και τα σενάρια του κύριου ιστότοπου, ακόμα κι αν είναι κρυφά.
- Πλοήγηση - η δυσκολία στη δημιουργία μιας καλά μελετημένης πλοήγησης για κινητά.
Κάνουμε προσαρμοστική διάταξη μόνοι μας
Επέλεξα μια αποκριτική διάταξη για το ιστολόγιό μου για διάφορους λόγους:
- δεν χρειάζεται να παραβιαστεί η ακεραιότητα του κύριου ιστότοπου, ιστολογίου.
- χρησιμοποιεί ένα ενιαίο περιεχόμενο, μία βάση δεδομένων κ.ο.κ.
- Για μένα προσωπικά, ευκολία υλοποίησης (απαιτείται γνώση html και css).
Τώρα θα σας πω τι πρέπει να γίνει ώστε ο πόρος σας να προσαρμοστεί σε τυχόν δικαιώματα και να του αρέσει η Google
Πρώτα, πρέπει να γράψετε τη μετα-ετικέτα
:Με αυτό λέμε στο πρόγραμμα περιήγησης ότι το πλάτος του ιστότοπου πρέπει να είναι ίσο με το πλάτος του gadget, της συσκευής ή οτιδήποτε άλλο έχετε εκεί
Επίσης, αν προσθέσουμε και maximum-scale=1.0, user-scalable=no, τότε με αυτό, θα απαγορεύσουμε την κλιμάκωση, αλλά δεν συνιστώ να το κάνετε αυτό, αφήστε το άτομο να αποφασίσει μόνος του, ίσως έχει προβλήματα όρασης...
Εδώ έγινε η αρχή, τώρα αν περάσουμε από smartphone ή κάτι τέτοιο, θα δούμε πως είναι το site μας! Θλιβερό ε;!
Αυτή η περίπτωση θα πρέπει να διορθωθεί χρησιμοποιώντας ερωτήματα πολυμέσων στο αρχείο στυλ CSS, η παράμετρος μοιάζει με αυτό:
Οθόνη @media και (ελάχ. πλάτος: 240 εικονοστοιχεία) και (μέγιστο πλάτος: 720 εικονοστοιχεία) (
ετικέτες και χαρακτηριστικά εδώ
}
Δηλαδή, αυτά τα στυλ θα εφαρμόζονται από το πρόγραμμα περιήγησης από το ελάχιστο πλάτος των 240 εικονοστοιχείων έως το μέγιστο πλάτος των 720 εικονοστοιχείων της συσκευής! Εάν είναι περισσότερες ή μικρότερες από αυτές τις τιμές, τότε θα εφαρμοστούν τα κύρια στυλ του ιστότοπου. Όλα είναι απλά!
Και έτσι γράφουμε στυλ για διαφορετικές αναλύσεις συσκευών. Για παράδειγμα:
- smartphone κάθετα - από 240 έως 340, από 341 έως 420.
- smartphone οριζόντια και μερικά tablet κάθετα - από 421 έως 540, από 541 έως 670.
- δισκία κάθετα - από 671 έως 800.
- δισκία οριζόντια - από 801 έως 1024
Εάν θέλετε να εμφανίσετε οποιοδήποτε στοιχείο: display:block, εάν θέλετε να το κρύψετε: display:none;
Για να δείτε πώς φαίνεται ένας ιστότοπος ή ένα ιστολόγιο διάφορες συσκευέςυπάρχουν μερικές εξαιρετικές υπηρεσίες:
- http://quirktools.com
- http://www.emulateurmobile.com/
- http://webmark.com.ua
Παρεμπιπτόντως, εάν πρέπει να κάνετε τον ιστότοπο προσαρμοστικό, αλλά είστε σίγουροι ότι δεν μπορείτε να το κάνετε μόνοι σας και δεν υπάρχει ιδιαίτερη επιθυμία, τότε προσφέρω τις υπηρεσίες μου! Μπορείτε να δείτε τη δουλειά μου και να στείλετε μια αίτηση στη σελίδα:.
Αυτό είναι όλο για μένα! Ελπίζω το άρθρο μου να σας βοήθησε πραγματικά, σε ευγνωμοσύνη, να το μοιραστείτε =)
Κατέγραψα ένα παράδειγμα για το πώς λειτουργεί η προσαρμοστική διάταξη σε έναν ιστότοπο πελάτη, αν εξακολουθείτε να μην καταλαβαίνετε την αρχή της εργασίας του, φροντίστε να το κοιτάξετε. Τα λέμε σύντομα! Γράψτε σχόλια...
Με εκτίμηση, Vladimir Saveliev
Premium μαθήματα από το webformyself club
Αυτό είναι ένα νέο επαναστατικό προϊόν στον τομέα της εκπαίδευσης κατασκευής ιστοσελίδων! Όλα τα καλύτερα βίντεο tutorials συγκεντρώνονται σε ένα μέρος και χωρίζονται σε κατηγορίες: WordPress, Joomla, PHP, HTML, CSS και JavaScript... Η βάση δεδομένων ενημερώνεται συνεχώς και πλέον υπάρχουν περισσότερα από 200 μαθήματα σε αυτήν! Σε μόλις ένα χρόνο - μπορείτε να γίνετε έμπειρος webmaster "από την αρχή"!Περισσότερο
Σας λέμε πόσο διαφέρουν οι κατασκευαστές ιστοτόπων για κινητά και ποιες επιχειρηματικές εργασίες βοηθούν στην επίλυση.
Το μερίδιο των επισκέψεων σε ιστότοπους και των πωλήσεων από κινητές συσκευές έχει αυξηθεί σημαντικά Πέρυσικαι συνεχίζει να αυξάνεται. Έτσι, εάν έχετε έναν ιστότοπο χωρίς προσαρμοστική διάταξη, ήρθε η ώρα να σκεφτείτε τη δημιουργία μιας βολικής έκδοσης για κινητά. Πρέπει να βεβαιωθείτε ότι ο πόρος σας γίνεται προσβάσιμος και βολικός για τους χρήστες smartphone και tablet.
Μπορείτε να φτιάξετε μια έκδοση του ιστότοπου για κινητά μόνοι σας και χωρίς επιπλέον κόστος (και συχνά εντελώς δωρεάν). Για να γίνει αυτό, υπάρχουν πολλοί διαδικτυακοί σχεδιαστές. Σήμερα θα δούμε τι προσφέρουν οι πιο δημοφιλείς από αυτούς στους χρήστες τους.
1.MoAction
Έχουμε ήδη μιλήσει για το πώς να δημιουργήσετε μια έκδοση για κινητά του ιστότοπου χρησιμοποιώντας . Η διαδικασία είναι όσο το δυνατόν πιο απλή, ακόμη και ένας απροετοίμαστος χρήστης, μακριά από διάταξη και προγραμματισμό, μπορεί να το χειριστεί.
Το κύριο πλεονέκτημα του MoAction είναι η ικανότητα εργασίας με καταλόγους προϊόντων. Στην πραγματικότητα, αυτό είναι το πιο δύσκολο κομμάτι της δημιουργίας μιας έκδοσης για κινητά. Εάν έχετε δεκάδες ή εκατοντάδες προϊόντα στον ιστότοπό σας, δύσκολα θα θέλετε να εισάγετε δεδομένα με μη αυτόματο τρόπο. μπορεί να εισάγει έναν υπάρχοντα κατάλογο σε μορφές Yandex.Market (YML). Θα πρέπει μόνο να καθορίσετε την περίοδο ενημέρωσης, για παράδειγμα μία φορά την ώρα ή μία φορά την ημέρα.
Επιπλέον, η MoAction - η μόνη από τις παρουσιαζόμενες υπηρεσίες - σας επιτρέπει να δημιουργείτε δομές πολλαπλών επιπέδων και να διαχειρίζεστε λίστες προϊόντων με λίγα κλικ.
Αυτή η υπηρεσία προσφέρει τον μεγαλύτερο αριθμό προτύπων - 113. Όλα κατηγοριοποιούνται για διαφορετικούς επιχειρηματικούς τομείς. Όσο περισσότερα πρότυπα, τόσο πιο πιθανό θα μπορείτε να βρείτε το κατάλληλο για εσάς.
Εάν, όταν δημιουργείτε έναν ιστότοπο, αντιμετωπίζετε κάποιο είδος προβλήματος που δεν μπορείτε να λύσετε μόνοι σας, μπορείτε πάντα να ζητήσετε βοήθεια: καλέστε έναν ειδικό, γράψτε σε μια διαδικτυακή συνομιλία ή στείλτε ένα email.
2.GoMobi
Το GoMobi σάς επιτρέπει να δημιουργήσετε μια έκδοση για κινητά εντελώς αυτόματα, παρέχοντας μόνο τη διεύθυνση του ιστότοπού σας. Μπορείτε επίσης να χρησιμοποιήσετε ένα προκατασκευασμένο πρότυπο. Είναι αλήθεια ότι όταν επιλέγετε την πρώτη επιλογή για την επεξεργασία ενός προτύπου, δεν μπορείτε ακόμα να το αποφύγετε: πολλά θα πρέπει να επαναληφθούν και να προστεθούν χειροκίνητα.
Η διεπαφή με την πρώτη ματιά φαίνεται λίγο υπερφορτωμένη, αλλά γενικά είναι δυνατή η εργασία με αυτήν. Επιπλέον, υπάρχει μια έκδοση του ιστότοπου στα ρωσικά.
Υπάρχουν όμως και απτά μειονεκτήματα. Δεν μπορείτε να αλλάξετε τη δομή του προτύπου και σε κάθε μεμονωμένο μπλοκ μπορείτε μόνο να επεξεργαστείτε πεδία κειμένου. Επιπλέον, το GoMobi δεν είναι κατάλληλο για ιδιοκτήτες ηλεκτρονικών καταστημάτων. Επίσημα, ο κατασκευαστής έχει κάρτες προϊόντων, αλλά κάθε μεμονωμένο στοιχείο πρέπει να προστεθεί χειροκίνητα με έναν σύνδεσμο προς τον κύριο ιστότοπο: όσοι επιθυμούν να κάνουν μια αγορά θα σταλούν εκεί.
3. DudaMobile
Η DudaMobile, όπως και η GoMobi, προσφέρει στους χρήστες της να μετατρέψουν αυτόματα έναν ιστότοπο ή να δημιουργήσουν μια έκδοση για κινητά με βάση έτοιμο πρότυπο. Και η αυτόματη έκδοση του DudaMobile παράγει πολύ καλύτερα.
Η διεπαφή είναι μινιμαλιστική, απλή και γενικά ευχάριστη. Δεν υπάρχουν πολλά πρότυπα, αλλά είναι όλα υψηλής ποιότητας. Κάθε μπλοκ έχει προηγμένες ρυθμίσεις.
4.Onbile
Το Onbile είναι ένας πολύ απλός κατασκευαστής. Έχει λίγες λειτουργίες για την επεξεργασία της δομής και του περιεχομένου των μπλοκ, επομένως μπορείτε να δημιουργήσετε μόνο μικρούς ιστότοπους: μια επαγγελματική κάρτα ή μια σελίδα προώθησης.
Υπάρχουν επίσης λίγα πρότυπα για να διαλέξετε: μόνο 15, αλλά για το καθένα υπάρχουν 2-3 ακόμη παραλλαγές με μικρές διαφορές στο σχέδιο, τη δομή και το χρώμα.
Για να δημιουργήσετε ένα ηλεκτρονικό κατάστημα που βασίζεται σε αυτόν τον κατασκευαστή, πρέπει να πληρώσετε για ένα ειδικό πακέτο ηλεκτρονικού εμπορίου. Αλλά ακόμα και στην πληρωμένη έκδοση, μπορείτε να δημιουργήσετε μόνο έναν κατάλογο ενός επιπέδου: κάθε προϊόν μπορεί να αντιστοιχιστεί μόνο σε μία ενότητα. Όλα τα προϊόντα θα πρέπει να εισαχθούν χειροκίνητα, καθώς δεν υπάρχει λειτουργία εισαγωγής υπάρχοντος καταλόγου.
Ο ιστότοπος δημιουργήθηκε από προγραμματιστές από την Ισπανία, επομένως δεν υπάρχει υποστήριξη για τη ρωσική γλώσσα. Αλλά αν μιλάτε άπταιστα Αγγλικά, Ισπανικά, Γερμανικά, Γαλλικά ή Πορτογαλικά, μπορείτε να κατανοήσετε τη διεπαφή του κατασκευαστή χρησιμοποιώντας το ηλεκτρονικό σύστημα υποδείξεων.
5. Prosto.mobi
Το Prosto.mobi έχει τον πιο συνοπτικό σχεδιασμό. Η υπηρεσία, προφανώς, είναι ακόμα νέα, έτσι αυτή τη στιγμήΗ λειτουργικότητα του προγράμματος επεξεργασίας είναι αρκετά περιορισμένη: η πληρωμένη έκδοση προσφέρει μόνο 13 μπλοκ για να διαλέξετε. Για παράδειγμα, ένα μπλοκ με στοιχεία επικοινωνίας, ένα μπλοκ με συνδέσμους προς κοινωνικά δίκτυα, ένα μπλοκ με μια φωτογραφία. Αυτό δεν αρκεί για τη δημιουργία ενός πρωτότυπου ιστότοπου.
Υπάρχουν επίσης μόνο 15 πρότυπα. Αλλά σε αντίθεση με το Onbile, το οποίο έχει πραγματικά μοναδικές εκδόσεις για κινητά από άποψη δομής και σχεδίασης, που σχετίζονται με 15 διαφορετικούς επιχειρηματικούς τομείς, το Prosto.mobi διαθέτει ένα πρότυπο σε 15 χρώματα.
Οι λειτουργίες του κατασκευαστή είναι αρκετές μόνο για τη δημιουργία της απλούστερης δυνατής τοποθεσίας. Για παράδειγμα, σελίδες επαγγελματικών καρτών.
Δεν υπάρχει τέλεια πλατφόρμα που να μπορεί να κάνει τα πάντα ταυτόχρονα: κάθε σχεδιαστής έχει τις δικές του δυνάμεις και αδύναμες πλευρές. Αρχικά, πρέπει να αποφασίσετε ποιες εργασίες θα πρέπει να εκτελεί ο ιστότοπός σας για κινητά και πώς θα είναι. Με βάση αυτές τις πληροφορίες, μπορείτε να προσεγγίσετε αντικειμενικά την επιλογή ενός σχεδιαστή και να σταματήσετε στην καλύτερη επιλογή.