R2D2 26 de agosto de 2014 a las 18.40
   Imprimir artículo
elWebmaster.com

Siete buenas prácticas para un diseño web responsivo


responsive-design

Cada vez son más los usuarios que se conectan a través de distintos dispositivos móviles, por eso es importante que tu sitio web esté preparado para ser visitado desde una amplia gama de dispositivos y pantallas de todos los tamaños.

Aquí es donde el diseño responsivo resulta útil.

Pero, tal y como ocurre con otros tipos de diseño web, es necesario asegurarse de seguir algunas consideraciones importantes si quieres que tu sitio funcione realmente bien y provea de la flexibilidad que esperas.

1. Los usuarios móviles merecen la misma calidad y experiencia de navegación

Uno de los principios más importantes a tener en cuenta cuando creamos un sitio web con diseño responsivo, es asegurarse que el sitio está construido de tal manera que la experiencia de navegación sea la misma para todos los usuarios que la visitan, independiente del entorno o dispositivo.

Esto significa que la apariencia de tu sitio y su estructura visual debería cambiar sin generar una pérdida de contenido o funcionalidades para los usuarios de algunos dispositivos o pantallas específicos. Por ejemplo, un usuario que accede a tus páginas desde su ordenador debería tener la misma experiencia de navegación que un usuario que la visita a través de un smartphone o una tablet.

Esto significa que todos los elementos deberían ser flexibles, por ello tienes que asegurarte que todas las imágenes, contenidos y tablas sean totalmente fluidos y estén preparados para una amplia variedad de tamaños de pantallas.

2. Tener en cuenta la responsividad

Cuando estás estructurando tu sitio web para convertirlo en un diseño real, en la práctica, es necesario que entender que hay ciertos elementos que son ideales para el diseño responsivo y otros que no, es decir, hay diseños que son capaces de adaptarse a nuevos tamaños mejor que otros gracias a los elementos y estructuras incorporados.

Una manera de conseguirlo es pensando en términos de simplicidad y hacer una estructura no muy complejas tanto a nivel de diseño como de código HTML, y usar mecanismos fáciles para los elementos básicos como la navegación y el menú de opciones, utilizando las directrices y el Doctype de HTML5, y otras buenas prácticas actuales para que el diseño central pueda traducirse bien.

Para ello, debes evitar a toda costa cosas tales como “div” muy complejos, posiciones absolutas inútuiles, elementos javascript o de Flash muy vistosos que complicarán el ajuste general del sitio.

3. Presta atención a los puntos de quiebra (Breakpoints)

Las resolución puede ser definida como un conjunto de puntos de corte o  “breakpoints”, pero hay varios tamaños básicos en los que centrarse principalmente. Estos son:

  • < 480 px. para los smartphones antiguos y pantallas pequeñas.

  • < 768 px. para las tablets pequeñas o los smartphones más grandes.

  • > 768 px. para las tablets más grandes y pantallas de ordenadores.

Adicionalmente, también se recomienda revisar estos tamaños:

  • < 320 px. para los teléfonos más viejos o de baja resolución.

  • > 1024 px. para las pantallas más grandes en los ordenadores de escritorio.

Estos son los breakpoint claves y no se deben olvidar nunca para conseguir un diseño adaptable. Hay que tener especial atención en los tres primeros, e igualmente  en el tamaño completo para las computadoras de escritorio, con resoluciones superiores a los 1024px.

4. Imágenes flexibles y fáciles de manejar

Por medio de un diseño sencillo, puedes hacer que tus imágenes sean flexibles hasta cierto punto. La manera más fácil para hacerlo es usando tamaños adaptativos y redimensionando el ancho de la imagen.

Esto se puede lograr de diferentes maneras, siendo uno de los métodos más sencillos con la herramienta Adaptive Images (http://adaptive-images.com/). Ten en cuenta que dimensionar las imágenes orientándose en los usuarios móviles, es probablemente la mejor opción para un sitio web con diseño responsivo, sobre todo si se espera conseguir velocidades de carga aceptables, lo cual es fundamentalmente importante.

Otra opción es usar breakpoints variables y almacenar múltiples tamaños de imagen en función de distintas resoluciones de pantalla, pero esto puede llegar a ser un problema en términos de ancho de banda, y no puedes crear tu sitio asumiendo que todos los visitantes tienen acceso a un gran ancho de banda.

5. Permitir la compresión de los elementos y contenido del sitio.

Usar un programa como GZIP permitirá comprimir los recursos de la página, lo cual ayuda a conseguir transmisiones fáciles a través de las redes. Con esto bajará el número de bytes enviados por página o elemento, lo que hará que el contenido sea fácil de navegar y acceder desde dispositivos con ancho de banda variable o débil.

Además, se puede acelerar la carga todavía más si se eliminan los espacios en blanco y saltos de línea innecesarios en el código de la página, permitiendo así reducir el tamaño del archivo y mantener los elementos fluyendo suavemente.

6. Deshazte de los elementos y contenidos innecesarios

Para que el diseño de tu sitio sea adaptable a diferentes entornos, simplemente debes tener en cuenta una cosa: Hay contenidos y elementos de contenido que nunca fueron destinados para ser utilizados en entornos móviles y que nunca funcionarían allí.

Si estás utilizando alguno de estos elementos en el diseño del sitio web, debes desecharlos inmediatamente para cualquier entorno móvil. Esto lo puedes hacer añadiendo una clase .not_mobile para especificar los elementos que quieres excluir cuando el sitio sea visitado desde un dispositivo móvil, o simplemente, puedes eliminarlos de forma permanente para todas las versiones del sitio.

7. Y recuerda…

Estas recomendaciones son tan solo algunas de las principales buenas prácticas que puedes intentar, que están entre las más importantes.

Finalmente, si quieres que el diseño de tu sitio web funcione bien, es necesario construirlo para que pueda cargar datos y funcionar rápidamente en dispositivos que a menudo tienen una baja resolución, poca potencia de procesamiento y, a veces, un ancho de banda débil. Lo que quiere decir, un sitio sencillo y bien organizado, ajustado a su  funcionalidad básicay muy bien enfocado.

Fuente original del artículo: webdesignledger.com

Traducción realizada por elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (2)

  1. www.informaticosadomicilio-sevilla.com dice:

    Muchas gracias por los consejos sobre diseño web responsive. Me gusta trabajar en este tipo de diseño web y crear páginas web adaptables para que puedan visualizarse en los distintos tipos de dispositivos.

  2. dygicom dice:

    La Web Responsive esta ganándole terreno a las aplicaciones móviles nativas, en poco tiempo es posible que solo se desarrolle todo en entorno Web.

    Un saludo

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder