X

Somos expertos en Marketing Online. Ha llegado el momento de competir en Venezuela


All Diseño Web Cuatro tips para lograr Responsive Web Design

Cuatro tips para lograr Responsive Web Design

 

responsive web designEl concepto de responsive web design fue desarrollado por Ethan Marcotte alrededor de 2011, cuando se planteó el objetivo de desarrollar una página web capaz de identificar en qué entorno está siendo mostrada y que se adapte automáticamente a la resolución de la pantalla. No es solamente hacer zoom del contenido, sino mostrarlo para que se vea bien sin importar el dispositivo en el que se esté mostrando.

Hoy en día cada vez son más los dispositivos que acceden a nuestras web. Ya no sólo son computadoras de escritorio o laptops las que pueden acceder a la información que publicamos en nuestras páginas, sino que tenemos smarthphones, tablets, televisores inteligentes accediendo a nuestro contenido.

En el pasado conseguimos páginas que tenían el “subdominio m”, que se cargaban automáticamente al acceder la página original desde nuestros dispositivos móviles. Tener una página con “subdominio m” significaba tener una segunda página, totalmente diseñada para ser mostrada en una pantalla pequeña. Esto trae como consecuencia el doble de trabajo, contenido, espacio en hosting, etc. Para evitar este doble trabajo, fue desarrollado el concepto de responsive web design.

Consejos para lograr responsive web design

Tip 1

El responsive web design indica que debemos dejar de usar los pixeles como medida para ajustar el contenido de la web y, en su lugar, empezar a usar el porcentaje de ancho y alto de la pantalla en la que se está mostrando el contenido. Por lo tanto, cuando estemos definiendo el espacio en el que se va a ver una imagen, debemos usar porcentajes de altura y ancho para representarla.

Tip 2

Debemos establecer “breakpoints” que nos nos ayudan al momento de aplicar responsive web design, ya que representan los puntos donde debemos pasar de mostrar el contenido de una manera determinada a otra. Por ejemplo, podemos tener un breakpoint en 500 pixeles de ancho: con esto el contenido se mostrara de una manera específica para ventanas de navegador por debajo de 500 pixeles y de otra manera cuando las ventanas tengan más de 500 pixeles de ancho.Podemos ser tan específicos como nosotros queramos con los breakpoints, haciendo pequeños o grandes cambios dependiendo de cómo queramos mostrar la web en los distintos dispositivos. Al tener varios breakpoints y utilizarlos adecuadamente, podremos también dar soporte de visualización en distintos dispositivos con distintas medidas de pantalla, cosa que resultara en una buena experiencia visual para los usuarios que accedan a nuestra página.

Tip 3

También existe la posibilidad de utilizar marcos de trabajo CSS ya existentes. Por ejemplo, Bootstrap es muy popular ya que al trabajar con él tenemos frameworks HTML, CSS y JS para desarrollar páginas web con responsive web design. Bootstrap aligera la carga y permite trabajar tranquilamente sabiendo que nuestro contenido se verá bien independientemente del tamaño de la pantalla del dispositivo que acceda a nuestra página o sitio.

Tip 4

Si te interesa más la parte del diseño, tenemos herramientas como WebFlow, un constructor que nos permite hacer páginas con responsive web design de una manera fácil y rápida.

El diseño y desarrollo de sitios que incluya el concepto de responsive web design nos ayudará mucho en la actualidad y años venideros. Cada día hay más demanda de sitios que se puedan ver correctamente y de manera estilizada en dispositivos móviles y aquellos que aprovechen esto lograrán sacar una gran ventaja. Además, para estar bien posicionado en los buscadores, debes tomar en cuenta que a partir de 2015 Google empezará a penalizar a aquellos sitios que no estén optimizados para ser vistos en dispositivos móviles, así que… ¡a desarrollar Responsive!

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>