Πώς να κάνετε έναν ιστότοπο προσαρμοσμένο για κινητά

Για να κάνετε έναν ιστότοπο προσαρμοσμένο για κινητά, προσθέστε μια ετικέτα meta viewport, χτίστε τη διάταξη με πρώτα το κινητό και ευέλικτα πλάτη, και χρησιμοποιήστε breakpoints CSS για να την αναδιατάξετε σε μεγαλύτερες οθόνες — βάζοντας τις στήλες η μία κάτω από την άλλη, συμπτύσσοντας το μενού και κλιμακώνοντας τις εικόνες ώστε να χωράνε. Μετά ελέγξτε κάθε σελίδα στο πλάτος κινητού για οριζόντιο σκρολάρισμα, μικροσκοπικό κείμενο και κουμπιά πολύ μικρά για να τα πατήσετε. Σε έναν ιστότοπο χτισμένο με AI, ένα σαφές prompt συν μία δοκιμή σε προεπισκόπηση μεγέθους κινητού συνήθως διορθώνει τα περισσότερα.

Τι είναι πραγματικά ο responsive σχεδιασμός

Ένας responsive ιστότοπος χρησιμοποιεί ένα σύνολο σελίδων και URLs που προσαρμόζονται στην οθόνη. Αντί για ξεχωριστό ιστότοπο «m.», το CSS αλλάζει τη διάταξη σε συγκεκριμένα πλάτη, που ονομάζονται breakpoints. Τα δομικά στοιχεία:

• Η ετικέτα meta viewport λέει στους περιηγητές κινητού να χρησιμοποιούν το πραγματικό πλάτος της συσκευής.
• Ευέλικτες διατάξεις χρησιμοποιούν ποσοστά, flexbox και grid αντί για σταθερά πλάτη σε pixels.
• Media queries (ή κλάσεις framework όπως το md: του Tailwind) αλλάζουν τη διάταξη πάνω από ένα δεδομένο πλάτος.
• Ευέλικτα μέσα — εικόνες και βίντεο που συρρικνώνονται για να χωρέσουν στο περιέχον τους.

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

Επιλογές και συμβιβασμοί

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

Τα μέρη που συνήθως σπάνε

Η ετικέτα viewport

Αν μια σελίδα μοιάζει με μικροσκοπικό ιστότοπο υπολογιστή σε κινητό, λείπει η ετικέτα viewport:

<meta name="viewport" content="width=device-width, initial-scale=1">

Μην προσθέτετε maximum-scale=1 ή user-scalable=no. Το να μπλοκάρετε το ζουμ με τσίμπημα δυσκολεύει τον ιστότοπο για άτομα με χαμηλή όραση.

Σταθερά πλάτη και οριζόντιο σκρολάρισμα

Το πιο συνηθισμένο σφάλμα responsive είναι κάτι πλατύτερο από την οθόνη: ένα σταθερό width: 1200px κοντέινερ, ένας πλατύς πίνακας, ένα μακρύ URL ή μπλοκ κώδικα, μια εικόνα χωρίς max-width: 100%. Ολόκληρη η σελίδα τότε σκρολάρει οριζόντια. Χρησιμοποιήστε max-width αντί για width, αφήστε το κείμενο να αναδιπλώνεται και δώστε στα πλατιά στοιχεία δική τους περιοχή κύλισης.

Πλοήγηση

Πέντε συνδέσμοι μενού υπολογιστή σπάνια χωρούν σε κινητό. Η συνήθης λύση είναι ένα κουμπί μενού που ανοίγει ένα πάνελ. Κρατήστε ορατές τις δύο ή τρεις πιο σημαντικές ενέργειες — «Κράτηση», «Καλάθι», «Σύνδεση» — και βεβαιωθείτε ότι το μενού λειτουργεί με πληκτρολόγιο και κλείνει εύκολα.

Κείμενο και περιοχές αφής

• Το κυρίως κείμενο γύρω στα 16 px είναι ένα λογικό ελάχιστο σε κινητά. Τα πεδία με μικρότερο κείμενο κάνουν τα iPhone να μεγεθύνουν όταν πατηθούν.
• Κάντε τα κουμπιά και τους συνδέσμους εύκολα προσβάσιμα. Το WCAG 2.2 AA ορίζει ελάχιστο 24 επί 24 CSS pixels (ή αρκετό κενό)· περίπου 44 pixels είναι πιο άνετο για τους αντίχειρες.
• Αφήστε κενό ανάμεσα σε γειτονικούς συνδέσμους, ώστε οι άνθρωποι να μην πατούν τον λάθος.

Πίνακες και δεδομένα

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

Εικόνες και μέσα

Χρησιμοποιήστε max-width: 100% και height: auto, σερβίρετε μικρότερα αρχεία σε μικρές οθόνες με srcset, και ορίστε πλάτος και ύψος για να αποφεύγετε τα άλματα διάταξης. Τα ενσωματωμένα βίντεο και οι χάρτες χρειάζονται responsive περιτύλιγμα ώστε να διατηρούν την αναλογία τους. Οι μικρότερες εικόνες κάνουν επίσης τις σελίδες ταχύτερες — δείτε πώς να κάνετε τον ιστότοπό σας πιο γρήγορο.

Φόρμες

Βάλτε τις ετικέτες πάνω από τα πεδία, κάντε τα πεδία πλήρους πλάτους και χρησιμοποιήστε τους σωστούς τύπους εισόδου (type="email", type="tel", inputmode="numeric") ώστε τα κινητά να εμφανίζουν το κατάλληλο πληκτρολόγιο. Βάλτε το κουμπί υποβολής εκεί που φτάνει ο αντίχειρας και κρατήστε το ορατό όταν ανοίγει το πληκτρολόγιο.

Αλληλεπιδράσεις μόνο με hover

Τα κινητά δεν κάνουν hover. Οι επεξηγήσεις, τα αναπτυσσόμενα μενού και οι προεπισκοπήσεις που εμφανίζονται μόνο με hover είναι αόρατα σε χρήστες αφής. Κάντε τα να λειτουργούν και με πάτημα.

Prompts που λειτουργούν

Για νέα κατασκευή, πείτε το εξαρχής:

Χτίσε το αυτό με πρώτα το κινητό. Μία στήλη σε κινητά, δύο στήλες από το πλάτος tablet και πάνω, πλήρης διάταξη στον υπολογιστή. Χωρίς οριζόντιο σκρολάρισμα σε πλάτος 320 px, κυρίως κείμενο τουλάχιστον 16 px, περιοχές αφής τουλάχιστον 44 px, κουμπί μενού σε μικρές οθόνες και πίνακες που γίνονται κάρτες σε κινητά.

Για υπάρχουσα σελίδα, περιγράψτε τι βλέπετε:

Σε κινητά, η σελίδα /pricing σκρολάρει οριζόντια και οι τρεις κάρτες πλάνων είναι συμπιεσμένες η μία δίπλα στην άλλη. Βάλε τις κάρτες η μία κάτω από την άλλη κάτω από 768 px, κάνε τον πίνακα σύγκρισης να σκρολάρει οριζόντια μέσα στο δικό του κοντέινερ με την στήλη χαρακτηριστικών καρφιτσωμένη, και κράτα αμετάβλητη τη διάταξη του υπολογιστή.

Έλεγξε κάθε σελίδα σε πλάτος 375 px. Κατάγραψε ό,τι υπερχειλίζει, επικαλύπτεται, έχει κείμενο μικρότερο από 16 px ή περιοχές αφής μικρότερες από 44 px, ή λειτουργεί μόνο με hover, και μετά διόρθωσε το καθένα.

Βήμα προς βήμα

1. Επιβεβαιώστε την ετικέτα viewport στην κεφαλίδα της σελίδας.
2. Δοκιμάστε στα 320–375 px πλάτος στη λειτουργία συσκευής του περιηγητή ή σε προεπισκόπηση μεγέθους κινητού. Σκρολάρετε κάθε σελίδα από πάνω προς τα κάτω.
3. Διορθώστε πρώτα το οριζόντιο σκρολάρισμα. Βρείτε το στοιχείο που είναι πολύ πλατύ· όλα τα άλλα είναι δύσκολο να κριθούν μέχρι να εξαφανιστεί.
4. Τακτοποιήστε την πλοήγηση: κουμπί μενού, βασικές ενέργειες ορατές.
5. Ελέγξτε κείμενο, περιοχές αφής και φόρμες σε κάθε βασική ροή — εγγραφή, αναζήτηση, ταμείο, επικοινωνία.
6. Χειριστείτε πίνακες και μέσα: κάρτες ή κοντέινερ κύλισης, εικόνες και ενσωματώσεις που προσαρμόζονται.
7. Ελέγξτε τα ενδιάμεσα μεγέθη. Σύρετε αργά το πλάτος από κινητό σε υπολογιστή· οι διατάξεις συχνά σπάνε γύρω από το πλάτος tablet.
8. Δοκιμάστε σε πραγματικό κινητό. Οι εξομοιωτές χάνουν πράγματα όπως το πληκτρολόγιο της οθόνης που καλύπτει ένα κουμπί, τα notches και πόσο γρήγορα νιώθει ο ιστότοπος σε δεδομένα κινητής.

Συχνά λάθη

• Δοκιμή μόνο σε ένα μέγεθος κινητού. Ελέγξτε ένα μικρό τηλέφωνο, ένα μεγάλο τηλέφωνο και ένα tablet.
• Απόκρυψη περιεχομένου σε κινητά για να χωρέσει. Η Google ευρετηριάζει την έκδοση για κινητά, και οι χρήστες κινητού θέλουν τις ίδιες πληροφορίες.
• Απενεργοποίηση του ζουμ στην ετικέτα viewport.
• Εικόνες μεγέθους υπολογιστή σε κινητά, που κοστίζουν χρόνο φόρτωσης και δεδομένα.
• Συσσωρευμένα στοιχεία σταθερής θέσης: μια κολλημένη κεφαλίδα, ένα banner cookies και μια φούσκα συνομιλίας μπορούν να καλύψουν τη μισή οθόνη κινητού.
• Αναδυόμενα παράθυρα που δεν κλείνουν σε μικρή οθόνη, επειδή το κουμπί κλεισίματος είναι εκτός οθόνης.

Λίστα ελέγχου για κινητά

• Υπάρχει η ετικέτα meta viewport· το ζουμ δεν είναι απενεργοποιημένο
• Χωρίς οριζόντιο σκρολάρισμα στα 320 px σε καμία σελίδα
• Κυρίως κείμενο ~16 px· τα πεδία δεν προκαλούν ζουμ
• Περιοχές αφής άνετα μεγάλες και με κενά
• Το μενού λειτουργεί σε κινητά και με πληκτρολόγιο
• Οι πίνακες είναι αναγνώσιμοι σε κινητά (κάρτες, λιγότερες στήλες ή κοντέινερ κύλισης)
• Οι εικόνες και οι ενσωματώσεις κλιμακώνονται· σερβίρονται αρχεία σωστού μεγέθους
• Οι φόρμες χρησιμοποιούν τους σωστούς τύπους εισόδου· το κουμπί υποβολής είναι προσβάσιμο
• Τίποτα σημαντικό δεν εξαρτάται από το hover
• Δοκιμάστε σε τουλάχιστον ένα πραγματικό κινητό

Η responsive διάταξη είναι επίσης μέρος της προσβασιμότητας: το WCAG ζητά το περιεχόμενο να λειτουργεί στα 320 px πλάτος και σε ζουμ 200%. Αν χτίζετε εφαρμογή που θα χρησιμοποιούν καθημερινά στα κινητά τους οι άνθρωποι, το πώς να φτιάξετε web app φιλικό προς τα κινητά πάει παραπέρα, συμπεριλαμβανομένων των εγκαταστάσιμων PWA.

Responsive σχεδιασμός στο Mythex

Το Mythex χτίζει responsive web apps, και στο Pro μπορεί να τις τυλίξει ως εφαρμογές Android και iPhone. Στον χώρο εργασίας, κάντε κλικ στο εικονίδιο τηλεφώνου πάνω από την Προεπισκόπηση (Εναλλαγή σε κινητό) για να δείτε την εφαρμογή σε πλαίσιο μεγέθους τηλεφώνου, και σύρετε την άκρη του πλαισίου για να δοκιμάσετε άλλα πλάτη (Προεπισκόπηση και κώδικας). Η τεκμηρίωση έχει ένα σύντομο αρχικό prompt για τη διόρθωση της διάταξης σε μικρές οθόνες στα prompts για responsive σχεδιασμό. Ελέγξτε και σε πραγματικό κινητό — ανοίξτε τη δημοσιευμένη διεύθυνση, ή μοιραστείτε σύνδεσμο προεπισκόπησης και ανοίξτε τον στο κινητό σας.

Ερωτήσεις