Cómo hacer un diseño responsive

Diseño responsive

comparte este artículo

Compartir en facebook
Compartir en linkedin
Compartir en twitter
Compartir en email

Hablar de diseño responsive es hacer referencia al diseño web multidispositivo. Una Web Responsive es aquella que es capaz de adaptarse a cualquier dispositivo donde se visualice. Hoy en día las estadísticas muestran el creciente tráfico web que se genera desde dispositivos móviles, pero además Google penaliza ya en su buscador a aquellas webs que no son responsables. Es el momento de ponerte en manos de nuestro equipo Braun para diseñar una web responsive con las mejores garantías de éxito.

Actualmente los usuarios acceden a los sitios web desde todos los dispositivos disponibles, ordenadores de sobremesa, portátiles, iPads, tablets Android o smartphones. En cada uno de ellos el sitio web se muestra de formas diferentes, es a lo que llamamos Web Responsive, es decir un sitio web capaz de adaptarse al dispositivo en el que se está visualizando.

Para que una web pueda adaptarse, la estructura de la página debe ser flexible. Nos referimos a que el diseño debe permitir que los anchos de pantalla sean modificables, debemos evitar tener un ancho fijo en tablas o columnas y además debemos permitir que el número de columnas pueda disminuirse en función del tamaño de la pantalla del dispositivo desde el que se acceda. Si utilizamos una estructura flexible, el contenido que se encuentra en ella también debe serlo. En cuanto el contenido, debemos cuidar el ancho de las imágenes, el ancho de los vídeos y el tamaño de la tipografía. La pantalla de un Smartphone tiene mayor densidad de píxeles por pulgada, lo que a efectos prácticos se traduce en que una fuente de 12 píxeles se ve a un menor tamaño en un iPhone que en un ordenador de sobremesa.

Otros elementos a tener en cuenta son los elementos de navegación de la página, el menú de navegación no se debe mostrar de la misma forma en la versión de escritorio que en la versión móvil. Debido, como ya hemos mencionado, el tamaño de la pantalla, y que para hacer click, en teléfonos táctiles, utilizamos nuestros dedos y no un puntero. En un Smartphone la pantalla es bastante más pequeña que la de un ordenador de escritorio, un portátil o una tablet.

La diferencia de tamaños nos obliga a considerar los diseños, por ejemplo, mostrar el contenido de forma vertical, diseñar botones más grandes para el uso táctil. Tener en cuenta que cuanto más pequeña es la pantalla más relevancia adquieren los contenidos en comparación con los elementos de navegación, ya que los elementos de navegación cambian de posición para dejar paso al contenido y el usuario pueda encontrarse con contenido útil cuando navega desde la versión móvil de un sitio web.

Por último, recordar el ancho de banda de que disponen los dispositivos móviles. Deberemos optimizar los contenidos para minimizar los tiempos de espera de los usuarios.

Ventajas de una página Web Responsive

  • Mejoras la experiencia del usuario ya que adaptas tu web a sus necesidades y la visualización del sitio web desde el dispositivo que quiera utilizar.
  • Ahorro de costes de mantenimiento, cuando incluyes contenidos nuevos realizas una sola actualización para todas las versiones de la web.
  • Ahorro de costes de desarrollo, el coste de desarrollo de una web responsive adaptada a todos los dispositivos es menor que el coste de desarrollo de una versión de la web para cada dispositivo

Descubre como crear tu página web resposive

1.     Reutiliza tu contenido para el cambio

Si ya tienes una landing page, blog o sitio web con diseño convencional y deseas convertirlo en uno responsivo o adaptable, no lo pienses más. Decídete! Todo el trabajo que habías realizado puedes utilizarlo. Seguro que muchos elementos, imágenes y textos pueden ser útil y funcionar muy bien.

2. Conoce el tráfico de tu Web

Conocer el tráfico de tu web puede ayudarte a dilucidar el éxito que tendrá el cambio a este tipo de diseño en tu página.

3. Utiliza herramientas de diseño web

Existen diferentes herramientas que pueden ayudarte a crear una página web. Necesitas paciencia y conocer las siguientes herramientas para crear tu propio blog, diseñar tu landing page o sitio de Internet. A continuación te las enseñamos:

Sketch

Es un programa para diseñar paginas web y aplicaciones. Muy sencillo de usar.

Adobe Muse

Adobe Muse es un programa creado para principiantes. Con interfaz sencilla e intuitiva perfecta para crear páginas web responsivas dinámicas y que cargan rápido.

Adobe Edge Reflow

Una plataforma pensada para diseñadores que quieren crear páginas webs adaptables y con estándares Html5 y Css3.

Froont

Es una aplicación gratuita y en línea similar a Adobe Muse en la que puedes crear tu propia página web responsive directamente desde tu navegador y sin necesidad de instalar ni comprar nada.

5. Apóyate en expertos en programación y diseño responsivo

Si no te sientes cualificado, con tiempo o ganas; te recoemnfamos contratar diseñadores con experiencia en diseño responsivo, investiga en Internet sus referencias, pide las URLs de sitios web que hayan diseñado previamente y asegúrate de revisarlos en diversos dispositivos prestando atención a los detalles, para ver cómo se visualizan y funcionan.

Tips para crear tu propia página web con diseño responsive

Te damos unos consejos para que recuerdes en el momento de crear tu página web con diseño responsive. Comenzamos:

Cuidado con la velocidad de carga

La velocidad de carga de un sitio web hará que el ususario permanezca en ella o no. Hacer esperar mucho tiempo en la carga de elementos a tu usuario es un factor decisivo. Cuando se trata de crear una página web responsive recuerda que menos es más. Selecciona los elementos mas relevantes y que invitan a la acción.

Evita los efectos

Los efectos en las páginas web son muy diferentes a los que se visualizan en los dispositivos móviles o tablets. Comprueba los efectos y mide continuamente cuales son los que funcionan y se adaptan a tus usuarios.

Utiliza imágenes flexibles

Utiliza imágenes flexibles y ligeras, que puedan cargarse en cualquier dispositivo. No definas altura y ancho fijo para las imágenes que así logren adaptarse a las diferentes cuadrículas.

Cuadrículas fluidas

Las cuadrículas fluidas son las que se encuentran dimensionadas en porcentajes. Si utilizas este tipo de cuadriculas en la construcción de tu diseño, ten en cuenta que es posible que se adapten de forma automática al tamaño de la pantalla en la que se cargue.

Legibilidad en los textos

No te dejes influir por los tamaños de los diferentes dispositivos. Te recomendamos colocar los textos en 16px para facilitar al usuario la lectura sin tener que estar haciendo zoom.

Artículos relacionados

entidades seo

Qué son las entidades SEO

Las entidades SEO son un término relativamente nuevo que todavía no está muy extendido. El posicionamiento en buscadores es una mejora continua, ya que los