Tres consejos para el diseño responsivo

Había dejado un poco tiradas las traducciones de Web Designer Wall tras haber hecho dos sobre diseño responsivo y media queries. Ahora voy con el tercer artículo (que curiosamente era el primero que leí) sobre cómo hacer una página con diseño responsivo en tres cómodos pasos.

El primer paso es desactivar la propiedad que hace que en algunos navegadores móviles el tamaño de la página se reduzca al de la pantalla (se reduzca a saco, sin adaptar nada más, dando como resultado muchas veces páginas inusables):

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Bueno, se me olvidaba comentar que como en todas las entradas de esta web hay una demo. Lo siguiente para el diseño es usar adecuadamente la estructura de HTML5, que en el ejemplo sería:

<div id="pagewrap">
  <header></header>
  <content></content>
  <sidebar></sidebar>
  <footer></footer>
</div>

En un principio la altura del header sería de 180 px, la anchura del content de 600 px y la del sidebar de 300.

Y finalmente toca la hora de las media queries para que el diseño se adapte.

Por ejemplo, para una dispositivo con una resolución máxima de 980px pasamos a tamaños relativos:

@media screen and (max-width:980px){
 #pagewrap{
    width:94%;
 }
 content{
    width:65%;
 }
 sidebar{
    width:30%;
 }
}

Para una de menos de 700px modificamos la hoja de estilos para que se posicione la sidebar debajo del contenido:

@media screen and (max-width:700px){
 content{
    width:auto;
    float: none;
 }
 sidebar{
    width:auto;
    float:none;
 }
}

Y para una pantalla de un móvil (máximo de 480 px) reducimos el tamaño de los títulos, dejamos que el ancho de la cabecera (header) se ajuste automáticamente y directamente quitamos la sidebar:

@media screen and (max-width:480px){
 header{
    height:auto;
 }
 h1{
    font-size:24px;
 }
 sidebar{
    display:none;
 }
}

Concluye el artículo remitiendo al de diseño con media queries que yo también traduje en este blog y referencié antes.

Espero que esta pequeña guía tutorial que he traducido, junto a las otras dos traducciones sobre media queries, os hayan servido de ayuda en la edición de vuestros proyectos web. Y si no… jQueryMobile siempre es una ayuda.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s