Don't forget the Chrome Dev Summit, starting Monday at 10:00am (Pacific) and streaming live on YouTube. Schedule.

Tu primer sitio multidispositivo

muchos dispositivos que muestran el proyecto final

La creación de experiencias multidispositivos no es tan difícil como podría parecer. En esta guía, crearemos una página de destino de producto para el Curso de desarrollo web móvil CS256 que funcione bien en distintos tipos de dispositivos.

Compilar para múltiples dispositivos con diferentes características, tamaños de pantalla y métodos de interacción muy diversos puede parecer intimidante, si no imposible para dar los primeros pasos.

No es tan difícil crear sitios completamente adaptables, y para demostrártelo, esta guía te orientará en los pasos para comenzar. Lo hemos dividido en dos simples pasos:

  1. Definir la arquitectura de la información (comúnmente denominada AI) y la estructura de la página.
  2. Agregar elementos de diseño para hacerla receptiva y asegurarte de que se vea bien en todos los dispositivos.

Crea tu contenido y estructura

El contenido es el aspecto más importante de cualquier sitio. Así que, diseñemos para el contenido y no permitamos que el diseño dicte el contenido. En esta guía, identificaremos el contenido que necesitamos primer, crearemos una estructura de página basada en este contenido y luego presentaremos la página en un simple diseño lineal que funcione bien en ventanas de visualización estrechas y anchas.

Crea la estructura de la página

Hemos identificado que necesitamos lo siguiente:

  1. Un área en la que se describa de forma detallada nuestro producto “CS256: Desarrollo de Web móvil”.
  2. Un formulario para recopilar información de los usuarios interesados en nuestro producto.
  3. Una descripción detallada y un video.
  4. Imágenes del producto en acción.
  5. Una tabla de datos con información para respaldar las afirmaciones.

TL;DR

  • Primero, identifica el contenido que necesitas.
  • Delimita la arquitectura de la información (AI) para ventanas de visualización estrechas y anchas.
  • Crea una vista preliminar de la página con contenido, pero sin estilo.

También hemos creado una arquitectura de la información y un diseño preliminares para las ventanas de visualización ancha y estrecha.

AI para la ventana de visualización estrecha
AI para la ventana de visualización estrecha
AI para la ventana de visualización ancha
AI para la ventana de visualización ancha

Esto se puede convertir fácilmente en las secciones generales de una página preliminar que usaremos durante el resto de este proyecto.

<!doctype html>
<html>
  <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>CS256: Mobile Web development - structure</title>
  </head>
  <body>   
    <div id="headline">
      <header>
        <h1></h1>
        <p></p>
      </header>
      <div id="blurb">
        <p></p>
        <ul>
          <li>
        </ul>
      </div>
      <form method="post" id="register"> 
      </form>
    </div>
    <div id="section1">
      <h2></h2>
      <p></p>
      <ul>
        <li>
      </ul>
      <video></video>
    </div>
    <div id="section2">
      <h2></h2>
      <p></p>
      <div id="images">
        <img>
      </div>
    </div>
    <div id="section3">
      <h2></h2>
      <p></p>
    </div>
    <footer>
      <p></p>
    </footer>
<script>
  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
  e.src='//www.google-analytics.com/analytics.js';
  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
  ga('create','UA-52746336-1');ga('send','pageview');
  var isCompleted = {};
  function sampleCompleted(sampleName){
    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
      isCompleted[sampleName] = true;
    }
  }
</script>
  </body>
</html>

Pruébalo

Agrega contenido a la página

La estructura básica del sitio está completa. Tenemos conocimiento de las secciones que necesitamos, del contenido que queremos mostrar en esas secciones y de dónde ubicarlo en la arquitectura de la información general. Ahora podemos comenzar a compilar el sitio.

Crea el título y el formulario

El título y el formulario de notificación de solicitud son los componentes fundamentales de nuestra página y se le deben presentar al usuario de inmediato.

En el título, ingresa texto sencillo para describir el curso:

<div id="headline">
  <div class="container">
    <header>
      <h1>Mobile Web Development</h1>
      <p>Building Mobile Web Experiences</p>
    </header>
    <div id="blurb">
      <p>So you've heard mobile is kind of a big deal, and you're not
      sure how to transform your traditional desktop-focused web apps
      into fast, effective multi-device experiences.</p>
      <p>This course is designed to teach web developers what
      they need to know to create great cross-device web
      experiences.</p>
      <p>This course will focus on building mobile-first web apps,
      which will work across multiple platforms including:</p>
      <ul>
        <li>Android,</li>
        <li>iOS,</li>
        <li>and others.</li>
      </ul>
    </div>
    <form method="post" id="register">
    </form>
  </div>
</div>

Pruébalo

También debemos llenar el formulario. Será sencillo y en él se registrarán el nombre, la dirección de correo electrónico y el número de teléfono de los usuarios.

Todos los formularios deben tener etiquetas y marcadores de posición para que los usuarios puedan, con mayor facilidad, enfocar los elementos, comprender qué deben contener y contribuir a que las herramientas de accesibilidad identifiquen la estructura del formulario. El atributo name no solo envía el valor del formulario al servidor, sino también se usa para dar pautas importantes al navegador sobre cómo completar el formulario de forma automática para el usuario.

Agregaremos tipos semánticos para que los usuarios puedan ingresar contenido en un dispositivo móvil de forma rápida y simple. Por ejemplo, al ingresar un número de teléfono, el usuario solo debe ver un teclado de marcado.

<form method="post" id="register">
   <h2>Register for the launch</h2>
   <label for="name">Name</label>
   <input type="text" name="name" id="name" 
      placeholder="Thomas A Anderson" required>
   <label for="email">Email address</label>
   <input type="email" name="email" id="email" 
      placeholder="neo@example.com" required>
   <label for="tel">Telephone</label>
   <input type="tel" name="tel" id="tel" 
      placeholder="(555) 555 5555" required>
   <input type="submit" value="Sign up">
</form>

Pruébalo

Crea la sección de video e información

La sección de contenido de video e información es un poco más compleja. Tendrá una lista de viñetas con las características de nuestros productos y un marcador de posición de video que mostrará al usuario el producto en funcionamiento.

<div id="section1">
  <h2>What will I learn?</h2>
  <p>After completing this class, you'll have built a web application with a first-class mobile experience.</p>
  <p>You'll understand what it takes to:</p>
  <ul>
    <li>build great web experiences on mobile devices</li>
    <li>use the tools you need to test performance</li>
    <li>apply your knowledge to your own projects in the future</li>
  </ul>
  <video controls poster="udacity.png">
    <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm"></source>
    <source src="udacity.mov" type="video/mov"></source>
    <p>Sorry your browser doesn't support video. 
       <a href="udacity.mov">Download the video</a>.
    </p>
  </video>
  <br>
</div>

Pruébalo

Los videos generalmente se usan para describir contenido de forma más interactiva y, con frecuencia, para ofrecer una demostración de un producto o concepto.

Si sigues las prácticas recomendadas, podrás integrar fácilmente video a tu sitio:

  • Agrega un atributo controls para permitir que las personas puedan reproducir el video de forma sencilla.
  • Agrega una imagen poster para proporcionar una vista previa del contenido.
  • Agrega varios elementos <source> según los formatos de video compatibles.
  • Agrega texto de referencia para que las personas descarguen el video si no pueden reproducirlo en la ventana.
<video controls poster="udacity.png">
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm"></source>
  <source src="udacity.mov" type="video/mov"></source>
  <p>Sorry your browser doesn't support video. 
     <a href="udacity.mov">Download the video</a>.
  </p>
</video>

Pruébalo

Crea la sección de imágenes

Los sitios sin imágenes pueden ser un poco aburridos. Hay dos tipos de imágenes:

  • Imágenes de contenido: imágenes alineadas en el documento que se usan para proporcionar información adicional sobre el contenido.
  • Imágenes estilísticas: imágenes que se usan para mejorar la apariencia del sitio; generalmente son imágenes de fondo, patrones y gradientes. Cubriremos esto en la siguiente sección.

La sección de imágenes de nuestra página es una colección de imágenes de contenido.

Las imágenes de contenido son fundamentales para transmitir el sentido de la página. Piensa en ellas como las imágenes que se usan en los artículos periodísticos. Las imágenes que usamos son imágenes de los tutores del proyecto: Chris Wilson, Peter Lubbers y Sean Bennet.

<div id="section2">
  <h2>Who will teach me?</h2>
  <p>The world's leading mobile web developers.</p>

  <div id="images">
    <img src="chriswilson.png" alt="Chris Wilson: Course Instructor">
    <img src="peterlubbers.png" alt="Peter Lubbers: Course Instructor">
    <img src="seanbennett.png" alt="Sean Bennet: Course Developer">
  </div>

  <br>
</div>

Pruébalo

Las imágenes están configuradas para que puedan agrandarse hasta ocupar el 100% del ancho de la pantalla. Esto funciona bien en dispositivos con una ventana de visualización estrecha, aunque no tan bien en los que tienen una ventana de visualización ancha (como una computadora de escritorio). Abordaremos esto en la sección de diseño adaptable.

Muchas personas no pueden ver imágenes y, a menudo, usan una tecnología de asistencia, como un lector de pantalla que analizará los datos de la página y se los transmitirá al usuario verbalmente. Debes asegurarte de que todas tus imágenes de contenido tengan una etiqueta descriptiva alt que el lector de pantalla pueda reproducir para el usuario.

Al agregar etiquetas alt, asegúrate de que el texto alt sea lo más conciso posible para describir la imagen por completo. Por ejemplo, en nuestra demostración, simplemente aplicamos formato al atributo para que sea “Name: Role”; esto presenta suficiente información al usuario para que comprenda que esta sección es sobre los autores y su trabajo.

Agrega la sección de datos tabulados

La última sección es una tabla sencilla que se usa para mostrar las estadísticas específicas para un producto.

Las tablas solo deben usarse para datos tabulares; es decir, matrices de información.

<div id="section3">
  <h2>Mobile. Why should I care?</h2>
  <p>It is huge.  Everywhere.</p>
  <table>
    <caption>
      <p>Data from <a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-ww-monthly-201303-201403">StatsCounter</a></p>
    </caption>
    <thead>
       <tr>
         <th>Country</th>
         <th>Desktop share</th>
         <th>Tablet share</th>
         <th>Mobile share</th>
       </tr>
    </thead>
    <colgroup>
       <col span="1">
       <col span="1">
       <col span="1">
       <col span="1">
    </colgroup>
    <tbody>
     <tr>
        <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-IN-monthly-201303-201403">India</a></td>
        <td>32%</td>
        <td>1%</td>
        <td>67%</td>
      </tr>
      <tr>
        <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-GB-monthly-201303-201403">GB</a></td>
        <td>69%</td>
        <td>13%</td>
        <td>18%</td>
      </tr>
      <tr>
        <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-US-monthly-201303-201403">US</a></td>
        <td>69%</td>
        <td>9%</td>
        <td>22%</td>
      </tr>
      <tr>
        <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-CN-monthly-201303-201403">China</a></td>
        <td>86%</td>
        <td>4%</td>
        <td>10%</td>
      </tr>
    </tbody>
  </table>
  <br>
</div>

Pruébalo

Agrega un pie de página

La mayoría de los sitios necesitan un pie de página para mostrar contenido como Términos y condiciones, exenciones de responsabilidad y otro contenido que no se haya previsto para el área de navegación principal o el área de contenido principal de la página.

En nuestro sitio, solo crearemos un pie de página con un marcador de posición sencillo.

<footer>
  <div class="container">
    <p>We always need a footer.</p>
  </div>
</footer>

Pruébalo

Resumen

Creamos el boceto del sitio e identificado todos los elementos estructurales más importantes. También nos aseguramos de tener preparado todo el contenido correspondiente para satisfacer nuestras necesidades comerciales.

Notarás que el aspecto de la página es muy malo en este momento; esto es intencional. El contenido es el aspecto más importante de cualquier sitio, y necesitábamos asegurarnos de tener una arquitectura y densidad de información buenas y sólidas. Esta guía nos proporcionó una excelente base sobre la que seguiremos aprendiendo. En la próxima guía, aplicaremos estilo a nuestro contenido.

Que sea adaptable

Se puede acceder a la web desde una gran variedad de dispositivos, desde teléfonos de pantalla pequeña hasta televisiones de pantalla enorme. Cada dispositivo presenta sus propios beneficios y restricciones únicos. Como programador web, se espera que soportes todas las variedades de dispositivos.

Estamos compilando un sitio que funcione en diferentes pantallas y tipos de dispositivos. Hemos creado la arquitectura de la información de la página y creado una estructura básica. En esta sección, tomaremos nuestra estructura básica con contenido y la convertiremos en una hermosa página que sea receptiva en una gran cantidad de tamaños de pantalla.

Siguiendo los principios de desarrollo web con prioridad en los dispositivos móviles, comenzamos con una ventana de visualización estrecha — similar a la de un teléfono móvil — y desarrollaremos primero para ese tipo de experiencia. Luego ascendemos a clases de dispositivos más grandes. Podemos hacerlo generando una ventana de visualización más ancha y tomando una decisión sobre si el diseño luce bien.

Anteriormente, creamos un par de diseños diferentes de alto nivel para establecer cómo se debe mostrar nuestro contenido. Ahora necesitamos adaptar nuestra página a esos diferentes diseños. Para esto, debemos decidir dónde ubicar los puntos de interrupción (un punto donde el diseño y los estilos cambian) en función de cómo se adapta el contenido al tamaño de la pantalla.

TL;DR

  • Usa siempre una ventana de visualización.
  • Comienza siempre con una ventana de visualización estrecha y luego agrándala.
  • Basa tus puntos de interrupción cuando necesites adaptar contenido.
  • Crea una vista de alto nivel de tu diseño en los principales puntos de interrupción.

Agregar una ventana de visualización

Incluso para una página básica, siempre tienes que incluir la metaetiqueta de una ventana de visualización. La ventana de visualización es el componente más crítico que necesitas para compilar experiencias multidispositivo. Sin ella, tu sitio no funcionará bien en un dispositivo móvil.

La ventana de visualización indica al navegador que se debe modificar el tamaño de la página para que quepa en la pantalla. Existen muchas configuraciones diferentes que puedes especificar para tu ventana de visualización a fin de controlar la visualización de la página. Como opción predeterminada, te recomendamos la siguiente:

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

Pruébalo

La ventana de visualización se encuentra en el encabezado del documento y solo se debe declarar una vez.

Aplica un estilo sencillo

Nuestro producto y nuestra empresa ya tienen pautas de marca y fuente que se proporcionan en una guía de estilo.

Guía de estilo

Una guía de estilo es una manera útil de comprender en detalle la representación visual de la página y te ayuda a asegurarte de mantener la uniformidad en todo el diseño.

Colores

#39b1a4
#ffffff
#f5f5f5
#e9e9e9
#dc4d38

Agrega imágenes estilísticas

Sitio diseñado

En la guía anterior, agregamos imágenes llamadas “imágenes de contenido”. Estas eran imágenes importantes para la narrativa de nuestro producto. Las imágenes estilísticas son imágenes que no se necesitan como parte del contenido principal, pero agregan un toque visual o ayudan a atraer la atención del usuario hacia un elemento de contenido específico.

Un buen ejemplo de esto es una imagen de título para el contenido de la “mitad superior de la página”. Generalmente, se usa para incentivar al usuario a leer más acerca del producto.

Incluirlas puede ser muy sencillo. En nuestro caso, será el fondo del encabezado y lo aplicaremos mediante CSS sencilla.

#headline {
  padding: 0.8em;
  color: white;
  font-family: Roboto, sans-serif;
  background-image: url(backgroundimage.jpg);
  background-size: cover;
}

Escogimos una imagen de fondo simple que se ve borrosa de modo que no se quite del contenido, y la configuramos para que cover todo el elemento; de ese modo, cuando se estira mantiene la relación de aspecto correcta.

Configura el primer punto de interrupción

El diseño comienza a verse mal a los 600 píxeles de ancho aproximadamente. En nuestro caso, la extensión de la línea supera las 10 palabras (extensión de lectura óptima), y ahí es donde deseamos cambiarla.

600 px parece ser un buen lugar para crear nuestro primer punto de interrupción, ya que nos brindará alcance para volver a ubicar los elementos para que entren mejor en la pantalla. Podemos hacerlo usando una tecnología llamada Consultas de medios.

@media (min-width: 600px) {

}

Una pantalla más grande ofrece más espacio; por lo tanto, existe más flexibilidad con respecto a cómo puede mostrarse el contenido.

En el contexto de la página para nuestro producto, al parecer deberemos hacer lo siguiente:

  • restringir el ancho máximo del diseño;
  • modificar el relleno de los elementos y reducir el tamaño del texto;
  • mover el formulario para que flote en línea con el contenido del encabezado;
  • hacer que el video flote alrededor del contenido;
  • reducir el tamaño de las imágenes y hacer que aparezcan en una cuadrícula más atractiva.

Restringir el ancho máximo del diseño

Decidimos tener solo dos diseños principales: una ventana de visualización estrecha y una ancha, lo cual simplifica notablemente nuestro proceso de compilación.

También decidimos crear secciones sin borde en la ventana de visualización estrecha que continuarán sin bordes en la ventana de visualización ancha. Esto significa que debemos limitar el ancho máximo de la pantalla de modo que el texto y los párrafos no se extiendan en una sola línea larga en las pantallas ultraanchas. Decidimos que este punto será de aproximadamente 800 píxeles.

Para lograr esto, debemos limitar el ancho y centrar los elementos. Debemos crear un contenedor alrededor de cada sección principal y aplicar un margin: auto. Esto permitirá que se agrande la pantalla, pero el contenido se mantendrá centrado y en un tamaño máximo de 800 píxeles.

El contenedor será un div simple con la siguiente forma:

<div class="container">...</div>
<div id="section1">
  <div class="container">
    <h2>What will I learn?</h2>
.container {
  margin: auto;
  max-width: 800px;
}

Pruébalo

Modificar el relleno y reducir el tamaño del texto

En la ventana de visualización estrecha, no tenemos mucho espacio para mostrar contenido, por lo que el tamaño y el peso de la tipografía a menudo se reducen drásticamente para ajustarse a la pantalla.

Con una ventana de visualización más grande, debemos tener en cuenta que es más probable que el usuario use una pantalla más grande a mayor distancia. Para facilitar la lectura del contenido, podemos aumentar el tamaño y el volumen de la tipografía, y también podemos modificar el relleno para lograr que se destaquen más determinadas áreas.

En nuestra página de productos, aumentaremos el relleno de los elementos de la sección configurándola para que conserve un 5% del ancho. También aumentaremos el tamaño de los encabezados para cada una de las secciones.

#headline {
  padding: 20px 5%;
}

Pruébalo

Adaptar elementos a la ventana de visualización ancha

Nuestra ventana de visualización estrecha era una visualización lineal apilada. Cada sección principal y el contenido dentro de ellas se exhibían en orden de arriba abajo.

Una ventana de visualización ancha nos da más espacio destinado a mostrar el contenido de forma óptima para esa pantalla. Para nuestra página de productos, esto significa que de acuerdo con nuestra AI podemos:

  • mover el formulario alrededor de la información del encabezado;
  • ubicar el video a la derecha de los puntos claves;
  • disponer las imágenes en mosaico;
  • expandir la tabla.

Hacer flotar el elemento de formulario

La ventana de visualización estrecha implica que contamos con mucho menos espacio horizontal disponible para ubicar elementos en la pantalla de forma cómoda.

Para usar el espacio horizontal de la pantalla de forma más eficaz, debemos separar el flujo lineal del encabezado y mover el formulario y la lista de modo que queden a la par.

#headline #blurb {
  float: left; 
  font-weight: 200;
  width: 50%;
  font-size: 18px;
  box-sizing: border-box;
  padding-right: 10px;
}

#headline #register {
  float:right;
  padding: 20px;
  width: 50%;
  box-sizing: border-box;
  font-weight: 300;
}

#headline br {
  clear: both;
}

Pruébalo

Hacer flotar el elemento de video

El video de la interfaz de la ventana de visualización estrecha está diseñado para ocupar el ancho total de la pantalla y ubicarlo después de la lista de funciones claves. En una ventana de visualización ancha, el video se agrandará demasiado y no se verá bien cuando se disponga junto a nuestra lista de funciones.

El elemento de video debe desplazarse del flujo vertical de la ventana de visualización estrecha y mostrarse junto a la lista de viñetas de contenido en una ventana de visualización ancha.

#section1 ul {
  box-sizing: border-box;
  float: left;
  width: 50%;
  padding-right: 1em;
}

#section1 video {
  width: 50%;
  float: right;
}

Pruébalo

Disponer las imágenes en mosaico

Las imágenes de la interfaz de la ventana de visualización estrecha (mayormente en dispositivos móviles) están configuradas para ocupar el ancho total de la pantalla y se apilan verticalmente. Esto no se ajusta bien a escala en una ventana de visualización ancha.

Para lograr que las imágenes se vean correctamente en una ventana de visualización ancha, se ajustan al 30% del ancho del contenedor y se exhiben horizontalmente (en lugar de verticalmente en la vista estrecha). También agregaremos radio de borde y sombra de cuadro para que las imágenes se vean más atractivas.

#section2 div img {
  width: 30%;
  margin: 1%;
  box-sizing: border-box;
  border-radius: 50% 50%;
  box-shadow: black 0px 0px 5px;
}

Pruébalo

Hacer que las imágenes sean sensibles a los PPP

Cuando uses imágenes, ten en cuenta el tamaño de la ventana de visualización y la densidad de la pantalla.

La Web fue creada para pantallas de 96 ppp. Con la introducción de los dispositivos móviles, observamos un aumento enorme en la densidad de píxeles de las pantallas, por no mencionar las pantallas de clase Retina de las laptops. Las imágenes codificadas para 96 ppp generalmente tienen un muy mal aspecto en dispositivos con valores altos de ppp.

Tenemos una solución que aún no se ha adoptado ampliamente. En navegadores que la soportan, puedes mostrar una imagen de alta densidad en una pantalla de alta densidad.

<img src="photo.png" srcset="photo@2x.png 2x">

Tablas

Es muy difícil reproducir tablas correctamente en dispositivos con ventana de visualización estrecha, por lo que se les debe dar consideración especial.

Te recomendamos que en una ventana de visualización estrecha transformes tu tabla convirtiendo cada fila en un bloque de pares de clave/valor (donde la clave sea lo que era anteriormente el encabezado de la columna y el valor aún sea el valor de la celda). Por suerte, no es tan difícil. Primero, anota cada elemento td con el encabezado correspondiente como un atributo de datos. (Esto no podrá visualizarse hasta que agregues más CSS).

<tbody>
 <tr>
    <td data-th="Country"><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-IN-monthly-201303-201403">India</a></td>
    <td data-th="Desktop share">32%</td>
    <td data-th="Table share">1%</td>
    <td data-th="Mobile share">67%</td>
  </tr>
  <tr>
    <td data-th="Country"><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-GB-monthly-201303-201403">GB</a></td>
    <td data-th="Desktop share">69%</td>
    <td data-th="Table share">13%</td>
    <td data-th="Mobile share">18%</td>
  </tr>
  <tr>
    <td data-th="Country"><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-US-monthly-201303-201403">US</a></td>
    <td data-th="Desktop share">69%</td>
    <td data-th="Table share">9%</td>
    <td data-th="Mobile share">22%</td>
  </tr>
  <tr>
    <td data-th="Country"><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-CN-monthly-201303-201403">China</a></td>
    <td data-th="Desktop share">86%</td>
    <td data-th="Table share">4%</td>
    <td data-th="Mobile share">10%</td>
  </tr>
</tbody>

Pruébalo

Ahora solo necesitamos agregar la CSS para ocultar el thead original y, en su lugar, mostrar las etiquetas data-th usando un seudoelemento :before. Como resultado, se obtendrá la experiencia para diferentes dispositivos que verás en el siguiente video.

En nuestro sitio, tuvimos que crear un punto de interrupción adicional solo para el contenido de la tabla. Cuando compilas primero para un dispositivo móvil, es más difícil deshacer los estilos aplicados, así que tenemos que separar el CSS de la tabla de la ventana de visualización estrecha del css de la ventana de visualización ancha. Esto nos brinda una clara y consistente interrupción.

@media screen and (max-width: 600px) {
  table thead {
    display: none;
  }

  table td {
    display: block;
    position: relative;
    padding-left: 50%;
    padding-top: 13px;
    padding-bottom: 13px;
    text-align: left;
    background: #e9e9e9;
  }

  table td:before {
    content: attr(data-th) " :";
    display: inline-block;
    color: #000000;
    background: #e9e9e9;
    border-right: 2px solid transparent;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 33%;
    max-height: 100%;

    font-size: 16px;
    font-weight: 300;
    padding-left: 13px;
    padding-top: 13px;
  }
}

Pruébalo

Resumen

Si sigues estas pautas, empezarás con el pie derecho:

  1. Crea una AI básica y comprende tu contenido antes de codificar.
  2. Siempre establece una ventana de visualización.
  3. Crea tu experiencia base sobre un acercamiento que priorice los dispositivos móviles.
  4. Una vez que tengas tu experiencia móvil, aumenta el ancho de la pantalla hasta que no se vea bien y establece allí tu punto de interrupción.
  5. Continúa iterando.