Βέλτιστες πρακτικές υπεύθυνου σχεδιασμού ιστοσελίδων

από τον Bradley Nice, Content Manager στο ClickHelp.com - εργαλείο τεκμηρίωσης λογισμικού

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

Αν είστε νέοι στην έννοια του Responsive Web Design (RWD), εδώ είναι οι συνήθεις ερωτήσεις που μπορεί να έχετε γύρω από αυτή την τεχνική.

Γιατί να αλλάξω τον ιστότοπό μου στο RWD;

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

Με το Responsive Design μπορείτε να δημιουργήσετε ένα σχέδιο και αυτόματα θα προσαρμοστεί ανάλογα με το μέγεθος της οθόνης της κινητής συσκευής. Αυτή η προσέγγιση προσφέρει πολλά πλεονεκτήματα:

  • Εξοικονόμηση χρόνου και χρημάτων, καθώς δεν χρειάζεται να διατηρείτε ξεχωριστές ιστοσελίδες για επιτραπέζιους υπολογιστές και κινητά τηλέφωνα.
  • Το Responsive Design είναι καλό για το SEO (ταξινόμηση αναζήτησης) του ιστότοπού σας, καθώς κάθε σελίδα του ιστότοπού σας θα έχει μια μοναδική διεύθυνση URL και έτσι διατηρείται ο χυμός Google. Δεν χρειάζεται να ανησυχείτε για καταστάσεις στις οποίες μερικοί ιστότοποι συνδέονται με τον ιστότοπό σας για κινητά, ενώ άλλοι συνδέονται με τον ιστότοπό σας.
  • Οι αναφορές σας στο Google Analytics θα δώσουν μια καλύτερη εικόνα για τη χρήση του ιστότοπού σας, δεδομένου ότι τα δεδομένα από χρήστες κινητών και υπολογιστών επιφάνειας εργασίας θα ενοποιηθούν.
  • Το ίδιο ισχύει και για τα στατιστικά στοιχεία κοινωνικής ανταλλαγής (Facebook Likes, Tweets, +1), αφού οι εκδόσεις κινητών και επιτραπέζιων υπολογιστών των ιστοσελίδων σας θα έχουν την ίδια διεύθυνση URL.
  • Τα ευαίσθητα σχέδια είναι ευκολότερα συντηρητικά, καθώς δεν εμπλέκουν στοιχεία του διακομιστή. Απλά πρέπει να τροποποιήσετε το υποκείμενο CSS μιας σελίδας για να αλλάξετε την εμφάνιση (ή τη διάταξη) της σε μια συγκεκριμένη συσκευή.

Τι πρέπει να γνωρίζω για να ξεκινήσω με το Responsive Design;

Το Responsive Design είναι καθαρό HTML και CSS. Δημιουργείτε κανόνες στο CSS που αλλάζουν στυλ ανάλογα με το μέγεθος της οθόνης της συσκευής του χρήστη.

Για παράδειγμα, μπορείτε να γράψετε έναν κανόνα που λέει ότι εάν το μέγεθος οθόνης ενός χρήστη είναι μικρότερο από 320 pixel, δεν εμφανίζεται η πλαϊνή γραμμή ή αν το μέγεθος της οθόνης είναι μεγαλύτερο από 1920 pixels (επιφάνεια εργασίας ευρείας οθόνης), αυξήστε το μέγεθος γραμματοσειράς του σώματος κείμενο σε 15px.

Πώς μπορώ να ελέγξω αν ένας συγκεκριμένος ιστότοπος χρησιμοποιεί το Responsive Design;

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

Αν πάω με την προσέγγιση Responsive Design, θα λειτουργήσει ο ιστότοπός μου με παλαιότερα προγράμματα περιήγησης;

Κυρίως ναι. Το RWD χρησιμοποιεί ερωτήματα μέσων CSS3 και HTML5 (για καλύτερη σημασιολογία) που δεν υποστηρίζονται σε παλαιότερες εκδόσεις του IE. Ωστόσο, υπάρχουν λύσεις βασισμένες στη JavaScript - answer.js και εκσυγχρονισμός για παράδειγμα - που φέρνουν τη δύναμη του CSS3 και του HTML5 σε παλαιότερα προγράμματα περιήγησης συμπεριλαμβανομένου του IE6.

Μήπως το Responsive Design παίζει όμορφα με τα διαφημιστικά δίκτυα όπως το Google AdSense;

Αν χρησιμοποιείτε διαφημίσεις στον ιστότοπό σας, θα πρέπει να επιλέξετε προσεκτικά τις μορφές, επειδή ευρείες μονάδες (όπως το leaderboard 728 × 60 εικονοστοιχείων) ενδέχεται να μην ταιριάζουν σε μια οθόνη κινητής τηλεφωνίας 320px. Προτιμώ να χρησιμοποιώ τυπικές ορθογώνιες μονάδες (όπως 300x250), καθώς προσαρμόζονται εύκολα στις οθόνες smartphone και στους επιτραπέζιους υπολογιστές με ευρεία οθόνη.

Υπάρχουν χιλιάδες κινητές συσκευές. Τι ψηφίσματα οθόνης πρέπει να υποστηρίξει ο ανταποκρινόμενος ιστότοπός μου;

Θα προτείνω να ορίσετε σημεία διακοπής για τουλάχιστον τα ακόλουθα παράθυρα προβολής σε CSS3 Mediaqueries - 320px (iPhone τοπίο), 480 px (iPhone πορτραίτο), 600px (Android Tablets), 768px (iPad + ~ Galaxy Tabs) και 1024px επιτραπέζιους υπολογιστές).

Πώς μπορώ να ξεκινήσω με το Responsive Web Design; Οποιαδήποτε καλή tutorials;

Εδώ είναι οι ηλεκτρονικοί πόροι που θα σας βοηθήσουν να ξεκινήσετε:

Ιστοσελίδες: Net Magazine, Smashing Magazine, CSS Tricks και Wall Designer Web

Video Tutorials: YouTube, Net Tuts

Παρουσιάσεις: Καταστρώματα του PowerPoint

Podcasts: Shop Talk, 5by5 Web Show και η βιομηχανία

Twitter: @RWD, @NetMag και @SmashingMag

Ποια είναι τα μειονεκτήματα της χρήσης ευαίσθητου σχεδιασμού;

  • Επιπλέον κιλοβάτες στην ιστοσελίδα σας, καθώς θα πρέπει να κατεβάσουν στυλ CSS και αρχεία JavaScript που διαφορετικά δεν ήταν απαραίτητα.
  • Εικόνες. Δεν θέλετε να προσφέρετε εικόνες υψηλότερης ανάλυσης στον ιστότοπό σας για κινητά, αλλά αυτό είναι δύσκολο να επιτευχθεί σε ανταποκρινόμενο σχεδιασμό (εκτός εάν καταφύγετε σε μια λύση διακομιστή όπως η Adaptive Images και η Sencha.io).
  • Προσπάθειες για να προσθέσετε ένα απαντητικό επίπεδο στον υπάρχοντα ιστότοπό σας. Μερικές φορές έχει πιο νόημα να ξεκινάτε από το μηδέν παρά να κάνετε την υπάρχουσα ιστοσελίδα σας σταθερού πλάτους ρευστό.

Μπορεί επίσης να σας αρέσει: Ανταπόκριση Layouts Free EBOOK

Να εχετε μια ομορφη μερα!

Bradley Νίκαια,
Διαχείριση περιεχομένου στο ClickHelp.com - το καλύτερο ηλεκτρονικό εργαλείο τεκμηρίωσης για τους πωλητές του SaaS