7 puntos importantes que debes tener en cuenta a la hora de hacer tu web responsive

7-puntos-importantes-que-debes-tener-en-cuenta-a-la-hora-de-hacer-tu-web-responsive

Hace poco Google Anuncio la modificación de su algoritmo de ranking para incluir dentro la opción de beneficiar a los sitios web optimizados a dispositivos móviles, es decir todos aquellos sitios web que se adaptan correctamente a cualquier dispositivo móvil tendrán la posibilidad de destacar en las búsquedas de Google frente aquellos sitios web que no lo son.

 

Esta es una de las importancias de que los sitios web sean responsivos y se adapten al dispositivo del usuario, pero además es importante porque beneficia enormemente a tus visitantes, muestra el contenido ordenado, tamaños de letras adecuados, imágenes adecuadas, etc. Y es por estas y muchas otras razones que es obligatorio que tu sitio web sea responsive.

 

Para desarrollar tú sitio web responsive o adaptable, puedes optar por algunos caminos como la web móvil, la app nativa y el web responsive, siendo este último el más usado, el más barato y el más rápido de hacer.

 

Esta técnica de diseño web, ha marcado una nueva tendencia en diseño y ha modificado totalmente la forma en la que se diseña y maqueta un sitio web, pero además han marcado otros cambios en el usuario como sus hábitos de navegación y su interacción con los sitios web.

 

En este artículo te voy a recomendar los 7 puntos importantes que debes tener en cuenta a la hora de hacer tu web responsive, 7 consejos básicos y obligatorios que debes considerar antes de que te pongas a codificar, que te ayudarán a pensar bien tu diseño y que como resultado tendrás un sitio web mejor maquetado y 100% responsive.

 

1. Diseña pensando en responsive

Si eres nuevo en el diseño responsivo, lo primero que debes hacer es resetar tus estilos de diseño, dejar en cero tus paradigmas por algún estilo en particular.

 

La estructura de tu sitio debe ser lo más sencilla posible, para que al momento de adaptar te sea más fácil, además debes considerar en usar porcentajes en todos los contenedores o divs que puedas, eso te ayudaría mucho a hacer tu diseño responsivo.

 

Por último y muy importante, trata de evitar códigos excesivos, animaciones en jQuery que requieran demasiados recursos y por supuesta y está de más decirlo, evita totalmente el Flash.

 

2. Piensa en un diseño 100% adaptable y no tanto en las dimensiones de los dispositivos

Si buscas en Google, es muy seguro que encuentres muchos sitios que te digan que debes consideran las resoluciones de las pantallas de ciertos dispositivos y te dan ciertas dimensiones a las que debes ajustar tu sitio, cosa con lo que estoy totalmente en desacuerdo.

 

En mi experiencia me baso para decirte que no tomes en cuenta esas recomendaciones y que simplemente trates de hacer tu web 100% responsive y al decir 100% responsive, me refiero a que se adapte a cualquier tamaño, sea 480px o 536.5px.

 

Y porque es mejor que no te fijes en las dimensiones de los dispositivos?, porque el resultado será de mucha más calidad y tu sitio se verá bien desde absolutamente cualquier dispositivo y por supuesto ahorrarás mucho código.

 

3. Maqueta el diseño adaptable y el diseño normal

responsive-devices-psd-mockup-53592

Después de tener bien en claro tus ideas sobre el diseño responsive, llega la hora de la maquetación, parte fundamental dentro del diseño web, aquí puedes usar cualquier software o editor gráfico que te guste, como Photoshop, Illustator, o simplemente a la antigua y usando papel.

 

La idea de la maquetación es plasmar la estructura, colores y formas de tu sitio web, pero ahora ya no sólo deberás maquetar tu sitio web como se vería normalmente en una laptop, sino que además deberás realizar una segunda maquetación de cómo se verá tu sitio web en una Tablet o un smartPhone.

 

Aunque este consejo te puede parecer engorroso y hasta aburrido, es muy importante porque te ayuda a plasmar tu diseño antes de hacerlo y ser una guía la cual puedes regresar cuando olvides que hacer.

 

