En este artículo os mostraremos como desarrollar Maquetación web smartphones y tablets para que se adapte a diferentes resoluciones de pantallas. Tendencia que en inglés se llama Responsive Design. 

El objetivo es utilizar la clase y propiedades CSS3 media queries para adaptar un único diseño a diferentes resoluciones. Para ello basaremos la estructura de nuestra web y elementos en medidas relativas como «em» y «%».

Como resultado obtendremos una web mucho más navegable y funcional.

Actualización Bootstrap.

Este  post está escrito hace ya algún tiempo. Aunque el contenido de este post sigue estando en vigencia. He decidido grabar un vídeo tutorial donde resumo toda esta  información y además, encontrarás una introducción a Bootstrap. Una herramienta maravillosa que te ahorrará muchos calentamientos de cabeza en la  Maquetación web smartphones y tablets.

¿Quieres profesionalizar y aprender a utilizar Bootstrap? Te recomiendo mi curso: Maquetación para móviles y tablets con Bootstrap

[bctt tweet=»Aprende a adaptar tu #web a dispositivos móviles, ¡marchando una de #responsivedesign, por favor!»]

Principales ventajas de una web optimizada para moviles y tablets

  • Diseño adaptado a nuestra pantalla
  • Comodidad a la hora de navegar y leer textos al no tener que usar el zoom.
  • Contenido más directo, los elementos irrelevantes se eliminan.
  • Mayor impacto visual.

Diferencias de una web optimizada para moviles y tablets

Os dejo otro ejemplo de web con Responsive Design, como veis hay 3 versiones de la misma web que dependen del tamaño de la ventana y del dispositivo. Podéis encontrar muchos más ejemplos en: http://mediaqueri.es/

Para ver el funcionamiento de la clase @media sólo debéis ir estrechando la ventana de vuestro navegador.

Maquetación web smartphones y tablets

Maquetación web smartphones y tablets Comenzar…

1 Maqueta tu web utilizando unidades relativas:

En lugar de usar px utiliza % o em para el tamaño de tus capas, fuentes e imágenes (especialmente para el ancho). Así te será más cómodo adaptar tu web a diferentes resoluciones. Inicialmente puedes limitar la capa contenedora con la propiedad max-width, o bien establecer un ancho en px y luego cambiarlo a % a través de @media

2 Añade el meta tag viewport en el <head>

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

Este meta tag se utiliza para controlar cómo aparecerá el contenido HTML en los navegadores móviles. Así nos aseguramos que el contenido se ajusta al ancho del dispositivo. En este caso estamos indicando que el contenido tendrá el ancho del dispositivo y que la escala mínima y máxima es de 1. Más detalles e info

3 Utilzamos la clase @media para adaptar nuestra web

La expresión @media de css3, es fundamental. Nos permite establecer condiciones desde CSS para conocer el dispositivo desde el que se accede a nuestra web y aplicar nuevos estilos CSS. Por ejemplo: podemos eliminar el sidebar de nuestro blog si el navegador mide menos de 600px.

Tenéis la info más detallada en: http://www.w3.org/TR/css3-mediaqueries/

Las propiedades que más nos interesan son las siguientes:

a) width y height:

Ancho y alto del navegador (podemos añadir el prefijo min– o max-)

b) device-width y device-height:

Ancho y alto del dispositivo, móviles y tablets (podemos añadir el prefijo min– o max- )

c) orientation:

Orientación del móvil o tablet (para panorámico utilizaremos orientation:portrait, para vertical orientation:landscape)

¿Cómo trabajar con media queries?

Sintaxis, ejemplos básicos

Ventana o monitor menor de 800px

@media screen and (max-width: 800px) {
      #contenedor{
                           width:100%;
                           }
}

Con @media screen estamos iniciando la consulta media query, para añadir condiciones debemos utilizar «and». Es este caso estamos aplicando un ancho del 100% a la capa #contenedor si el monitor o ventana tiene una resolución inferior a 800px

Smartphones

@media screen and (max-device-width : 480px) {

        #sidebar{
	        display:none;
	        }

                #menu{
               text-align:center;
               }
}

Los anteriores estilos sólo se aplicaran a si el dispositivo tiene un ancho inferior a 480px

Ipad en posición vertical

@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape){
       .entry, .entry-content
       {
 	      font-size:1.2em;
	      line-height:1.5em;

	}
 }

Uniendo esta tres condiciones «and (min-device-width : 768px) and (max-device-width : 1024px)» Estamos limitando que los estilos sólo se apliquen a dispositivos que con una resolución de entre 768px y 1024, y con «and (orientation : landscape)» indicamos que se apliquen cuando estén en posición vertical.

Esta media query se aplicaría a Ipad.

Resoluciones y media queries para los principales móviles, tablets y monitores

Maquetación web smartphones y tablets

Aquí os dejo una lista de recursos

Maquetación web smartphones y tablets, Servicios para adaptar tu web a móviles y tablets.

Por último recordarte que si tienes una empresa, quieres una web a medida que se adapte a todos los dispotivos móviles visita nuestros servicios de Diseño web Estratégico

Maquetación web smartphones y tablets | Destaca Imagen diseño web en Elche

Maquetación web smartphones y tablets