Segundo Parcial: Resumen del Diseño Responsivo

¿Qué es el Diseño Responsivo?

El diseño web responsiva o adaptativo es una técnica de diseño web que busca la correcta visualización de una misma página en distintos dispositivos. Desde ordenadores de escritorio a tables y móviles. 

Accedemos a sitios web desde todo tipo de dispositivos; ordenador, Tablet, smartphone… por lo que, cada vez más, nos surge la necesidad de que nuestra web se adapte a los diferentes tamaños de los mismos. Pero, ¿Qué es esto exactamente?.

¿En qué consiste el diseño Responsivo?

Se trata de redimensionar y colocar los elementos de la web de forma que se adapten al ancho de cada dispositivo permitiendo una correcta visualización y una mejor experiencia de usuario

El diseño responsivo permite reducir el tiempo de desarrollo, evita los contenidos duplicados, y aumenta la viralidad de los contenidos ya que permite compartirlos de una forma mucho más rápida y natural este se caracteriza por.

1.- Los layouts e imágenes son fluidos y se adaptan a cada pantalla.

2.- Permite reducir el tiempo de desarrollo.

3.- Evita los contenidos duplicados.

4.- Aumenta la viralidad de los contenidos

Proporcionar a todos los usuarios de una web los mismos contenidos y una experiencia de usuario lo más similar posible, frente a otras aproximaciones al desarrollo web móvil como la creación de apps, el cambio de dominio o webs servidas dinámicamente en función del dispositivo.

En definitiva, el diseño web responsivo se consolida como una de las mejores prácticas hoy en día en diseño web.

¿Cuál es el mejor tipo de fichero para mis imágenes web?

Podemos utilizar varios tamaños y resoluciones de imágenes para hacer nuestra web más Responsivo. Pero si trabajamos un poco más, podemos lograr una optimización mayor sólo por elegir el tipo de fichero adecuado. Tenemos dos tipos de imágenes que podemos utilizar 

• Imágenes vectoriales. 

• Imágenes rasterizadas.

Las imágenes vectoriales son las ideales para los logos, fuentes de iconos y sobre todo formas con colores planos el formato más común para estos archivos es el .SVG de Scalable Vector Graphics.

Las imágenes rasterizadas son las ya conocidas por todos. Son las imágenes que podemos hacer con una cámara de fotos. Al contrario que las vectorizadas, si escalamos una imagen de un tamaño pequeño a otro más grande, perderemos calidad y la veremos pixelada.

 Guía descrita por Google Developers:

• JPG para las fotografías. Cuando una imagen tiene muchos colores, es la mejor opción.

 

• SVG cuando tengamos un logo o imágenes muy lineales y con colores sólidos (Sin gradientes). Si no podemos usar SVG, podemos usar PNG o Web. 

• PNG siempre mejor que GIF. Ofrece más colores y mejor ratio de compresión. 

• Video para animaciones complejas. Mucho mejor que un GIF, mejor calidad de imagen.

Diseño y medidas web responsivo para mejorar la Experiencia de Usuario:

¿No sabes qué es un diseño web responsivo?

 El diseño responsivo, en español, responsivo, constituye ni más ni menos que la capacidad de una página web para adaptarse (o responder) a distintos tamaños y orientaciones de pantalla para mejorar la experiencia de usuario. 

Cada persona posee un dispositivo con unas dimensiones de pantalla diversas por ello a la hora de cargar una página en unos u otros dispositivos las páginas pueden sufrir alteraciones para los aparatos a los que no están adaptadas y resultar un mosaico casi incomprensible de imágenes, texto y enlaces. 

¿Por qué es tan importante tener una página web responsivo? 

El diseño responsivo permite que sea cual sea el tamaño en el que se visualiza una página web o su orientación (horizontal o vertical), el contenido se adapte al ancho y alto de la pantalla para ofrecer una sensación agradable a la vista. Este enfoque optimizado es un concepto relativamente moderno que nace fruto de la grandísima variedad y tamaño de dispositivos móviles y ordenadores de escritorio.

¿Para qué tamaños de pantalla deberíamos estar diseñando?

Realmente es una pregunta difícil de responder porque depende de la audiencia objetivo (la investigación de palabras clave es importante aquí). Estas son las resoluciones de pantalla más comunes en todo el mundo para que adaptes tu web a medidas responsivo: 

