¿Qué pasos debo seguir para hacer una web responsive?

A la hora de hacer una página web responsive, una de las cosas que tenemos que tener en cuenta es la multitud de dispositivos con características diferentes que se conectan a una página web. A continuación, ofrecemos unas pautas de trabajo que nos facilitarán mucho las tareas de desarrollo cuando trabajamos en un proyecto responsive.

  1. Creación del HTML 
    La mejor opción es partir de un mismo HTML para todos los dispositivos, dejando que el lenguaje CSS se encargue de aplicar el formato y reglas que permitan la adaptación del diseño a los diferentes tipos de sistemas donde se consumirá el contenido. Al tener bastantes componentes semánticos, si utilizamos HTML5 podremos  organizar jerárquicamente la información y ser más exactos. Si tienes dudas sobre la idoneidad de un contenido, es mejor no ponerlo. Y si es un contenido que se va a mostrar en resoluciones de escritorio, tampoco. Lo primero es encajar todo en pantallas pequeñas (Mobile First, por favor).
  2. Aplicación del CSS
    Aquí es donde está la parte más compleja del diseño, porque con el CSS aplicaremos el formato a la página, tanto en la disposición de los elementos como en su aspecto final. Los navegadores entienden un conjunto de reglas de estilos y las que no soporta, las ignora. Por encima de la estética, tenemos que intentar resolver los problemas de layout derivados de las diferencias de navegadores y su soporte con CSS.
    Principalmente, nos enfrentaremos a dos tipos de problemas:
    a) Estéticos. Son las que menos deben preocuparnos, sirven para mejorar la estética de nuestro sitio (tipografías, cajas con esquinas redondeadas, sombras en textos o cajas, etc.) y no requieren una especial adaptabilidad porque no van a afectar a la accesibilidad de un contenido, aunque sí a su visualización.
    b) De layout. Son los estilos encargados de mostrar la información con una estructura definida, por columnas, cabecera, pie, etc. Nos permite jerarquizar la información, desplegarla para una mejor compresión y así apreciar la importancia de cada cosa. Por ejemplo, si una web tiene una barra lateral donde hay banners y otras cosas con menor importancia (lo que conocemos como “aside”) en todos los sistemas deberíamos poder remarcar la menor importancia de ese contenido. Si algún navegador no puede situar bien esa barra, deberemos hacer que no aparezca en lugar de otro contenido que sea más importante.

Podemos llegar a pasar por alto algunos problemas estéticos, como que no se muestre exactamente igual en todos los navegadores. Sin embargo, si hay diferencias de layout podría provocar que el contenido no sea accesible, o entendible, y eso sí sería un problema mayor.

0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *