Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

Únete a nuestra lista de correos para recibir semanalmente actualizaciones de nuestro contenido.

El proceso para crear sitios responsive

El proceso para crear sitios responsive 24.NOV.15

Alvaro José Rios Ch
Fundador WebBizarro

Los sitios con responsive son muy importantes en estos momentos donde el trafico web por dispositivos móviles sigue en aumento y cada vez es más determinante en el mercado. Pero no se trata solo de colocar la plantilla de wordpress para que se adapte sino que hay todo un proceso tras bastidores que debes conocer para que el sitio web móvil sea efectivo.

 

Analizar el contenido

Debemos saber que contenido es importante y a que debemos dar prioridad, no se trata solo de que todo el contenido se adapte a la pantalla del dispositivo, recuerda que las personas navegan en sus teléfonos para buscar algo concreto y no quieren perder tiempo con contenido basura, así que céntrate en lo importante.

 

Hacer wiframes responsive.

Los wireframes te ayudan a decidir como debe verse el contenido, tamaños, formas y la posición en la pantalla, la idea es mantenerlo simple, no hacer mucho trabajo, solo hacer un pequeño bosquejo y probarlo en diferentes dispositivos.

 

Diseño estático

La idea aquí es definir la estructura del sitio, colores, tipografías, tamaños, imágenes. Podemos empezar por el diseño móvil o por el desktop, lo importante es que el cliente se enfoque en el layout del sitio.

 

Hacer prototipos

Luego de ver el contenido debemos si realmente funciona lo que deseamos hacer y ver como se vera en diferentes dispositivos, además de como lo adaptaremos. Los prototipos también son útiles para probar con clientes y potenciales usuarios con el fin de corregir los problemas antes de desarrollar.

 

Crear una guía de estilos

Luego de que ya tenemos todo definido podemos crear una guía de estilos HTML, aquí establecemos los tamaños de las tipografías, los colores para títulos, subtítulos, contenido, tamaños de las imágenes y demás, esto es muy útil porque te ayuda a mantener la coherencia en el sitio.

 

Desarrollar

Finalmente podemos llevar todo lo que hemos creado en el papel a la vida real, las hojas de estilo las hacemos basados en las guías de estilo, animaciones y comportamientos están definidos en los prototipos por lo que el trabajo debería ser más sencillo.

 

Pruebas

En el desarrollo se pueden cometer algunos errores por lo que debemos hacer algunas pruebas sobre el sitio para ver que todo esté bien, quiero aclarar que estas pruebas no pueden son sobre el diseño ya que este fue probado y aprobado durante las faces 2,3 y 4, las pruebas se hacen sobre el software en si.

 

Este proceso no es del todo un proceso rígido y lineal, además que debe ir de la mano con el departamento de desarrollo que tiene sus propios procesos para crear el software por lo que generalmente tendrás que adaptarlo para que funcione en tu equipo de trabajo, sin embargo a la larga te ahorraras muchos problemas.