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