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

Disseny Mobile-First

Següent ►
►

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 considerar altres dispositius com tauletes o ordinadors de sobretaula. Aquesta tècnica s'ha convertit en una pràctica estàndard a causa de l'augment de l'ús de dispositius mòbils per accedir a Internet.

Per què Mobile-First?

  1. Creixement de l'ús mòbil: Amb més persones accedint a Internet a través de dispositius mòbils, és essencial assegurar-se que el lloc web ofereixi una experiència òptima en aquests dispositius.
  2. Optimització del rendiment: Els llocs dissenyats per a mòbils tendeixen a ser més lleugers i ràpids, ja que es centren en el contingut essencial.
  3. Millora de l'experiència d'usuari: Prioritzar el disseny mòbil ajuda a crear interfícies més netes i fàcils d'utilitzar.
  4. SEO: Els motors de cerca, com Google, prioritzen els llocs web que ofereixen una bona experiència mòbil.

Principis del Disseny Mobile-First

  • Contingut Prioritzat: Comença amb el contingut més important i afegeix elements secundaris a mesura que augmenta la mida de la pantalla.
  • Simplicitat: Mantingues el disseny senzill i directe, eliminant elements innecessaris que podrien distreure l'usuari.
  • Interacció Tàctil: Dissenya amb la interacció tàctil en ment, assegurant que els botons i enllaços siguin fàcils de tocar.
  • Tipografia Llegible: Utilitza fonts que siguin fàcils de llegir en pantalles petites.

Implementació del Disseny Mobile-First

  1. Començar amb CSS Bàsic

Comença amb un estil bàsic que funcioni bé en dispositius mòbils. Aquí tens un exemple de CSS bàsic per a un disseny mobile-first:

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px 0;
}

nav {
  display: flex;
  justify-content: center;
  background-color: #444;
}

nav a {
  color: #fff;
  padding: 10px;
  text-decoration: none;
}

main {
  padding: 20px;
}

  1. Afegir Media Queries per a Pantalles Més Grans

Després de crear el disseny bàsic per a mòbils, utilitza media queries per afegir estils per a pantalles més grans:

@media (min-width: 768px) {
  nav {
    justify-content: flex-start;
  }

  main {
    max-width: 800px;
    margin: 0 auto;
  }
}

@media (min-width: 1024px) {
  header {
    text-align: left;
    padding: 20px;
  }

  nav {
    justify-content: space-between;
  }
}

Exercici Pràctic

Objectiu: Crea una pàgina web senzilla utilitzant el disseny mobile-first.

  1. Crea un document HTML amb una estructura bàsica que inclogui un header, nav, i main.
  2. Aplica estils CSS bàsics per a mòbils, assegurant que el contingut sigui llegible i fàcil d'interactuar.
  3. Utilitza media queries per ajustar el disseny per a pantalles més grans, com tauletes i ordinadors de sobretaula.

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 Mobile-First</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>Benvingut al Disseny Mobile-First</h1>
  </header>
  <nav>
    <a href="#">Inici</a>
    <a href="#">Sobre Nosaltres</a>
    <a href="#">Contacte</a>
  </nav>
  <main>
    <p>Aquesta és una pàgina dissenyada amb l'estratègia mobile-first.</p>
  </main>
</body>
</html>

CSS (styles.css)

/* Estils bàsics per a mòbils */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px 0;
}

nav {
  display: flex;
  justify-content: center;
  background-color: #444;
}

nav a {
  color: #fff;
  padding: 10px;
  text-decoration: none;
}

main {
  padding: 20px;
}

/* Media queries per a pantalles més grans */
@media (min-width: 768px) {
  nav {
    justify-content: flex-start;
  }

  main {
    max-width: 800px;
    margin: 0 auto;
  }
}

@media (min-width: 1024px) {
  header {
    text-align: left;
    padding: 20px;
  }

  nav {
    justify-content: space-between;
  }
}

Conclusió

El disseny mobile-first és una estratègia essencial en el desenvolupament web modern. Prioritzant els dispositius mòbils, pots assegurar-te que el teu lloc web ofereix una experiència d'usuari òptima des del principi. A mesura que els dispositius mòbils continuen dominant l'accés a Internet, adoptar un enfocament mobile-first no només és recomanable, sinó necessari per a l'èxit del teu lloc web.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats