El diseño Web Responsive es aquel que busca una correcta visualización de la página web en cualquier dispositivo. Este concepto ha avanzado mucho y ya no es que la web se ‘vea bien’, sino que además debe estar adaptada a las características de cada dispositivo : botones más grandes para los smartphones o imágenes más pequeñas para una descarga más rápida, son algunas de las características de lo que Google denomina: Mobile friendly.

Mobile Friendly. Webs con responsive design

Una página web no se ve igual, ni se lee igual, en un dispositivo de sobremesa, una tablet o un smartphone. Las resoluciones de pantalla van desde los 320px hasta 1920px del Full HD (por ahora) y queremos que todos los usuarios queden satisfechos. Es difícil pero no imposible.

Trucos para hacer tu web responsive

1 Priorizar los contenidos

Tenemos una home page con un slider, banners, elementos destacados… mucha información.  Para la versión mobile debemos decidir que elementos podemos prescindir o que elementos debemos mostrar primero . Recordad que la pantalla es más pequeña  y además, en el smartphone la usamos en vertical, al revés que en un portátil, por ejemplo.  Debemos priorizar lo que hay que mostrar.

2. Carga de la página

Este truco va ligado al anterior, si priorizamos contenidos también agilizamos la carga de la página y si además optimizamos las imágenes entonces la página carga más deprisa en los dispositivos móviles.

3 Scroll

El scroll siempre en vertical. Evita elementos que provoquen el scroll horizontal, da una mala experiencia de navegación.

4 Tipografía

Usa una tipografía mayor que para la web, 14px para los párrafos y algo mayor para títulos. También mayor ancho entre líneas, especialmente si incluyen enlaces. Ten en cuenta que el enlace lo marcarán con el dedo, debe estar suficientemente separado del resto de componentes de la página para que el usuario pueda hacer el clic en el enlace en que él quiere hacerlo.

5 Imágenes

Si puedes cargar imágenes optimizadas para smartphones, hazlo.  Máximos de 640px de ancho y siempre que puedas usa el formato jpg con compresión. Photoshop tiene la opción de guardar para web en jpg o png (si vas a usar fondos transparentes).

6 Tablas, iframe, flash

Prohibidos. Las tablas y los iframes no son buenos compañeros de un dispositivo móvil. No podrás controlar la correcta visualización de sus contenidos así que el resultado final puede ser simplemente desastroso. Además, los iframes no dejan de ser una página dentro de otra, por lo que si Google las indexa de forma independiente los resultados en el buscador pueden ser páginas huérfanas y si las limitamos con robots.txt, perdemos un contenido que puede ser valioso.

En cuanto al flash… cuando parecía que  este formato iba a dominar totalmente el mundo web, Apple decidió que no lo quería en sus dispositivos y empezó a morir (no nos meteremos en los motivos comerciales y económicos que pesaron lo suyo en esta decisión). Google tampoco indexaba correctamente las webs con flash o los contenidos flash de una página. Poco a poco van desapareciendo.

7 Ventanas emergentes

Evitarlas. En los dispositivos móviles son un engorro y la mayoría de usuario tienen bloqueadas las ventanas emergentes y pop-ups

8 100%

Usar porcentajes en lugar de valores absolutos al definir la web y usar el 100% del ancho de la pantalla. Esto te permite aprovechar toda la pantalla independientemente del tamaño y resolución que tenga.

9 Efectos

Algunos efectos que usamos es que al pasar con el ratón por encima de un elemento, este cambia. Estos efectos no tienen validez en los dispositivos móviles, ya que tocar la pantalla hace la función del clic

10 Números de teléfono

Cuando un usuario navega por nuestra web con un móvil hay que ponérselo fácil para que nos llame. La etiqueta <a href tel:+346666666> nos permite que al pulsar sobre nuestro número de teléfono, el dispositivo móvil haga la llamada.

Para los equipos de sobremesa que tengan skype instalado, también funciona, pero ojo, que sería una llamada de pago.

Ya puedes ponerte manos a la web e ir actualizando to blog , web o tienda online para que sea más amigable para los usuarios que navegan con su smartphone.

Hasta la Vista.

 

 

Share This