• 6930418488
  • Δευτέρα - Σάββατο: 9:00 - 21:00

Εντυπωσιακή σχεδίαση ιστοσελίδας ή δυναμική προώθηση ιστοσελίδας

Με αφορμή ένα κακόβουλο σχόλιο που γράφτηκε σε κάποιο άρθρο μου και αφορά  τις "σχεδιαστικές" ικανότητες της ομάδας μας, θέλω να σας πω τα εξής:Επιτυχημένος σχεδιασμός ιστοσελίδας
  • Η Art On Web προκειμένου να προσφέρει και οικονομικές προτάσεις, σε ορισμένες ιστοσελίδες που έχει κατασκευάσει έχει χρησιμοποιήσει  έτοιμα templates τα οποία όμως τα έχει τροποποιήσει κατάλληλα για να ικανοποιούν τις ανάγκες κάθε επιχείρησης και να προσφέρουν μία πρωτότυπη εμφάνιση στην ιστοσελίδα.
  • Ο τρόπος που γίνεται η ανάπτυξη της δομής κάθε ιστοσελίδας από την ομάδα μας είναι εξαιρετικός και αυτό φαίνεται από την παρακολούθηση του ποσοστού εγκατάλειψης (bounce rate) μέσω google analytics. Βλέπουμε, λοιπόν, ότι ο επισκέπτης κάθε ιστοσελίδας περιηγείται σε αυτή με απίστευτη ευκολία και βρίσκει γρήγορα αυτό που τον ενδιαφέρει.
  • Οι παραδοτέες ιστοσελίδες μας, είναι πάντα φιλικές προς τις μηχανές αναζήτησης, με αποτέλεσμα να λαμβάνουν αρκετά καλή θέση στην κατάταξη των μηχανών αναζήτησης χωρίς ιδιαίτερη προσπάθεια SEO.
  • Τις περισσότερες φορές δεν χρησιμοποιούμε εξεζητημένα και υπερβολικά γραφικά για να μην αυξήσουμε δραματικά το κόστος κατασκευής ιστοσελίδας.
  • Δίνουμε περισσότερη έμφαση στα καλογραμμένα, ενημερωτικά κείμενα καθώς και στην προώθηση της ιστοσελίδας και λιγότερη στον "εντυπωσιακό" σχεδιασμό αφού θέλουμε η ιστοσελίδα που κατασκευάζουμε να εμφανίζεται ψηλά στις μηχανές αναζήτησης και να φέρνει νέους  πελάτες στην επιχείρηση που ανήκει.

Την επόμενη φορά που θα επικοινωνήσει μαζί σας ένας νέος πελάτης που σας βρήκε από το internet, ρωτήστε τον:
Από που μας βρήκατε; Σας άρεσε η ιστοσελίδα μας;
Νομίζετε ότι θα απαντήσει ότι σας πήρε τηλέφωνο γιατί του άρεσε ο εκπληκτικός σχεδιασμός της ιστοσελίδας σας;
Όχι βέβαια!
Θα σας πει ότι σας βρήκε από το internet ψάχνοντας για ένα συγκεκριμένο προϊόν και πληκτρολογώντας κάποια συγκεκριμένη φράση.
Αν λοιπόν έχουν περάσει ήδη οι πρώτοι μήνες μετά την κατασκευή της ιστοσελίδας σας, για την οποία δώσατε ένα σεβαστό ποσό για να έχει μιά εντυπωσιακή εμφάνιση και εντούτοις βλέπετε ότι δεν σας φέρνει νέους πελάτες, αναρωτηθείτε το λόγο!

Σε ποιον θα αναθέσετε τη προώθηση της επιχείρησής σας;

Λοιπόν, σήμερα  θα σας πω μερικά πραγματάκια τα οποία δεν θα τα ακούσετε από άλλους "σύμβουλους SEO".
Αποφασίσατε να κάνετε την προώθηση της ιστοσελίδας σας και ακούτε από διάφορους γνωστούς σας όλες τις επικρατούσες απόψεις!Προώθηση ιστοσελίδας
  • Πάρε κάποιον με εμπειρία.
  • Κάντο μόνος σου δεν είναι δύσκολο.
  • Με 10 ευρώ θα αποκτήσεις 1000 backlinks.
Ας πάρουμε τα πράγματα από την αρχή και σας παρακαλώ να απαντήστε στα παρακάτω ερωτήματα:
  1. Ποιο είναι το αντικείμενο του site που θέλετε να προωθήσετε;
  2. Έχετε μεγάλο ανταγωνισμό;
  3. Θέλετε να αποκτήσετε καλή κατάταξη στις μηχανές αναζήτησης για πολλές λέξεις κλειδιά;
  4. Θέλετε καλή κατάταξη και σε μηχανές αναζήτησης του εξωτερικού;

Αν στο 1ο ερώτημα έχετε απαντήσει για παράδειγμα τουρισμός ή ηλεκτρονικό εμπόριο τότε σίγουρα και στα υπόλοιπα ερωτήματα η απάντησή σας θα είναι θετική.

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

Ξεκινήστε την προώθηση από την βελτίωση της δομής της ιστοσελίδας σας.
Κάντε εγγραφή στο Search Console της Google, περιμένετε λίγες μέρες μέχρι το bot της Google να περάσει από το site σας και διορθώστε όλες τις προτάσεις που θα σας γίνουν από την σελίδα Search Console.
Συνήθως τα προβλήματα εντοπίζονται σε διπλότυπους τίτλους και σε έλλειψη meta περιγραφών

Δημιουργήστε ένα blog.
Στο blog μπορείτε να γράφετε χρήσιμα άρθρα για τους αναγνώστες σας. Προσέξτε! Δεν θα γράφετε άρθρα για τις μηχανές αναζήτησης αλλά για τους επισκέπτες σας, οι οποίοι αν βρουν ενδιαφέρον το κείμενο σας θα σας ανταμείψουν με το διαμοιρασμό του στα social media ένα πολύ καλό στοιχείο  για την άνοδο της ιστοσελίδας σας.

Συνδέστε σωστά τις υποσελίδες σας
Αν ο επισκέπτης σας βρεθεί σε μία σελίδα του website σας βοηθείστε τον να μπορεί να οδηγηθεί εύκολα σε αυτό που ψάχνει.

Μην εμπιστεύεστε οποιονδήποτε θέλει να σας κάνει SEO.
Δεν εννοώ βέβαια εταιρεία ή ομάδα αλλά κάποιους επιτήδειους που προσφέρουν αρκετά backlinks για 5-10 ευρώ.
Το site σας θα επηρεαστεί αρνητικά και δυστυχώς θα αργήσει πάρα πολύ να επανέλθει στις θέσεις που είχε στις μηχανές αναζήτησης.

Σταματήστε αμέσως το SPAM.
Η εποχή που postαραμε σε blog ή σε άλλα sites μόνο και μόνο για να πάρουμε  backlinks προς το site μας έχει περάσει και δεν ξαναγυρνάει.


Συμπέρασμα

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

Η αξία του κειμένου στον σχεδιασμό της ιστοσελίδας σας

Μπορείς να φτιάξεις το καλύτερο site, το πιο λειτουργικό, χωρίς κανένα λάθος στον κώδικα, να ακολουθήσεις και να εφαρμόσεις κατά γράμμα κάθε τεχνική για SEO, να τρέξεις την πιο πετυχημένη και αποδοτική καμπάνια Pay per Click και να κάνεις σελίδα σε κάθε social media. Αρκεί όμως αυτό για να πετύχει η ιστοσελίδα τους στόχους που έχει βάλει η επιχείρηση; Που συνήθως είναι η αναγνωρισιμότητα της φίρμας-επιχείρησης (brand awareness) και η απόκτηση πιστής βάσης πελατών (customer loyalty). Η αξία του κειμένου στον σχεδιασμό της ιστοσελίδας σας

Ας τα πάρουμε όμως τα πράγματα από την αρχή. Όσο αναφορά το brand awareness, οι τεχνικές SEO μια καλή καμπάνια Pay per Click και η χρήση Social Media μπορούν να προσφέρουν τα μέγιστα ώστε ο κόσμος να βρει. να γνωρίσει και να επισκεφτεί την ιστοσελίδα της επιχείρησης και κατ’ επέκταση να γνωρίσει την προσφέρει η επιχείρηση. Δηλαδή το κομμάτι του brand awareness καλύπτεται από μια καλή στρατηγική Internet Marketing.

