Antes de entrar de lleno en el tema, quiero destacar que este artículo lo he pensado a raíz de una experiencia que tuve en días pasados con un cliente. En resumidas cuentas solicitaron un sitio web visible tanto en computadoras de escritorio como en dispositivos móviles. En base a esto propusimos un tema multi propósito para WordPress que resuelve la solicitud. Llegado el momento de la revisión recibo un correo electrónico con una extensa lista de correcciones y al final la leyenda

“Sitio Web en Móviles”

“El menú principal no se muestra correctamente, este debe aparecer de inmediato”…

He de confesar que al leer estas líneas me causo un poco de risa y posteriormente un poco de frustración pues me doy cuenta que aunque el tema de el sitio web responsivo es una realidad para todos los que nos dedicamos a la web, no es así para los que de cierta forma nos solicitan ese tipo de trabajo e inclusive para el usuario final que en repetidas ocasiones llegan a pensar que estos sitios no se ven de forma correcta en su tablet y/o teléfono inteligente.

En base a esta experiencia decidí escribir este artículo dirigido al usuario o cliente final de tal forma que conozcan las principales características de un sitio web responsivo.

¿Que es un sitio web responsivo?

sitio-web-responsivoBásicamente es un sitio optimizado para proporcionar al usuario o visitante una navegación adecuada sin importar el tamaño de la pantalla en donde se lleva a cabo la consulta, de tal manera que los contenidos se adaptan al ancho de la pantalla del dispositivo en donde se esta observando, esto se logra utilizando fundamentalmente HTML5 y CSS3. Entre las principales ventajas que nos ofrece un sitio web responsivo encontramos desde el punto de vista usuario que podemos ver y leer contenidos en un tamaño adecuado, llenar formularios y otras acciones sin necesidad de tener que estar acercando o alejando el zoom, desde el punto de vista de las empresas podemos lograr que nuestros clientes no necesiten estar al frente de una computadora de escritorio para interactuar con nuestro sitio.

Principales características de un sitio web responsivo

Una de las principales características es que el diseño de nuestro sitio debe ser capaz de adaptar los contenidos dependiendo del tamaño de la pantalla en el que se esta presentando, en determinado momento debe suceder lo siguiente:

  • El menú superior se debe apilar conforme se va reduciendo el tamaño de la pantalla hasta ocultarse y presentar un botón desplegable.
  • Si manejamos contenidos en varias columnas estas deberán reducir su tamaño horizontal y llegar al punto de apilarse quedando una sobre otra de preferencia de izquierda a derecha
  • Si el sitio cuenta con un corousel de imágenes este debe adaptarse al tamaño de la pantalla o en determinado momento ocultarse
  • Las imágenes se deben adaptar a la columna contenedora y no perder la proporción con respecto a esta.
  • Los campos de formulario deben de comportarse de la misma manera si es un formulario en columnas se deben en primer lugar apilar y al mismo tiempo adaptarse al ancho de la columna en donde se muestran.

En el siguiente video podrás observar como se comporta un sitio web responsivo, en todos los casos se comporta de forma parecida pero no igual.

En conclusión para todos aquellos que tenemos o deseamos tener presencia en internet es muy importante tomar en cuenta que día a día se intensifica y hace mas uso de los dispositivos móviles y que tarde o temprano tendremos que ofrecer a nuestros visitantes un sitio web responsivo. La buena noticia para los usuarios de CMS como WordPres y Joomla es que ya existen en el mercado de temas muchísimas opciones multi propósito muy profesionales y eficientes.

¿NECESITAS APOYO PARA PUBLICAR TU SITIO WEB RESPONSIVO?

Desarrollamos y publicamos tu sitio web responsivo por medio de un CMS como WordPress y plantillas profesionales o adaptamos tu HTML para este propósito.

Contáctame

¿Te ha agradado este artículo?

Te invito a compartirlo en tus redes sociales o en su defecto a registrarte en mi newsletter en donde recibirás información de cada nuevo post o tutorial que publique.