Σχεδιασμός ιστοσελίδων για smartphone, tablet και desktop: τo Responsive Design δίνει την λύση!

Υποβλήθηκε από pointblank την Τρί, 10/18/2011 - 14:52.

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


Γράφημα της Morgan Stanley

Καθώς ο διαθέσιμος χώρος στην οθόνη ενός smartphone είναι αρκετά μικρότερος από την οθόνη ενός desktop υπολογιστή, η παρουσίαση μιας ιστοσελίδας σχεδιασμένης για μεγάλες αναλύσεις (οθόνες laptop και desktop) είναι συχνά προβληματική στην οθόνη ενός smartphone ή tablet. Επίσης μην ξεχνάμε τον διαφορετικό τρόπο πλοήγησης: μια συσκευή αφής δεν έχει ποντίκι αλλά χρησιμοποιεί τα δάχτυλα, που συχνά δυσκολεύονται να επιλέξουν με ακρίβεια μικρά στοιχεία πλοήγησης (συνδέσμους σε κείμενο, μικρά μενού κλπ). Είναι σαφές πως μια εικαστική και λειτουργική προσέγγιση που λειτουργεί άριστα σε desktop περιβάλλον συχνά έχει σοβαρά ζητήματα χρηστικότητας σε κινητές συσκευές.

Ξεχωριστές ιστοσελίδες για κινητά: μια σφηκοφωλιά


Μια συνήθης προσέγγιση στις προκλήσεις των κινητών συσκευών είναι να σχεδιάζονται διαφορετικές ιστοσελίδες που απευθύνονται σε διαφορετικές συσκευές. Συχνά μια εταιρία έχει ένα website για desktop, άλλο για iPhones, άλλο για iPad (δείτε την ιστοσελίδα της Ελευθεροτυπίας σε desktop http://www.enet.gr/ και mobile έκδοση http://mobile.enet.gr/). Τι γίνεται όμως με τις νέες συσκευές που εμφανίζονται στην αγορά; Κάθε νέα συσκευή, όπως τα Blackberry, το Kindle Fire και πολλά άλλα tablets ή μικρά netbooks, βγαίνει με διαφορετικές αναλύσεις και δυνατότητες. Ακόμη και αν κάποιος έμπαινε στον κόπο να σχεδιάσει δέκα ή είκοσι διαφορετικά sites που καλύπτουν τις παρούσες συσκευές, σίγουρα μέσα στα επόμενα χρόνια θα παρουσιαστούν πολλά νέα μοντέλα με διαφορετικές αναλύσεις και δυνατότητες.

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

Η προσέγγιση του Responsive Design


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

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

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

Παράδειγμα του Ethan Marcotte για το A List Apart: http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html

Palantir.net

Simon Collison

Robot or Not

Τι σημαίνει το να σχεδιαστεί μια ιστοσελίδα με Responsive Design


Η τεχνική του Responsive Design συνδυάζει τεχνολογίες αιχμής μαζί με μια συγκεκριμένη γραφιστική προσέγγιση και αρχιτεκτονική της πληροφορίας. Σίγουρα, η πολυπλοκότητα του να σχεδιαστεί μια ιστοσελίδα ως responsive είναι αυξημένη σε σχέση με τον παραδοσιακό διαδραστικό σχεδιασμό, είναι όμως σίγουρα μικρότερη από το να υλοποιηθούν πολλαπλές ιστοσελίδες.

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

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

Μέσα στους επόμενους μήνες θα σας παρουσιάσουμε την νέα έκδοση της ιστοσελίδας μας βασισμένη σε responsive design. Θα ακολουθήσουν μια σειρά από blog posts που θα αναλύσουμε την διαδικασία σχεδιασμού και ανάπτυξης, δίνοντας περισσότερες τεχνικές λεπτομέρειες για τους ενδιαφερόμενους.

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

__________________

Point Blank
Σχεδιασμός & Ανάπτυξη Διαδραστικών Εφαρμογών
www.pointblank.gr

Twitter: www.twitter.com/pointblank_gr
Facebook: www.facebook.com/pointblank.gr

Alan_Bond
Εικόνα: Alan_Bond
Παρ, 10/21/2011 - 08:02
>!

Πολύ καλό ποστ, άκρως επαγγελματικό.
Σας αντιπροσωπεύει!

gtrianta
Παρ, 10/21/2011 - 11:35

Το responsive design συμφωνώ πως είναι ίσως μια από τις σημαντικότερες εξελίξεις στον χώρο.

Ωστόσο να προσθέσω κάτι που τα παιδιά αναφέρουν αλλά λίγο βιαστικά: η ουσία του responsive design βρίσκεται στις δυνατότητες που δίνει στον σχεδιαστή να διαχειριστεί τα διαφορετικά context of use του κάθε μέσου. Με άλλα λόγια, το πλαίσιο (τις περιβάλλουσες συνθήκες) μέσα στο οποίο λειτουργεί η κάθε συσκευή και τις διαφορετικές ανάγκες και ιδιαιτερότητες που αυτό το πλαίσιο δημιουργεί.

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

Προφανώς δεν θα κάνω το ίδιο για την ίδια έκδοση του site για κινητό. Και ο λόγος δεν είναι μονάχα το μικρό μέγεθος της οθόνης. Ο λόγος είναι ότι αλλάζει το context of use του μέσου. Η ερώτηση που πρέπει να κάνω είναι: Γιατί να μπει ένας χρήστης στην σελίδα της παράστασης από το κινητό του; Οι ενδεχόμενες απαντήσεις είναι γιατί ενδεχομένως να είναι στο δρόμο ή/και να έρχεται και να μην θυμάται το που βρίσκεται η παράσταση, ή να μην θυμάται την ώρα που ξεκινάει η παράσταση ή να θέλει να δει το τηλέφωνο του θεάτρου για να ρωτήσει η να κάνει μια κράτηση εισιτηρίου. Προφανώς λοιπόν η δομή και η οργάνωση της πληροφορίας μου στην desktop έκδοση του website μου είναι παντελώς άχρηστη στο εν λόγω πλαίσιο. Αυτό που πρέπει να κάνω είναι ενδεχομένως να δείξω στην πρώτη σελίδα του website όταν δω ότι κάποιος μπαίνει από κινητό κατευθείαν αυτές τις 3 πληροφορίες (χώρος, χρόνος και τηλέφωνο θεάτρου) και τίποτα άλλο (ή τουλάχιστον να κρύψω τις υπόλοιπες πληροφορίες σε ένα δεύτερο επίπεδο). Και οι τεχνικές του responsive design μου δίνουν έναν απίστευτα εύκολο τεχνικά τρόπο να το κάνω.

Εκεί λοιπόν θεωρώ πως βρίσκεται η ουσία του responsive design. Και η ευκολία με την οποία μπορώ να το κάνω τεχνικά δεν σημαίνει αυτόματα πως είναι και εύκολη διαδικασία σχεδιαστικά. Πλέον το σχεδιαστικό μου πρόβλημα περιπλέκεται με την αναζήτηση απαντήσεων σε (ουσιαστικά) ερωτήματα που αφορούν περισσότερα του ενός context of use. Αυτό όμως κάνει την όλη σχεδιαστική διαδικασία πιο ενδιαφέρουσα Smile

gtrianta
Παρ, 10/21/2011 - 11:36

Θα βρείτε ένα αντίστοιχο παράδειγμα στο βιβλίο που αναφέρουν και τα παιδιά του Ethan Marcotte της A List Apart.

HEGRADE - Hellenic Graphic Design Community 2005 - 2011
Powered by Drupal. Development and Hosting provided by Apogee Information Systems