H απόκτηση πιστής πελατειακής βάσης είναι πιο πολύπλοκο ζήτημα. Ως σταθερή πελατειακή βάση, στο παρόν άρθρο, ορίζουμε τους επισκέπτες της ιστοσελίδας μιας επιχείρισης, οι οποίοι επισκέπτονται συχνά την ιστοσελίδα, ώστε να ενημερωθούν για τα νέα της επιχείρησης ή να χρησιμοποιήσουν τις πληροφορίες που παρέχει η ιστοσελίδα ή αν μιλάμε για e-shop, να βρούν προσφορές και να αγοράσουν αγαθά και υπηρεσίες. Αυτού του είδους η πελατειακή βάση περιλαμβάνεται στον όρο “customer loyalty”.

Σίγουρα με το να χρησιμοποιηθούν τεχνικές Internet Marketing, προσελκύονται επισκέπτες στην ιστοσελίδα μιας επιχείρησης και αυτό μεταφράζεται σε αύξηση της συνολικής επισκεψιμότητας της σελίδας. Πώς όμως θα κάνουμε αυτούς τους επισκέπτες να ξαναέρθουν στην ιστοσελίδα της επιχείρησης και να περάσουν αρκετό από το χρόνο τους στην περιήγηση της (κρατώντας χαμηλό το bounce rate της ιστοσελίδας);

Η απάντηση στην παραπάνω ερώτηση είναι: “website content”, το περιεχόμενο δηλαδή της ιστοσελίδας. Οι επισκέπτες για να ξαναέρθουν σε μια ιστοσελίδα πρέπει να τροφοδοτούνται συνέχεια με καινούργιο και αξιόλογο περιεχόμενο. Πρέπει κάθε φορά που επισκέπτονται την ιστοσελίδα μιας επιχείρησης να βρίσκουν σύγχρονο και ανανεωμένο περιεχόμενο. Συνεχής ενημέρωση για τα νέα της εταιρίας, καινούργιες προσφορές, καινούργια έργα, καινούργια προϊόντα, ένα blog με ενημερωτικό-πληροφοριακό χαρακτήρα που θα προσφέρει τουλάχιστον σε εβδομαδιαία βάση μια καινούργια ανάρτηση είναι μερικά από αυτά που συμπεριλαμβάνονται στην έννοια της "συνεχής ανανέωσης περιεχομένου".

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

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

Διαφήμιση στο Google

Όταν μιλάμε για διαφήμιση στο Google εννοούμε διαφήμιση μέσω της πλατφόρμας Google Ads. Γιατί όμως να διαλέξει κάποιος να διαφημιστεί μέσω του Google Ads;
Ας δούμε λοιπόν τα πλεονεκτήματα της διαφήμισης στην μηχανή αναζήτησης της Google και στο δίκτυο συνεργατών της:


1) Το Google Ads έχει εκπληκτικό reach.
Με την διαφήμιση στο Google τα websites προβάλλονται στην μηχανή αναζήτησης αλλά και σε άλλα συνεργαζόμενα websites τα οποία προβάλλουν διαφημίσεις (είτε τext, είτε image, είτε flash banner) δίπλα σε σχετικό περιεχόμενο με αυτό των διαφημίσεων. Επίσης στην Ελλάδα η μηχανή αναζήτησης της Google είναι η κυρίαρχος μηχανή αναζήτησης με ένα ποσοστό που ξεπερνάει το 80% !

2) Σχετικότητα διαφημίσεων.

