Μενού

10 λόγοι για να κατασκευάσω την ιστοσελίδα μου με “Responsive Web Design”Back

30 Μαρ 2013
Written by iframe

Όλοι χρησιμοποιούμε παραπάνω από μια συσκευές για περιήγηση στο διαδίκτυο. Μέχρι πριν λίγα χρόνια κάθε ιστοσελίδα έπρεπε να προγραμματίσει με διαφορετικά για κάθε ανάλυση οθόνης είτε για κινητό (web app) ή για tablet pc ή για desktop. Το κόστος ήταν αρκετά μεγάλο αλλά πέρα από αυτό ήταν δύσκολο να γίνει σωστή βελτιστοποίηση στις μηχανές αναζήτησης (SEO).

Η λύση

Η κοινότητα του web design δεν άργησε να βρει την λύση και από τον Μάιο του 2010 υιοθετήθηκε η ονομασία “Responsive Web Design”. Με απλά λόγια η ιστοσελίδα μπορεί και ανταποκρίνεται στην ανάλυση της κάθε οθόνης. Οι τεχνικές που χρησιμοποιούνται μέσω προγραμματισμού δίνουν “ελαστικότητα” στα διάφορα στοιχεία της ιστοσελίδας όπως είναι οι φωτογραφίες, βίντεο, μενού κ.α. με αποτέλεσμα η ιστοσελίδα να ανταποκρίνεται ανάλογα στην ανάλυση της οθόνης.

Τα “συστατικά” του RWD

Τα τρία βασικά στοιχεία του responsive web design που αποτελούν και τον κορμό του είναι:

1. CSS3 Media Queries: η ιστοσελίδα αναγνωρίζει το μέγεθος κάθε οθόνης και να χρησιμοποιήσει το αντίστοιχο CSS αρχείο.

2. Fluid Grid Layout: μας δίνει την δυνατότητα να τοποθετούνται όλα τα στοιχεία της ιστοσελίδας στο σωστό μέγεθος χωρίς να κάνουμε scroll. Π.χ. η ιστοσελίδα μας μετατρέπεται σε mobile web app με μαγικό τρόπο. Δοκιμάστε να επισκεφθείτε την ιστοσελίδα μας www.iframe.gr από το κινητό σας τηλέφωνο και θα το δείτε στην πράξη.

3. Fluid Image Scaling: δίνει ελαστικότητα στις εικόνες και τις τοποθετεί με την σωστή ανάλυση, λειτουργεί συμπληρωματικά με το Fluid Grid Layout μέσω CSS3.

10 λόγοι για να κατασκευάσω την ιστοσελίδα μου με “Responsive Web Design”

1. Η ιστοσελίδα έχει αποτελεσματικότερη απεικόνιση σε desktop PC, σε κινητά smartphone και σε tablet χωρίς περιορισμό στην ανάλυση της οθόνης.

2. Γιατί το λέει η Google!

“Sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device. This is Google’s recommended configuration.” 

3. SEO, ποιο αποτελεσματική βελτιστοποίηση μηχανών αναζήτησης. Με ένα url εξυπηρετούμε όλες τις συσκευές. (ότι λέει η google δηλαδή)

4. Η ιστοσελίδα μπορεί να γίνει share μέσα από τα κοινωνικά δίκτυα ποιο εύκολα. Φανταστείτε να γίνεται share ένα url mobile σε ένα χρήστη που χρησιμοποιεί κοινό υπολογιστή, όλα θα φαίνονται λάθος. Με το responsive web design δεν θα έχετε κανένα πρόβλημα.

5. Η μηχανές αναζήτησης μπορούν να κάνουν index την ιστοσελίδα σας εύκολα, χρησιμοποιώντας ένα url.

6. Εύρος αλλαγών στον σχεδιασμό ανάλογα με την συσκευή

7. Οικονομικότερη και ταχύτερη λύση έναντι των web apps, ο χρήστης δεν χρειάζεται να κάνει download.

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

9. Γιατί είναι το απόλυτο trend του web design

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

*11 Μην ξεχνάτε ότι σε πολύ λίγο καιρό η τηλεόραση θα είναι ένα ακόμη μέσο που το διαδίκτυο θα έχει ηγετικό ρόλο. Η ιστοσελίδα σας πρέπει να έχει λόγο και εκεί!

Συμπέρασμα

Η κατασκευή μιας ιστοσελίδας με Responsive Web Design είναι δύσκολη υπόθεση και χρειάζεται πολλές γνώσεις τόσο σχεδιαστικά όσο και στον προγραμματισμό. Παρόλα αυτά το responsive web design φαίνεται να είναι η λύση για όσα ξέρουμε για το διαδίκτυο σήμερα. Μια ιστοσελίδα πρέπει να εξυπηρετεί τους χρήστες των κινητών τηλεφώνων, να είναι γρήγορη και φιλική στις μηχανές αναζήτησης. Βέβαια κάθε project είναι ξεχωριστό αλλά με το RWD καλύπτουμε σχεδόν όλες τις σύγχρονες ανάγκες μιας ιστοσελίδας.

Παραδείγματα έργων μας που χρησιμοποιήσαμε Responsive Web Design

 

Stefanos Evangelou

Marketing Specialist

 

Georgios Chalkidis

Communication Designer

Κατασκευή Ιστοσελίδων

Share it: