ΒΓΕΙΤΕ ΣΤΗ ΠΡΩΤΗ ΣΕΛΙΔΑ ΤΗΣ GOOGLE

Αυξ?στε την επισκεψιμ?τητα κατ? 1200%!

responsive-web-design-greece

Responsive Web Design: Τι ε?ναι και γιατ? το χρειαζ?μαστε;

Το responsive web design ε?ναι αναγκα?ο για κ?θε ιστοσελ?δα που θ?λει να βγα?νει πρ?τη στη Google σ?μερα

Η εισαγωγ? ν?ων συσκευ?ν κυρ?ω? smartphones αλλ? και smart tv στην καθημεριν?τητα μα?, ?χει αλλ?ξει του? καν?νε? του? παιχνιδιο? στο ?ντερνετ και στι? μηχαν?? αναζ?τηση? αφο? για να μπορ?σουμε να ?χουμε πρ?σβαση στα αποτελ?σματα αναζ?τηση? των μηχαν?ν αναζ?τηση? για αυτ?? τι? συσκευ?? θα πρ?πει πρ?τα να ?χουμε προσαρμ?σει το site μα? για να φα?νεται σωστ? σε αυτ??.

Ε?ναι γεγον?? ?τι απ? τον Απρ?λιο του 2015 η Google με την περιβ?ητη αναν?ωση του αλγορ?θμου τη? που ?μεινε στην ιστορ?α ω? Mobilegeddon τιμωρε? με αποκλεισμ? ?λε? τι? ιστοσελ?δε? που δεν ε?ναι responsive απ? τα αποτελ?σματα αναζ?τηση? για κινητ?. ?μα η ιστοσελ?δα σα? ε?ναι responsive ?δη, δεν υπ?ρχει καν?να πρ?βλημα, ?μα ?μω? ?χι, τ?τε θα πρ?πει να λ?βετε τα μ?τρα σα?.

Για να μ?θετε τι πρ?πει να κ?νετε για να μην χ?σετε επισκεψιμ?τητα απ? τα ν?α μ?σα πρ?σβαση? των χρηστ?ν στο ?ντερνετ, διαβ?στε παρακ?τω.

Τι ε?ναι το responsive web design;

Το responsive web design ? RWD ?χει να κ?νει με τον τρ?πο εμφ?νιση? μια? ιστοσελ?δα? σε διαφορετικ?? αναλ?σει? οθ?νη? που ?χει κ?θε smartphone ? tablet αλλ? και οι μεγ?λε? οθ?νε? με πολ? μεγ?λη αν?λυση εικ?να?.

responsive-web-design-tips-to-keep-up-with-the-current-trends

Παλαι?τερα δεν γιν?τανε καν λ?γο? για responsive web design γιατ? απλ?? κ?θε ιστοσελ?δα και eshop σχεδι?ζονταν αποκλειστικ? για laptops και σταθερο?? υπολογιστ?? και ?τσι δεν υπ?ρχε θ?μα αν?λυση? οθ?νη? και χρηστικ?τητα?.

Σ?μερα αυτ? ?χει αλλ?ξει και με το 50% και πλ?ον των επισκεπτ?ν να σερφ?ρουν στο ?ντερνετ αλλ? και να ψων?ζουν απ? τα κινητ? και τα tablets ε?ναι επιτακτικ? αν?γκη το site μα? να ε?ναι mobile friendly.

Mobile friendly θα πει ?τι το site μα? εμφαν?ζεται διαφορετικ? στι? κινητ?? συσκευ?? και ε?ναι ειδικ? προσαρμοσμ?νο τ?σο στο περιεχ?μενο, στα μενο? αλλ? και στα γραφικ? του στοιχε?α για να φα?νεται σωστ? ?στε να μπορε? ε?κολα ο επισκ?πτη? να πλοηγηθε? μ?σα στην ιστοσελ?δα μα?.

Για να δε?τε αν ?ντω? η ιστοσελ?δα σα? ε?ναι συμβατ? με τι? κινητ?? συσκευ?? και συν?μα responsive, μπορε?τε να το ελ?γξετε με το Google Mobile Friendly Tool.

Πω? γ?νεται απ? τεχνικ? σκοπι? το site μα? responsive;

Μπορε? τα παρακ?τω πρ?γματα να σα? φανο?ν αρκετ? τεχνικ?, ?μω? οφε?λω να τα αναφ?ρω ?στε να μπορε?τε να ?χετε τι? βασικ?? γν?σει? που απαιτο?νται ?στε να καταλ?βετε τι χρει?ζεται για να γ?νει η ιστοσελ?δα σα? responsive.

?να site που ?χει ?ντω? RWD (responsive web design) ?χει προσαρμ?σει το γραφικ? του περιβ?λλον σε επ?πεδο αναλογι?ν και σχεδιαστικ?ν grids, σε επ?πεδο CSS και σε επ?πεδο εικ?νων χρησιμοποι?ντα? προσαρμ?σιμα μεγ?θη εικ?νων αν?λογα με την αν?λυση οθ?νη?.

Τα τρ?α βασικ? στοιχε?α που πρ?πει να ?χει στον κ?δικα κατασκευ?? (?ταν λ?με κ?δικα εννοο?με HTML και CSS) του ?να site για να ε?ναι responsive ε?ναι τα παρακ?τω:

Χρειαζ?μαστε να χρησιμοποι?σουμε αντ? για απ?λυτε? μον?δε? μ?τρηση? των pixels ? του design grid το fluid concept

Το fluid web design concept ?χει να κ?νει περισσ?τερο με την ελαστικ?τητα στον σχεδιασμ? των στοιχε?ων μια? σελ?δα? παρ? με την στατικ? προβολ? του?.

Προσαρμ?σιμε? εικ?νε?

Θα πρ?πει οι εικ?νε?, τα β?ντεο και τα animation στοιχε?α ?πω? τα banners να προσαρμ?ζονται στι? κινητ?? συσκευ?? ?στε να μην φε?γουν εκτ?? οθ?νη? ? να μην ε?ναι καθ?λου εμφαν?σιμα.

Media queries

Τα media queries επιτρ?πουν μια σελ?δα να χρησιμοποιε? διαφορετικ? CSS styles αν?λογα με τα χαρακτηριστικ? κ?θε συσκευ?? (λειτουργικ? android, IOS), την αν?λυση οθ?νη? και το πλ?το? του web browser.

Λ?γο ακαταλαβ?στικα για του? περισσ?τερου? ?μω? πολ? χρ?σιμα για να κατανο?σουμε τι χρει?ζεται να προσ?ξουμε ? να πο?με στον προγραμματιστ? μα? να κ?νει για να διορθ?σει πιθαν? λ?θη στην προβολ? τη? ιστοσελ?δα? μα? στα smartphones ? πιθαν?? ασυμβατ?τητε?.

Responsive web design και WordPress

Υπ?ρχουν δ?ο κατηγορ?ε? ανθρ?πων, αυτο? που ?χουν site σε WordPress και αυτο? που ?χουν site σε custom εφαρμογ? ? σε κ?ποιο ?λλο CMS ? ecommerce platform.

?σοι ?χετε site σε WordPress θα πρ?πει να προσ?ξετε ?μα το θ?μα που ?χετε επιλ?ξει για το WordPress site σα? ε?ναι responsive και mobile firendly.

Τα περισσ?τερα ν?α θ?ματα σε WordPress σ?μερα ?χουν λ?βει υπ?ψιν του? ?λε? τι? σχεδιαστικ?? απαιτ?σει? εν?? σ?γχρονου site και ?ντω? ?χουν ?κδοση mobile και ε?ναι φυσικ? προσαρμοσμ?να για ?λλα μεγ?θη οθον?ν και συσκευ?ν.

?μω?, ?μα ?χετε ιστοσελ?δα ? eshop σε WordPress και ?χετε διαπιστ?σει ?τι το θ?μα σα? δεν ε?ναι συμβατ? με τα κινητ? τ?τε θα πρ?πει οπωσδ?ποτε να κ?νετε αναβ?θμιση στο θ?μα σα? ? να αλλ?ξετε θ?μα ?μα δεν υποστηρ?ζει η εταιρε?α που ?φτιαξε το θ?μα την επιλογ? responsive.

Κατ? συν?πεια θα πρ?πει π?ντα να προτιμ?τε WordPress Themes που ε?ναι premium, πληρωμ?να δηλαδ? απ? τα free themes ?πω? αυτ? απ? το Studiopress ? το Themeforest.

Ε?ναι κρ?μα για μερικ?? δεκ?δε? ευρ? να χ?νετε το 50% επισκεπτ?ν που ?σω? να ?ρχονταν στην ιστοσελ?δα σα? ?μα ε?χατε mobile friendly theme.

Σε περ?πτωση που το θ?μα σα? δεν υποστηρ?ζει κινητ? και δεν ε?ναι responsive ε?ναι προτιμ?τερο να αλλ?ξετε θ?μα στο site σα? παρ? να β?λετε κ?ποιο plugin ?πω? το WPtouch ? κ?ποιο ?λλο για να κ?νετε το site σα? συμβατ? με smartpones και tablets.

Τ?τοια πρ?σθετα αλλοι?νουν τον σχεδιαστικ? χαρακτ?ρα τη? ιστοσελ?δα? σα?, το branding, κρ?βουν τα λογ?τυπα και τα διαφημιστικ? banner και δεν ωφελο?ν σε τ?ποτα. Κανε?? δεν θ?λει να ?χει δ?ο εκδ?σει? τη? ιστοσελ?δα? του εντελ?? διαφορετικ?? και ξ?νε? μεταξ? του? και μ?α να πα?ζει για κινητ? και μ?α για σταθερο?? υπολογιστ?? γιατ? δημιουργε?ται η εντ?πωση στον επισκ?πτη ?τι πρ?κειται για δ?ο διαφορετικ? sites και ?χι για το ?διο.

7 συμβουλ?? για πετυχημ?νο responsive web design

1 Προγραμματ?στε απ? πριν τα χαρακτηριστικ? που θα ?χει η ιστοσελ?δα σα?

Θα πρ?πει απαρα?τητα να τρ?χει απρ?σκοπτα στι? κινητ?? συσκευ?? και να μην ?χει προβλ?ματα ταχ?τητα? και λειτουργικ?τητα? στου? χρ?στε? που μπα?νουν στο site σα? απ? τα κινητ?.

2 Επιλ?ξτε το σωστ? θ?μα για την ιστοσελ?δα σα?

Το theme δεν ?χει να κ?νει με την θεματολογ?α τη? ιστοσελ?δα? μα? αλλ? με το website template που θα χρησιμοποι?σουμε. Τα περισσ?τερα sites ε?τε CMS ?πω? το WordPress, Joomla κτλ ε?τε custom design, βασ?ζονται σε κ?ποιο τ?τοιο template το οπο?ο πριν το αγορ?σουμε θα πρ?πει να ?χουμε δει πω? θα εμφαν?ζεται στι? κινητ?? συσκευ??.

Θα πρ?πει δηλαδ? να δο?με κ?ποιο λειτουργικ? demo του template πρ?τα και μετ? να προβο?με στην αγορ? του.

Συν?θω? καλ? ε?ναι να ?χουμε εκτ?? απ? μια επιλογ? για template ? theme και κ?ποια ?λλη εναλλακτικ? ? δε?τερη επιλογ? ? και τρ?τη επιλογ? σε περ?πτωση που οι δ?ο πρ?τε? επιλογ?? μα? δεν ε?ναι πετυχημ?νε?.

3 Ξεκιν?στε με mobile first φιλοσοφ?α σχεδιασμο?

Η φιλοσοφ?α σχεδιασμο? τη? ιστοσελ?δα? θα πρ?πει να ε?ναι mobile first, δηλαδ? πρ?τα να λαμβ?νει υπ?ψιν τη? τι? κινητ?? συσκευ?? και μετ? τα desktop και laptop pcs.

?τσι δεν θα βρεθε?τε προ εκπλ?ξεω? σε κ?ποιο προχωρημ?νο στ?διο αν?πτυξη? τη? ιστοσελ?δα? σα? που ?δη θα ?χετε ξοδ?ψει χρ?νο και χρ?ματα και θα ε?ναι δ?σκολο να αναστρ?ψετε την κατ?σταση χωρ?? να ξεκιν?σετε να σχεδι?ζετε το site σα? απ? την αρχ?.

Το λ?ω αυτ? εκ πε?ρα? γιατ? τα 30% των ιστοσελ?δων που φτι?χνει η εταιρε?α μου κ?θε χρ?νο ε?ναι site που χρει?ζονται redesign επειγ?ντω? ε?τε γιατ? ?τανε σε λ?θο? πλατφ?ρμα και ?χι σε WordPress ε?τε γιατ? ?ταν σχεδι?στηκαν δεν ε?χανε ληφθε? υπ?ψιν μερικ? βασικ? στοιχε?α του φιλικο? προ? τι? μηχαν?? αναζ?τηση? web design.

Μπορε?τε να δε?τε περισσ?τερα στο ?ρθρο: Τo SEO ξεκιν?ει απ? το Web Design

4 Προσ?ξτε τα μενο? πλο?γηση?

Τα μενο? πλο?γηση? στα κινητ? ε?ναι ?να αδ?νατο σημε?ο για π?ρα πολλ? sites στην ?κδοση του? για κινητ?? συσκευ??. Θα πρ?πει πριν επιλ?ξετε κ?ποιο θ?μα για το site σα? να δε?τε ?μα ε?ναι λειτουργικ? το μενο? του? και ?μα μπορε? ο μ?σο? χρ?στη? να πλοηγηθε? ε?κολα και γρ?γορα σε ?λε? τι? σελ?δε?, ?ρθρα και προ??ντα που πιθαν?ν να ?χει το site σα?.

?μα χ?νεται κ?ποιο? ε?κολα ? δεν ε?ναι ε?κολο να βρει ο χρ?στη? αυτ? που θ?λει με ?να ? δ?ο κλικ, τ?τε το μενο? σα? ?χει πρ?βλημα.

?να προβληματικ? μενο? μεταφρ?ζεται σε ?να site ω? α?ξηση του ποσοστο? εγκατ?λειψη?, με?ωση των μετατροπ?ν και απ?λεια εσ?δων. Επ?ση? θα δε?τε και κ?ποια αισθητ? πτ?ση στα αποτελ?σματα των μηχαν?ν αναζ?τηση? λ?γω λειτουργικ?τητα?.

Το UX ? user experience ε?ναι πολ? σημαντικ? για να κρατ?σουμε ?ναν επισκ?πτη μ?σα στο site μα? και να τον κ?νουμε να θ?λει να ξαναρθε? γιατ? απλ?? και μ?νο βρ?κε ε?κολα και γρ?γορα αυτ? που ?θελε.

5 Συμβουλευτε?τε τα web στ?νταρ? τη? Google

Στο Google Webmaster Central Blog μπορε?τε να βρε?τε πολλ? χρ?σιμα ?ρθρα ?πω? το Making smartphone sites load fast που θα σα? βοηθ?σουν να βελτι?σετε την ιστοσελ?δα σα? και να την κ?νετε πιο γρ?γορη και πιο χρ?σιμη για του? επισκ?πτε? σα? αλλ? και για την αγορ? σα?.

Μερικ? απ? τα web standards τη? Google ?χουν να κ?νουν με την ταχ?τητα φ?ρτωση? τη? ιστοσελ?δα? σα? που ε?ναι και σημαντικ?? παρ?γοντα? κατ?ταξη? ?πω?:

  • Server response κ?τω απ? 200 ms
  • Με?ωση του αριθμο? των redirects στην φ?ρτωση τη? ιστοσελ?δα?
  • Αποφυγ? του αποκλεισμο? του κ?δικα JavaScript και του CSS στην πρ?τη οθ?νη
  • Βελτιστοπο?ηση του χρ?νου εκτ?λεση? τη? JavaScript

