Σε παλαιότερο άρθρο παρουσιάσαμε την τεχνική “responsive σχεδίαση” και αναλύσαμε τα πλεονεκτήματα της! Μιας και αναμφισβήτητα, η responsive σχεδίαση είναι μία από τις πλέον ανερχόμενες τάσεις στη σχεδίαση ιστοτόπων, αποφασίσαμε να ξεκινήσουμε μια σειρά άρθρων αφιερωμένα σε αυτή την τεχνική, καθώς και στις νέες τεχνολογίες που αποτελούν τα “συστατικά του responsive design”.
Πριν όμως μιλήσουμε για τις νέες τεχνολογίες, την HTML5, την CSS3, τα media queries κ.τ.λ., θα δούμε πως ένας προγραμματιστής μπορεί να ελέγξει την responsive σχεδίαση του ιστοτόπου που κατασκευάζει.
Πολύ σημαντική διαδικασία της responsive σχεδίασης, είναι ο έλεγχος του ιστότοπου σε διάφορες συσκευές με διαφορετικές αναλύσεις και μεγέθη οθονών. Πρακτικά θα ήταν σχεδόν αδύνατο ένας προγραμματιστής να έχει στην κατοχή του συσκευές που καλύπτουν όλο το εύρος αναλύσεων και οθονών, κάτι που θα καθιστούσε τη διαδικασία ελέγχου μη εφικτή. Μεγάλο μέρος της διαδικασίας ελέγχου όμως, μπορεί να επιτευχθεί, απλά αυξομειώνοντας το μέγεθος του παραθύρου του περιηγητή, καθώς οι ιστότοποι που έχουν κατασκευαστεί με την τεχνική της responsive σχεδίασης, προσαρμόζονται δυναμικά και άμεσα σε κάθε διάσταση και προσανατολισμό (orientation) οθόνης. Την παραπάνω χειροκίνητη μέθοδο, έρχονται να αυτοματοποιήσουν διάφορα εργαλεία που έχουν αναπτυχθεί και μπορούν είτε να εγκατασταθούν στον περιηγητή με τη μορφή προσθέτου, είτε να χρησιμοποιηθούν σαν εξωτερικά εργαλεία.
Τα σημαντικότερα πρόσθετα είναι τα εξής:
1) Viewport Resizer: Υλοποιήθηκε από τον Malte Wassermann και υποστηρίζει όλους τους γνωστούς, σύγχρονους περιηγητές (Chrome, Firefox, Safari, Opera). Λειτουργεί με το πάτημα ενός κουμπιού, που στην ουσία το προσθέτει στη μπάρα αγαπημένων του περιηγητή. Οι δυνατότητες του είναι απεριόριστες, καθώς προσφέρει στον προγραμματιστή τη δυνατότητα να ελέγξει τον responsive ιστότοπο στις πιο κλασσικές αναλύσεις, να επιλέξει την ανάλυση που τον ικανοποιεί, ακόμα και να δει τον ιστότοπο σε παράθυρο που αυξομειώνεται αυτόματα, ελέγχοντας έτσι πως συμπεριφέρεται σε κάθε πιθανή ανάλυση.
2) Firesizer: Υποστήρίζει μόνο τον περιηγητή Firefox και δίνει τη δυνατότητα προσαρμογής του παραθύρου σε συγκεκριμένες αναλύσεις (640×480, 800×600, 1024×768), καθώς και τη δυνατότητα επιλογής ανάλυσης ανάλογα με τις ανάγκες του προγραμματιστή.
3) Cybercrab: Οι δυνατότητες του είναι αντίστοιχες με τις δυνατότητες του Viewport Resizer. Λειτουργεί όμως σαν εξωτερικό εργαλείο (ιστοσελίδα) και όχι σαν πρόσθετο στον περιηγητή, κάτι που σημαίνει ότι για να χρησιμοποιηθεί, ο προγραμματιστής είναι υποχρεωμένος να πλοηγηθεί στην ιστοσελίδα του Cybercrab.
Αφήστε το σχόλιο σας