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

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

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

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

Το Responsive Web Design (RWD) είναι μια προσέγγιση σχεδιασμού ιστοσελίδων που στοχεύει στη δημιουργία ιστοσελίδων για να παρέχει μια βέλτιστη εμπειρία προβολής - εύκολη ανάγνωση και πλοήγηση με ελάχιστο μέγεθος, μετακίνηση και κύλιση - σε ένα ευρύ φάσμα συσκευών (από κινητά τηλέφωνα έως επιτραπέζιο υπολογιστή οθόνες). Ένας ιστότοπος σχεδιασμένος με RWD προσαρμόζει τη διάταξη στο περιβάλλον προβολής χρησιμοποιώντας ρευστά, πλέγματα βάσει αναλογίας, ευέλικτες εικόνες και ερωτήματα πολυμέσων CSS3, μια επέκταση του κανόνα @media.

Wikipedia

Με άλλα λόγια, στοιχεία όπως οι εικόνες μπορούν να προσαρμοστούν καθώς και η διάταξη αυτών των στοιχείων. Ακολουθεί ένα βίντεο που εξηγεί ποιος είναι ο αποκριτικός σχεδιασμός καθώς και γιατί η εταιρεία σας πρέπει να το εφαρμόζει. Αναπτύξαμε πρόσφατα το DK New Media ιστότοπος να ανταποκρίνεται και εργάζονται τώρα Martech Zone να κάνει το ίδιο!

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

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

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

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

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

Infographic Responsive Web Design

Εάν θέλετε να δείτε έναν αποκριτικό ιστότοπο σε δράση, δείξτε το Google Chrome πρόγραμμα περιήγησης (πιστεύω ότι ο Firefox έχει την ίδια δυνατότητα) DK New Media. Τώρα επιλέξτε Προβολή> Προγραμματιστής> Εργαλεία προγραμματιστή από το μενού. Αυτό θα φορτώσει μια δέσμη εργαλείων στο κάτω μέρος του προγράμματος περιήγησης. Κάντε κλικ στο μικρό εικονίδιο για κινητά στα αριστερά της γραμμής μενού Εργαλεία προγραμματιστή.

αποκριτική δοκιμή-χρώμιο

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

3 Σχόλια

  1. 1

    Ο σχεδιασμός ιστοσελίδων δεν είναι πλέον επιλογή των webmaster, είναι πλέον υποχρεωτικό για αυτούς. Ευχαριστούμε που μοιραστήκατε αυτήν την ενημερωτική ανάρτηση.

  2. 2

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

    • 3

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

Ποια είναι η γνώμη σας;

Αυτός ο ιστότοπος χρησιμοποιεί το Akismet για να μειώσει το spam. Μάθετε πώς επεξεργάζονται τα δεδομένα των σχολίων σας.