El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

El disseny mobile-first és una estratègia de disseny web que prioritza la creació de llocs web per a dispositius mòbils abans de passar a versions per a pantalles més grans com les de tauletes i ordinadors. Aquesta tècnica assegura que els llocs web siguin accessibles i funcionals en dispositius mòbils, que són cada vegada més utilitzats pels usuaris.

Per què Mobile-First?

Creixement de l'ús mòbil: Amb l'augment de l'ús de dispositius mòbils per navegar per internet, és essencial que els llocs web estiguin optimitzats per a aquests dispositius.
Millor experiència d'usuari: Un disseny mobile-first garanteix que els usuaris mòbils tinguin una experiència fluida i agradable.
Rendiment: Els llocs web dissenyats per a mòbils tendeixen a ser més ràpids i eficients, ja que es prioritza la càrrega de contingut essencial.
SEO: Els motors de cerca com Google prioritzen els llocs web que estan optimitzats per a mòbils en els seus resultats de cerca.

Estratègia Mobile-First

Començar amb una Base Simple

Quan dissenyem per a mòbils, comencem amb una estructura simple i funcional. Això inclou:

Contingut essencial: Només el contingut més important hauria d'aparèixer en la versió mòbil.
Interfície d'usuari neta: Utilitza dissenys nets i senzills que siguin fàcils d'utilitzar en pantalles petites.
Tipografia llegible: Assegura't que el text sigui fàcil de llegir sense necessitat de fer zoom.

Utilitzar Consultes de Mitjans (Media Queries)

Les consultes de mitjans són essencials per adaptar el disseny a diferents mides de pantalla. En el disseny mobile-first, comencem amb els estils per a mòbils i afegim estils per a pantalles més grans.

/* Estils per a mòbils (base) */
body {
    font-size: 16px;
    margin: 0;
    padding: 0;
}

/* Estils per a tauletes */
@media (min-width: 768px) {
    body {
        font-size: 18px;
    }
}

/* Estils per a ordinadors */
@media (min-width: 1024px) {
    body {
        font-size: 20px;
    }
}

Optimitzar Imatges i Recursos

Les imatges i altres recursos han de ser optimitzats per a dispositius mòbils per assegurar una càrrega ràpida i una millor experiència d'usuari.

Imatges responsives: Utilitza atributs srcset i sizes per carregar imatges adequades segons la mida de la pantalla.
Lazy loading: Carrega les imatges només quan siguin necessàries.

<img src="small.jpg" srcset="small.jpg 320w, medium.jpg 768w, large.jpg 1024w" sizes="(max-width: 320px) 280px, (max-width: 768px) 720px, 1024px" alt="Example image">

Navegació Adaptativa

La navegació ha de ser fàcil d'utilitzar en dispositius mòbils. Això pot incloure menús desplegables o hamburguesa.

<nav>
    <button id="menu-toggle">☰</button>
    <ul id="menu">
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>

<script>
    document.getElementById('menu-toggle').addEventListener('click', function() {
        var menu = document.getElementById('menu');
        if (menu.style.display === 'block') {
            menu.style.display = 'none';
        } else {
            menu.style.display = 'block';
        }
    });
</script>

Proves i Optimització

Finalment, és crucial provar el lloc web en diferents dispositius i navegadors per assegurar que el disseny mobile-first funcioni correctament.

Eines de desenvolupador: Utilitza les eines de desenvolupador del navegador per simular diferents dispositius.
Proves en dispositius reals: Si és possible, prova el lloc web en dispositius mòbils reals per obtenir una experiència d'usuari autèntica.

Exercici Pràctic

Objectiu

Crear una pàgina web senzilla que segueixi els principis del disseny mobile-first.

Instruccions

Crea un fitxer HTML amb una estructura bàsica.
Afegeix estils CSS per a mòbils com a base.
Utilitza consultes de mitjans per adaptar el disseny a tauletes i ordinadors.
Optimitza les imatges per a diferents mides de pantalla.
Implementa una navegació adaptativa.

Solució

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Disseny Mobile-First</title>
    <style>
        /* Estils per a mòbils (base) */
        body {
            font-family: Arial, sans-serif;
            font-size: 16px;
            margin: 0;
            padding: 0;
            line-height: 1.5;
        }
        nav {
            background-color: #333;
            color: #fff;
            padding: 10px;
        }
        nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: none;
        }
        nav ul li {
            margin: 5px 0;
        }
        nav a {
            color: #fff;
            text-decoration: none;
        }
        #menu-toggle {
            background: none;
            border: none;
            color: #fff;
            font-size: 24px;
            cursor: pointer;
        }

        /* Estils per a tauletes */
        @media (min-width: 768px) {
            body {
                font-size: 18px;
            }
            nav ul {
                display: flex;
                justify-content: space-around;
            }
            nav ul li {
                margin: 0;
            }
            #menu-toggle {
                display: none;
            }
        }

        /* Estils per a ordinadors */
        @media (min-width: 1024px) {
            body {
                font-size: 20px;
            }
        }
    </style>
</head>
<body>
    <nav>
        <button id="menu-toggle">☰</button>
        <ul id="menu">
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
    <main>
        <h1>Benvingut al Disseny Mobile-First</h1>
        <p>Aquesta és una pàgina web senzilla que segueix els principis del disseny mobile-first.</p>
    </main>
    <script>
        document.getElementById('menu-toggle').addEventListener('click', function() {
            var menu = document.getElementById('menu');
            if (menu.style.display === 'block') {
                menu.style.display = 'none';
            } else {
                menu.style.display = 'block';
            }
        });
    </script>
</body>
</html>

Conclusió

El disseny mobile-first és una estratègia essencial en el desenvolupament web modern. Prioritzant els dispositius mòbils, assegurem que els nostres llocs web siguin accessibles, funcionals i agradables per a la majoria dels usuaris. Utilitzant consultes de mitjans, optimitzant recursos i implementant una navegació adaptativa, podem crear experiències web que funcionin bé en qualsevol dispositiu.

Disseny Mobile-First

Per què Mobile-First?

Estratègia Mobile-First

Començar amb una Base Simple

Utilitzar Consultes de Mitjans (Media Queries)

Optimitzar Imatges i Recursos

Navegació Adaptativa

Proves i Optimització

Exercici Pràctic

Objectiu

Instruccions

Solució

Conclusió

Domini del CSS: De Principiant a Avançat

Mòdul 1: Introducció al CSS

Mòdul 2: Estilització de Text i Fonts

Mòdul 3: Model de Caixa i Disseny

Mòdul 4: Posicionament i Flotació

Mòdul 5: Flexbox

Mòdul 6: CSS Grid

Mòdul 7: Tècniques Avançades de CSS

Mòdul 8: Disseny Responsiu

Mòdul 9: Preprocessadors i Frameworks

Mòdul 10: Millors Pràctiques i Optimització

Mòdul 11: Projecte: Construir un Lloc Web Responsiu