Teniendo en cuenta la velocidad con la que el diseño web móvil esta aumentando, se está volviendo un factor importante que cualquier sitio web esté listo para ser usado en cualquier dispositivo. El diseño web responsive, ha llegado para brindar la mejor opción y dar adaptabilidad de un sitio web a diferentes tamaños de los distintos dispositivos que existen.   Antes de aplicar el diseño responsive necesitas conocer algunas de las mejores prácticas importantes, si deseas que el diseño funcione bastante bien, ademas con esto, el mantenimiento o modificación no será tan tedioso.  

Los Usuarios Móviles Merecen La Misma Calidad De Experiencia En La Navegación

Uno de los primeros y principales principios a tener en cuenta al crear un sitio responsive, es asegurarse de que el sitio está desarrollado de manera que la experiencia de navegación es igual para todos los usuarios, sin importar el dispositivo que se use.   Esto significa que la apariencia de su sitio y la estructura visual deben cambiar sin que el dispositivo se afecte al cambiar el tamaño de la pantalla del dispositivo. Un visitante que accede a sus páginas desde un PC de escritorio debería estar recibiendo el mismo tipo de experiencia de navegación como un visitante que entra a través de su teléfono inteligente o su tablet.   Esto significa que todo tiene que ser flexible y requiere que todo sea tan fluido, el resultado debe ser un sitio que funciona tan bien, al igual que twitter, por cierto, el Framework de Twitter Bootstrap te puede ser bastante útil al momento de diseñar un sitio web.  

Diseña Pensando Siempre En Responsive

Todo diseño no funciona correctamente para un diseño responsive, algunos diseños se pueden adaptar fácilmente, mientras que los demás se deben reestructurar para brindar la fluidez necesaria. Esto significa que debes de realizar un diseño tan simple del sitio y el código HTML como sea posible y usar elementos básicos, también puedes tomar herramientas como los diferentes Framework de diseño.   Lo que debe evitar son totalmente cosas como divs excesivos y complejos, posicionamiento absoluto inútil, y elementos de animación con Javascript o Flash, los cuales dificultan que un sitio sea 100% responsive.  

Diseña Para Los Diferentes Tamaños De Pantalla

Las resoluciones de las pantallas se pueden definir en una variedad de puntos de cambio, pero existen varios tamaños principales que necesitas conocer para centrarse en ellos, más que en otros:  

• 1º <480px Se aplica a la mayoría de dispositivos, los tamaños de pantalla de teléfonos inteligentes más pequeños
• 2º <768px, Es ideal para los teléfonos inteligentes más grandes y las tabletas más pequeñas
• 3º >768px, Se aplica para todo dispositivo grande, como grandes pantallas de tabletas y pantallas de escritorio.

Además, estos también pueden ser usados, si cuantas con la energía y el tiempo para trabajarlos:  

• 1º <320px Es ideal para los pequeños de más edad, cosa teléfonos de bajo
• 2º>1024px Se usa para pantallas anchas en los escritorios.

Estos son los puntos de cambio mas importantes para centrarse y sobre todo los tres primeros, así como la resolución del escritorio completo, la cual es superior a 1024px.  

Haga Que Sus Imágenes Sean Flexibles Y Fluidas

Con un diseño sencillo, puedes hacer que tus imágenes sean más flexibles. La forma más sencilla de lograr esto, es por el simple uso de dimensionamiento adaptativo y cambio en el tamaño de su anchura.   Puedes hacer esto con una variedad de opciones, pero uno de los métodos más fáciles a través del cual puede lograrlo es con Adaptive Images. Ten en cuenta que el dimensionado de las imágenes es la mejor opción al momento de realizar un diseño responsive para la web.   También puede usar los puntos de cambio en variables y almacenar varios tamaños de imagen en los datos para diferentes resoluciones de pantalla, pero esto podría convertirse en un problema en términos de uso de ancho de banda, y no puedes crear tu sitio con la suposición segura que todos los espectadores tendrán acceso a ancho de banda de gran alcance.  

Permitir La Compresión De Elementos Del Sitio Y El Contenido

Use un programa como GZIP para comprimir los recursos de la página, y así tener una transmisión más fácil a través de redes. Con esto aseguras que el ancho de banda con el que cuenta un usuario, no sea el impedimento para que tenga una mejor experiencia de usuario.   Además, puedes acelerar las cosas aún más, eliminando los espacios y saltos de línea innecesarios. Hacer esto reducirá tamaño de los archivos en general.  

Evite Contenido Innecesario

Con el fin de hacer que tu sitio móvil sea amigable para un diseño responsive, simplemente ten una cosa en mente: Existen algunos elementos que no fueron creados para trabajar perfectamente en los móviles.   Si tienes estos elementos funcionando en tu sitio web o diseño, debes eliminarlos inmediatamente para cualquier entorno móvil. Puedes hacer esto mediante la adición de la clase .not_mobile a elementos específicos que le gustaría no ver cuando tu sitio se muestra en un contexto móvil o simplemente puede deshacerse de estos elementos de forma permanente de todas las versiones de tu sitio.  

Recuerda Lo Principal

Los anteriores son sólo algunas de las principales mejores prácticas que puedes aplicar, algunas de las más importantes. Sin embargo, si quieres que tu sitio funcione bien, es necesario construirlo para que pueda cargar y funcionar de forma rápida en los dispositivos que suelen tener baja resolución, pequeña potencia de procesamiento y uso de muy poca ancho de bando. Esto significa que debes tener un sitio sencillo, bien organizado, que se ajusta a su función básica.   Fuente: HD