27478

Cómo crear fácilmente un diseño web adaptable a todos los dispositivos

Ante cualquier reto o problema, lo importante es buscar la solución más práctica y satisfactoria posible, que aúne la optimización de recursos, con la practicidad y la buena calidad en conjunto. Siguiendo estos criterios, ante la necesidad impuesta por el uso creciente de tablets y móviles de adaptar nuestra web a todos tipo de aparatos, la mejor solución es crear un único site adaptable y válido para todos los dispositivos. Te enseñamos cómo hacerlo.

Creando una web válida para todos los dispositivos.

Si tu pretensión y objetivos son crear una web que se visualice correctamente y en unas buenas condiciones de uso y navegación tanto en ordenadores de escritorio y portátiles, como en las pantallas táctiles de smartphones y tablets, ahorrando en costes y horas de trabajo y con unos resultados satisfactorios, entonces estás leyendo el artículo adecuado. Para lograr tu objetivo, tienes que plantearte un trabajo dividido en las siguientes fases:

Fase 1. Crear una página en diseño responsive

Esta es la fase fundamental del proceso. Para ello, necesitarás tener unos ciertos conocimientos, pero es suficiente con que sean básicos, en lenguaje de programación HTML y códigos CSS (Cascading Style Sheets) y CSS3. A grosso modo, este es el funcionamiento:

  • En primer lugar, se programa la web en HTML o HTML5, lo cual te permitirá añadir en los encabezados y títulos de la página una serie de etiquetas del tipo: <menta name=»viewport» content=»width=device-width, initial-scale=1.0″>. El objetivo es lograr que el aspecto se ajuste automáticamente al tamaño de las pantallas de todos los dispositivos. No importa que empieces a programar la web desde 0 o que te bases en una ya creada, lo importante es que se pueda acceder al HTML para modificar o insertar las etiquetas adecuadas.
  • La segunda parte consiste en aplicar las modificaciones correspondientes a la hojas de estilo CSS o CSS3. De esta forma, se cargarán automáticamente las reglas correspondientes al tamaño de la pantalla desde el que esté navegando, en cada momento, el usuario.

responsive web design

Fase 2. Adaptar los títulos y cabeceras

Una vez hayas insertado las etiquetas correspondientes y las modificaciones de los códigos CSS, pueden ocurrir dos cosas: que por las características del diseño la visualización sea proporcional y aceptable o que, por el contrario, algunos encabezados o títulos aparezcan excesivamente grandes o se encuentren descuadrados.

En el primer caso no tienes que hacer nada más, pero si la visualización no llega a unos parámetros de calidad mínimos, lo mejor es que dediques algo de tiempo a modificar manualmente los tamaños de las hojas de estilo, hasta lograr el efecto deseado.

Fase 3. Adaptar la estructura y navegabilidad de la página 

Igual que en paso anterior, si una vez chequeada la navegación de tu web, esta funciona de forma aceptable en cualquier aparato, tamaño de pantalla o navegación con ratón y teclado o táctil, estás de enhorabuena, puesto que tu trabajo habrá finalizado.

No obstante, con la sustitución de los menús demasiado largos, propios de muchas webs conceptualizadas para ordenadores de sobremesa, por otros menos aparatosos enfocados a pantallas más pequeñas y táctiles puedes ganar muchos enteros en lo que respecta a la versatilidad y comodidad para el usuario de tu site.

Fase 4. Modificaciones técnicas 

Conviene eliminar las fotos o vídeos muy pesados y, sobre todo, las programaciones en flash para evitar errores, ralentizaciones excesivas de página o que directamente no se puedan visualizar.

Ten presente que una adaptación deficiente, aunque sean en pequeños matices, en algunos dispositivos de conexión puede hacerte perder mucha audiencia. Por otro lado, en el caso de programar la página desde el inicio, es recomendable diseñar desde la perspectiva de un móvil, Mobile first, puesto que la adaptación de lo pequeño a lo grande es más fácil y adecuado que en el caso contrario.