• 360×640 (móvil pequeño): 22,64%. 

• 1366×768 (ordenador portátil medio): 11,98%. 

• 1920×1080 (escritorio grande): 7,35%.

 • 375×667 (móvil medio): 5%. 1

 • 440×900 (escritorio medio): 3,17%.

• 720×1280 (móvil grande): 2,74%.  

Los usuarios de escritorio no siempre tienen su pantalla maximizada (especialmente los usuarios de «escritorio grande»).

No se olvide de las grandes pantallas de escritorio y de televisión (por ejemplo, piensa en: Microsoft Edge en Xbox) hay que ser capaz de adaptarse a todas.

Google premia a las páginas web con diseño responsivo web:

 Hace ya más de dos años que Google incluyó un nuevo algoritmo en su motor de búsqueda. Con esta actualización las páginas web que incluyeran un diseño adaptable serían premiadas en el ranking de búsquedas. Si tienes una empresa con presencia online sabrás lo importante que es subir unas cuantas posiciones en el buscador, ya que cuanto mejor es tu Rank, más usuarios acceden a tu página aumentando exponencialmente tus posibilidades de venta.

¿Cuáles son las ventajas de usar un diseño web responsivo? 

• Mejora la usabilidad y la facilidad de lectura en dispositivos móviles. 

• No es necesario construir versiones diferentes de una misma página, ahorrando tiempo y dinero. 

• Se adapta automáticamente a nuevos anchos y altos de pantalla, por lo que no importa cómo cambian las tendencias de consumo a nivel de pantallas, tu web se adaptará a ellas. 

• Optimiza los anuncios mejorando la experiencia de usuario. 

¿Cuál es el porcentaje de webs responsivo?

A pesar de que ya más del 40 % de los usuarios de Internet en nuestro país realizan compras a través de sus teléfonos móviles y tablets, el 50 % de las empresas aún no cuentan con páginas que incluyen un diseño responsivo o adaptativo.

¿Cómo puede afectar la ausencia de diseño responsivo a tu página web?

El porcentaje de usuarios que acceden a Internet a través de sus dispositivos móviles crece exponencialmente cada año, relevando al ordenador de mesa a un contexto casi exclusivamente laboral.

Los más de 35 millones de usuarios españoles consultan todo tipo de información desde sus dispositivos, desde revisar el correo electrónico, entrar en sus redes sociales, navegar por la web y, por supuesto, comprar todo tipo de productos y servicios.

Una página web que posee aquello que están buscando los usuarios no ofrece una correcta experiencia de navegación para los usuarios y la abandonarán. Del mismo modo, la ausencia de un diseño web que responda de manera eficaz y sea además, estéticamente agradable, pone en peligro la posibilidad de ganar una enorme cantidad de visitantes y posibles clientes.

Por otro lado, y como te comentábamos antes, descenderá en los resultados de búsqueda por lo que el batacazo será doble. Adaptar tu página web al diseño responsivo es vital para posicionar tu página y ofrecer una experiencia de usuario capaz de captar el mayor volumen de clientes y compras posibles.

¿Cómo podemos implementar el diseño web responsivo en nuestra página?

Hay varias maneras de asegurarnos de que nuestra página web es responsivo. Una de ellas es asegurándonos de tener un diseño responsivo CSS y un diseño responsivo html5. A la hora de utilizar CSS debemos olvidarnos de las medidas en píxeles. Si sólo utilizamos porcentajes, nos aseguraremos de que el contenido se vea siempre igual, independientemente de cómo de grande o pequeña sea la pantalla en la que estemos viendo la página. 

Con html5 lo que tenemos que hacer es utilizar las meta etiquetas adecuadas, como la meta etiqueta viewport, que nos permite determinar el comportamiento que queremos que tenga un navegador de las características que indicamos cuando visualice nuestra página.

¿Cómo hacer un diseño responsivo para mi web?

 Aprender cómo hacer un diseño responsivo para nuestra web es muy sencillo. Una simple búsqueda en internet o YouTube con las palabras «tutorial diseño responsivo» o «como hacer diseño responsivo» o «medidas web responsivo» nos devuelve millones de resultados en los que podemos investigar para aprender.