El diseño web y las aplicaciones adaptadas a cualquier tamaño de pantalla

6 patrones que mejoran el diseño adaptativo y la #usabilidad con HTML y CSS

Os avisamos de que a partir del 21 de Abril de 2015 Google va a dejar de filtrar y de colocar en su buscador aquellas páginas que no dispongan de un diseño adaptativo. Para poneros al día en qué significa eso, os vamos a proporcionar unos cuantos POST sobre usabilidad y diseño adaptativo, además de proporcionaros un presupuesto a la medida de vuestra web. Empecemos…

Desde hace un tiempo estamos muy interesados en Ticsandroll en el diseño adaptado a los distintos dispositivos. Empezamos trabajando esa adaptación para aplicaciones Android, seguimos en web y proseguimos en las aplicaciones iOS. Siempre solemos trabajar con diseño adaptativo así como patrones y técnicas de usabilidad.

El objetivo de la usabilidad es mejorar la interacción de los usuarios con el sistema, no es tan difícil plantear la organización de pantallas y de imaginar como va a quedar la nueva web como de añadir pequeños aspectos a nuestro código.

Input prompt: cuando creamos un input en el que tengan que rellenar los usuarios.

<input type="text" name="login" alt="Ej: ticsandroll" placeholder="Inserte su login" />

Input Hints: el texto alternativo,  aunque en su versión original este patrón muestra la información de forma directa en pantalla podemos hacerlo también para la funcionalidad de colocar el ratón sobre el elemento, así aparece un cuadro de diálogo que nos ayuda.

<input type="text" name="login" alt="Ej: ticsandroll" placeholder="Inserte su login" />

Estos dos primeros patrones eran para calentar, ahora vienen los interesantes de verdad…

Global Navigation: es importante que se comparta la misma apariencia durante toda la navegación, para ello es importante tener un codigo unificado, un diseño continuo y una organización estructurada. Para eso utilizamos una página CSS que sirva de plantilla a todo nuestro diseño, pongamos un pequeño ejemplo:

@charset "utf-8";
/* CSS Document */
body{
    background:#FFF;
    padding:0px;
    margin:0px;
}
div{
    padding:0px;
    margin:0px;
}
h1{
    font-family:Verdana, Geneva, sans-serif;
    color:#29A;
}
tr, td,th{
    font-family:Verdana, Geneva, sans-serif;
    font-size:12px;
}
h2{
    font-family:Verdana, Geneva, sans-serif;
}
a{
    text-decoration:none;
}

Visual Framework: controlamos la navegación de toda la página consistentemente, una página simple con una cabecera ( header.html) y un pie (footer.html) comun a todo el sistema.  Con un simple código php lo insertaríamos a todas nuestras páginas:

<?php include 'header.html'; ?>
<!-- CONTENIDO DEL HTML DE LA PÁGINA -->
<?php include 'footer.html'; ?>

Liquid Layout: el más importante a la hora de realizar una web adaptada a distintos dispositivos como son smartphone, tabletas u ordenadores. Con este patrón podemos adaptar las páginas a nuestras necesidades, importante controlar los aspectos con las capas en HTML y las descripciones así como las anchuras  con CSS.

<div id="izquierda"></div>
<div id="content"></div>
<div id="derecha"></div>

Center Stage: es importante para la navegación y captar la atención del usuario, que el contenido más importante se encuentre en el centro de las pantallas, de ahí que nosotros vayamos a colocar el mayor peso al contenido central. Así este será el contenido del CSS.

#izquierda{
width:10%;
text-align:left;
}
#content{
background-image:url(logo_fondo.png);
width:80%;
margin: 5px;
}
#derecha{
width:10%;
text-align:right;
}

Vamos a organizar esta pantalla formada por cabecera, los tres elementos centrales y el footer para que sea visible perfectamente en los smartphones. ¿Cómo hacemos eso? Pues simple, colocamos todos los elementos en una simple columna con tantos elementos como tengamos y queramos que se muestren:

@media only screen and (max-width : 480px) {
#mygrid {
display: -ms-grid;
margin: 5px;
-ms-grid-columns: 100%; /*one column taking full width */
-ms-grid-rows: auto auto auto auto auto ; /*5 filas*/
}
#header {
-ms-grid-row: 1;
-ms-grid-column: 1;
width:100%;
}
#contenido {
-ms-grid-row: 2;
-ms-grid-column: 1;
width:100%;
}
#izquierda {
-ms-grid-row: 3;
-ms-grid-column: 1;
width:100%;
}
#derecha {
-ms-grid-row: 4;
-ms-grid-column: 1;
width:100%;
}
#footer {
-ms-grid-row: 5;
-ms-grid-column: 1;
width:100%;
text-align:center;
}

Esperamos que con todo esto hayáis aprendido algo, en el próximo POST os indicaremos como hacer un diseño en borrador  LOWFI para todos los dispostivos que vayáis a diseñar.