30/03/2022

Oye, developer.

 

En Gold no nos importa si eres socio, trainee, colaborador, cliente, gato o perro, si estás leyendo esto es porque quieres hacer un trabajo brillante y eso es lo único que nos importa.

Nos gusta ser meticulosos, ordenados, respetuosos y ambiciosos, nos interesa tener una buena presencia online, por eso nuestra web es elegante, y nuestra manera de hacer videoconferencias también lo es.

Además nos gusta conectar nuestro negocio con nuestras preocupaciones, por eso donamos un 2% de cada proyecto a una ONG. Es poco, y para compensarlo intentamos desarrollar productos digitales más responsables con el medio ambiente.

Y si no te hemos hecho salir corriendo con esta introducción tan petulante, adelante, aquí tienes 10 razones más para hacernos vudú.

 

1. Si no sabes algo, pregunta.

En Gold hay tres socios:

David, que es el responsable de Back.

Óscar, el responsable de Front.

Y Vicente, responsable de comunicación.

Si tienes una duda técnica, pregúntale enseguida a David y Oscar.

Si tienes una duda existencial, habla con Vicente.

Para todo lo demás, por favor pasa al punto 2 de este documento.

 

2. Usamos Basecamp.

Si no te gusta, nos parte el corazón.

Hay un montón de empresas fantásticas donde puedes usar tu herramienta favorita o abrazar el caos en ellas.

Si trabajas con Gold, no tendrás más remedio que pasar por el aro. Nosotros lo utilizamos para organizar todo lo que hacemos, y nuestros clientes también.

Allí se apunta el tiempo que le dedicas a cada proyecto, es donde están las tareas repartidas, las fechas importantes y espacio para todo el material necesario.

Márcalo como favorito y entra cada día, sisplau.

 

3. ¿No te gusta WordPress?

A nosotros tampoco.

Por eso le hemos dado la vuelta y hemos desarrollado una manera de trabajar que nos permite reconciliarnos con esa fábrica de plantillas salchicheras y convertirla en una plataforma para hacer webs maravillosas.

Pues eso.

 

4. Módulos. Módulos. Módulos.

Y los montamos en Wordpress como piezas de lego.

Trabajamos creando módulos reaprovechables, escalables, que funcionan bien en desktop y mobile, la idea es que puedan cambiar de orden, quitar o repetir y el diseño siempre debe responder de forma eficiente sin romperse.

Para conseguirlo sigue estas simples instrucciones:

A_ Cuando trabajas en un módulo, no pases al siguiente hasta que ese módulo funcione bien en todas las resoluciones de pantalla.

B_ Asegúrate de seguir las instrucciones del punto A.

C_ Asegúrate de seguir las instrucciones del punto B.

D_ Asegúrate de seguir las instrucciones del punto C.

 

5. Somos perfeccionistas. Mucho.

No te imaginas cuánto.

Por eso no competimos con gente que hace webs por 500€.

Esto significa que cogemos una página y la redimensionamos hasta la saciedad. Desde pantallas 4K hasta un Apple watch.

Así nos aseguramos de que el trabajo que hacemos se ve perfecto en cualquier resolución. Incluso en la pantalla del portátil del cliente, que suele tener la peor de todas las resoluciones del mercado. C’est la vie.

Si no fuéramos tan perfeccionistas nos tendríamos que llamar Silver o Aluminium.

 

6. Desarrolla bonito.

Piensa en verde, programa limpio.

Porque al igual que en las matemáticas, la belleza de un código se proyecta también en la forma en la que se manifiesta, siendo la síntesis su mayor atractivo. Tu manera de programar también repercute en el medioambiente. Un código limpio es web friendly.

 

Contenido: 

Empezaremos siempre por el back-end, creando los campos necesarios en el gestor de contenidos, para luego volcar dicho contenido en los módulos que hemos desarrollado  en Wordpress.

 

Estilos:

·Posicionamiento: En este punto ya tenemos los templates PHP con el código html y el contenido. A continuación posicionaremos cada elemento del módulo, usando el mínimo de breakpoints posible. Añadiremos, wrappers, contenedores, márgenes y paddings. Retocaremos el código html si fuera necesario para ajustarlo a las necesidades de posicionamiento.

 

Backgrounds:

A continuación nos ocuparemos de los fondos (colores de fondo, imágenes, etc).

·Tipografía: En este punto añadiremos los estilos correspondientes a todos los textos.

·Detalles: Añadiremos los detalles finales (bordes, sombreados, transparencias, degradados).

·Microintereacciones: Cuidaremos los elementos con los que interactúa el usuario para que den un feedback adecuado.

·Breakpoints: En este punto revisaremos el módulo, estresándolo para todo tipo de resoluciones y añadiremos algún breakpoint extra si fuera necesario.

 

JS: 

Hasta este punto y siguiendo una metodología de mejora progresiva, todo debería funcionar sin Javascript. Así nos aseguramos que los buscadores vean todo el contenido y lo puedan indexar correctamente. También nos aseguramos de que los usuarios pueden utilizar el sitio web aunque haya un error en Javascript.

Además permitimos que usuarios con navegadores antiguos, puedan como mínimo consumir el contenido. Ahora, con Javascript (a menos de que se pueda hacer con CSS), implementaremos todas la mejoras de experiencia de usuario y funcionalidades que sean necesarias (sliders, mapas, validaciones de formularios, etc).

 

Accesibilidad: 

Debemos revisar que el trabajo realizado cumple todos los estándares de accesibilidad.

 

Animaciones: 

Para dar ese acabado extra, nos ocuparemos de animar algunos elementos para que la navegación sea más atractiva. Siempre que podamos, priorizaremos animaciones CSS combinadas con Scroll Magic cuando estas sean sencillas, porque son, salvo contadas excepciones, más eficientes que las animaciones Javascript. Utilizaremos Javascript y librerías tipo GSAP para animaciones más complejas. Reservaremos videos, gifs y animaciones con SVG (por ejemplo Lottie), cuando los métodos anteriores no sean eficientes.

 

Optimización: 

La velocidad de carga es el 35% del SEO y la experiencia de usuario. Es muy importante optimizar al máximo todos los elementos multimedia, cargar los scripts de forma asíncrona cuando se pueda, utilizar el menor número de librerías Javascript posibles y utilizar lazy loading cuando sea oportuno. Es imprescindible revisar cada sitio web con herramientas como Google PageSpeed Inisghts o Lighthouse (integrado en Chrome).

 

 

7. Eh tú, Robin.

Necesitamos conocer en todo momento la evolución de los proyectos que tenemos en marcha y para eso nos comunicamos con frecuencia. Es la única manera de evitar problemas en las entregas.

Solo Batman puede darse el lujo de desaparecer en su cueva durante días.

A nadie le gusta ser Robin, pero es lo que hay. Repórtate.

 

8. ¿Responsive? Nah, liquid.

Trabaja sobre 360px (mobile) y 1280px (desktop y tablet)

 

Con dos breakpoints:

Un breakpoint entre 360px y 768px.

Y otro breakpoint entre 768px en adelante (hasta 3840px)

 

Por lo tanto comprueba que el diseño se vea bien en:

360px

1280px

1440px

Más de 2560px hasta 3840px

 

Hay que definir un tamaño mínimo para los elementos gráficos en pantallas pequeñas pero también el máximo cuando pensamos en pantallas grandes para evitar agrandar estos elementos hasta un punto ridículo.

A partir de allí, be water my friend.

 

9. Diseño y Desarrollo son dos pedales de una misma bicicleta.

Trabajamos en equipo, en una carrera por hacer el mejor trabajo posible dentro del timming que tenemos.

 

10. La distancia más corta entre dos puntos distantes es una sonrisa.

¿Estás de acuerdo?

Fenomenal.

Venga, sé amable y ayúdanos a crear un ambiente positivo y respetuoso, entre nosotros y con los clientes.

Love is in the air, just breath deep.