Desenvolupament de pàgines web
Un web que carrega abans que el visitant canviï d'opinió
El rendiment no és un extra que s'ajusta al final. És una palanca de conversió, un factor de posicionament i un requisit d'accessibilitat. I el decideix l'arquitectura, no un plugin.
- Core Web VitalsAl briefing, no després
- WCAGAccessibilitat des del disseny
- SEOEstructurat des del primer dia
Feina seleccionada
Webs que hem fet
Webs de programa per a acadèmies de futbol, webs de plataforma per a adtech i webs de producte per a les nostres pròpies eines. Marques diferents i el mateix problema a sota: moltes ofertes, una sola navegació i un formulari que ha de convertir.
Barça Academy United States
Acadèmies esportivesQuatre programes, un sol recorregut d'inscripció
Campus urbans, acadèmies de temporada, el clinic residencial a Barcelona i la via internacional de jugador, organitzats perquè una família trobi el seu sense llegir-se els quatre. Els botons d'inscripció reflecteixen l'estat real —obert, llista d'espera o complet— i el formulari s'envia sense redirecció, així que el mesurament de campanya sobreviu a la conversió.
Veure el web
FC Bayern München
Acadèmies esportivesCampus, acadèmies i viatges en una sola navegació
Tres famílies de programa amb durades, edats i seus diferents, separades a l'arquitectura d'informació perquè una família no hagi de deduir quina està llegint.
Veure el web
Campus Experience
Acadèmies esportivesEl campus d'estiu de la Fundación Real Madrid, en dos idiomes
La guia de marca d'un titular de drets no deixa marge d'interpretació, així que la feina és fidelitat i no invenció. Programes i dates, FAQs i una via d'inscripció que es queda a un clic de l'hero, servits en castellà i anglès des del mateix web.
Veure el web
adpaq
Publicitat en àudio digitalWeb de producte per a una plataforma d'àudio programàtic
Un web de posicionament adreçat alhora a compradors de mitjans i a publishers, amb les xifres d'inventari a la mateixa pàgina i l'accés a la plataforma per a clients a la mateixa capçalera.
Veure el web
Cloud Trim
Gestió de costos al núvolEl nostre propi producte, amb el mateix llistó
El web de la nostra plataforma de costos d'AWS: funcionalitats, preus i blog en anglès i castellà, amb l'alta com a única cosa que la pàgina demana de debò. Apliquem al nostre el briefing que venem.
Veure el web
També lliurades: LaLiga Select, el web del programa Manchester City Football Language amb BSC Education, Confirm i UK Futbol First. Facilitem trucades de referència per a consultes serioses.
Què inclou un projecte de web
L'entregable és el web. Això és el que fa que ho sigui.
Primer l'arquitectura d'informació
Diversos programes, productes o públics sota un mateix sostre és un problema de navegació abans que de disseny. Equivocar-s'hi costa conversions que cap disseny no recupera després.
Disseny que la teva marca sobreviu
Implementació fidel al píxel de la marca que ja tens, incloses les que arriben amb guies de titular de drets que no deixen marge d'interpretació.
Un CMS que el teu equip farà servir
Qui edita té un panell normal i publica sense desenvolupador. Quin CMS depèn del projecte: un de basat en Git, un de headless o WordPress quan aquesta és realment la decisió correcta.
Formularis i inscripcions que converteixen
Formularis externs de reserva o inscripció integrats a la mateixa pàgina, que s'envien sense redirecció, perquè la conversió continuï sent atribuïble quan arriba.
Mesurament cablejat durant el build
Tag Manager, píxels publicitaris i esdeveniments de conversió muntats mentre es construeixen les pàgines, no afegits la setmana que arrenca la campanya i descoberts duplicant dades.
Accessibilitat i SEO tècnic
Recorreguts amb teclat, estats de focus, contrast i semàntica, provats i no afirmats. Canòniques, dades estructurades, sitemaps i hreflang generats en lloc de mantinguts a mà.
Un exemple real
Vam reconstruir el nostre propi web per demostrar-ho
La nostra home anterior enviava 212 KB d'HTML, 48 fulls d'estil i 23 scripts, perquè estava muntada en un maquetador visual que afegeix una petició per cada comoditat.
La nova es genera estàticament i se serveix des d'una CDN: el mateix contingut, una fracció del pes i cap servidor d'origen al camí de la petició.
És l'arquitectura que recomanem per a la majoria de webs de contingut, i la raó per la qual podem parlar de rendiment amb xifres en lloc d'adjectius.
Com treballem
La velocitat és un pressupost que es defensa, no una fase que es planifica
Fixar el pressupost
Acordem per endavant el pes de pàgina, el nombre de peticions i els objectius de Core Web Vitals, perquè cada decisió posterior tingui alguna cosa contra la qual mesurar-se.
Dissenyar-hi a dins
Tipografies, imatges i interacció es trien sabent què costen. Aquí és on es guanya o es perd gairebé tot el rendiment.
Construir mesurant cada canvi
Mida del bundle i mètriques vigilades a CI, perquè una regressió es detecti a la revisió i no en una auditoria trimestral.
Llançar amb les redireccions resoltes
URL antigues mapejades i monitoritzades. Un web nou i ràpid que t'enfonsa el posicionament no és una millora.
Preguntes freqüents
El que es pregunta en un projecte de web
Treballeu amb WordPress?
Sí, i també en migrem cap a fora. Diverses de les webs de dalt funcionen sobre WordPress perquè l'equip del client hi publica cada dia i això pesava més que els últims kilobytes. Si el teu equip és productiu amb WordPress i el web no és el coll d'ampolla, mantenir-lo pot ser la resposta correcta, i t'ho direm.
El nostre equip de màrqueting podrà continuar editant pàgines?
Sí. En un build estàtic combinem el front amb un CMS basat en Git, així que qui edita treballa en un panell d'administració normal mentre el que es publica continua sent prerenderitzat. Editar contingut no requereix un desenvolupador i tampoc no posa una base de dades al camí dels teus visitants.
Perdrem posicionament si refem el web?
No si la migració es fa bé, i és justament aquí on la majoria de redissenys fan mal. Les URL es mantenen idèntiques sempre que es pot, tot el que s'ha de moure rep un 301 i les metadades es comparen pàgina per pàgina amb el web antic abans del canvi.
Tractem aquesta comparació com una condició per publicar, no com una tasca de neteja posterior.
Podeu treballar amb la nostra guia de marca?
És bona part de la feina de dalt. Les guies de marca d'un titular de drets són estrictes per disseny, i implementar-les amb fidelitat és una disciplina diferent de dissenyar amb llibertat. Construïm segons la guia i plantegem els conflictes en lloc de resoldre'ls pel nostre compte.
Quant costa l'allotjament després?
En un web generat estàticament sol ser un import residual comparat amb un servidor gestionat, perquè pagues emmagatzematge i trànsit en lloc d'una màquina esperant peticions sense fer res. Un web WordPress costa el que costi el seu allotjament, i aquesta xifra te la donem abans que triïs.
Quant triga un web?
Un web corporatiu enfocat es mesura normalment en setmanes. En qualsevol cas reps un abast per escrit amb el seu cost abans de comprometre't, i no una forquilla que després es va eixamplant.
Envia'ns el teu web actual
Et direm què l'està frenant i què caldria per arreglar-ho, abans que gastis res.