¿Dónde estás leyendo este artículo? Quizá estés tirado en el sofá en el único rato libre que tienes al día o puede que leas esto desde el baño. Sea donde sea, es muy probable que te pillemos leyendo este artículo desde tu teléfono móvil.
Cada vez son más las personas que eligen el móvil para navegar por Internet. Antes, comprar unas entradas de cine desde tu teléfono nos parecía algo en lo que desconfiar. Ahora, hasta las grandes marcas de ropa le dan mucha importancia a la usabilidad y facilidad de pago en sus Apps.
Google, el ente que todo lo sabe, se dio cuenta de este comportamiento y ya hace tiempo que implantó la mentalidad Mobile – first.
¿Esto qué significa? Quiere decir que tener una web con un diseño responsive va a ser imprescindible para mejorar en el Ranking de este buscador.
¿Qué es diseño responsive?
Es un diseño adaptado a diferentes dispositivos móviles para mejorar la experiencia del usuario cuando visite tu web, independientemente del dispositivo que esté usando. Ajusta los elementos a cada pantalla para que tu página resulte atractiva, rápida y fácil de usar.
¿Cómo hacer una web responsive?
¡Examen sorpresa! Te proponemos comprobar si tu web es apta para dispositivos móviles en la prueba de optimización para móviles de Google. Si has obtenido un claro suspenso, no hay que echarse las manos a la cabeza. Nosotros te damos algunas claves que te harán sacar un sobresaliente en tu diseño responsivo:
Piensa primero en la opción móvil. Como se suele decir: “Más vale prevenir que curar”. Si todavía no has comenzado a diseñar tu web, plantea primero la estructura para dispositivos móviles y después adáptala para escritorio. Si ya tienes tu web estructurada para la pantalla del ordenador, no hay que tirar todo tu trabajo por tierra. Tendrás que hacer una análisis más profundo sobre cómo adaptar cada elemento a los diferentes dispositivos móviles.
Elige un buen tema. Un tema que funcione bien en tu página es esencial. No nos dejemos llevar por nuestros ojos. Comprueba que todos los elementos se ven correctamente en las diferentes pantallas, lee reseñas de otros usuarios y mide la velocidad del tema antes de comprarlo. Es la mejor forma de ahorrarte un disgusto y, sobre todo, dinero.
Aprovecha las opciones responsive de tu maquetador. Muchos maquetadores tienen apartados responsive en sus ajustes. Investiga qué modelo de columnas y adaptaciones quieres para que muestre mejor tus elementos web.
Optimiza la velocidad. La velocidad de carga es un factor importantísimo para Google y, a no ser que tu web tenga cronoquinesis como nosotros, hay que emplear tiempo en ella. Hay muchos factores que pueden mejorar la velocidad. Algunos pueden ser:
Comprobar si tienes un buen hosting y si la calidad del servidor es correcta.
Eliminar widgets y plugins que no necesites o no estés usando.
Optimizar las imágenes para que pesen menos.
Reconsiderar la necesidad de incrustar un vídeo o un slider que pesen demasiado.
Eliminar el contenido de tu web que es inneccesario
Mucho ojito con los Sliders. Un slider es ese elemento visual, genial e impactante que nos encanta ver en una gran pantalla. La realidad es que en dispositivos móviles pierde fuerza y ralentiza nuestra página. ¿Es necesario tenerlo? ¿Puedo omitirlo en mi versión móvil? Son preguntas que deberías plantearte por mucho que te duela renunciar a él.
Fuente fácil de leer. Sencilla y fácil de adaptar. Un texto en el que tengo que hacer zoom para poder entender algo no invita para nada a la lectura. Ten en cuenta que un tamaño ideal para tu fuente en móvil serían 16 px.
Que prime la usabilidad. Tu web tiene que ser fácil e intuitiva para mejorar la experiencia del usuario. Diseña tu página para que la entienda tanto un experto acostumbrado a la pantalla como una persona que acaba de descubrir los audios de WhatsApp.
La apariencia importa. Es nuestra carta de presentación. Los usuarios se toman muy pocos segundos en considerar si tu web les ha entrado por los ojos. Créenos que no se cortarán un pelo en ser despiadados y abandonar a la velocidad de la luz tu página. Un diseño atractivo reducirá tu tasa de rebote de forma considerable.
Utiliza Media Queries. Los Media Queries pueden aplicar estilos CSS a diferentes componentes de tu web. Son pequeñas órdenes que hacen que tus elementos se muestren de una manera concreta en una medida de pantalla determinada. Por eso, nos interesan mucho las reglas “min-width” y “max-width” relacionados con el ancho que tienen las pantallas de los diferentes dispositivos.
Cuida cada detalle. Haz que tus títulos sean legibles, cambia tus links de texto por botones grandes y visibles, inserta correctamente tus vídeos para que se adapten a los márgenes… todos los detalles cuentan para mejorar la experiencia del usuario.
En Capitán Quimera comprendemos la importancia de la lectura ligera que se lleva a cabo en el cuarto de baño. Por eso, todas las webs que diseñamos se llevan bien con tu teléfono móvil.
