Tips y consejos para proyectos de desarrollo web

«El tiempo es oro», una de las frases más famosas de la historia, considerada por muchos como un mantra para la productividad y por otros como una excusa para buscar atajos y así lograr sus objetivos más rápido. En Desarrollo Web, esta frase se trata de una realidad para nosotros.

No es ningún secreto el hecho de que, la empresa que entregue más rápido y de mejor calidad el producto, tiene asegurada su posición en el mercado, esto pasa también con los desarrolladores, la eficiencia asegura puestos. Los siguientes consejos que te quiero compartir tal vez ya los conozcas, pero a lo mejor sabes de alguien que está empezando en este oficio o de alguien al que le podrían ayudar, sin perder más tiempo ni tu atención, aquí están mis consejos para proyectos de Desarrollo Web.

Conoce del proyecto

Muchos desarrolladores web que trabajan para grandes empresas, tienden a dejar esta tarea únicamente al Project Manager o al Diseñador, esperar a que llegue todo el material junto a las fechas de entrega para ponerse a trabajar, sacar el sitio y que pase el siguiente, esa, estimado lector, es una de las diferencias entre «Programadores» y «Desarrolladores». 

Los programadores sacan las cosas como tal, sin cuestionar ni opinar, su trabajo no es ser creativos; para el Desarrollador el proceso debe llevar una parte más analítica, crítica y por supuesto creativa, por esta razón es una tarea vital conocer quién es el cliente o para quién se está desarrollando el proyecto, ¿qué es lo que espera con este sitio?

Responder a estas preguntas nos permitirá crear un perfil del proyecto y nos ayudará a identificar los componentes que necesitan volverse más atractivos, no es meternos a diseñar, es complementar y buscar que el proyecto cumpla con lo que el cliente necesita. Además, podremos enfocarnos mejor en el tipo de elementos e incluso la tecnología que usaremos para dar vida al proyecto.

Una carrera contra el tiempo

Todos los proyectos tienen un deadline o fecha límite y mi consejo es que hagas lo posible por entregar el proyecto unos días antes de esta fecha; tener esos días de ventaja resultan  un valioso salvavidas en caso de problemas técnicos, incluso para ti, si tuvieras complicaciones o planes de vacaciones. 

Otra cosa sobre el tiempo es que dediques un día o dos, dependiendo del tamaño del proyecto y el tiempo disponible, para poder preparar todo lo que necesitarás: desde assets, estudio de diseño, etc.

También considera el tiempo que necesitarás para probar el sitio en diferentes navegadores y dispositivos móviles, recuerda que la idea es que la mayoría de las personas puedan acceder al sitio desde cualquier navegador o dispositivo y que la experiencia sea igual de buena. Tal vez aquí deberás ajustar una nueva deadline, 2 días de colchón más 1 día de pruebas. 

Ponte metas durante el día: este día terminas toda la plantilla básica, el siguiente los componentes de carrusel, el siguiente el formulario de contacto y así. A algunos les gusta maquetar de forma lineal, conforme va el diseño, otros lo hacen como si se tratara de un rompecabezas, es decir,  maquetan por módulos y después los agrupan para formar el diseño, esto depende según te acomodes y, por supuesto, si el diseño te ayuda a lograrlo.

Adopta el diseño

Así es, el trabajo del desarrollador es adaptar el diseño a un ambiente web. Pero antes de lograr eso, te aconsejo que adoptes y te familiarices con él, que detectes todos los posibles componentes que puedas reutilizar, identifiques sus variaciones para que, al momento de trabajar en ellos, lo hagas teniendo en cuenta cuando llevarán otro fondo, una imagen diferente, más texto, etc. 

Esto te ahorrará mucho tiempo, pues no tendrás que hacer la misma cosa más de una vez; también es una buena idea dedicar tiempo para crear la hoja de estilos base, aquí puedes agregar todas las fuentes de texto que se usarán y sus diferentes pesos (light, extralight, regular, bold, etc.), todos los colores del sitio, tanto los que usarás para el texto como para fondos, bordes y demás; teniendo esta hoja de estilos base puedes dedicarte a crear los componentes y agregar las clases al mismo tiempo, ahorrando el tener que escribir los estilos una y otra vez o incluso para todo un componente. 

Apóyate de librerías de CSS como Bootstrap, Tailwind, Bulma, y muchas más, estas librerías cuentan con muchísimas clases para margins, paddings, tamaños de fuente y otros componentes. Échale un ojo, y elige la que más te guste. (Si no te gustan los elementos flotantes, te comparto una muy buena creada por un compañero del equipo, Shido)

No te ahogues en un vaso de agua

Una de las cosas que más tiempo nos quita es la resolución de problemas. A veces, por mera cuestión de ego, pasamos muchísimo tiempo del proyecto tratando de lograr que un componente funcione como queremos, a veces nos rehusamos a usar plugins, tal vez por considerarlo trampa o creer que son demasiado robustos para lo que en realidad los necesitaremos. 

Otras veces simplemente no llega la idea, le damos vueltas y vueltas, probamos y fracasamos, nos obsesionamos con una forma de resolver las cosas que no está funcionando. 

Aquí es donde te invito a que no pierdas tanto tiempo en eso, si ya te tomó más de media hora, abre una nueva pestaña en tu navegador y «googlea» el problema, seguramente a alguien ya le pasó esto y te podría dar, sino la solución, una idea de cómo lo podrías resolver, ya sea complementando lo que ya sabías o abriéndote los ojos respecto al camino por el que ibas, algo que yo hago mucho es «pelotear» el problema con mis compañeros cuando tengo la solución en la punta de la lengua o ni idea, es un ejercicio simple de contar el problema y pedir opiniones, el proceso es exactamente el mismo que al buscar la solución en línea, el objetivo es concentrar tu tiempo en resolver realmente el problema en lugar de estar adivinando la respuesta.

¿Nunca es suficiente?

Nuestro trabajo habla por nosotros, pero parte de conocer al cliente y sus objetivos es saber qué estilo agregar al sitio, por supuesto que el sitio debe ser llamativo, ordenado y eficiente, es su carta de presentación, ojo, del cliente, no de nosotros. Piensa en ti como un asesor de imagen, tú ya sabes quién es tu cliente, qué es lo que quiere ser y qué tiene para jugar, ayúdalo a brillar pero no a cegar, apliquemos efectos dependiendo del tipo de cliente y sitio que se trabaje. 

Hay que identificar cuando agregamos demasiados efectos y cuando de plano estamos haciendo un sitio sin alma. Una suave transición para un enlace, un efecto de sombra para hacer destacar un producto de la tienda al hacer hover con el ratón o transiciones para los componentes del carrusel de imágenes suelen hacer la diferencia y son los pequeños detalles que llaman la atención pero no se roban el show; por supuesto que habrá ocasiones en que tendremos que dar vuelo a la imaginación, no te digo que no los hagas o los hagas muy poco, más bien te invito a que determines si esos efectos que estás creando van bien con el sitio que estás haciendo, pide opiniones tanto de gente que conoce sobre UI/UX como de usuarios finales.

Recuerda que debe existir un equilibrio entre la vista y el performance, muchos efectos (especialmente aquellos controlados con javascript) pueden ralentizar el sitio y hay varios que terminan siendo ignorados por los clientes, ahorra tiempo y esfuerzo detectando aquellos elementos que ayudarían al sitio a brillar si tuvieran animaciones o transiciones.

Probar, probar, probar

Este será mi último punto y uno de los más importantes. Aquí ya son las ligas mayores, ya no estamos en la escuela en la que podíamos equivocarnos y simplemente afectaba en la calificación, aquí un error puede traducirse en pérdidas de dinero o hasta de empleos (dependiendo del error, tampoco exageremos). 

La mayoría de los navegadores que se utilizan para desarrollar tienen una opción para emular diferentes resoluciones, aprovecha esa herramienta para probar tu sitio en los diferentes breakpoints y corregir detalles visuales o de experiencia de usuario, ten a la mano dispositivos Android y iOS, prueba en tantos navegadores como puedas (no olvides Safari ni IE) para asegurarte que tu sitio funcionará bien en cualquier plataforma. Existen herramientas de paga como BrowserStack que te pueden ayudar con este tema, sea como sea que lo vayas a hacer, nunca olvides probar, probar y probar.

Hasta aquí te dejo mis consejos para el desarrollo web, ¿sólo estos? bueno, no quería ser muy técnico, hubiera sido más largo aún y tal vez hasta tedioso. Aquí lo importante es saber que no existe una fórmula mágica que se sigue paso a paso para obtener resultados rápidos, cada proyecto es diferente y es por eso que debes dedicarle a cada uno su tiempo y esfuerzo para lograr que vea la luz y termine cumpliendo los objetivos para los que fue creado. 

Involúcrate más en este increíble proceso, comparte tus ideas y las tendencias que vayas descubriendo, incluso puedes apostar por ideas nuevas para lograr que tu equipo de desarrollo, como el nuestro, haga cosas increíbles.