Τι είναι η προσαρμοστική έκδοση της σελίδας;

Ο ευέλικτος σχεδιασμός είναι μια προσέγγιση στην ανάπτυξη ιστοσελίδων όπου ο σχεδιασμός και το περιεχόμενο της σελίδας προσαρμόζονται αυτόματα στο μέγεθος της οθόνης της συσκευής του χρήστη (επιφάνεια εργασίας, tablet, smartphone).

Βασικές αρχές:

• Ευέλικτα πλέγματα (Fluid Grids): Χρήση ποσοστών ή άλλων σχετικών μονάδων για τον καθορισμό των διαστάσεων των στοιχείων αντί για σταθερά εικονοστοιχεία.
• Ευέλικτες εικόνες (Flexible Images): Αναλογική αλλαγή μεγέθους των εικόνων ώστε να μην υπερβαίνουν το δοχείο.
• Media Queries: Κανόνες CSS που επιτρέπουν την εφαρμογή διαφορετικών στυλ ανάλογα με τα χαρακτηριστικά της συσκευής, όπως το πλάτος της οθόνης, το ύψος, η προσανατολισμός και η ανάλυση.

Παράδειγμα χρήσης media query σε CSS:

/* Γενικά στυλ για όλες τις συσκευές */
body {
    font-size: 16px;
}

/* Στυλ για οθόνες μέχρι 768px πλάτος (π.χ. tablets και κινητά) */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    nav {
        /* Παράδειγμα αλλαγής διάταξης πλοήγησης */
        display: flex;
        flex-direction: column;
    }
}

/* Στυλ για οθόνες μέχρι 480px πλάτος (π.χ. κινητά τηλέφωνα) */
@media (max-width: 480px) {
    body {
        font-size: 12px;
    }
    img {
        /* Οι εικόνες καταλαμβάνουν όλο το πλάτος του δοχείου */
        max-width: 100%;
        height: auto;
    }
}

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

Οι δοκιμές της ευέλικτης έκδοσης περιλαμβάνουν τον έλεγχο:

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