Σχεδιασμός ιστοσελίδων για smartphones, tablets, laptops και desktops: τo Responsive Design δίνει τη λύση!

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

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

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

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

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

rd2

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

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

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

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

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

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

rd3

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

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

Στόχος είναι η δημιουργία μίας «έξυπνης» ιστοσελίδας η οποία θα προσαρμόζει το μέγεθος και τα βασικά χαρακτηριστικά της (μενού, εικόνες, κείμενο κ.λπ.) ανάλογα με τις διαστάσεις της οθόνης της συσκευής του χρήστη!

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

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

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

rd4

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

rd5

 

  • Το βασικότερο πλεονέκτημα είναι ότι έχουμε μια ιστοσελίδα η οποία συμπεριφέρεται σαν 2 σε 1. Μπορούμε να επισκεφθούμε μια ιστοσελίδα χωρίς πρόβλημα είτε από έναν προσωπικό υπολογιστή, είτε από μια κινητή συσκευή, έχοντας την καλύτερη δυνατή εμπειρία πλοήγησης.
  • Analytics: Μπορούμε να έχουμε μια πλήρη αναφορά των επισκέψεων της ιστοσελίδας μας για διαφορετικού είδους συσκευές.
  • Σύνδεσμοι: Κοινοί σύνδεσμοι (links) που έχουμε στην ιστοσελίδα ανεξάρτητα από το είδος της συσκευής.
  • SEO: Ένα url συμπεριλαμβάνει όλα τα links που θέλουμε να έχουμε.
  • Μεγαλύτερη ευκολία στη συντήρηση και μείωση των σφαλμάτων. Είναι καλύτερα να συντηρείς μία ιστοσελίδα, παρά τρεις (μία για προσωπικό υπολογιστή, μία για tablet και μία για κινητό τηλέφωνο).
  • Μείωση του χρόνου σχεδίασης της δομής της ιστοσελίδας για όσον αφορά διαφορετικές συσκευές.

rd6

Η τεχνική του responsive web design πλέον αρχίζει και χρησιμοποιείται ευρέως, διότι είναι η απαραίτητη και ενδεδειγμένη λύση για αυτούς που θέλουν η ιστοσελίδα τους να είναι συμβατή σε κάθε browser και σε κάθε συσκευή. Έτσι μπορούμε να αυξήσουμε τις επισκέψεις της σελίδας μας, να βελτιστοποιήσουμε την εμπειρία πλοήγησης των επισκεπτών μας και τελικά να αξιοποιήσουμε πλήρως την ιστοσελίδα μας. Γενικότερα, η σχεδίαση μιας ιστοσελίδας η οποία βασίζεται στην τεχνική του responsive web design δεν είναι εύκολη. Οι designers και οι developers θα πρέπει να γνωρίζουν πολύ καλά HTML, CSS και Javascript (αλλά και PHP5 και MySQL5) και φυσικά να έχουν πολύ καλή συνεργασία μεταξύ τους, ώστε να επιτευχθεί το επιθυμητό αποτέλεσμα. Τέλος, το responsive web design είναι η κυρίαρχη τάση στο χώρο της σχεδίασης και κατασκευής ιστοσελίδων και θα συνεχίσει να χρησιμοποιείται ολοένα και περισσότερο.

Responsive Ιστοσελίδες
Επεκτείνετε τις δραστηριότητες σας με μία σύγχρονη, φιλική προς τον χρήστη ιστοσελίδα!

rd7

Η χρήση φορητών συσκευών για την πλοήγηση στο διαδίκτυο αυξάνεται με ραγδαίους ρυθμούς. Ωστόσο, οι συντριπτική πλειοψηφία (98 με 99%) των υφιστάμενων ιστοσελίδες δεν είναι προσαρμοσμένες για την εξέλιξη αυτή. Οι φορητές συσκευές έχουν μικρότερη οθόνη και εμφανίζουν με διαφορετικό τρόπο το περιεχόμενο της ιστοσελίδας. Καθώς το μέγεθος της οθόνης είναι διαφορετικό για κάθε τύπο συσκευής είναι σημαντικό ένα website να έχει τη δυνατότητα προσαρμόζεται. Η λύση ονομάζεται responsive design. Το responsive design δίνει τη δυνατότητα σε ένα website να προσαρμόζει πως θα εμφανίζεται το περιεχόμενο ανάλογα με τις ανάγκες του επισκέπτη και της συσκευής που χρησιμοποιεί, όπως το μέγεθος της οθόνης και την ισχύ του επεξεργαστή της.

