Προσαρμοσμένη και ανταποκρινόμενη σχεδίαση ιστοσελίδων

Όλοι μιλάνε για το προσαρμοστικό σχεδιασμό ιστοσελίδων. Αλλά αυτό σημαίνει ότι όλοι καταλαβαίνουν τι χρειάζεται;

Ο σχεδιασμός του ανταποκρινόμενου δεν είναι μόνο η ανάπτυξη ιστότοπων για Κινητές συσκευέςΕδώ αφορά την προσαρμογή των διατάξεων για διαφορετικά μεγέθη οθόνης (Viewports).

Σε αυτό το μάθημα, θα εξετάσουμε τις βασικές αρχές που βρίσκονται στο προσαρμοστικό σχεδιασμό ιστοσελίδων για την καλύτερη έννοια αυτής της τεχνικής. Στη συνέχεια, θα δημιουργήσουμε έναν προσαρμοστικό ιστότοπο που θα κλιμακωθεί τέλεια σε μεγάλες και μικρές οθόνες. Ο σχεδιασμός ιστοσελίδων ερωτώμενων έχει γίνει πολύ δημοφιλής, όταν όλο και περισσότεροι άνθρωποι χρησιμοποιούν κινητές συσκευές, όπως το iPhone, το iPad, το BlackBerry, καθώς και άλλα smartphones και ταμπλέτες με πρόσβαση στο Internet.

Είναι σημαντικό να καταλάβετε ότι ο ιστότοπος δεν πρέπει να κατασκευάζεται κάτω από συγκεκριμένη επιφάνεια εργασίας ή κινητή συσκευή. Είναι σημαντικό εδώ η ικανότητα της διάταξης να προσαρμοστεί σε διάφορα μεγέθη.

Απογοητευτικοί χρήστες

Μερικοί άνθρωποι πιστεύουν ότι η κοπή λειτουργικότητας και η εξάλειψη του περιεχομένου που θεωρούν ασήμαντη, είναι φυσιολογικό για τον χρήστη. Αλλά όπως μπορείτε να είστε σίγουροι ότι οι πληροφορίες που κόψατε ή μετακινηθείτε στη δευτερεύουσα σελίδα δεν είναι το περιεχόμενο που είναι πιο σημαντικό για μένα;!

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

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

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

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

Οδηγός βήμα προς βήμα

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

Το βασικό στοιχείο της ευελιξίας στο προσαρμοστικό σχέδιο είναι το πλάτος διάταξης υγρών. Το μόνο που χρειάζεται να κάνετε είναι να δημιουργήσετε περιτύλιγμα, περιεχόμενο και πλάτη στήλης, τα οποία θα προσαρμοστούν για διάφορα πλάτη των συσκευών. Δεν υπάρχει τίποτα νέο γι 'αυτό, αλλά τώρα είναι πιο σημαντικό από ποτέ. Για να μην περιπλέκουμε την εργασία, θα δημιουργήσουμε μια σελίδα υγρών που αποτελείται από πλοήγηση, την κύρια εικόνα και δύο στήλες, οι οποίες λαμβάνουν υπόψη τη θέση σε συσκευές διαφόρων μεγεθών. Περιλαμβάνουμε επίσης την απάντηση.min.js, η οποία επιτρέπει τα αιτήματα των μέσων ενημέρωσης να εργαστούν στο IE6-8.

Κύρια δομή HTML:

Όταν πρόκειται για CSS, εγκαταστήστε το Max-Width, θα είναι μια καλή ιδέα, θα σταματήσει τον ιστότοπο να κλιμακώσει σε τεράστιες οθόνες, αλλά δεν θα κρατήσει από τη μείωση των σελίδων. Ένα από τα κύρια ερωτήματα κατά τη μετάβαση από ένα σταθερό πλάτος στο υγρό, αυτές είναι εικόνες. Στο CSS, υπάρχει μια απλή λύση σε αυτό το πρόβλημα. Απλά ορίστε το πλάτος εικόνας κατά 100%. Προσθέστε επίσης αυτόματα στο ύψος των εικόνων για να αποφύγετε τις ισοπέδωση των εικόνων στην όπερα και το Safaris σε μικρές οθόνες:

/ * Διάταξη * / #Wrapper (πλάτος: 96%? Max-πλάτος: 920px? Περιθώριο: auto? Παραγέμισμα: 2%?) #Main (πλάτος: 60%? Περιθώριο-δεξιά: 5%? Float: αριστερά?) Στην άκρη (Πλάτος: 35%, πλωτήρα: δεξιά,) / * logo H1 * / Header H1 (Ύψος: 98px; Πλάτος: 216px; Float: αριστερά; οθόνη: Block; φόντο: URL (εικόνες / slloogo.png) 0 0 no- Επαναλάβετε; Κείμενο: -9999PX;) / * πλοήγηση * / Header NAV (Float: Right; Margin-Top: 40px;) Header NAV LI (οθόνη: inline, περιθωριακό αριστερά: 15px;) header nav ul li a ( text-decoration: Καμία? Χρώμα: # 333?) #Skipto Λι (Ιστορικό: #CCC?) / * Αρχική Εικόνα * / #banner (Float: αριστερά? margin-bottom: 15px? πλάτος: 100%?) #Banner ΑΕΚ (Πλάτος: 100%, Ύψος: Auto;)

Η εικόνα σας θα εμφανιστεί στο γονικό στοιχείο σε ένα πλήρες πλάτος και θα συρρικνωθεί με αυτό. Απλά βεβαιωθείτε ότι οι εικόνες Max-Width δεν υπερβαίνουν το μέγιστο πλάτος του δοχείου του.

Η χρήση μεγάλων εικόνων μπορεί να επηρεάσει τον χρόνο εκκίνησης. Ως εκ τούτου, για τις μικρές οθόνες, υπάρχει μια μέθοδος απόκριση για εικόνες, η οποία καθορίζει το μέγεθος του μεγέθους της οθόνης του χρήστη, και δίνει λιγότερο / περισσότερο εικόνα, ανάλογα με το τι χρειάζεται. Αυτή η μέθοδος είναι ακόμα δύσκολη η κλήση ιδανική, αλλά αξίζει να το εξετάσουμε.

Ενεργοποίηση της κύριας πλοήγησης

Ο κύριος λόγος για τον οποίο πρέπει να αλλάξετε την πλοήγηση είναι η προκύπτουσα ελαχιστοποίηση, η οποία μπορεί να οδηγήσει στη λιχουδιά και τη δυσκολία να πιέζει τα κουμπιά. Χρησιμοποιώντας αυτή τη μέθοδο, θα διευκολύνετε τη ζωή του χρήστη. Μπορείτε επίσης να παρατηρήσετε στον κώδικα ότι έχουμε κάνει αλλαγές στις # Main και Aside τμήματα για να τις συνδέσετε σε μία στήλη.

/ * Ερωτήματα Media * / @media Screen και (Max-Πλάτος: 480px) (#SkipTo (Display: Block?) Header NAV, #Main, Εκτός (Float: Αριστερό? Clear: Αριστερό? Περιθώριο: 0 0 10px? Πλάτος: 100%?) Header NAV Li (Περιθώριο: 0? Υπόβαθρο: #CCC? Display: Block? Περιθώριο-Bottom: 3px?) Header NAV Α (Display: Επένδυση: 10px? Κείμενο-Align: Κέντρο?)

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

Για να επιτρέψετε τα αιτήματα των μέσων ενημέρωσης να εισέλθουν στο πλήρες αποτέλεσμα, το συνηθισμένο κινητό, βελτιστοποιημένο, ο ιστότοπος απόκρισης πρέπει να περιέχει κάτι σαν το ακόλουθο κείμενο:

Η γνώση του πλάτους είναι υπεύθυνη για το μέγεθος της περιοχής προβολής. Μπορεί να εγκατασταθεί σε έναν συγκεκριμένο αριθμό εικονοστοιχείων, πλάτος \u003d 960 ή σε τιμή πλάτους της συσκευής, η οποία είναι ένα πλάτος οθόνης σε εικονοστοιχεία σε κλίμακα 100%. Η αρχική κλίμακα διαχειρίζεται την κλίμακα όταν η σελίδα φορτώνεται για πρώτη φορά. Μέγιστη κλίμακα, ελάχιστη κλίμακα και κλιμακωτές ιδιότητες, ελέγξτε τον τρόπο με τον οποίο οι χρήστες μπορούν να κλιμακώσουν τη σελίδα (περισσότερο / λιγότερο).

Σήμερα, οι περισσότεροι άνθρωποι πηγαίνουν στο δίκτυο μέσω κινητών gadgets - ταμπλέτες, τα τηλέφωνα, σε σχέση με αυτή τη βελτιστοποίηση του ιστότοπου πηγαίνει επίσης σε ένα νέο επίπεδο. Εάν ο χρήστης έρχεται και βλέπει ότι ο ιστότοπος δεν είναι βελτιστοποιημένος για κινητές συσκευές: η εικόνα δεν μπορεί να προβληθεί, τα κουμπιά μετακινούνται, οι γραμματοσειρές είναι μικρές και δυσανάγνωστες, ο σχεδιασμός είναι σπέρμα - 99 από 100%, η οποία θα βγει και θα ξεκινήσει και θα ξεκινήσει και θα ξεκινήσει Ψάχνετε για ένα άλλο πιο άνετο. Και βάλτε ένα τσιμπούρι ότι ο πόρος δεν είναι μηδενικός, δηλαδή, δεν αντιστοιχεί στο ερώτημα αναζήτησης. Ως εκ τούτου, ο σχεδιασμός σελίδας πρέπει αναγκαστικά να προσαρμοστεί σε διάφορες κινητές συσκευές. Τι είναι μια κινητή έκδοση του ιστότοπου, πώς να το κάνει, και ποιος είναι ο τρόπος με τον οποίο είναι καλύτερο να εφαρμοστεί; Διαβάστε περισσότερα σε αυτό το άρθρο.

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

Μέθοδος πρώτης - προσαρμοστικό σχέδιο

Τα προσαρμοστικά πρότυπα προτείνουν την αλλαγή της εικόνας του ιστότοπου ανάλογα με το μέγεθος της οθόνης. Κατά κανόνα, ρυθμίζονται σε τυποποιημένα 1600, 1500, 1280, 1100, 1024 και 980 pixels. Για την εφαρμογή Εφαρμόστε ερωτήματα. Η ίδια δεν αλλάζει.

Τα οφέλη αυτής της μεθόδου πρέπει να περιλαμβάνουν:

• Βολική ανάπτυξη, αφού η ίδια η δομή ρυθμίζεται για τις παραμέτρους οθόνης και οποιαδήποτε ενημέρωση δεν απαιτεί το σχεδιασμό από το μηδέν, αρκεί να διορθώσετε το CSS και HTML.
• Μια διεύθυνση URL - ο χρήστης δεν χρειάζεται να απομνημονεύσει αρκετά ονόματα, δεν χρειάζεται να ανακατευθύνει (ανακατευθύνει από τη μία διεύθυνση σε άλλη), η οποία μπορεί να περιπλέξει το έργο του webmaster και η μηχανή αναζήτησης είναι ευκολότερη να ταξινομηθεί και να κατατάσσεται ένας πόρος με μια ενιαία διεύθυνση.

Φυσικά, τα προσαρμοστικά πρότυπα έχουν τα μειονεκτήματά τους, τα οποία, παρεμπιπτόντως, περισσότερο από τα πλεονεκτήματα. Παρ 'όλα αυτά, πολλοί προγραμματιστές τηρούν αυτή την έννοια, για παράδειγμα, η Google Corporation, η κινητή έκδοση του τόπου του οποίου έχει ένα προσαρμοστικό σχέδιο. Έτσι μειονεκτήματα:

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

Παρ 'όλα αυτά, μια τέτοια κινητή έκδοση της ιστοσελίδας γρήγορα, χωρίς ειδικές δεξιότητες και τα έξοδα, σας δίνει τη δυνατότητα να προσαρμόσει τον πόρο σε κάθε gadgets. Αλλά θα είναι κατάλληλη, ενόψει των αναφερόμενων ελλείψεων, σε μικρές, απλές πόρους με ένα ελάχιστο των πληροφοριών και των πολυμέσων, χωρίς πολύπλοκες πλοήγησης και ψυχαγωγίας. Για έναν πολύπλοκο χώρο, 2 άλλες μέθοδοι θα είναι κατάλληλες.

Η δεύτερη μέθοδος είναι μια ξεχωριστή έκδοση του ιστότοπου.

Αυτή η μέθοδος είναι πολύ συχνή και συχνά με επιτυχία καθιστά την περιοχή σε μια κινητή συσκευή πιο βολική για την αντίληψη. Η ουσία του είναι να δημιουργήσετε μια ξεχωριστή έκδοση της σελίδας που έχει σχεδιαστεί με την εφαρμογή και να βρίσκεται σε ξεχωριστή διεύθυνση URL ή υποτομέα, για παράδειγμα, m.vk.com. Σε αυτή την περίπτωση, διατηρείται η κύρια λειτουργικότητα, απλά μοιάζει με το σχεδιασμό του ιστότοπου. Τα πλεονεκτήματα αυτής της μεθόδου είναι προφανείς:

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

Αλλά δεν υπήρχαν ελλείψεις εδώ:

• Αρκετές διευθύνσεις - επιφάνεια εργασίας και κινητή έκδοση του ιστότοπου. Πώς να κάνετε το χρήστη να θυμηθεί δύο επιλογές; Οι Web Wizards συχνά συνταγογραφούνται από μια εκδοτική έκδοση σε κινητά, αλλά εάν αυτή η σελίδα δεν υπάρχει στην έκδοση κινητής τηλεφωνίας, ο χρήστης θα λάβει ένα σφάλμα. Έχει επίσης δυσκολίες στις μηχανές αναζήτησης, οι οποίες είναι δύσκολο να κατατάσσονται 2 πανομοιότυπους πόρους και αυτό επηρεάζει άμεσα την προώθηση.
• Κινητή έκδοση του ιστότοπου από έναν υπολογιστή, εάν ο χρήστης κάνει ένα σφάλμα σε αυτό, θα φανεί γελοίο, το οποίο μπορεί επίσης να επηρεάσει τη συμμετοχή.
• Αυτή η έκδοση είναι πιο συχνά διάτρητη, επιφάνεια εργασίας, οπότε ο χρήστης θα λάβει μια πολύ περιορισμένη λειτουργικότητα. Αλλά ταυτόχρονα, αν λείπει κάτι, ο επισκέπτης μπορεί να φτάσει στην πλήρη έκδοση της σελίδας.

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

Τρίτος τρόπος - Σχεδιασμός Ress

Η μηχανή αναζήτησης Google υποστηρίζει ενεργά αυτή την κατεύθυνση του κινητού σχεδιασμού. Είναι το πιο δύσκολο, κόστος, αλλά αποτελεσματική μέθοδος για την προσαρμογή της ιστοσελίδας κάτω από το τηλέφωνο ή το tablet. Ονομάζεται Ress. Αυτή είναι μια στόχευση πόρων σε μια εφαρμογή κινητής τηλεφωνίας που μπορεί να μεταφορτωθεί για κάθε συσκευή ξεχωριστά. Για το Android - με το GooglePlay και για την Apple - με το iTunes.

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

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

Ο φθηνότερος τρόπος για να κάνετε μια τοποθεσία κινητής τηλεφωνίας

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

Κατεβάστε ειδικά πρότυπα (plugins) για προσαρμοστικό σχεδιασμό. Για παράδειγμα, ο ανιχνευτής κινητής τηλεφωνίας WP, το WordPress Mobile Pack, Wpsmart Mobile και άλλα. Θα σας βοηθήσουν να εμφανίσετε σωστά τον ιστότοπο στο τηλέφωνο, ενώ θα λάβετε αρκετές συμβουλές, οι οποίες θα πρέπει να διορθωθούν για να προσαρμόσετε καλύτερα τη σελίδα στην έκδοση κινητής τηλεφωνίας.

Φυσικά, αυτή η μέθοδος είναι δύσκολη κατάλληλη για σοβαρούς πόρους. Αντίθετα, αυτή η ελεύθερη ευκαιρία προορίζεται για τις μικρές και απλούστερες τοποθεσίες, τα blogs, τις ροές ειδήσεων. Δεν πρέπει επίσης να ξεχάσετε ότι η μηχανή αναζήτησης Google, καθώς και το Yandex, σήμερα κάνει σοβαρές απαιτήσεις για κινητές εκδόσεις, επομένως υπάρχει μια τεράστια πιθανότητα να μειώσετε τις θέσεις τους χρησιμοποιώντας μια τέτοια μέθοδο.

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

Αρχές κινητών εκδόσεων

Δεν έχει σημασία, η έκδοση κινητής τηλεφωνίας του ιστότοπου έχει δημιουργηθεί δωρεάν ή χρησιμοποιώντας την κατάσταση του webmaster, γίνεται στο σύστημα RESS ή χρησιμοποιώντας ένα προσαρμοστικό πρότυπο. Το πιο σημαντικό είναι ότι για την αποτελεσματική του δουλειά, πρέπει να τηρήσετε σε πολλές εξαιρετικά σημαντικές αρχές. Έτσι, ποια θα πρέπει να είναι η κινητή έκδοση του ιστότοπου; Πώς να το κάνετε παραγωγικό, αποτελεσματικό και παραγωγικό;

Καταργούμε τα πάντα πάρα πολλά

Μινιμαλισμός - τι θα πρέπει να προσπαθήσει ο προγραμματιστής της κινητής έκδοσης του ιστότοπου. Φανταστείτε πόσο δύσκολο είναι να αντιληφθούν οι πληροφορίες που πυροβολούν από τα λουλούδια, τα κουμπιά, τα πανό και τα οποία πρέπει να είναι εύθραυστα σε αναζήτηση του επιθυμητού υλικού. Το σχεδιασμό κινητού πρέπει να είναι απλό και καθαρό. Επιλέξτε 2-3 χρώματα για να διαχωρίσετε χώρο (για παράδειγμα, επώνυμα). Καλύτερα, αν ένας από αυτούς είναι λευκό. Μοιραστείτε το χώρο μιας μικρής οθόνης σε κατανοητές και ευανάγνωστες ζώνες. Τα εικονικά κλειδιά πρέπει να είναι ορατά έτσι ώστε ο χρήστης να γνωρίζει σαφώς πού να πιέσει και είδε - αυτό είναι το προϊόν, εδώ είναι η φόρμα για την πλήρωση δεδομένων, εδώ είναι πληροφορίες σχετικά με την παράδοση και την πληρωμή.

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

Ευθυγραμμία

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

Μια ένωση

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

Και τον διαχωρισμό

Μερικές φορές, αντίθετα, απαιτείται να αποσυνδέσετε πάρα πολλές πληροφορίες. Για παράδειγμα, στο αναπτυσσόμενο μενού έχετε μια λίστα με περισσότερες από 80 πόλεις όπου πραγματοποιείται η παράδοση. Ομάδα τους από περιφέρειες, ώστε ο χρήστης να μην χρειάζεται να μετακινηθεί σε αυτή την τεράστια λίστα. Όταν θα εμποδίσει τον δρομέα στο περιφερειακό κέντρο ή στην περιοχή, ένας άλλος κατάλογος πόλεων θα πέσει.

Τόπος αγώνων

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

Το σταθερό είναι βολικό εάν ο χρήστης γνωρίζει ακριβώς τι ψάχνει. Για παράδειγμα, μια πόλη, αριθμός ή ημερομηνία. Η δεύτερη επιλογή είναι κατάλληλη για μεγάλες σύνθετα ονόματα ή για περιπτώσεις όπου υπάρχουν πολλές παραλλαγές στο ίδιο όνομα, και το καθένα φέρνει τον χρήστη στο στόχο. Η επιλογή με την αυτόματη διαταραχή χρησιμοποιείται συχνότερα όταν ο επισκέπτης χρειάζεται βοήθεια. Για παράδειγμα, ο ιστότοπος για πλέξιμο προσφέρει τις βελόνες πλεξίματος. Ο χρήστης εισάγει το ερώτημα αναζήτησης «Metal Περιστροφές», και επιτρέπουν την έγκαιρη βλέπει «τα Σχήματα 5 χιλιοστών», «4,5 MM» βελόνες πλεξίματος, κ.λπ.

Αυτόματη συμπλήρωση

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

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

Όλα είναι διαβάζονται, όλα είναι ορατά

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

Ορισμένα στατιστικά στοιχεία

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

Οι αριθμοί ακολουθούν. Σήμερα, το 87% του πληθυσμού χρησιμοποιείται από τα gadgets, προφανώς, εκτός από τα νεώτερα παιδιά και μερικούς ηλικιωμένους. Οι οικονομολόγοι προβλέπουν την ανάπτυξη του κινητού εμπορίου 100 φορές για τα επόμενα 5 χρόνια. Ταυτόχρονα, μόνο το 21% των τοποθεσιών προσαρμόστηκε να εργάζεται με κινητές συσκευές. Σημαίνει ότι η κυκλοφορία στο Διαδίκτυο και η αγορά ηλεκτρονικού εμπορίου καταλαμβάνεται μόνο στο μικρό 5ο μέρος.

Σκεφτείτε τους αριθμούς αυτούς. Έχει νόημα να προσαρμόσετε τον πόρο σας; Φυσικά ναι. Επιπλέον, ενώ υπάρχει τόσος ελεύθερος χώρος σε αυτήν την αγορά, μπορείτε να πάρετε το δικό σας τμήμα σε αυτό.

Όπου χρειάζεστε μια έκδοση κινητής τηλεφωνίας

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

Χωρίς μια έκδοση κινητής τηλεφωνίας, δεν μπορείτε να υπάρχει:

• newsports, δεδομένου ότι είναι η πλειοψηφία τους που κοιτάζει από το τηλέφωνο για να εργαστεί ή να σπουδάσει.
• Κοινωνικά δίκτυα - Για τον ίδιο λόγο, καθώς υπάρχει ένας παράγοντας επικοινωνίας σε απευθείας σύνδεση, πράγμα που σημαίνει ότι θα πρέπει να δημιουργηθεί βολική, κατανοητή συνομιλία.
• Αναφορά, τοποθεσίες με πλοήγηση κ.λπ., όπου οι άνθρωποι αντιμετωπίζονται ενώ αναζητούν κάτι.
• Τα ηλεκτρονικά καταστήματα είναι η δυνατότητα να προσελκύσουν αγοραστές που δεν ξοδεύουν χρόνο για ψώνια και αγοράζουν τα πάντα μέσω του κινητού internet.

Αντί της φυλάκισης

Σήμερα, οι κινητές τεχνολογίες βρίσκονται στο στάδιο της ενεργού ανάπτυξης και της ανάπτυξης, ως εκ τούτου, αγωνίζεται για την ηγεσία στην αγορά, κάθε εταιρεία θα πρέπει να διασφαλίσει ότι πόρων του Διαδικτύου συνεπής. Λόγω των αυξανόμενων αιτημάτων χρήστη, οι τοποθεσίες πρέπει να αναβαθμίσουν συνεχώς και να προσαρμόζονται σε διάφορες συσκευές. Είναι σαφές ότι εάν ένα άτομο είναι άβολο να είναι σε ένα ή τον άλλο πόρο, δεν μπορεί να πάρει πληροφορίες σχετικά με το προϊόν ή την τιμή, μια παραγγελία, να μάθουν για την παράδοση, τότε θα διαπιστώσετε ότι η περιοχή όπου όλα αυτά καθίσταται δυνατό. Επομένως, να κερδίσει σε μια ανταγωνιστική πάλη, είναι σημαντικό να έχουμε έναν ευέλικτο, βολικό, λειτουργικό και ενδιαφέρον πόρο.

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

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

Η κλασική προσέγγιση για τη δημιουργία του site μοιάζει με αυτό: μια μονάδα ανάπτυξης, ένα μπλοκ για το σχεδιασμό ιστοσελίδων, ένα μπλοκ διάταξη, κ.λπ. Ωστόσο, τα τελευταία χρόνια, όλα άρχισαν να αλλάζουν τον καρδινάλιο τρόπο: ο όρος «σχεδιασμός ιστοσελίδων "σταδιακά στερεώνεται, Χρόνος ως“προσαρμοστικός σχεδιασμός”είναι ύπουλα ενισχύει τη θέση της, σταδιακά κάνει αλλαγές στο μυαλό των ειδικών.

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

Η έννοια της προσαρμοστικότητας

"Τι είναι ένα προσαρμοστικό σχέδιο και τι προσαρμόζεται;" - Ίσως το άτομο να είναι άδικο. Θα σας απαντήσω: στον τύπο της συσκευής που χρησιμοποιείται. Το Adaptive Design παρέχει καλή αντίληψη των ιστοσελίδων σε διάφορα gadgets που συνδέονται με το Διαδίκτυο.

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

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

Στρατηγική "Κινητή Πρώτη"

Αυτή η αναπτυξιακή στρατηγική προτάθηκε το 2009 από το Lyuho Wroklevsky - ο συγγραφέας των βιβλίων και των άρθρων σχετικά με το σχεδιασμό ιστοσελίδων, ο επικεφαλής του κοινωνικού δικτύου Bagcheck, ο οποίος είναι μόνο 9 μήνες μετά τη δημιουργία του Twitter Inc. που αποκτήθηκε

Που παρέχεται από την προσέγγιση Lyukoblevski στην ανάπτυξη ονομάστηκε "Κινητή Πρώτα" ("Πρώτη Εισαγωγή Κινητό") για τρεις λόγους:

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

Η αγορά κινητής τηλεφωνίας έχει την τάση να αναπτύσσεται με τρελό ρυθμό.

Το κινητό περιβάλλον σχετίζεται με μια ποικιλία χαρακτηριστικών (κάμερες, πολλαπλές χειρονομίες, GPS, επιταχυνσιόμετρο, γεωγραφική κατανομή).

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

Η πρώτη στρατηγική για κινητά προϋποθέτει πώς το σημείο εκκίνησης είναι η δημιουργία μιας δομής και περιεχομένου της κινητής έκδοσης που λειτουργεί κάτω από τη χαμηλή ταχύτητα του Διαδικτύου και η κίνηση σε μεγάλα σημεία διακοπής με ταχύτερη σύνδεση, ταυτόχρονα με τη βελτίωση και τη βελτιστοποίηση των απλοποιημένων εκδόσεων .

Σύγχρονες τάσεις και προσεγγίσεις στην ανάπτυξη ιστοσελίδων

Μάθετε έναν αλγόριθμο ταχείας ανάπτυξης από το μηδέν στο κτίριο του ιστότοπου

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

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

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

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

Η πλήρωση θα πρέπει να δημιουργείται συνεχώς και να συζητείται τόσο στο στάδιο της δημιουργίας ενός προσαρμοστικού σχεδιασμού σχεδιασμού και μετά την ολοκλήρωσή του! Καθώς ο διάσημος σχεδιαστής Cennydd Bowles είπε: "Ο σχεδιασμός και το περιεχόμενο πρέπει να πάνε χέρι στο χέρι." Πρέπει να συμπληρώνουν ο ένας τον άλλον.

Είναι ένα άλλο θέμα - η στρατηγική "Το πρώτο πράγμα είναι η δομή του περιεχομένου. Πρώτα απ 'όλα, πρέπει να αποφασίσετε με ακρίβεια την αποστολή του ιστότοπου ότι προσπαθεί να πει στον κόσμο. Και στη συνέχεια εξετάστε προσεκτικά τη δομή της πλήρωσης, τους τρόπους δημιουργίας, τύπων και σκοπού κάθε στοιχείου και ταυτόχρονα πρέπει να εγκαταστήσετε τον χρήστη στο κεφάλι της γωνίας.

Πρέπει να έχετε μια στρατηγική που θα πρέπει να δώσετε σε κάθε χρήστη το απαραίτητο περιεχόμενο σε κάθε στάδιο της διαδρομής του στον πόρο σας. Η δομή του χώρου πρέπει να βασίζεται στη μελέτη της συμπεριφοράς και τις ανάγκες του κοινού-στόχου σας.

Εάν στα αρχικά στάδια της ανάπτυξης του ιστότοπου, είστε καλά δομημένο περιεχόμενο, στο μέλλον μπορείτε εύκολα να το μεταφέρετε σε άλλες πλατφόρμες και συσκευές. Φυσικά, δεν βλάπτει και ένα παράδειγμα προσαρμοστικού σχεδιασμού - το δείγμα που θα πλοηγηθείτε.

Κρατήστε το χρόνο για να δημιουργήσετε ένα σκίτσο και ένα πρωτότυπο

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

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

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

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

Ελπίζω ότι αυτό το άρθρο ήταν χρήσιμο τόσο έμπειρους όσο και νέοι σχεδιαστές ιστοσελίδων.

Λοιπόν, το παραδοσιακό αποχαιρετιστήριο τελικά: Κάντε το χώρο χρήσιμο, βολικό και οικείο, ανεξάρτητα από τη συσκευή στην οποία περιηγείται. Σε νέες συναντήσεις, φίλους!

P.s.: Έχετε ήδη εγγραφεί στην ενημέρωση του ιστολογίου μας;

Σύγχρονες τάσεις και προσεγγίσεις στην ανάπτυξη ιστοσελίδων

Μάθετε έναν αλγόριθμο ταχείας ανάπτυξης από το μηδέν στο κτίριο του ιστότοπου

Όροι όπως ανταποκρινόμενοι (ανταποκρινόμενοι) και προσαρμοστικό (προσαρμοστικό) σχεδιασμό χρησιμοποιούνται πρόσφατα αρκετά. Όπως αποδείχθηκε, για μερικούς ανθρώπους αυτές οι δύο έννοιες είναι σχεδόν ταυτόσημες. Σε αυτό το άρθρο θα μιλήσουμε για το τι ανταποκρίνεται και προσαρμοστικό σχέδιο και ποια είναι η διαφορά μεταξύ τους.

Ξεκινώντας από τη στιγμή που οι υπολογιστές tablet και τα smartphones έχουν διατεθεί στο ευρύ κοινό, οι ιστότοποι θεωρούνται όλο και περισσότερο χρησιμοποιώντας συσκευές με έλεγχο αφής, μικρές οθόνες. Πολλοί πόροι του Διαδικτύου ήταν άχρηστοι ακατάλληλοι για τη χρήση ιδιοκτητών τέτοιων συσκευών.
Υπάρχουν δύο θεμελιωδώς διαφορετικές προσεγγίσεις στη δημιουργία ιστότοπων για κινητές συσκευές: προσαρμοστικό σχεδιασμό ιστοσελίδων και ανταποκρινόμενο σχέδιο ιστοσελίδων. Ας εξετάσουμε κάθε ένα από αυτά χωριστά, και στη συνέχεια να συγκρίνετε τη χρήση και τα χαρακτηριστικά τους.

Τι ανταποκρίνεται

Ο σχεδιασμός ανταποκρινόμενων (ανταποκρινόμενος σχεδιασμός ιστοσελίδων ή RWD) είναι μια προσέγγιση για τη δημιουργία ενός σχεδιασμού, στην οποία αναπτύσσεται ο ιστότοπος με τον υπολογισμό για να εξασφαλίσει την απλούστερη χρήση του: μια βολική προβολή του ιστότοπου με ελάχιστο επανεγκατάσταση και περιττή κύλιση - στο ευρύτερη περιοχή συσκευών. Η άμεση σχεδίαση έχει τα ακόλουθα χαρακτηριστικά:

• Όταν η ανάλυση της διάταξης σχεδιασμού χρησιμοποιείται αποκλειστικά HTML και CSS - χωρίς σύνδεση Javascript για να προσδιορίσετε τα στοιχεία σχεδιασμού "δείγμα".
• Η επίδειξη ανταποκρινόμενης διάταξης καθορίζει τον τρόπο με τον οποίο τα στοιχεία του τόπου σε διαφορετικές συσκευές θα φαίνονται. Ωστόσο, αυτά τα στοιχεία δεν είναι κρυμμένα / δεν αντικαθίστανται από άλλους και τη συμπεριφορά τους, καθώς και οι λειτουργίες που εκτελούνται από αυτούς, δεν αλλάζουν.
• Τρεις βασικές αρχές του ευαίσθητου σχεδιασμού:
  1. τη θέση όλων των στοιχείων μέσα στο αρθρωτό πλέγμα.
  2. Όλα τα στοιχεία των διατάξεων και των αρχείων πολυμέσων (συμπεριλαμβανομένων των εικόνων) είναι "καουτσούκ" (εύκαμπτο) - οι διαστάσεις τους εξαρτώνται από το μέγεθος της οθόνης.
  3. Η συνεργασία με τα ερωτήματα πολυμέσων είναι μια μονάδα CSS3 που σας επιτρέπει να ορίσετε διαφορετικά στυλ (ή ακόμα και φύλλα στυλ), ανάλογα με την ανάλυση οθόνης, το μέγεθος και άλλα chycyces.
• Ο σχεδιασμός του ανταποκρινόμενου δημιουργείται χρησιμοποιώντας το Adaptive Markup (δεν πρέπει να συγχέεται με το προσαρμοστικό σχέδιο). Adaptive Markup (προσαρμοστική διάταξη) είναι ότι υπάρχουν διάφορα στυλ στον ιστότοπο, επιλογές για τη θέση των στοιχείων στο αρθρωτό πλέγμα και αρκετές επιλογές για στυλ σχεδιαστικών στοιχείων. Αυτές οι επιλογές αντικαθιστούν ο ένας τον άλλον κατά την αλλαγή του μεγέθους της οθόνης, ενώ σχηματίζονται κάποια είδη μεταβατικών σημείων μεταξύ διαφορετικών τύπων σήμανσης / μορφής της θέσης.
• Ο σχεδιασμός του ανταποκρινόμενου δεν συνεπάγεται την εργασία με το μοντέλο αντικειμένων των στοιχείων στη σελίδα, δεν συνεπάγεται μετατόπιση της ιεραρχίας / φωλιάζοντας μπλοκ και αντικείμενα όταν αλλάζει ο τύπος σήμανσης.

Τι είναι ένα προσαρμοστικό σχέδιο

Το Adaptive Web Design ή το AWD είναι ένα σχέδιο βασισμένο σε λειτουργίες με διαφορετικές διατάξεις ιστότοπου ή το σήμα της για να εξασφαλίσει την καλύτερη χρήση του σε ορισμένες, συγκεκριμένες συσκευές και αναλύσεις οθόνης.

• Στην περίπτωση του προσαρμοστικού σχεδιασμού, τα στοιχεία του τόπου μπορούν να κρυφτούν, να αντικατασταθούν από άλλους. Η συμπεριφορά και οι λειτουργίες των μεμονωμένων στοιχείων ιστοσελίδων ενδέχεται να διαφέρουν.
• Σε προσαρμοστικό σχεδιασμό, το Javascript χρησιμοποιείται παντού για τον έλεγχο της συμπεριφοράς και των χαρακτηριστικών των αντικειμένων στην περιοχή.
• Ο προσαρμοστικός σχεδιασμός απαιτεί να συνεργάζεται με το μοντέλο αντικειμένου στοιχείου στη σελίδα, συνεπάγεται τη μετατόπιση της ιεραρχίας τους / φωλιάζοντας σε διαφορετικές συσκευές.
• Δεν είναι υποχρεωτικό να παρέχεται ο ίδιος τύπος χώρου και της λειτουργικής της σε διαφορετικά προγράμματα περιήγησης. Είναι δυνατή η χρήση νέων τεχνολογιών που δεν υποστηρίζονται από παλιές εκδόσεις προγραμμάτων - επειδή ο σχεδιασμός, όπως αναφέρθηκε παραπάνω, προσαρμόζεται σε ορισμένους τύπους συσκευών.

Σύγχυση στους ορισμούς

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

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

Χαρακτηριστικά προσεγγίσεων

Αρκετές σημαντικές πτυχές, όσον αφορά τα οποία, ανταποκρινόμενα και προσαρμοστικά σχέδια είναι δραστικά διαφορετικά:
Ιστοσελίδα ταχύτητας. Ο ιστότοπος που δημιουργήθηκε στις αρχές του προσαρμοστικού σχεδιασμού μπορεί να φορτωθεί αρκετές φορές πιο γρήγορα, καθώς ο χρήστης θα χρειαστεί να κατεβάσει μόνο αυτά τα μέρη του σχεδιασμού από το διακομιστή για να λειτουργήσει στη συσκευή του. Στην περίπτωση ενός ανταποκρινόμενου σχεδιασμού, ο χρήστης θα αναγκαστεί να περιμένει μέχρι να φορτωθούν όλα τα στυλ και τις εικόνες, ανεξάρτητα από τη συσκευή που χρησιμοποιείται από τον επισκέπτη.
Την πολυπλοκότητα της ανάπτυξης. Η δημιουργία ενός ιστότοπου με ένα προσαρμοστικό σχέδιο απαιτεί υψηλότερο επαγγελματικό επίπεδο από τον προγραμματιστή. Ειδικότερα, η σταθερή εμπειρία εργασίας με το JavaScript.
SEO. Σύμφωνα με τις φήμες, η Google είναι πολύ πιο πιστοί, αναφέρεται σε ανταποκρινόμενους ιστότοπους από το προσαρμοστικό.

Στην πράξη

Στην πράξη, ανταποκρινόμενη, ανταποκρινόμενη σχεδίαση, συναντά αρκετά συχνά, σε αντίθεση με την προσαρμοστική. Δεδομένου ότι είναι προφανές: τελικά, η πρώτη είναι πιο εύκολη η εφαρμογή και ο πλοίαρχος. Η φροντίδα των προτύπων που πωλούνται στους εμπόρους ανταποκρίνονται και δεν είναι προσαρμοστικοί.
Ο προσαρμοστικός σχεδιασμός χρησιμοποιείται συχνότερα σε σοβαρά και πολυλειτουργικά προϊόντα. Τα πιο προφανή παραδείγματα: στην κινητή έκδοση του δικτύου Vkontakte, ταχυδρομείο από την Google.

ΥΣΤΕΡΟΓΡΑΦΟ. Εάν δώσετε προσοχή, στη συνέχεια παρατηρήστε ότι η διάταξη του ιστότοπού μας είναι ένα παράδειγμα σχεδιασμού που ανταποκρίνεται στο σχεδιασμό. Για να βεβαιωθείτε ότι στον υπολογιστή, δοκιμάστε να αλλάξετε το πλάτος του παραθύρου του προγράμματος περιήγησης - και θα παρατηρήσετε πώς το στυλ σήμανσης τοποθεσίας μετατρέπεται σταδιακά μετακινώντας σε κινητό βλέμμα.

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

Τον Ιανουάριο, δημοσιεύσαμε ένα άρθρο σχετικά με το Adaptive Design "Responsive Web Design: Τι είναι και πώς να το χρησιμοποιήσετε & Raquo (Adaptive Web Design: Τι είναι και πώς να το χρησιμοποιήσετε). Ο προσαρμοστικός σχεδιασμός ιστοσελίδων συνεχίζει να προσελκύει μεγάλη προσοχή σε αυτόν, αλλά λαμβάνοντας υπόψη το πόσο διαφορετικό διαφέρει από Παραδοσιακές μέθοδοι Ανάπτυξη ιστοσελίδων, μπορεί να φανεί αμέσως δύσκολο για τους σχεδιαστές και τους προγραμματιστές που δεν το δοκίμασαν.

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

ΣΧΕΔΙΑΣΜΟΣ ΙΣΤΟΣΕΛΙΔΩΝ ΠΡΟΣΑΡΜΟΖΟΜΕΝΟΣ ΣΕ ΣΥΣΚΕΥΕΣ

1. Μεταβάσεις CSS και ερωτήματα πολυμέσων
CSS μεταβάσεις και ερωτήματα μέσων

Το Elliot Jay Stocks λέει λεπτομερώς τη μέθοδο συνδυασμού ερωτημάτων CSS Media και CSS μεταβάσεις. Η κύρια ιδέα είναι η εξής: Εξασφάλιση ενός προσαρμοστικού ιστότοπου με ερωτήματα μέσων μαζικής ενημέρωσης, αλλάζετε συνεχώς το πλάτος του προγράμματος περιήγησης για να δείτε πώς συμπεριφέρεται ταυτόχρονα ο ιστότοπος ταυτόχρονα. Όμως, κάθε φορά που λειτουργεί ένα από τα ερωτήματα πολυμέσων σας, η σκληρή μετάβαση μεταξύ των στυλ είναι ορατή (για παράδειγμα, για επιτραπέζιους υπολογιστές, το δεύτερο για τα δισκία). Γιατί να μην χρησιμοποιήσετε τις μεταβάσεις CSS για να εξομαλύνετε αυτές τις σκληρές μεταβάσεις χρησιμοποιώντας κινούμενα σχέδια;

Προσαρμοστικές εικόνες και βίντεο

5. Εικόνες υγρών
Εικόνες από καουτσούκ (εργαλεία κλιμάκωσης του προγράμματος περιήγησης)

Οι εικόνες από καουτσούκ είναι ένα από τα κεντρικά θέματα στον προσαρμοστικό σχεδιασμό ιστοσελίδων. Το άρθρο Ethan Marcotte παρέχει μια λεπτομερή επισκόπηση της δημιουργίας αυτών χρησιμοποιώντας ένα κλασικό θραύσμα κώδικα. img (μέγιστο πλάτος: 100%;), καθώς και όλες τις απαραίτητες λεπτομέρειες που απαιτούνται για την έναρξη της εργασίας.

Στείλτε μήνυμα ηλεκτρονικού ταχυδρομείου προσαρμοστικά γράμματα

14. Βελτιστοποίηση του μηνύματος ηλεκτρονικού ταχυδρομείου σας για κινητές συσκευές με το ερώτημα πολυμέσων
Βελτιστοποίηση μέσω ηλεκτρονικού ταχυδρομείου για κινητές συσκευές με ερωτήματα πολυμέσων

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

Προσαρμοστικά εργαλεία σχεδιασμού ιστοσελίδων

Μπορείτε να σχεδιάσετε Προσαρμοστικός σχεδιασμός Από το μηδέν ή να χρησιμοποιήσετε τα παρακάτω εργαλεία για να επιταχύνετε και να απλοποιήσετε τη διαδικασία της δημιουργίας του.

Αυτό είναι ένα γρήγορο και μικρό πολυφίλ (θραύσμα του κώδικα που προσθέτει μια μη υποστηριζόμενη λειτουργικότητα της λειτουργικότητας) δημιουργήθηκε από τον Scott Jehl για να υποστηρίξει τις ιδιότητες του Min-Width και Max-πλάτος από τα ερωτήματα Media CSS3 στο IE6-IE8 και υψηλότερο.

Χρησιμοποιήστε πληροφορίες από αυτή τη μικρή εισβολή για να δημιουργήσετε μια προσαρμοστική τοποθεσία.

Εργαλείο για γρήγορο πρωτότυπο προσαρμοστικό σχεδιασμό. Μπορείτε να σχεδιάσετε το CSS για διάφορα δημοφιλή μεγέθη οθονών, προσανατολισμών και προγραμμάτων περιήγησης, είτε πρόκειται για τηλέφωνα (BlackBerry Torch, Google Nexus One, iPhone, Motorola Droid), δισκία (BlackBerry Playbook, iPad, Samsung Galaxy Tab, Dell Streak), οθόνες ή τηλεοράσεις (720π, 1080p).

Μπορείτε να δείτε τα αποτελέσματα του σχεδιασμού απευθείας στο πρόγραμμα περιήγησης και να χρησιμοποιήσετε τα συνήθη εργαλεία ανάπτυξης όπως το Firebug. Δοκιμάστε επίσης ένα εναλλακτικό εργαλείο.

Εργαλείο 320 και βάσει βασισμένο στην αρχή Κινητό πρώτο (Πρώτες, κινητές συσκευές), στις οποίες ο σχεδιασμός δημιουργείται πρώτος για κινητές συσκευές και στη συνέχεια επεκτείνεται για ταμπλέτες, επιτραπέζιους υπολογιστές και μεγάλες οθόνες. Λειτουργεί καλά ως συμπλήρωμα στη λέβητα HTML5 και ξεχωριστά.

Αυτά είναι προσαρμόσιμα πρότυπα για τη δημιουργία πολυλειτουργικών εφαρμογών ιστού εφαρμογών υψηλής απόδοσης. Θα λάβετε διασταυρούμενο πρόγραμμα περιήγησης για smartphones τάξης και καλή υποστήριξη για το παλιό Blackberry, Symbian και IE Mobile. Καθώς και ένας μεγάλος αριθμός διαφορετικών βελτιστοποιητών για τα κινητά προγράμματα περιήγησης.

Πλαίσιο για προσαρμοστικό σχεδιασμό

33. 1140 CSS Grid

1140 Το πλέγμα CSS βελτιστοποιείται για να λειτουργήσει σε οθόνες από το μέγεθος των κινητών συσκευών σε οθόνες 1280px σε πλάτος. Αυτό είναι ένα απλό και ευέλικτο πλέγμα που χρησιμοποιεί Ερωτήσεις μέσων..

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

Το Flurid είναι ένα ελαστικό πλέγμα σε στήλες 6, 7, 8, 9, 10, 12 και 16.

Το FluidGrids είναι μια αρθρωτή γεννήτρια ματιών που δημιουργεί διατάξεις 6, 7, 8, 9, 10, 12 ή 16 ηχεία.

CSS πλαίσιο για τη δημιουργία προσαρμοστικών διατάξεων. Περιέχει 4 βασικές διαρρύθμιση και τρία σύνολα τυπογραφίας.

Καουτσούκ πλαίσιο με εστίαση στην τυπογραφία.

Το μικροσκοπικό δίκτυο υγρών θα σας βοηθήσει να δημιουργήσετε το δικό σας ελαστικό πλέγματος 12, 16 ή 24 στήλες, να ορίσετε το μέγιστο και το ελάχιστο πλάτος και την ποινή τους σε ποσοστό.

Προσαρμοστικές στρατηγικές σχεδιασμού

40. Η ροή εργασίας του ανταποκρινόμενου σχεδιαστή
Adaptive Web Design Design Workflow

Ο Luke Wroblewski ολοκληρώθηκε από την παρουσίαση του Ethan Marcotte σχετικά με την εφαρμογή των αρχών του προσαρμοστικού σχεδιασμού ιστοσελίδων στον εκσυγχρονισμό του τόπου μιας από τις κορυφαίες εφημερίδες. Μεταξύ άλλων, ο Ethan εξηγεί πώς πρόκειται για τη μεθοδολογία σχεδιασμού προσαρμοστικού σχεδιασμού ιστοσελίδων και που αντιπροσωπεύει τη διαδικασία του πρωτοτύπου στο πλαίσιο του προσαρμοστικού σχεδιασμού ιστοσελίδων.

Ο Λουκάς Wroblewski σημειώνει στη διάσκεψη ανάπτυξης κατά τη διάρκεια της ομιλίας του Stephen Hay για τις πραγματικότητες του σχεδιασμού για διάφορες συσκευές.

Συζητήσεις και διάφορες απόψεις σχετικά με το προσαρμοστικό σχεδιασμό ιστοσελίδων

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

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

Η δημοσίευση είναι ένας συνδυασμός φιλοσοφίας και στρατηγικής για τη συσσώρευση βέλτιστων πρακτικών στον τομέα του προσαρμοστικού σχεδιασμού.

Κανονικά ενημερωμένη συλλογή ιστοσελίδων που χρησιμοποιούν ερωτήματα μέσων.

Στη σειρά 9 η μεγάλη εκπομπή Ιστού Jeffrey Zeldman και ο Dan Benjamin κάλεσε το Ethan Marcotte να συζητήσει το προσαρμοστικό σχέδιο.

Μια εξαιρετική προσθήκη στο άρθρο θα είναι ένα blog σχετικά με το προσαρμοστικό σχέδιο, στο οποίο οι προγραμματιστές μοιράζονται εμπειρίες και γράψτε αναθεωρήσεις Rezponsive εργαλείων.

Σχεδιασμός ιστοσελίδων προσαρμοζόμενος σε συσκευές.

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

cSS3.

Προσθέστε ετικέτες