Ο λ?γο? που σα? αναφ?ρω ?λα αυτ? τα τεχνικ? θ?ματα δεν ε?ναι για να σα? πονοκεφαλι?σω αλλ? γιατ? πα?ζουν ?λα σημαντικ? ρ?λο στο responsive design το οπο?ο δεν θα πρ?πει να φορτ?νει την ιστοσελ?δα μα? με περιττ? κ?δικα -πρ?γμα που ?χω συναντ?σει αρκετ?? φορ??- αλλ? θα πρ?πει να μει?νει τον χρ?νο φ?ρτωση? προσαρμ?ζοντα? το περιεχ?μενο και την ιστοσελ?δα σα? αν?λογα με την συσκευ?.

Δεν θα πρ?πει ποτ? να σταματ?σετε να βελτι?νετε και να διορθ?νετε την ιστοσελ?δα σα? μ?χρι αυτ? να γ?νει σταθμ?? στη λειτουργικ?τητα αλλ? και στην αναδραστικ?τητα του χρ?στη.

6 Χρησιμοποι?στε καθαρ? web design και καθαρ? κ?δικα

Ο καθαρ?? σχεδιασμ?? μια? ιστοσελ?δα? ?χει να κ?νει με την ορθ? χρ?ση του λευκο? και των σχεδιαστικ?ν στοιχε?ων που ?χει μια ιστοσελ?δα. Ε?ναι επ?ση? τ?ση στον σχεδιασμ? ιστοσελ?δων η οικονομ?α στον κ?δικα ? το clean code χωρ?? τη χρ?ση περιττ?ν γραμμ?ν κ?δικα που θα με?ωναν κατ? πολ? την ταχ?τητα φ?ρτωση? τη? ιστοσελ?δα? σα?.

7 Ελ?γξετε τα εξωτερικ? APIs

Κ?ποια εξωτερικ? APIs που εκτελο?νται μ?σα στην ιστοσελ?δα μα? ?σω? να μην ε?ναι τα ?δια responsive γιατ? ο κ?δικα? HTML ? PHP τα διαβ?ζει ω? χωριστ? αντικε?μενα και ?τσι προκαλο?ν πολλ? σφ?λματα στην προβολ? του? απ? κινητ? και ταμπλ?τε? ? δεν φα?νονται καν.

Μπορε?τε να δε?τε περισσ?τερα στο πολ? χρ?σιμο ?ρθρο: 7 Mistakes Developers Make When Using 3rd Party API’s

Ζητ?στε τη συμβουλ? μια? αξι?πιστη? εταιρε?α? κατασκευ?? ιστοσελ?δων

Αντ? επιλ?γου και εξαγωγ? συμπερασμ?των θα σ?στηνα πριν κ?νετε οτιδ?ποτε να ζητ?σετε τη συμβουλ? ? τη συνδρομ? μια? εταιρε?α? κατασκευ?? ιστοσελ?δων που ?χει ω? πρ?τη? του προτεραι?τητα το Search engine optimization και βλ?πει την κατασκευ? και τον σχεδιασμ? τη? ιστοσελ?δα? ?πω? θα την ?βλεπε η Google ? με τα μ?τια των μηχαν?ν αναζ?τηση?.

?λε? οι εταιρε?ε? κατασκευ?? ιστοσελ?δων και τα δημιουργικ? γραφε?α δεν ε?ναι ?δια και κ?θε ?να ?χει διαφορετικ? επαγγελματικ? εμπειρ?α.

Μην διστ?σετε να επικοινων?σετε μαζ? μα? για να ρωτ?σετε οτιδ?ποτε ? για να σα? βοηθ?σουμε να φτι?ξετε ? να φτι?ξουμε για εσ?? μια ιστοσελ?δα που θα βγα?νει στην πρ?τη σελ?δα τη? Google!

Δε?τε περισσ?τερα για το responsive web design:

 

2 Σχ?λια. Leave new

Αφ?στε μια απ?ντηση

Η ηλ. διε?θυνση σα? δεν δημοσιε?εται. Τα υποχρεωτικ? πεδ?α σημει?νονται με *

Fill out this field
Fill out this field
Δ?στε μια ?γκυρη ηλ. διε?θυνση.

Μενο?
Shares
骚虎最新官方下载-骚虎最新版本下载-骚虎最新官网