¿Quieres saber cómo trabajamos en ATPtips?

Trabajamos constantemente con diferentes profesionales y expertos en el desarrollo, por eso intentamos que todos nuestros proyectos sigan un proceso de trabajo común y que todos nuestros desarrolladores conozcan nuestro sistema y procesos.

Hoy os contamos cómo este proceso se lleva a cabo al detalle.

Nuestros Child-themes base

Avocado, Clock o ATPtips, son algunos de los child-themes DIVI de base que usamos para nuestros proyectos. Incluyen los plugins básicos a usar, las páginas de aviso legal genérico y de política de Cookies, la configuración en sí de las cookies, un sistema de Pop-ups, un formulario de contacto para CF7 y uno en Mailchimp, así como varios estilos incluidos en el child mediante clases.

Puedes ver la lista de plugins que usamos siempre aquí. Ten presente que el mundo cambia, así que es posible que la lista vaya cambiando.

En cada página / post disponemos a más de dos o tres campos extra para poder añadir js en el footer o en el header.

El personalizador

En el personalizador definiremos para todo el theme, tipografías, colores, tipo de menús, espacio entre columnas, ancho máximo etc. Realizaremos la configuración global de estilos de la página, de más abstractos y generales a lo más concreto.

Keep it simple, buscaremos el formato que más se adecue a nuestras necesidades, pero siempre evitaremos añadir recursos que no aporten nada. Si con una tipografía para los titulares y otra para el grueso del texto es suficiente, no usaremos 3, lo mismo con los colores, módulos etc.

Código

Siempre buscamos un equilibrio entre el uso de plugins, uso de recursos del propio theme y la modificación de código.

  1. Siempre evitaremos el uso innecesario de Plugins, instalar plugins para “Editar CSS”, añadir “Google Analytics” o Añadir una tipografía que no esté en DIVI, no son una opción. Muchas de las cosas que podemos hacer con plugins las podemos hacer con unas  pocas líneas de código, evitando así añadir peso innecesario a la instalación.
  2. Por supuesto, si hay que modificar headers o footers, añadiendo cosas especificas o customizar las redes sociales (añadir youtube o linekedin).
  3. Por supuesto, en desarrollos específicos de woocommerce, portfolios, e-learnings o blogs.

Páginas y Layouts

Desde hace ya mucho tiempo, DIVI nos ofrece layouts estupendos que podemos usar como una base estupenda para realizar nuestro site. Desde principios de febrero de 2018, estos layouts están además disponibles para cargar directamente en nuestra página.

Trabajar con layouts como base, puede ahorrarnos mucho tiempo, pero no podemos olvidar que son una base sobre la que trabajar, así que tendremos en cuenta varias cosas:

  1. Haremos un ejercicio de abstracción, que el layout este pensado para un restaurante, no quiere decir que no lo podamos usar para una floristería, si nos abstraemos, podemos valorar los recursos en si. Si lo que necesitamos es cabeceras centradas con el texto potente en medio, un formulario con la dirección al lado y una sección con cards, los recursos de diseño se pueden convertir rápidamente a un restaurante a nuestra floristería.
  2. No seremos 100 literales. Pensaremos en los recursos y en el tono general del layout, pero que el layout de agencia sea amarillo, no debería ser un condicionante.
  3. Esto nos lleva a que no tenemos por qué condicionarnos con un layout por web. Si escogemos el layout de agencia, pero necesitamos una galería de imágenes y el layout de fotógrafo tiene una ideal para nuestro proyecto, estupendo, una galería en el fondo es una galería. Seremos cuidadosos de que los estilos no sean opuestos, si toda nuestra web está siendo a tamaño completo vigilemos en usar un recurso que no lo sea, no queremos un Frankenstein.

Lo primero que creamos es una página inicial con todos (o casi todos) los recursos que vamos a usar en nuestra web, testimonios, cards, call to actions, bloques de texto, galerías de imágenes, formularios etc.

Módulos

Cada uno de estos recursos, lo trabajamos de forma individual en varios niveles:

  1. Revisando que los titulares no sean siempre <h1> o sólo sean <p> con estilos.
  2. Que colores y estilos de tipografía, botones, colore de iconos etc. sean los globales del site siempre que sea posible. Por supuesto, si queremos un efecto en concreto, lo mantendremos o aplicaremos, pero siempre evitando usar HTML en cajas de texto, la intención que un copy o el cliente final en si pueda cambiar el texto, si añadimos styles y elementos por el estilo, probablemente se desconfiugre la primera vez que alguien lo intenten editar.
  3. Añadiremos las clases o ids que sean necesarios, puede que sean preventivas, en nuestro child theme tenemos ya múltiples clases con estilos predeterminandos, pero si vemos que un módulo o sección va a requerir un tratamiento especial por CSS, le pondremos ya una clase.

Una vez lo compartimos con el equipo, y lo contrastamos con el cliente, convertiremos estos módulos y secciones en recursos de diseño en nuestra librería Divi. Escogeremos muy cuidadosamente los recursos que podemos dejar cómo globales (la dirección, el mapa, un formulario, las ventajas globales cómo gastos de envío gratis etc.)

El resto ya dependerá del proyecto o cliente. Desde aquí tenemos todo un abanico de posibilidades para crear todas las páginas y secciones que necesitemos.

¿Quieres formar parte de nuestro equipo?

Únete directamente a nuestro grupo de Slack, periódicamente iremos publicando distintos proyectos, desde pequeños desarrollos o configuraciones en webs ya hechas a desarrollos desde cero.

.

Este sitio web utiliza cookies propias y de terceros con el fin de obtener información estadística sobre la base de los datos de navegación de los visitantes. Si continúas navegando entendemos que aceptas su uso y, en caso de no aceptar su instalación, deberás visitar el apartado de Política de Cookies , donde encontrarás la forma de eliminarlas o rechazarlas. ACEPTAR
Aviso de cookies