Παράδειγμα: Το ίδιο website εμφανίζεται σε μία στήλη σε ένα smartphone, σε tablet εμφανίζεται σε δύο στήλες, ενώ σε υπολογιστές desktop και laptop εμφανίζεται σε τρεις στήλες.

Γιατί να επιλέξετε το responsive design?

  • Ένας στους τρεις χρήστες επισκέπτονται το website σας από smarthphone ή tablet και μέρα με τη μέρα το ποσοστό αυτό αυξάνεται ραγδαία.
  • Κάθε επίσκεψη στο website σας πρέπει να ισοδυναμεί με μία θετική εμπειρία.
  • Το responsive design προσαρμόζεται σε όλες τις συσκευές, υπάρχουσες και μελλοντικές.
  • Οι ιστοσελίδες με responsive design είναι εξ’ ορισμού πιο φιλικές στο S.E.O. (μηχανές αναζήτησης)
  • Ο αλγόριθμός της Google ευνοεί τα mobile friendly websites στα αποτελέσματα αναζήτησης.

Στην Azimuth Technologies σχεδιάζουμε εξ’ ορισμού responsive websites και e-shops ώστε κάθε επισκέπτης ανεξάρτητα από τη συσκευή που χρησιμοποιεί να απολαμβάνει την ίδια εξαιρετική εμπειρία που προσφέρουν οι ιστοσελίδες που σχεδιάζουμε. Με mobile friendly design οι ιστοσελίδες των πελατών μας εμφανίζονται ψηλότερα στα αποτελέσματα αναζήτησης. Επικοινωνήστε μαζί μας για ένα responsive website!

Γιατί να κάνετε την ιστοσελίδα σας φιλική προς κινητά!
Σίγουρα έχετε ακούσει τον όρο “Responsive Website”, ο οποίος έχει πλέον καθιερωθεί στο χώρο του web design. Τι είναι όμως ένα responsive website;

«Responsive» είναι αυτό «που ανταποκρίνεται» και ένα responsive website είναι μια ιστοσελίδα που είναι σχεδιασμένη για να «ανταποκρίνεται» σε κάθε οθόνη και browser, παρουσιάζοντας πάντα  μία ομοιόρφη εικόνα.

Επομένως  όταν κατασκευάζουμε μία responsive ιστοσελίδα, το αποτέλεσμα που περιμένουμε είναι ένα  website που δείχνει το ίδιο, ανεξάρτητα από το αν το επισκεπτόμαστε από desktop, tablet ή κινητό και ανεξάρτητα από το αν χρησιμοποιούμε Mozilla, Chrome, Internet Explorer ή οποιοδήποτε άλλο browser.

Πόσο χρήσιμη είναι μια responsive ιστοσελίδα;

Την απάντηση δίνουν τα στατιστικά:
Το 2012, σύμφωνα με έρευνα της Google, ο αριθμός  των χρηστών κινητών τηλεφώνων στην Ελλάδα ξεπέρασε τον ίδιο τον πληθυσμό της, φτάνοντας το 136%! Από αυτούς, το 40% είχε πρόσβαση στο internet μέσω της συσκευής τους.

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

Ταυτόχρονα, άλλες έρευνες δείχνουν ότι μέχρι τo 2015 η mobile πρόσβαση στο internet θα ξεπεράσει αυτήν που γίνεται από PCs , ενώ ήδη τo 50% των αναζητήσεων στις μηχανές αναζήτησης γίνονται την ώρα που κάποιος κινείται.

Καταλαβαίνουμε ότι η χρήση του διαδικτύου μέσω κινητών βρίσκεται πλέον σε ώριμο στάδιο και οι χρήστες είναι πολύ πιο απαιτητικοί, με τo 60% αυτών να περιμένουν τη σελίδα που επισκέπτονται να είναι προσαρμοσμένη για το κινητό τους και να φορτώνει σε λιγότερο από 3 δευτερόλεπτα!