Σε αντίθεση με τα παραδοσιακά μέσα διαφήμισης αλλά και τις περισσότερες μορφές online διαφήμισης όπου το διαφημιστικό μήνυμα προβάλλεται σε ένα πολύ γενικό κοινό με την διαφήμιση στο Google τα διαφημιστικά μηνύματα προβάλλονται μόνο σε ανθρώπους οι οποίοι έχουν δείξει ενδιαφέρον για ένα συγκεκριμένο προϊόν ή θέμα. Κάνοντας μια αναζήτηση στο Google με συγκεκριμένες λέξεις κλειδιά όπως για παράδειγμα “ξενοδοχεία στην Αττική” ή “γυναικεία ρολόγια” ο χρήστης δηλώνει την επιθυμία του για κάτι συγκεκριμένο. Σαν αποτέλεσμα αυτής της αναζήτησης προβάλλονται πάνω και δεξιά από τα οργανικά αποτελέσματα αναζήτησης για τις συγκεκριμένες λέξεις κλειδιά  οι σχετικές διαφημίσεις που γίνονται triggered από την εκάστοτε λέξη κλειδί.
Αυτή η διαδικασία κάνει τις διαφημίσεις σχετικές και χρήσιμες. Η διαφήμιση στην μηχανή αναζήτησης της Google λοιπόν είναι εξαιρετικά αποτελεσματική μιας και ο διαφημιζόμενος επιλέγει να προβληθεί μόνο σε ανθρώπους που έχουν δείξει ενδιαφέρον για το προϊόν που προσφέρει. Τέλος πολύ σημαντικό είναι το γεγονός πως με το Google Adwords ο διαφημιζόμενος μπορεί να προβάλει την διαφήμιση του σε όλες τις φάσεις του αγοραστικού κύκλου.
Έστω για παράδειγμα ότι ένας διαφημιζόμενος πουλάει ανδρικά ρολόγια nautica με μπρασελέ.
Ας δούμε τώρα πως εξελίσσεται ο αγοραστικός κύκλος στην μηχανή αναζήτησης. Η πρώτη φάση είναι η φάση του ενδιαφέροντος. Σε αυτή την φάση ο υποψήφιος αγοραστής χρησιμοποιεί broad terms όπως “ρολόγια ή “ανδρικά ρολόγια”. Η δεύτερη φάση είναι η φάση της έρευνας. Ο υποψήφιος αγοραστής ορμώμενος από τα αποτελέσματα που πήρε από την πρώτη του αναζήτηση αποφασίζει ότι θέλει περισσότερες πληροφορίες για “ανδρικά ρολόγια nautica”.
Έχοντας συλλέξει αρκετές πληροφορίες από την δεύτερη φάση, είναι έτοιμος να μπει στην τρίτη φάση της αγοράς. Τώρα γνωρίζει ακριβώς τι χρειάζεται, “ανδρικά ρολόγια nautica με μπρασελέ” . Με μια πολύ καλή στρατηγική στην διαφήμιση στο Google ο διαφημιζόμενος μπορεί να προσεγγίσει τον υποψήφιο πελάτη και στις 3 φάσεις του αγοραστικού κύκλου και να αποκομίσει τα μέγιστα οφέλη.

3) Return On Investment (ROI).

To κόστος και η αποτελεσματικότητα της Διαφήμισης στο Google είναι κάτι που σίγουρα απασχολεί οποιονδήποτε διαφημιζόμενο. Η διαφήμιση μέσω των Google Ads μπορεί να εξυπηρετεί πολλούς σκοπούς-στόχους. Είναι πολύ σημαντικό επομένως ο διαφημιζόμενος να γνωρίζει ποιοι είναι οι στόχοι του εκ των προτέρων μιας και ανάλογα με τον στόχο διαφέρουν και τα metrics που χρησιμοποιούνται. Ας δούμε τώρα ένα παράδειγμα του πως μπορεί το Ads να “πληρώσει” το κόστος του και να αποφέρει  κέρδη στον διαφημιζόμενο.

Έστω ότι μια επιχείρηση που πουλάει designer γυναικεία ρούχα αποφασίζει να ξοδέψει 300 ευρώ τον μήνα στο Google Ads και επιλέγει να πληρώνει maximum 0,15 ευρώ για το κάθε click. Αυτό σημαίνει ότι θα φέρει τουλάχιστον 2000 στοχευμένους επισκέπτες στο website της οι οποίοι θα ψάχνουν na αγοράσουν designer γυναικεία ρούχα στο διαδίκτυο. Από αυτούς τους 2000 στοχευμένους επισκέπτες αν καταφέρει και κάνει 30 (1,5% των επισκεπτών ) πωλήσεις με μέση τιμή για την κάθε πώληση τα 70 ευρώ τότε θα έχει ξοδέψει 300 ευρώ τα οποία θα αποφέρουν 2100 ευρώ σε πωλήσεις!

