Marketing ΠεριεχόμενοΒίντεο μάρκετινγκ και πωλήσεωνΤα γραφήματα μάρκετινγκΜάρκετινγκ για κινητά και tablet

Τι είναι το Responsive Design; (Εξηγηματικό βίντεο και Infographic)

Χρειάστηκε μια δεκαετία για σχεδιασμός ιστοσελίδων προσαρμοζόμενος σε συσκευές (RWD) για να γίνει mainstream από τότε Ο Κάμερον Άνταμς κυκλοφόρησε για πρώτη φορά η ιδέα το 2010. Η ιδέα ήταν έξυπνη – γιατί δεν μπορούμε να σχεδιάσουμε ιστότοπους που να προσαρμόζονται στο παράθυρο προβολής της συσκευής στην οποία προβάλλεται;

Τι είναι το Responsive Design;

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

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

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

Ερωτήματα αποκριτικής σχεδίασης CSS Viewport

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

/* Default styles for all devices */
body {
  font-size: 16px;
  line-height: 1.5;
}

/* Style changes for devices with a viewport width between 600px and 900px */
@media (min-width: 600px) and (max-width: 900px) {
  body {
    font-size: 18px;
  }
}

/* Style changes for devices with a viewport width between 900px and 1200px */
@media (min-width: 900px) and (max-width: 1200px) {
  body {
    font-size: 20px;
  }
}

/* Style changes for devices with a viewport width greater than 1200px */
@media (min-width: 1200px) {
  body {
    font-size: 22px;
  }
}

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

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

Lucinda Duncalfe, Διευθύνων Σύμβουλος της Monetate

Εδώ είναι ένα infographic από Monetate επεξηγώντας τα πιθανά πλεονεκτήματα της δημιουργίας ενός σχεδιασμού με απόκριση για πολλές συσκευές:

Infographic Responsive Web Design

Ο ιστότοπός σας ανταποκρίνεται;

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

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

  • Ταμπλέτα με απόκριση εργαλείων προγραμματιστή chrome
  • Εργαλεία προγραμματιστών chrome που ανταποκρίνονται οριζόντια για φορητές συσκευές
  • εργαλεία προγραμματιστών chrome με απόκριση για κινητά
  • αποκριτική επιφάνεια εργασίας εργαλείων προγραμματιστή chrome

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

Douglas Karr

Douglas Karr είναι ΚΟΑ του OpenINSIGHTS και ο ιδρυτής του Martech Zone. Ο Ντάγκλας έχει βοηθήσει δεκάδες επιτυχημένες νεοφυείς επιχειρήσεις της MarTech, έχει βοηθήσει στη δέουσα επιμέλεια άνω των 5 δισεκατομμυρίων δολαρίων σε εξαγορές και επενδύσεις της Martech και συνεχίζει να βοηθά τις εταιρείες στην εφαρμογή και την αυτοματοποίηση των στρατηγικών πωλήσεων και μάρκετινγκ. Ο Ντάγκλας είναι ένας διεθνώς αναγνωρισμένος ειδικός και ομιλητής στον ψηφιακό μετασχηματισμό και στη MarTech. Ο Ντάγκλας είναι επίσης δημοσιευμένος συγγραφέας ενός οδηγού Dummie και ενός βιβλίου επιχειρηματικής ηγεσίας.

Σχετικά άρθρα

Επιστροφή στην κορυφή κουμπί
Κλεισιμο

Εντοπίστηκε μπλοκ διαφημίσεων

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