En los últimos años la proliferación de los nuevos soportes móviles como smartphones o tabletas digitales hace que los diseñadores deban tener en cuenta estos dispositivos a la hora de diseñar sus contenidos y aplicaciones web. Según un análisis publicado por la página web Digitalbuzz en 2011, se espera que en el año 2014 los usuarios que accedan a Internet con dispositivos móviles superen a los que lo hacen a través del ordenador. De hecho, cada año se duplica la cantidad de usuarios que utilizan Internet en dispositivos móviles (smartphones) con sistemas operativos como Android o iOS. Concretamente en enero de 2012 eran ya el 8,5%, casi el doble que un año antes cuando esta cantidad era del 4,3%, según Statcounter.
Con este panorama, el diseño de las páginas web debe responder a una nueva situación con ideas creativas y eficaces. Es por ello que ha surgido el Diseño adaptativo (traducción del concepto inglés Responsive design) que se basa en adaptar un mismo diseño a diferentes tamaños de pantalla y resoluciones para que sea correctamente visualizado en diferentes dispositivos. Según Ethan Marcotte (2010), el diseño adaptativo “es una estructura de diseño y desarrollo web que mediante el uso de estructuras e imágenes fluidas, así como de media-queries en la hoja de estilo CSS, consigue adaptar el sitio web al entorno del usuario” (Traducción de Wikipedia).
Fuente: Genbetadev
Para conseguir esto, los diseñadores y desarrolladores deben atender a una nueva serie de requisitos. Los seis pasos imprescindibles para un buen diseño adaptativo con los nuevos estándares HTML5 y CSS3 son los siguientes (John Britsios, 2012):
- Los contenedores de la página web deben ser los contenedores del contenido y los principales objetivos de las hojas de estilo CSS3.
- Los elementos HTML5 deben establecerse con la etiqueta “block”, que más tarde identificará el objetivo.
- El ancho y la propiedad “float” aparecen en la estructura básica del CSS y serán una referencia para el CSS3.
- Los “media queries” deben ser escritos para recoger los parámetros de cada dispositivo y las llamadas de los “viewports”.
- El porcentaje del ancho de la pantalla que se establece en el CSS básico, debe establecerse en cada archivo CSS3, para ajustar el diseño fluido al “viewport”.
- Todas las imágenes necesitan tener un ancho máximo como un porcentaje del ancho máximo de la pantalla. Esto incluye también a los vídeos.
gertrudix
Latest posts by gertrudix (see all)
- Bases de datos relacionales - 01/05/2014
- Técnicas SEO - 10/10/2013
- La importancia de los buscadores - 10/08/2013