Αυτό είναι ένα από τα πολλά παραδείγματα το οποίο μας δείχνει ότι η διαφήμιση στο Google όχι μόνο μπορεί να καλύψει τα έξοδά της αλλά αφήνει και το περιθώριο για ένα πολύ καλό κέρδος. Τα πλεονεκτήματα των Google Ads είναι άπειρα και η αλήθεια είναι πως θα χρειαζόταν ένα τεράστιο post για να καλυφθούν όλα και γι αυτό και επέλεξα τρία από αυτά και τα ανέλυσα λίγο παραπάνω. Το συμπέρασμα είναι ότι η διαφήμιση στο Google είναι εξαιρετικά αποτελεσματική με πολλαπλά οφέλη για τον διαφημιζόμενο.

Γιατί να φτιάξω ιστοσελίδα αφού έχω δωρεάν σελίδα στο facebook;

Σας παραθέτω ορισμένους από τους λόγους για τους οποίους  η κατασκευή ιστοσελίδας facebook δεν είναι αρκετή:

  • Ένας καταναλωτής όταν ψάχνει μια πληροφορία για κάποια συγκεκριμένη εταιρεία ή προϊόν το πρώτο πράγμα που θα κοιτάξει είναι το εταιρικό website και όχι η μια σελίδα στο facebook. Νομίζω πως στον καταναλωτή παίζει μεγάλο ρόλο η εταιρική παρουσία και αν υπάρχει μια σελίδα μόνο στο facebook αυτό χαλάει την σωστή επαγγελματική εικόνα που πρέπει να δίνει η εταιρεία. Κάτι αντίστοιχο συμβαίνει και με εταιρίες που χρησιμοποιούν ως εταιρικό mail το gmail ή ακόμα χειρότερα το @otenet.gr σε business cards ενώ έχουν website με δικό τους domain name και μπορούν πολύ εύκολα να αποκτήσουν ένα mail της μορφής Αυτή η διεύθυνση Email προστατεύεται από τους αυτοματισμούς αποστολέων ανεπιθύμητων μηνυμάτων. Χρειάζεται να ενεργοποιήσετε τη JavaScript για να μπορέσετε να τη δείτε..
  •  Ένα καλοφτιαγμένο εταιρικό website φανερώνει επαγγελματισμό και δείχνει στους επισκέπτες ότι η εταιρεία παίρνει την δουλειά στα σοβαρά.
  •  Δεν είναι όλοι στο facebook. Ναι, όσο και αν σας φαίνεται απίστευτο δεν έχουν οι πάντες λογαριασμό στο facebook.
  •  Στο Facebook η σελίδα και το οποιοδήποτε περιεχόμενο υπάρχει σε αυτήν ανήκει αποκλειστικά στο facebook το οποίο μπορεί ανά πάσα στιγμή να την κατεβάσει ή να την σβήσει χωρίς να δώσει καμία αναφορά.Τι θα σημαίνει αυτό μετά για την επιχείρηση; Το domain name το website και το περιεχόμενο ανήκουν αποκλειστικά στην εταιρεία και όχι σε κάποιον τρίτο
  •  Δεξιά από την εταιρική σου σελίδα στο facebook υπάρχουν διαφημίσεις του facebook. Αυτές δεν μπορείς να τις ελέγξεις. Πράγμα που σημαίνει ότι εκεί μπορεί να διαφημίζετε ο ανταγωνιστής σου. Στο εταιρικό website αυτό πολύ απλά δεν μπορεί να συμβεί.
  •  Το Facebook δεν υπήρχε καν στον Χάρτη πριν 10 χρόνια.Πως μπορεί κάποιος να είναι σίγουρος ότι το facebook θα είναι εκεί την επόμενη δεκαετία? Ας θυμηθούμε τι λέγαμε λίγα χρόνια πριν για το Myspace, και πιο πριν για την yahoo κτλ. Το εταιρικό website όπως και να’ χει θα είναι εκεί.
  •  Έστω ότι υπάρχει ένα start up που χρειάζεται funding και έχει μόνο ένα facebook page. Θα πάρει ποτέ funding? Θα τους πάρει ποτέ κανείς στα σοβαρά;
  •  Γίνεται να έχεις e-commerce website το οποίο θα είναι μόνο στο facebook;
  •  Τα Google Analytics και τα διάφορα αντίστοιχα προγράμματα δίνουν αξιόλογα στοιχεία για τους επισκέπτες του ενός εταιρικού website και βοηθούν ώστε να βγουν κάποια πολύ χρήσιμα συμπεράσματα. Τα Facebook Insights έχουν ακόμα πολύ δρόμο για να μπορέσουν να φτάσουν την χρηστικότητα των Google Analytics


Αυτοί είναι μερικοί από τους εκατοντάδες λόγους για τους οποίους μια εταιρεία που σέβεται αυτό που κάνει χρειάζεται και κατασκευή website. Η παρουσία στα social media είναι απαραίτητη έτσι ώστε να συμπληρώνει το marketing mix αλλά μια εταιρεία πιστεύω πως δεν μπορεί να σταθεί με αξιώσεις έχοντας απλά μια fan page στο facebook.

Μέσω των Social Media μια εταιρεία μπορεί να ενισχύει το brand awareness χτίζοντας μια πολύ δυνατή αφοσιωμένη κοινότητα με αποτέλεσμα να οδηγεί περισσότερο traffic ή πωλήσεις ή leads στο εταιρικό website.

Αυτό λοιπόν που πρέπει πραγματικά να κάνει μια εταιρεία είναι να προωθεί το brand της μέσα από όλα τα διαθέσιμα κανάλια (website,facebook,twitter,αλλά social media sites,blog,affiliate κτλ) ενισχύοντας έτσι την εικόνα της και αυξάνοντας τις πωλήσεις της. Ο συνδετικός κρίκος σε όλα τα κανάλια πρέπει να είναι το εταιρικό website ενώ όλα τα κανάλια πρέπει να είναι συνδεδεμένα μεταξύ τους και να λειτουργούν αρμονικά.

Responsive Web Design (Κατασκευή ιστοσελίδων που ανταποκρίνεται σωστά σε κάθε συσκευή)

Ο σχεδιασμός ιστοσελίδων  έχει αλλάξει πάρα πολύ τα τελευταία χρόνια.Responsive Web Design Αυτό, κατά κύριο λόγο, οφείλεται στην νέες συσκευές που προσφέρουν περιήγηση στο διαδίκτυο tablets smartphones κλπ. Το Responsive web design είναι μια τεχνική για τη δημιουργία ιστοσελίδων που λειτουργούν και "προσαρμόζονται"  όχι μόνο στις οθόνες υπολογιστών γραφείου, αλλά και σε κινητές συσκευές και  ταμπλέτες. Τα τελευταία χρόνια  οι ιστοσελίδες σχεδιάζονταν μόνο  για  φορητούς υπολογιστές (laptop κλπ) και για υπολογιστές γραφείου( desktop). Αυτό λειτουργούσε  καλά μέχρι την χρονική στιγμή που τα  έξυπνα τηλέφωνα και ταμπλέτες κατέκλυσαν την αγορά. Όλοι εμείς οι κατασκευαστές ιστοσελίδων είχαμε να αντιμετωπίσουμε μία νέα πρόκληση:

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

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

  • Ευμετάβλητα πλέγματα στην απεικόνιση (Fluid Grids)
  • Ευμετάβλητες εικόνες (Fluid Images)
  • Ερωτήματα για εμφάνιση των καταλλήλων πολυμέσων (Media Queries)
Ας ρίξουμε μια ματιά σε κάθε ένα με περισσότερες λεπτομέρειες.

Ευμετάβλητα πλέγματα στην απεικόνιση

Παραδοσιακά, οι δικτυακοί τόποι έχουν οριστεί από την άποψη των pixels (εικονοστοιχείων). Αυτή είναι μια ιδέα που είχε μεταφερθεί από τη βιομηχανία εκτύπωσης, όπου ένα περιοδικό ή μια εφημερίδα είχαν πάντα το ίδιο σταθερό μέγεθος. Αντίθετα, μια ιστοσελίδα μπορεί να εμφανιστεί σε μια μεγάλη οθόνη, όπως σε μια τηλεόραση, ή σε μια πολύ μικρή οθόνη, όπως ένα smartphone (ή ακόμα και ένα SmartWatch). Για το λόγο αυτό, οι responsive  ιστοσελίδες είναι δομημένες με σχετικές μονάδες, όπως ποσοστά, αντί σταθερές μονάδες όπως τα εικονοστοιχεία.
Αν έχετε συνηθίσει  τον σχεδιασμό με pixels, υπάρχει μια απλή σχέση που μπορεί να σας βοηθήσει  στη χρήση ποσοστών. Μοιάζει με αυτό:

στόχος / πλαίσιο = αποτέλεσμα

Πιο συγκεκριμένα, ας πούμε ότι έχετε μια ιστοσελίδα που έχει  πλάτος 960 pixels, και θέλετε να πάρετε ένα  μεγιστοποιημένο παράθυρο του προγράμματος περιήγησης σε μια οθόνη που είναι 1920 pixels πλάτος. Σε αυτή την περίπτωση, το πλάτος του παραθύρου του προγράμματος περιήγησης είναι το πλαίσιο και το αρχικό πλάτος είναι ο στόχος.  Έτσι η πράξη που έχετε να κάνετα είναι να διαιρέσετε το στόχο προς το πλαίσιο για να πάρετε μια ποσοστιαία τιμή.

960px / 1920px = 50%

Ο ίδιος κανόνας ισχύει και για τα στοιχεία  που είναι ένθετα στο εσωτερικό του layout σε όλη τη διαδρομή προς τα κάτω. Για παράδειγμα, αν  έχετε μια διάταξη δύο στηλών μέσα στα 960px του site σας. με την  αριστερή στήλη να είναι μια πλαϊνή μπάρα 300px πλάτος και τη δεξιά στήλη να είναι είναι η κύρια περιοχή περιεχομένου με 640px πλάτος. Έχετε επίσης 20px περιθώριο μεταξύ των δύο στηλών. Δείτε την παρακάτω εικόνα:
Responsive Web Design που  απεικονίζει ένα πλαίσιο 960 pixel με 300 pixel sidebar και μια περιοχή περιεχομένου 640 pixel


Χρησιμοποιώντας τον ίδιο τύπο, κάθε μέρος του site θα έχουν τις ακόλουθες τιμές:

     Sidebar: 300px / 960px = 31,25%
     Κύριο Περιεχόμενο: 640px / 960px = 66,66667%
     Περιθώριο: 20px / 960px = 2,08334%

Αυτές οι ποσοστιαίες τιμές μπορούν κατόπιν να χρησιμοποιηθούν σε CSS  με τις ιδιότητες πλάτος, περιθώριο και γέμισμα. Παρακάτω οι εντολές σε HTML και CSS.


div class="wrapper">
  <div class="sidebar"><h1>Sidebar</h1></div>
  <div class="content"><h1>Content</h1></div>
</div>
.wrapper {
  width: 50%;
  margin: 0 auto;
}

.sidebar {
  width: 31.25%;
  margin-right: 2.08334%;
}

.content {
  width: 66.66667%;
}


/**********************************
Code that just makes it look nice
***********************************/

.sidebar, .content {
  background: #888;
  height: 250px;
  float: left;
  border-radius: 4px;
  color: #FFF;
  font-family: Helvetica;
  text-align: center;
}

h1 {
  padding: 100px 0;
  font-size: 1em;
}
Αν όλα τα παραπάνω σας φαίνονται ακαταλαβίστικα ή "κινέζικα",  η ομάδα μας μπορεί να σας βοηθήσει να δημιουργήσετε την δική σας responsive ιστοσελίδα σε λίγες μόνο ημέρες!

Επικοινωνήστε μαζί μας