Técnicas para crear diseño web responsive

Contratar un diseñador de páginas web será una de las primeras cosas que tendrás que hacer si vas a poner en marcha un negocio. Una web será un canal más de comunicación y contacto con potenciales clientes, partners, medios de comunicación, etc. Además, con las aplicaciones web oportunas, puede llegar a convertirse en una herramienta que mejorará la organización de tu empresa, lo que aportará eficiencia y productividad a tus procesos internos. Dentro del proceso de crear y desarrollar una página web, tenemos que añadir un nuevo concepto (o no tan nuevo): el término ‘ responsive ‘.

Qué es responsive design o diseño web responsive

responsiveEs, simple y llanamente, adaptar tu web a todo tipo de dispositivos. El avance de los smarphones, tablets, etc., obliga a readaptar, en función del dispositivo que el usuario está utilizando para conectar se a Internet, los anchos de tu diseño web, puesto que no es lo mismo una pantalla de 480 píxeles (la del iphone), que una pantalla de 1366 píxeles (la de un portátil de 15 pulgadas). Contar con un diseño web responsive es muy importante porque algunos de nuestros clientes están recibiendo incluso el 80% de las visitas desde dispositivos móviles. ¿Te imaginas perder al 80% de los potenciales clientes de tu negocio porque no tengas tu web adaptada? Si no tienes un diseño web responsive, lo más probable es que el usuario no vea bien tu página web desde un dispositivo móvil, con lo que se irá a la competencia a buscar tu servicio.

Las directrices y estándares de la programación y el diseño web establecen que la web debe estar adaptada a estos cambios en los hábitos de navegación de los usuarios, de manera que sea perfectamente visible en un portátil y en un teléfono inteligente. Probablemente estarás pensando: “ok, ya se lo que es responsive, pero… ¿cómo consigo este efecto?”.

Técnicas para conseguir un diseño web responsive

Si vas a contratar a un diseñador web debes exigir que el proyecto se trabaje bajo los parámetros que se comentarán a continuación. Las dos principales técnicas que vamos a analizar están amparadas por google, lo que significa que tu posicionamiento SEO mejorará notablemente utilizándolo. En tu conversación para contratar un diseñador web debes exigir que las utilice. Todos tendemos a intentar ahorrar en gastos y, en este proceso, a veces podemos topar con profesionales que nos diseñen una web “unresponsive”. Puede que nos percatemos de ello al entrar desde un dispositivo distinto al pc o portátil y, entonces, sea demasiado tarde.

  • Técnica 1: usar ancho en porcentajes. En diseño web, las páginas se estructuran en bloques de contenido que se denominan divs. Con la llegada de HTML5 este término ha variado hacia los campos semánticos, y en lugar de divs se pueden utilizar asides, sections o articles. Durante este texto hemos hablado de la necesidad de que los anchos de estas “cajas” que componen el diseño de una web sean adaptables. El diseñador debe marchar un ancho para esas cajas. Antiguamente, si estábamos diseñando una web, establecíamos un ancho general de página de 1350 px, y si queríamos meter dos cajas en este espacio le dábamos la mitad a cada una: 675 px. En tus reglas css, en lugar de marcar con píxeles, establece el ancho con porcentajes. De este modo con la regla width:50%, en lugar de width:675px, estarás consiguiendo el efecto deseado y una adaptación inicial a cualquier dispositivo.
  • El segundo truco, y que también puedes comentar al contratar un diseñador web, es la utilización de reglas css específicas para un determinado tamaño de pantalla. El porcentaje te aporta flexibilidad y adaptabilidad, pero para conseguir un control completo sobre cómo se verá en el teléfono móvil o en una pantalla de gran formato, puedes utilizar reglas en la hoja de estilos de tu web como el siguiente ejemplo:

@media only screen and (max-width: 640px) {aquí las diversas reglas css}

Con esta regla estamos diciendo que todas las características css que introduzcamos entre los corchetes sólo se aplicarán a los dispositivos que tengan un máximo de 640 píxeles de pantalla.

Insistir en la idoneidad de estas dos técnicas responsive design puesto que permiten una mejor carga en función del dispositivo. Estas técnicas, además, favorecen una mejor indexación en Google. Si el buscador nos quiere más, nos colocará en mejores posiciones con unas determinadas palabras clave que nos generen visitas y negocio. Lo que se conoce como posicionamiento SEO, y que debemos también buscar ya desde la creación y diseño responsive de nuestra web. Os facilitamos a continuación otras directrices y recomendaciones que marca google a los diseñadores, por si quieres tenerlas en cuenta cuando vayas a contratar a un diseñador web.

Si tienes alguna duda más con el concepto de diseño web responsive, o quieres añadir algo en relación con este artículo, sólo tienes que escribirnos en la caja de comentarios, o en el formulario que encontrarás en la parte de la derecha de esta misma página.

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>