El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Introducció al disseny responsiu

Següent ►
►

El disseny web responsiu és una tècnica de disseny web que permet que les pàgines web s'adaptin a diferents mides de pantalla i dispositius. Amb l'augment de l'ús de dispositius mòbils per accedir a Internet, és essencial que els llocs web siguin accessibles i funcionals en qualsevol dispositiu, ja sigui un ordinador de sobretaula, una tauleta o un telèfon mòbil.

Conceptes clau del disseny responsiu

  1. Flexibilitat de la graella (Grid Flexibility):

    • Utilitzar una graella flexible basada en percentatges en lloc de píxels fixos.
    • Permet que els elements de la pàgina s'ajustin proporcionalment a la mida de la pantalla.

  2. Imatges flexibles (Flexible Images):

    • Les imatges han de ser capaces de redimensionar-se dins dels seus contenidors.
    • Utilitzar l'atribut max-width: 100% per assegurar que les imatges no excedeixin l'amplada del seu contenidor.

  3. Media Queries:

    • Utilitzar media queries per aplicar diferents estils CSS en funció de les característiques del dispositiu, com ara l'amplada de la pantalla.
    • Permet canviar el disseny de la pàgina per adaptar-se millor a diferents mides de pantalla.

Avantatges del disseny responsiu

  • Millora l'experiència de l'usuari: Els usuaris poden navegar pel lloc web fàcilment, independentment del dispositiu que utilitzin.
  • SEO: Els motors de cerca, com Google, prioritzen els llocs web responsius en els resultats de cerca.
  • Manteniment més fàcil: Un únic lloc web que s'adapta a tots els dispositius és més fàcil de mantenir que tenir versions separades per a mòbils i escriptori.

Exemples pràctics

Exemple 1: Graella flexible

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Graella Flexible</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
        }
        .box {
            flex: 1 1 100%;
            padding: 10px;
            box-sizing: border-box;
        }
        @media (min-width: 600px) {
            .box {
                flex: 1 1 50%;
            }
        }
        @media (min-width: 900px) {
            .box {
                flex: 1 1 33.33%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box" style="background-color: lightcoral;">Box 1</div>
        <div class="box" style="background-color: lightblue;">Box 2</div>
        <div class="box" style="background-color: lightgreen;">Box 3</div>
    </div>
</body>
</html>

Explicació del codi

  • Container: Utilitza display: flex per crear una graella flexible. flex-wrap: wrap permet que els elements es moguin a la següent línia si no hi ha prou espai.
  • Box: Cada caixa ocupa el 100% de l'ample del contenidor per defecte. Amb media queries, l'ample es redueix a 50% en pantalles de més de 600px i a 33.33% en pantalles de més de 900px.

Exemple 2: Imatges flexibles

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Imatges Flexibles</title>
    <style>
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <img src="example.jpg" alt="Exemple d'imatge flexible">
</body>
</html>

Explicació del codi

  • Imatge: L'atribut max-width: 100% assegura que la imatge no excedeixi l'ample del seu contenidor. height: auto manté la proporció de la imatge.

Exercici pràctic

Exercici 1: Crear una pàgina responsiva

  1. Crea una pàgina HTML amb una graella flexible que contingui quatre caixes.
  2. Assegura't que les caixes ocupin el 100% de l'ample en pantalles petites, el 50% en pantalles mitjanes i el 25% en pantalles grans.
  3. Afegeix una imatge flexible dins d'una de les caixes.

Solució

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pàgina Responsiva</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
        }
        .box {
            flex: 1 1 100%;
            padding: 10px;
            box-sizing: border-box;
        }
        @media (min-width: 600px) {
            .box {
                flex: 1 1 50%;
            }
        }
        @media (min-width: 900px) {
            .box {
                flex: 1 1 25%;
            }
        }
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box" style="background-color: lightcoral;">Box 1</div>
        <div class="box" style="background-color: lightblue;">Box 2</div>
        <div class="box" style="background-color: lightgreen;">
            <img src="example.jpg" alt="Exemple d'imatge flexible">
        </div>
        <div class="box" style="background-color: lightyellow;">Box 4</div>
    </div>
</body>
</html>

Conclusió

El disseny web responsiu és essencial per crear llocs web moderns que funcionin bé en qualsevol dispositiu. Utilitzant graelles flexibles, imatges flexibles i media queries, pots assegurar-te que el teu lloc web ofereixi una experiència d'usuari òptima, independentment de la mida de la pantalla. En el proper tema, explorarem l'etiqueta Meta del Viewport, una eina clau per al disseny responsiu.

◄ Anterior
◄
Següent ►
►

Curs d'HTML

Mòdul 1: Introducció a l'HTML

Mòdul 2: Formatació de text en HTML

Mòdul 3: Enllaços i mitjans en HTML

Mòdul 4: Taules en HTML

Mòdul 5: Formularis en HTML

Mòdul 6: Elements semàntics d'HTML5

Mòdul 7: Tècniques avançades d'HTML

Mòdul 8: Integració d'HTML i CSS

Mòdul 9: Disseny web responsiu

Mòdul 10: Millors pràctiques i accessibilitat

Mòdul 11: Projecte: Construint un lloc web complet

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats