×

Ιστοσελίδα για Κινητά: Τι είναι το Responsive Web Design

Η Ιστοσελίδα για Κινητά ή αλλιώς το Responsive Web Design δεν είναι κάτι καινούργιο. Είναι όμως απαραίτητο σε όλα τα websites.

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

 


Σε τι διαφέρει ένα site που έχει Responsive Design από κάποιο που δεν έχει;

Στις αρχές του 1990 και σχεδόν για δύο δεκαετίες αργότερα, όλα τα websites κατασκευάζονταν για υπολογιστές. Αυτό σημαίνει πως είχαν τέτοια διάταξη και σχεδιασμό, που ήταν απολύτως εύχρηστα όταν ο χρήστης τα επισκεπτόταν από οποιοδήποτε pc ή laptop.

Όταν, προς τα μέσα της 1ης δεκαετίας του 2000 εμφανίστηκαν τα πρώτα smartphones, το σκηνικό άλλαξε ραγδαία. Τα websites που ήταν σχεδιασμένα για τους υπολογιστές, πλέον δεν ήταν εύχρηστα για τους χρήστες των κινητών. Γιατί όμως; Η απάντηση είναι σχετικά απλή: φανταστείτε ότι προσπαθείτε να χωρέσετε μία ζωγραφιά με πλάτος 35εκ. σε ένα κάδρο με το 1/5 του πλάτους του. Θα πρέπει ή να τσαλακώσετε τη ζωγραφιά ή να την κόψετε.

Ένα website σχεδιασμένο για υπολογιστές, σε ένα laptop φαίνεται ως εξής:

Website Building Portfolio Restaurant Laptop
Εικ. 1: Η αρχική σελίδα του website Manoli Canoli όπως φαίνεται από ένα laptop. (Πατήστε στην εικόνα για μεγέθυνση.)

Website χωρίς responsive design:

Αν δεν είχαμε σχεδιάσει την ιστοσελίδα για κινητά, στα smarphones θα φαινόταν κάπως έτσι:

Εικ. 2: Η αρχική σελίδα του website Manoli Canoli όπως θα φαινόταν αν δεν ήταν Responsive. (Πατήστε στην εικόνα για μεγέθυνση.)

Αν είχατε στα χέρια σας το κινητό της Εικόνας 2 και θέλατε να περιηγηθείτε στο site, πώς θα το κάνατε; Καταρχήν θα έπρεπε να κάνετε ζουμ ώστε να μπορέσετε να διαβάσετε το κείμενο, διότι η γραμματοσειρά αυτή είναι πολύ μικρή για την οθόνη του κινητού. Δεύτερον, θα έπρεπε να μετακινείτε τη σελίδα προς τα δεξιά ώστε να διαβάσετε τη συνέχεια της κάθε πρότασης και ξανά προς τα αριστερά ώστε να διαβάσετε την παρακάτω γραμμή. Παράλληλα θα έπρεπε να μετακινείτε τη σελίδα και προς τα κάτω, ώστε να δείτε και τις υπόλοιπες πληροφορίες. Θα έπρεπε να επαναλάβετε αυτές τις κινήσεις όσες φορές χρειαζόταν, για να βρείτε το μενού ή να διαβάσετε μία πρόταση ολόκληρη. Δε φαίνεται πολύ πρακτικό, έτσι δεν είναι;

Ιστοσελίδα για κινητά: 

Τί συμβαίνει όταν σχεδιάζουμε μία ιστοσελίδα για κινητά; Δείτε την Εικόνα 3 που ακολουθεί:

Εικ. 3: Η αρχική σελίδα του website Manoli Canoli όπως είναι στην πραγματικότητα: με Responsive Design. (Πατήστε στην εικόνα για μεγέθυνση.)

Στην Εικόνα 3 βλέπετε την αρχική σελίδα του website Manoli Canoli όπως είναι στην πραγματικότητα: Responsive. Σίγουρα παρατηρείτε κάποιες διαφορές στην εμφάνιση ανάμεσα στην Εικόνα 2 και την Εικόνα 3. Ας δούμε αναλυτικά τις διαφορές αυτές:

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

2. Το μενού αλλάζει και από οριζόντιο (βλ. Εικόνα 1)  έχει μετατραπεί σε μενού προσαρμοσμένο στα κινητά. Πού βρίσκεται; Στην πάνω δεξιά γωνία της ιστοσελίδας για κινητά. Το menu αυτό εμφανίζεται με 3 οριζόντιες γραμμές και σε κάποια websites βρίσκεται αριστερά ενώ σε άλλα δεξιά. Το hamburger menu, όπως ονομάζεται, χρησιμοποιείται  πλέον ακόμα και στις ιστοσελίδες για τον υπολογιστή.

Αν θέλετε να δείτε πώς είναι στη πραγματικότητα το συγκεκριμένο website από κινητό, επισκεφθείτε το Manoli Canoli Restaurant από το smrtaphone σας, πατώντας εδώ

 


Ιστοσελίδα για Κινητά: Τα πλεονεκτήματα του Responsive Design

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

Για οποιοδήποτε website, 2 είναι τα πιο σημαντικά: 
1. Να το βρίσκουν οι δυνητικοί πελάτες
2. Η ευχρηστία του. 

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

“Δε με ενδιαφέρει η εμφάνιση. Εφόσον το site δουλεύει, δεν θέλω να έχει Responsive Design.”

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

1. Πλέον 60% των επισκέψεων σε κάθε website πραγματοποιούνται σε κινητά ή tablets. Αν το website σας δεν έχει ιστοσελίδες για κινητά, αυτόματα αποκλείετε αυτούς τους χρήστες. Συνεπώς μειώνονται στο ελάχιστο οι πιθανότητες να έχετε πωλήσεις από κινητά και tablets.

2. Είναι ΔΩΡΕΑΝ. Κανένα website δεν είναι ολοκληρωμένο εάν δεν είναι responsive. Όλα τα websites που κατασκευάζουμε εμείς στη NODETRACK έχουν responsive design και δεν σας χρεώνουμε ούτε 1 λεπτό του ευρώ για αυτό.

3. Ενισχύει το SEO του website σας. Όταν κάποιος χρήστης πραγματοποιεί αναζήτηση από το κινητό του, η Google θα προτιμήσει να του εμφανίσει responsive websites.

4. Αυξάνει την παραμονή των επισκεπτών στο site σας, διότι είναι πολύ πιο εύχρηστο. Όταν ένας επισκέπτης μένει αρκετή ώρα στο website σας, βλέπει περισσότερες σελίδες και άρα αυξάνονται οι πιθανότητες να προκύψει πώληση.

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

Μήπως ήρθε η ώρα και για το δικό σας website να γίνει responsive;

Επικοινωνήστε μαζί μας για να συζητήσουμε μαζί πώς μπορούμε να βελτιώσουμε την παρουσία σας στο internet.