Το responsive web design δεν είναι απλά μια «μόδα που θα περάσει», αλλά το μέλλον στην κατασκευή ιστοσελίδων

Βλέπουμε λοιπόν ότι το responsive web design δεν είναι απλώς μία «μόδα» που ήρθε για να φύγει. Είναι μία δυνατή απάντηση σε μία ανάγκη που δημιουργήθηκε από τις εξελίξεις στο χώρο της τεχνολογίας και  που θα συνεχίσει να εξελίσσεται, όσο δημιουργούνται mobile συσκευές που επιτρέπουν πρόσβαση στο Internet.

Οι ευκαιρίες που έρχονται μαζί με τη δημιουργία μιας responsive ιστοσελίδας είναι πολλές!

Κάποιες από αυτές είναι:
– Ευκαρία να ξεπεράσετε τον ανταγωνισμό σας προσφέροντας στους επισκέπτες σας ένα site φιλικό προς κινητές συσκευές και παρουσιάζοντας μία εταιρεία απολύτως  προσμαρμοσμένη στην εποχή και τις απαιτήσεις των πελατών της.
– Ευκαιρία να προσεγγίσετε το σύνολο των χρηστών του Internet από όπου κι αν προέρχονται
– Καλύτερο branding

Από την άλλη μεριά, υπάρχουν και κάποιες σημαντικές παράμετροι που πρέπει να υπολογίσουμε προτού προχωρήσουμε στην κατασκευή μιας responsive ιστοσελίδας, όπως:

– Μια καλή responsive ιστοσελίδα δεν είναι εύκολο να κατασκευαστεί. Η διαδικασία βελτιστοποίησης  είναι πολύπλοκη και μεγάλη μόνο για τα κινητά τηλέφωνα, πόσο μάλλον για όλες τις φορητές συσκευές.
– Είναι δύσκολο να τεστάρεις ένα responsive website, λόγω του ότι υπάρχουν εκατοντάδες διαφορετικές οθόνες.
– Για τη δημιουργία ενός responsive website απαιτείται εξειδικευμένη ομάδα developers, η οποία δεν είναι εύκολο να βρεθεί και να συντονιστεί.
– Το κόστος δημιουργίας είναι αυξημένο, εξαιτίας της πολυπλοκότητας της διαδικασίας.
– Το responsive design δεν είναι το μόνο που απαιτεί ο σημερινός χρήστης του διαδικτύου για να μείνει ευχαριστημένος. Σωστό SEO, άψογη παρουσία στα social media ή ειδικές εφαρμογές είναι μόνο λίγα από αυτά που ζητάνε οι επισκέπτες σας.

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

ΠΡΟΣΦΟΡΑ!!!
Η δική σας ιστοσελίδα είναι responsive;
Είμαστε στη διάθεση σας για να μεταφέρουμε τη διαδικτυακή σας παρουσία στο μέλλον, δηλαδή στο responsive web design. Μη χάνετε άλλο χρόνο, επικοινωνήστε μαζί μας και όλα τα άλλα αφήστε τα σε εμάς! Θα ανακατασκευάσουμε το υφιστάμενο website σας, χρησιμοποιώντας responsive σχεδιασμό και κρατώντας όλα τα στοιχεία που εσείς επιθυμείτε. Με ελάχιστο κόστος, συμβολικό (από 90 ευρώ) θα σας φέρουμε στο μέλλον του internet. Δοκιμάστε τις υπηρεσίες μας, εμπιστευθείτε μας και μόνο όταν έχετε το αποτέλεσμα που επιθυμείτε πληρώστε μας. Ή πληρώστε μας όταν κι εφόσον θα έχετε την οικονομική δυνατότητα. Γιατί η AZIMUTH Technologies κάνει πράξη την χιλιοειπωμένη στις μέρες μας φράση «Η κρίση απαιτεί αλληλεγγύη«. Σας ευχαριστούμε θερμά την εμπιστοσύνη σας τα τελευταία 20 χρόνια (από το 1997) που δραστηριοποιούμαστε στο χώρο της τεχνολογίας και του internet.

 

Κράτα το

Κράτα το

Κράτα το