Objetivo:
Con unos pasos sencillos podemos tener un diseño web adaptador a los nuevos dispositivos, Responsive Design. En un primer paso añadiremos una etiqueta meta en la cabecera del documento. Después añadimos compatibilidad con los navegadores antiguos y finalmente las modificaciones necesarios a la hoja de estilos CSS.
Descarga:
Requerimientos:
- Un editor de código
- Conocimientos básicos de html y css
- Un editor de imágenes que soporte archivos psd
Table of contents
¿Qué es Responsive Design ?
El término Responsive Design se refiere a las técnicas de diseño y desarrollo web para que su sitio web pueda ser visualizado de forma correcta, legible y ordenada desde cualquier dispositivo ya sea móvil o de escritorio. En otras palabras, que al ingresar desde un navegador de una tablet o de un smartphone el diseño NO se vea muy pequeño y resulte necesario realizar un zoom para poder visualizar el texto del sitio web.
¿Qué necesito para implementar Responsive Design ?
En este punto se asume que usted dispone de una página web la cual no implementa Responsive Desing y requiere empezar con los pasos básicos para convertir su actual diseño no responsive a otro que se adapte a muchos de los dispositivos moviles que sus clientes y visitantes utilizan para acceder a su web. Por tal motivo compartimos 5 pasos básicos con los que puede empezar este gran reto.
Paso 1: Insertar la etiqueta < meta > VIEWPORT
El primer paso de todos es agregar una etiqueta < meta > llamada VIEWPORT que será insertada entre las etiquetas < head > < / head > de su html. Con esto se logra decirle al explorador que su sitio web va a ser accedido por diferentes dispositivos y deberá adaptarse a cada uno de ellos indistintamente de la resolución o tamaño de los mismos.
Paso 2: Implementar adaptabilidad a los elementos multimedia
En este paso vamos a implementar una técnica de CSS con la cual usted podrá hacer que sus imágenes y videos se adapten a un cambio de resolución. Se puede ver un ejemplo en el siguiente enlace para tener una idea más clara de lo que se pretende hacer. Para explicar el siguiente código nos haremos la idea de que un elemento < img > , < video > o un iframe ya sea de youtube o vimeo se encuentra en su pagina web dentro de alguna etiqueta contenedora, ya sea esta un section, article o div. A la etiqueta contenedora se le asigna la propiedad width (ancho) en porcentajes y NO en pixeles. Y al elemento multimedia que por lo general es una img se le asigna 2 propiedades en css que son width o max-width y height o max-height.
#logo {
display: block;
height: auto;
width: 100%;
}
#logo img {
height: auto;
width: 50%;
}Paso 3: Aprender el uso de Media Queries
“Media Queries” es una característica de CSS con la cual se puede diferenciar los distintos tamaños de pantalla de dispositivos de acuerdo a su resolución utilizando las nuevas propiedades que permite css3, estas son min-width y max-width. La sintaxis de una “media query” a primera vista no es tan simple de entenderla, aunque si se la analiza en el siguiente codigo no pasa de ser una condicional delimitada por un bloque de llaves { }
@media screen and (min-width: 480px) {
.articulos {
display: block;
width: 100%;
}
}Existen además “Media Queries” específicas para algunos dispositivos, por ejemplo, si en un iPad queremos hacer referencia a la orientación horizontal debemos utilizar la propiedad (orientation: landscape) y (orientation: portrait) si la queremos vertical.
@media screen and (orientation: landscape) {
.iPadHorizontal {
width: 30%;
float: right;
}
}
@media screen and (orientation: portrait) {
.iPadVertical {
clear: both;
}
}Paso 4: Maquetación por bloques y caída de columnas
Para obtener un diseño adaptable rápido y efectivo se necesita una maquetación correcta en cuanto a elementos de su página web. La idea de maquetar de tal forma que mientras el ancho de la pagina disminuya el contenido de la misma se va distribuyendo verticalmente hacia abajo y en sentido derecha hacia izquierda es lo mas óptimo.
Paso 5: Mobile First (El diseño movil primero)
Algunos diseñadores recomiendan realizar una página web pensando primero en el diseño móvil para terminar con desktop. Es decir, crear los estilos para dispositivos con resoluciones pequeñas e ir escalando hacia resoluciones más grandes hasta llegar a laptops y PCs de escritorio. Esta técnica NO es la que recomendamos ya que al momento probarla surgieron varios inconvenientes y resultaba realizar doble trabajo en cuanto al diseño de elementos html que iban apareciendo. Entonces se puede empezar con una web que ya esta realizada y funcionando para modificar primero su maquetacion y luego incorporar las hojas de estilo que gracias a las nuevas caracteristicas de css3 el trabajo se hace mucho mas fácil y rápido.
¿Te gustaría aprender Responsive Web Design desde cero?
Accede al curso online Diseño Web Responsivo de Klinsmann Fabian
