Logotipo de Xitrus.
sígueme en facebook

Sígueme

R L E F G I

Buscar

Cargando

Lo último del blog

Twitter

Hosting

Xitrus está alojado en:

Xitrus está alojado en Cyberneticos.
21
7

Responsive Design

¿Responsive Design?
¡Si!, el diseño web responsivo (o sensible a distintos tamaños de pantalla) es la mejor manera de adaptar un diseño a todos los medios (PC, Smartphone, Tablet), sin tener que crear varias páginas distintas, solo con CSS.

ilustración que muestra la compatibilidad con pc, tablet y smartphone

Cuando tenemos en nuestra web un diseño responsivo al hacer la ventana más pequeña tiene que adaptarse el ancho, no tiene que aparecer el scroll horizontal, algo que resulta muy cómodo a la hora de estar leyendo un articulo o una entrada en un blog, así solo el visitante tiene que moverse para abajo.
Sobre todo se tiene en cuenta este tipo de diseño porque cuando te tienes que desplazar a un lateral para leer alguna cosa resulta muy incomodo, ya que en cada línea deberíamos de desplazarnos. Hay que tener en cuenta que nada se salga de su sitio, como imágenes o texto, y estructurar bien columnas o elementos contiguos para que se adapten a los tamaños sin deformarse.

Xitrus tiene todo el diseño responsivo, cambiando, por ejemplo, la estructura del menú, poniéndose en línea uno debajo de otro por debajo de los 840px, al igual que la columna lateral (si, la pegada con celo) que cuando la pantalla es más estrecha de la cuenta se pasa abajo de todo el contenido, para dejar espacio al texto y demás.

Otro ejemplo seria Morehazards, entre otros muchos, no dudéis en cambiar el tamaño de la ventana para ver el cambio.

Hay varios factores a tener en cuenta cuando hacemos un diseño responsivo:

  • Los tamaños en porcentajes, hacerlo con pixeles hará que nuestra web no se adapte bien al ancho de pantalla.
  • Cuando crees elementos que aparecen al lado al reducir el tamaño de la pantalla deberían de colocarse uno encima del otro, es algo muy usado en este tipo de diseños.
  • Un diseño responsivo deja de serlo si tu fondo se repite, hazlo escalable o al menos que se cambie según el tamaño.
  • Usa herramientas que existen gratuitamente que te proporcionan los elementos que te hacen falta para tener un diseño responsivo (por ejemplo: Skeleton, entre otros muchos).
  • Las imágenes, aunque cueste hay que hacer que se adapten y nunca sobresalgan del lugar que tienen, ya que es un detalle que queda muy mal.
  • ¡Busca e inspírate!, el diseño no te llegara fácilmente si no buscas ideas, no me refiero a hacer lo mismo, pero como implementan un diseño adaptado otras páginas.
  • Y siempre: pruébalo, y después vuélvelo a probar, un diseño responsivo no es tan fácil de hacer funcionar como parece, tienes que ver en que tamaño de ventana tu diseño no es adeciado, y hacer los cambios pertinentes.

ejemplo en distintos medios de una web responsiva

La forma de usarlo es sencilla, gracias a CSS y CSS3 podemos hacerlo de forma facil con distintos elementos.

Unos de los mas importantes son max-width, min-width, max-height y min-height que tienen como función especificar el máximo o mínimo tamaño que tendrá un elemento, por ejemplo, si nuestra pagina para ser responsiva tiene un contenedor (con texto e imágenes) con un ancho del 100% no significa que queramos que ocupe toda la pantalla, para que no sea mas grande de la cuenta establecemos un max-width, que hará que tenga el ancho que queramos, pero cuando hagamos la ventana mas pequeña ocupe toda la pantalla, para facilital la lectura (podéis probarlo en esta página si tenéis una resolución con mas de 1200px de ancho).

Con las imágenes podemos hacer lo mismo, hacer que en pantallas pequeñas la imagen no salga por los lados y se adapte correctamente estableciendo un ancho máximo (mejor en porcentajes).

En CSS3 se implementa el parámetro media, con el que podemos especificar que muestre distintos contenidos según se vea desde un pc, se imprima la página o veamos la web desde un smartphone. Además podemos especificar distintos parámetros para que cambien los elementos.
Para ayudaros a crear diseños responsivos he hecho una pequeña documentación de @media en CSS.

Más sobre Responsive Design

En Xitrus encontrarás más temas relacionados (e importantes) con el Responsive Design:

Comentarios

Sígueme

R L E F G I

Buscar

Cargando

Lo último del blog

Twitter

Hosting

Xitrus está alojado en:

Xitrus está alojado en Cyberneticos.
Cerrar sesión
Usuario: Contraseña: