Con la aparición de toda la colección de dispositivos móviles que hay en el mercado, el Responsive Resign está a la orden del día. En este post, te explicaremos de forma breve, 3 pasos básicos a seguir para que tu sitio web se ajuste a cualquier dispositivo móvil.
Paso 1 Meta Tag
La mayoría de los navegadores móviles escala las páginas web a un ancho de ventana para que quepa en la pantalla. Utilizando la etiqueta meta viewport se puede indicar esto. A continuación, la etiqueta viewport le indica al navegador que utilice la anchura del dispositivo como la anchura de visualización y desactiva la escala inicial. Hay que incluir esta etiqueta meta en el head.
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
Paso 2 HTML Structure
En el siguiente ejemplo, tenemos un diseño de página básica con una cabecera, contenido, barra lateral, y un pie de página. La cabecera tiene una altura fija 180px, el contenido es de 600px de ancho y la barra lateral es de 300px de ancho.
![\"Responsive](\"https://rafavillaplana.com/wp-content/uploads/2013/06/Responsive-Design.png\")
Paso 3 Media Queries
CSS3 consulta los tamaños del dispositvo para conseguir el responsive design. Es como escribir las condiciones para decirle al navegador cómo hacer la página para un ancho de ventana especificado.
El siguiente conjunto de reglas será vigente si el ancho de ventana es de 980px o menos.
![\"Diseño](\"https://rafavillaplana.com/wp-content/uploads/2013/06/Responsive-Design-1.png\")
Luego para una vista de 700px o menos, hay que especificar el #content y #sidebar al ancho automático y borrar el float para que se muetre a modo de ancho completo.
![\"Diseño](\"https://rafavillaplana.com/wp-content/uploads/2013/06/Responsive-Design-2.png\")
Para 480px o menos (pantalla del móvil), hay que restablecer la altura #header a auto, cambiar el tamaño de la fuente a 24px y ocultar el # sidebar.
![\"Diseño](\"https://rafavillaplana.com/wp-content/uploads/2013/06/Responsive-Design-3.png\")
Se pueden definir tantos anchos de pantalla como se necesiten. En el post solo se han mostrado 3 ejemplos de media queries diferentes. El propósito del responsive design es aplicar diferentes reglas CSS para lograr diferentes diseños para el ancho de ventana especificado. Se pueden definir las reglas en la misma hoja de estilo o en un fichero css específico.
¿Qué experiencia teneís con el Responsive Design?¿Qué pasos seguís para el diseño responsive de vuestros sitios web?
Más de 10 años trabajando en proyectos SEO donde he conseguido aumentar las ventas a +100 empresas en más de 10 sectores distintos.
En Cloud TIC creamos un fichero CSS específico para el diseño responsive. De esta forma diferenciamos el estilo a nivel de CSS entre los 3 tamaños más usuales del mercado: PC, tablet y móvil.