Fem jocs, assolim estrelles

L’Slider és un element d’una pàgina web que mostra múltiples imatges i text que s’hi alternen i que normalment es situa a la part superior de la mateixa amb l’objectiu de destacar i donar més visibilitat a una sèrie d’elements publicitaris o cabdals del propi site

En aquest moment us plantejo un exemple realitzat amb Javascript que situa aquesta acció, de lluïment web -amb inici automàtic, tot fent ús del cursor o bé amb el botó inferior-, entorn a Hergé i als seus personatges més destacats realitzat com a exemple base de programació aplicada d’un Front-End Developer a la IFCD0110

Aquest element gràfic pot tenir un gran impacte visual si es crea un disseny professional, i pot millorar la qualitat gràfica general de tota la web, doncs que una web llueixi bé i tingui un aspecte espectacular és una característica que té molt de valor pels usuaris que desitgen tant integració com informació clara des de la primera aterrada, a l’espai, sobre els seus aspectes més destacats

El contingut que es mostra tindrà més notorietat, atès que se sol posar a la part superior com a carrusel dinàmic que permet mostrar diversos aspectes repartits a les diapositives que el componen, encara que cada imatge nova tingui menys visibilitat que l’anterior; per tant, l’slider intentarà mostrar primer allò que, per a la firma del site, sigui més important o resulti publicitàriament més adient pel seu negoci

Així què un slider ben pensat pot ser un punt fort per a tota pàgina web. Per exemple, en grans botigues en línia com ara Amazon o Aliexpress segueixen utilitzant-los per enganxar als usuaris amb les seves promocions, però no les posen desinteressament -ni aquestes ni els carrusels-, perquè saben molt bé el que es fan i ara us explico, com es valen amb les següents premisses, de la seva funcionalitat:

• Es busca, amb el disseny, vendre el seu article estrella o més destacat
• La seva finalitat és donar visibilitat a productes relacionats que solen ser temporals a les dates, festivitats o esdeveniments pròxims com ara Sant Valentí, Carnestoltes, Nadal o per exemple el Dia del Pare
• Es pretén convèncer als clients del fet que compten amb “una última oportunitat” per fer-se amb allò publicitat, ja que com a usuaris de la xarxa cerquen moltes vegades ofertes, productes fora de catàleg o descomptes que aquí els tenen, degudament presentats, a primer cop d’ull
• A partir de la cuarta diaposiva o imatge el seu contingut és variat amb subscripcions premium, categories d’altra mercaderia, vals per a tercers i altres promocions
• És recurrent i cíclic per ressaltar objectius clars i, en el cas d’un comerç electrònic amb seu física, guiar als usuaris temporals digitals a seccions concretes i més descomptes perquè en siguin, a partir d’aleshores, clients destacats també de la botiga o negoci tradicional

Però no tot són flors i violes perquè hi trobem certs inconvenients que cal tenir presents a l’hora de fer-los servir com ara els següents aspectes que, des d’un punt de vista més tècnic, són molt importants:

1. Afecta la velocitat del web
2. L’slider és un dels elements més pesants en el disseny d’una pàgina perquè, en la majoria dels casos, les imatges ni s’han escalat, ni s’han comprimit
3. Més enllà de cinc imatges a 2 megues i certs efectes n’hi ha prou per dir-li adeu a una càrrega optimitzada de la web
4. També hi ha el problema de la càrrega del codi, ja que molts connectors de certs programaris utilitzen codis pesants, que encara que poc, també influeixen en la seva velocitat de reacció
5. Per acabar, cal tenir present que si abusem dels efectes dels elements o fem ús de vídeos de transició el problema s’accentua i no només tindrem un web malalt, des del punt de vista formal, sinó que l’acabarem de fer palmar

Aleshores què, utilitzem un slider o no?

Aquesta és la gran pregunta a fer-se perquè últimament cal veure com la majoria de professionals SEO i del disseny s’han tornat bojos per optimitzar la velocitat del web i això és degut a l’auge del minimalisme a les creacions ajuntat, entre altres coses, amb les recomanacions i bones pràctiques digitals publicades no fa gaire sobre la velocitat de càrrega del sempre omnipresent Google

Per tant, a la majoria de tècnics els agradaria que desaparegués aquest element i ens diran, per norma general, que no en fem servir cap, però en el cas dels dissenyadors gràfics i altres usuaris el criteri és del tot diferent perquè tenir un element realment cridaner i dinàmic, on poder donar curs tant al desenvolupament de la marca com a la imaginació, és cabdal per a la integració de tot plegat

Sincerament, penso que el terme mitjà existeix i que no s’ha de rebutjar l’ús d’aquest element o emprar-lo sense tenir en compte el que es fa. Cal adonar-se què als dispositius mòbils regna el desplaçament de dalt a baix perquè és més còmoda la navegació vertical pel tipus de pantalla, en canvi, per la seva banda, aquest element disposa les diapositives o imatges lateralment, cosa que trenca la navegació pels usuaris i, a més, es duu a terme amb botons de tipus fletxa o de desplaçament molt petits que són no difícils d’utilitzar, sinó quasi impossibles de veure, en aquestes pantalles

Unit al cas anterior tenim un problema afegit amb el SEO, com ja he apuntat, que està relacionat directament amb el temps de càrrega de la pàgina, per això, carregar un element pesant en una pàgina que ja per si mateixa és lenta pot arribar a influir en el seu posicionament. Tot i que el problema principal per al lloc web no és tant la càrrega d’un element com aquest, sinó que es configurin amb correcció els títols amb etiquetes tipus i paraules clau o la no optimització prèvia de les imatges que el componen

Aquí us deixo tres consideracions que ens apuntaren per poder millorar l’efectivitat d’un slider al web:
Planteja’t si necessites o realment el vols a la teva web
Planteja’t si pots substituir el carrusel per una capçalera d’imatge única que sempre pots anar variant, per exemple, a cada quinzena
No creïs, en cap cas, un a pantalla completa, ja que impedeixen veure la continuïtat de la web i cal adaptar-los, sempre, o treure’ls per a la vista del mòbil i la tauleta sent això un requisit bàsic

I, per pal·liar l’efecte de càrrega caldria genèricament:
Reduir el nombre de diapositives al mínim
Comprimir les imatges o vídeos
No recarregar el carrusel amb efectes innecessaris
Revisar que no dupliquem títols i que els tinguem correctament configurats
Tenir en compte i molta cura del text que hi apareix i dels enllaços per no perdre ni autoritat, ni rellevància

I, no caldria utilitzar-los si:
No ho necessitem realment
Si no hem de crear uns objectius lògics concrets
Si la pàgina web ja és pesada o molt gran en contingut

NOTA: Com aquesta entrada tracta d’un exemple bàsic -que per veure’l en forma de codi script només cal prémer, una vegada executat, tot cercant el menú contextual i triar: mostrar el codi font de la pàgina– i nosaltres expressem la dificultat dels mateixos en forma gràfica direm que aquest petit programa tipus carrusel té un nivell d’un quart d’estrella: