Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS
Code

Diseños Flexibles, Adaptivos al Móvil con CSS3

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by Jorge Montoya (you can also view the original English article)

Algunos expertos están proyectando a los dispositivos móviles para convertirse en el medio dominante para la navegación web dentro de cinco años, superando la navegación en las computadoras de escritorio. Independientemente de qué tan precisa resulte ser esta proyección, está claro que el formato de sitios web para la visualización amigable a móviles necesita convertirse en un elemento básico del diseño y el desarrollo web. Hay muchas maneras de lograr esto, por supuesto. Sin embargo, CSS3 proporciona un conjunto de herramientas bastante rico para el formato amigable para móviles, dependiendo de las capacidades del navegador del cliente en lugar de plantillas de back-end.


Paso 1. Piense con Anticipación

Hay algunos problemas que deben ser pensados ​​antes de ir directamente a dar estilo a un diseño.

Navegación Web Móvil

En primer lugar, ¿qué se debe tener en mente al diseñar para los navegadores móviles? Bueno, aquí hay algunas cosas...

  1. Límite de solicitudes HTTP: la transferencia de datos a través de 3G puede ser muy ardua. Esto incluye limitar las imágenes donde sea posible (desde el CSS, por ejemplo).
  2. Tamaños de pantalla variables: Los dispositivos móviles tienden a moverse alrededor de los anchos de pantalla de 320 a 480 píxeles, pero pueden variar mucho dependiendo del dispositivo. Por lo tanto, predefinir anchos en el CSS es generalmente una mala idea para cosas como párrafos y DIVs.
  3. Optimizar para un subconjunto: hay una gran cantidad de dispositivos móviles, navegadores, sistemas operativos, etc. Trate de enfocar sus pruebas en lo que suponemos que es lo más importante. Para mí, esto incluye iPhone, iPad, Blackberry y Android. Esta lista también debe incluir Windows Mobile, pero simplemente no tengo acceso a un dispositivo Windows Mobile.
  4. El Hover debe morir: Está bien, eso es un poco dramático. Sin embargo, las pantallas táctiles no tienden a soportar el hover. Por lo tanto, cuando se construyen menús, no oculte las cosas detrás de eventos hover. Hover sólo se debe utilizar para mejorar algunos efectos (como cambios de color) no entregar contenido importante (como menús desplegables).

"El punto general es saber de antemano qué aspecto tiene su sitio en varios navegadores antes de verlo".

Soporte de navegador (en las computadoras de escritorio)

En segundo lugar, mantenga el soporte de navegador en mente. El proverbial "elefante en la habitación" es IE, por supuesto. ¡Buenas noticias, sin embargo! Como resulta, los sitios web realmente no necesitan verse exactamente igual en todos los navegadores. Siempre que no interfiera con el contenido del sitio web, generalmente un navegador que no sea capaz de procesar CSS3 seguirá ofreciendo una experiencia más que aceptable. El punto general es saber de antemano lo que su sitio es probable que se vea en varios navegadores antes de verlo.


Paso 2. El HTML

El Cuerpo

"Mantenga el marcado simple y limpio."

No sólo queremos producir HTML válido, también queremos simplificarlo tanto como sea posible. A pesar de que siempre ha sido una buena idea mantener el HTML racionalizado y libre de DIVs innecesarios, es aún más importante ahora con el aumento de la navegación web móvil. Además, muchos de los efectos que requerían 7 etiquetas DIV anidadas ahora se pueden reproducir con un poco de CSS3.

Puesto que esto no es un tutorial de HTML5, voy a seguir con XHTML estricto. Teniendo esto en cuenta, mucho del marcado aquí se puede hacer aún más limpio usando algunos elementos HTML5. Así que, aquí hay algún HTML para un diseño típico. Tenemos una página que contiene un encabezado, un pie de página, un área de contenido y una barra lateral.

Como se puede ver, es un diseño de blog bastante simple y típico con unos pocos artículos y algunas opciones de menú en la barra lateral.

Metadatos de Viewport

En nuestro elemento head, vamos a poner todas las piezas típicas como hojas de estilo, tipo de contenido, título, etc. Sin embargo, hay una pieza extra que vamos a incluir a suavizar los navegadores móviles.

Esta es una pequeña etiqueta de metadatos, sugerida por Apple, para ayudar a los iPhones a representar una página. Esencialmente ajusta automáticamente la página a la ventana gráfica y evita el zoom. Varios otros navegadores móviles soportan esto también, incluyendo el navegador nativo de Blackberry. En mis pruebas, mantener esta etiqueta no daña la navegación de escritorio. Por lo tanto, vamos a pegarla en la sección head y a olvidarnos de ella.

Pensando en el Diseño

Este tutorial en particular se centrará en tomar el HTML anterior y darle estilo en dos diseños. Un diseño se orientará a la navegación móvil y otro a la navegación de escritorio. En la práctica, probablemente será útil romper tal disposición en varios "objetivos" diferentes. Sin embargo, por el bien de esta simplicidad, este tutorial se centrará sólo en esos dos.


Paso 3. El Estilo Móvil

Descargo de Responsabilidad

El propósito de este tutorial no es hablar de tipografía rica o brillante diseño gráfico. Por lo tanto, la presentación aquí se mantiene muy simple. Lo importante es el proceso de pensamiento que impulsa la hoja de estilo.

El Enfoque

El principal objetivo de todo esto es pensar en diseñar un diseño móvil en primer lugar. La razón de esto es que es probable que todo con lo que usted venga para un dispositivo móvil también funcionará en un escritorio. Luego, en lugar de terminar con un diseño móvil combinado y un diseño de escritorio brillante, comenzará con un brillante diseño móvil y mejorará para el escritorio. Esto también asegurará de que su sitio web no pierda su audiencia cuando el mundo se adhiera al móvil.

La Inspiración

Este enfoque está inspirado en Luke Wroblewski, quien habló en An Event Apart en Boston este año. Su presentación se centró en pensar "Mobile First".

Mientras que este tutorial no captura su presentación en ningún tipo de totalidad, una pieza de ella dió un batazo a home más que el resto (para mí). La tendencia actual es el diseño es trabajar en la versión de escritorio de un sitio web en primer lugar, luego retirarlo y lanzar un sitio web móvil si hay tiempo. En su lugar, debemos comenzar a diseñar para el mundo móvil en primer lugar, a continuación, cambiar ese diseño como se desee para el escritorio. El raciocinio es esencialmente de mejora progresiva ... si el diseño es útil en móviles, también funcionará en el escritorio. Lo contrario, sin embargo, no suele ser cierto.

Algo de CSS

Por lo tanto, vamos a pensar en la navegación móvil por un momento. Las pantallas de desplazamiento largas son difíciles de tratar. Así pues, tomemos los artículos de la lista de menú del blog y hagámoslos más fáciles de tratar.

Eso debería darnos un menú agradable y limpio con algunos separadores de aspecto de pipe. Usted notará de que no elegí mover el menú lejos de la parte inferior de la pantalla. Los menús en la parte inferior pueden ser útiles en la navegación móvil. Si usted piensa en desplazarse a través de una página web, cuando llegue al fondo tendría que desplazarse todo el camino de regreso para ir a otro lugar. Dependiendo del dispositivo, el desplazamiento puede ser algo molesto. Hay pros y contras de este método, pero en este caso, creo que funciona bien.

Sin embargo, me gustaría mover el RSS al banner superior, así que hagámoslo también.

Aparte de eso, el resto es más o menos un poco de tamaño de fuente de los elementos de título y el color de las anclas. Para los propósitos de este tutorial, he incluido un restablecimiento CS en la parte superior de la hoja sólo por simplicidad. La hoja completa de CSS se puede encontrar en el código fuente de este tutorial.

Como puede ver, realmente no hay nada especial sobre el estilo móvil al abordar el diseño desde un primer ángulo móvil. En lugar de pensar, "¿cómo quiero que se vea en mi pantalla," usted piensa "cómo puedo usar el estilo para hacer esto más útil en un dispositivo móvil".


Paso 4. El Estilo de Escritorio

Media Query

En caso de que no lo haya adivinado, todo esto va a terminar siendo impulsado por la media query de CSS3. En caso de que no esté familiarizado, la media query es una forma para que la hoja de estilos active y desactive las declaraciones basándose en diversas condiciones. Una condición de este tipo y el tema de esta hoja son las dimensiones de la pantalla.

Una vez más, el CSS completo se puede encontrar en la fuente adjunta a este tutorial, pero vamos a examinar esto por un momento:

En este caso, realmente no queremos un ancho de página de 800px a menos que estemos seguros de que la ventana del explorador del usuario tiene al menos 800px de ancho. De lo contrario, terminaremos con una de esas molestas barras de desplazamiento horizontal.

Por lo tanto, vamos a envolver esa declaración (junto con varias otras) dentro de una media query.

Eso se lee muy fácilmente, ¿verdad? El "all" se refiere a "utiliza este estilo para todos los tipos de medios". Hay otras cosas que pueden ir aquí, como "print" para la impresora, pero no existe soporte consistente. De todos modos, "all" funcionará bien para esto.

"Sobreescribir" Estilos anteriores

Vamos a poner gran cantidad de cosas adicionales dentro de esta media query también, pero lo importante es recordar esencialmente sobreescribir los estilos anteriores y añadir algunos nuevos para lograr el nuevo diseño. Esto permitirá a los navegadores que no admiten la media query simplemente retroceder al estilo original. A pesar de que están optimizados para móviles, no hay nada malo en mostrar ese diseño en un navegador de escritorio con menos capacidad.

Por ejemplo, moveremos esa barra lateral de la parte inferior y haremos que las listas parezcan listas nuevamente.

Eso colocará la barra lateral a la izquierda (combinada con un par de otros floats que se encuentran en la hoja de estilo) y ubicando la suscripción de nuevo donde pertenece para las personas que navegan por el sitio con un mínimo de 800 px de ancho.

Por lo tanto, si abre la fuente en un navegador y lo redimensiona de tamaño horizontalmente, podrá ver el cambio de formato entre el formato de escritorio y el formato compatible con dispositivos móviles

Usted puede preguntarse, ¿por qué 800px? ¿Hay algo mágico sobre una anchura de 800px? No. De hecho, yo diría que es demasiado amplio. Con la introducción de "snap" en Windows 7, diría que 600px debe ser el nuevo ancho de destino para un sitio web de escritorio. De esta manera, el navegador puede ser "encajado" a la derecha o a la izquierda en una pantalla de 1280px y mantener su diseño. Sin embargo, esto realmente no se trata de aquí ni allí. Sólo tenga en cuenta que 800px no es nada especial.

Soporte del Navegador

Importante: El sitio web se tendrṕa el estilo de la versión para móviles en IE8 y por debajo. ¿Esta bien esto? Creo que si. Además, he hecho esto antes y hasta ahora nadie me ha arrestado. Además, el soporte de media queries está prometido para IE9.


Paso 5. Métodos Alternativos

Esta no es la única manera de lograr esto. Sin embargo, el propósito de este tutorial fue mostrar un uso muy práctico para la media query y presentar algunas ideas de diseños móviles basados ​​únicamente en CSS.

Dicho esto, aquí hay algunas otras maneras de armar un diseño móvil ...

  • Servir diferentes plantillas: Si tiene acceso a las plantillas para el sitio, normalmente se puede establecer un sistema de temas en el lugar donde se detecta el navegador solicitante, luego se ofrece una plantilla HTML diferente según el tipo de navegador (móvil o no). Esto suele ir acompañado de un conjunto separado de CSS también.
  • Subdominios: m., mobile., y .mobi tienden a ser los estándares aquí, donde se sirve un sitio web totalmente diferente. Dicho esto, suele ser lo mismo que "servir diferentes plantillas" para evitar la duplicación de contenido.
  • Diseños fluidos: Uno también puede hacer su diseño completamente fluido de tal manera que no importa qué tamaño de la ventana del navegador, el contenido se ajusta. De hecho, la hoja de estilo "móvil" en este tutorial es un diseño fluido. Lo bueno de usar media queries es que usted puede reducir las imágenes de fondo y producir menos solicitudes HTTP.

Hay varios otros métodos de gestión de la navegación web móvil, pero a menudo se reducirá a un híbrido de algún tipo. Sin embargo, si se trata de un diseño fluido con ciertos puntos de "retroceso" basados ​​en media query o en una redirección de subdominio que sirve a diferentes plantillas, lo importante es comenzar a planificar los diseños móviles antes de tiempo, para que sus sitios web no sean cada vez menos útiles a lo largo de los próximos 5 años.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.