Xitrus está alojado en:
¿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.
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:
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).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.
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 Xitrus encontrarás más temas relacionados (e importantes) con el Responsive Design:
Xitrus está alojado en:
