Σχεδίαση & κατασκευή ιστοσελίδας για τη σωστή προβολή της σε έξυπνες συσκευές

Μέχρι πρόσφατα οι ιστοσελίδες μπορούσαν να σχεδιαστούν και ν’ αναπτυχθούν σε ένα σταθερό πλάτος, για παράδειγμα 960px, με τη προσδοκία ότι οι επισκέπτες της ιστοσελίδας θα εβλέπαν τον ίδιο σχεδιασμό και θα είχαν την ίδια οπτική εμπειρία.

Το πρόβλημα

Η ραγδαία ανάπτυξη των έξυπνων συσκεύων. Η Apple με το λανσάρισμα του πρώτου iPhone έφερε και τον πρώτο σώστο τρόπο πλοήγησης στο διαδίκτυο μέσα από ένα smart phone. Κάπου εδώ όμως ξεκινάνε και τα προβλήματα γιτί οι μικρές οθόνες των κινητών τηλέφωνων και των tablets δεν μπορούν να παρουσιάσουν σωστά μια ιστοσελίδα με στεθερό πλάτος και το χειρότερο είναι οτι τα μικρά κουμπιά της πλοήγησης δύσκολα πατιούνται.

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

Η λύση

Ευτυχώς υπάρχει η λύση σ’ αυτό το συνεχώς διογκόμενο πρόβλημα και ονομάζεται responsive web design, (από τη λέξη respond που σημαίνει ανταπόκριση) ή στα ελληνικά σχεδίαση ιστοσελίδων με τη δυνατότητα τροποποίησης του εικαστικού τους ανάλογα με το που προβάλονται. Μάλλον είναι λίγο μεγάλος ο τίτλος, στην ουσία όμως κάνουν αυτό το πράγμα.

Ο σχεδιαστής της ιστοσελίδας μέσα από κάποιες τεχνικές καλείται να ορίσει και να σχεδιάσει το πως θα φαίνεται η ιστοσελίδα που σχεδιάζει στις μικρές οθόνες. Έτσι ο browser ένος κινητού τηλεφώνου για παράδειγμα, αντιλαμβάνεται ότι πρέπει να προβάλει διαφορετικά το περιεχόμενο της ιστοσελίδας και προσαρμόζει το layout στα δεδομένα που του έχει ορίσει ο web designer.

Το αποτέλεσμα

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

2017-05-23T15:25:32+00:00By |Categories: Web Design|Tags: , |