4. Optimiza todos los recursos que puedas

Uno de los grandes problemas en el diseño responsive, es el tiempo de demora de carga de la página, ya que al hacer la web responsive se cargan exactamente los mismos recursos que para tu web de escritorio.

 

Por lo que es muy recomendable que comprimas tus imágenes y los archivos que puedan ser pesados, puedes hacer uso de un programa como GZIP para comprimir los recursos de la página y de esta forma asegurar que el ancho de banda con el que cuenta un usuario no sea impedimento para que tenga una mejor experiencia al navegar.

 

5. Imágenes ajustables

Tus imágenes deben ser flexibles y ajustables, no cometas el error de hacer que tus imágenes tengan anchos definidos que se distorsionen cuando tu sitio web cambie de tamaño, por eso es muy recomendable hacer que tus imágenes sean flexibles y lo más recomendable es trabajarlas en porcentajes, esto permitirá que tus imágenes se adapten a su contenedor de una manera óptima.

 

También puedes optar por otro camino y almacenar varios tamaños de imagen y mostrarla de acuerdo al resolución de la pantalla, pero te imaginas el problema que te traerá en el uso de ancho de banda, así que lo mejor es trabajar con contenedores definidos y con imágenes en porcentajes, de esta manera tendrás una sola imagen que se adapte al contenedor y que mantenga sus proporciones.

 

6. Evita contenido innecesario

Punto muy importante a tomar en cuenta, seguramente te has preguntado porque el diseño de algunos sitios responsivos son bastante sencillos y minimalistas, entre una de las razones es porque, hay que evitar contenido innecesario que sobre todo me haga demasiado largo el sitio web si es visto desde una Tablet o desde un Smartphone.

 

Ten en cuenta que un sitio web visto desde un dispositivo móvil debe ser lo más amigable posible y fácil de navegar, así que omite cierto contenido que pueda representar un exceso innecesario. Una de las cosas habituales que se hacen para evitar que este contenido es ocultarlo a ciertas dimensiones, puedes usar simplemente CSS y darle un display:none y listo, asunto resuelto.

 

Y porque es importante esto, porque ayuda a que tu sitio web cargue más rápido, a que no sea tan largo y tedioso para los usuarios en desplazarse y para que la acción de los usuarios se centre en lo que tú quieres, que puedes ser el artículo, un anuncio, una suscripción, etc.

 

7. Evita los efectos

Por último un consejo que realmente debes tomar en cuenta, y empezaré diciendo algo, el hacer más afectos y animaciones no te hace ser el mejor diseñador web, y mucho menos si tu sitio web es responsivo.

 

A menudo me topo con diseñadores web que hacen increíbles efectos y animaciones que seguramente se ven geniales en una laptop, pero en un dispositivo móvil, quizás ni se vean o peor aún pueden jugarte en contra, si los efectos requieren un tiempo de carga elevado, es probable que tus visitas desde dispositivos móviles caigan hasta el piso y eso es lo que no queremos que pase.

 

Así que olvídate de hacer efectos que tengan que ver con el paso del puntero sobre los elementos, como el efecto Hover que en dispositivos móviles no sirve de nada. Con esto tampoco quiero decir que no uses nada efectos, úsalos para que tus usuarios que ingresen desde una PC los puedan disfrutar, pero no te enfrasques en hacer efectos sobrecargados e innecesarios.

 

Espero que estos 7 consejos te hayan servido de algo y que los tengas en cuenta antes de lanzarte a hacer tú sitio web responsive, si alguno de estos puntos te pareció más importante o irrelevante menciónalo aquí abajo en la caja de comentarios.

Artículos que también te interesarán

Iconos-gestuales-de-mano-en-vector-para-interfaces-táctiles
Iconos gestuales de mano en vector para interfaces táctiles

Ahora que toda la web está orientada hacia dispositivos móviles y el diseño web responsivo es una necesidad, aparecen nuevas formas de diseño, nuevas herramientas y también nuevos lenguajes de gestos, por eso es que estos iconos gestuales de mano pueden ser de gran ayuda en cualquiera de tus proyectos de diseño responsivo.   Un […]

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> 

Close