Comprova imatges i longituds de text per garantir que el vostre lloc reaccioni correctament
Quan dissenyem llocs web i planifiquem com es mostrarà el contingut d'aquests llocs, sovint ho fem tenint en compte la situació ideal. Es reconeix que les capçaleres i les àrees de text tenen certes longituds, mentre que les imatges que acompanyen aquest text estan dissenyades per mostrar-se en dimensions que els permetran treballar com es pretén en el disseny general. Fins i tot si aquests elements són una mica fluids com a part d' una construcció de llocs web sensibles (que haurien de ser), hi haurà un límit a la flexibilitat que poden ser.
Si implementa un lloc web en un CMS (sistema de gestió de continguts) i permet que els clients gestionin aquest lloc i afegeixin contingut nou al llarg del temps, els límits que ha dissenyat seran posats a prova. Confieu en el fet que els vostres clients trobaran maneres d'alterar el lloc web que mai vau somiar que farien. Si no heu explicat situacions ben fora de les ideals amb les quals heu treballat en el vostre procés de disseny, el disseny d'aquest lloc podria estar en greu perill. Per aquest motiu, és especialment important que estressi provar tot el contingut del lloc web i els aspectes del disseny del lloc abans de llançar-lo. Aquests són alguns consells sobre com fer-ho.
Prova de talles d'imatge
Sens dubte, la forma més habitual de trencar el disseny del seu lloc web és afegir imatges de mida inadequada (aquesta també afecta negativament el rendiment global d'un lloc i causa velocitats de descàrrega lenta). Això inclou imatges que són massa grans, a més d'aquelles que són massa petites per funcionar com s'indica al vostre lloc web.
Fins i tot si feu servir CSS per forçar la mida d'aquestes imatges al vostre disseny, les imatges que estiguin fora d'escala amb les vostres especificacions originals per al lloc causaran problemes. Si les dimensions d'una imatge són incorrectes, el vostre CSS pot forçar que la imatge es mostri amb l'amplada i l'alçada apropiats, però es pot distorsionar la imatge i la seva relació d'aspecte. Això sens dubte tindrà un efecte negatiu en l'aspecte del vostre lloc, ja que una imatge massa petita serà "bufa" i perdrà la qualitat. Una imatge que sigui massa gran que es faci més petita amb CSS es vegi bé i conservi la seva qualitat, però la mida del fitxer podria ser poc raonable per a la seva utilització.
Quan proveu el vostre lloc web, assegureu-vos d'afegir imatges que no siguin de l'abast previst. Afegiu CSS i les tècniques d'imatge que responguin a aquests desafiaments canviant la mida de la imatge o, en el cas d'una relació d'aspecte incorrecta, també consideri utilitzar alguna cosa semblant a la propietat CSS clip per retallar la imatge segons sigui necessari.
Prova d'altres suports
A més de les imatges, també proveu altres mitjans, com ara els vídeos del vostre lloc, i comproveu com apareixeran aquests elements en el disseny mitjançant valors de mida i aspecte diferents. Una vegada més, tingueu en compte el caràcter sensible del vostre lloc i com funcionarà per a diferents mides de dispositius i pantalles .
Prova d'encapçalaments de text
Després de les imatges, la següent àrea del lloc web que provoca més problemes amb llocs web en directe gestionats per professionals no web és títols de text. Aquestes són les línies (suposadament) curtes de text que sovint començaran el contingut d'una pàgina o una secció d'aquesta pàgina. El text que apareix a sobre d'aquest paràgraf que llegeix "Prova d'encapçalaments de text" és un exemple d'això.
Si heu dissenyat un lloc per allotjar un encapçalament com aquest:
"Prova d'encapçalaments de text"
Però el vostre client utilitza el CMS per afegir un article amb un encapçalament com aquest:
"Prova d'encapçalaments de text en una varietat de pàgines web, tots amb requisits de talles diferents i necessitats d'usuaris"
Aleshores, el vostre disseny pot no ser capaç d'acomodar de manera neta tot el text addicional. De la mateixa manera que haureu de fer provar les imatges i els suports mitjançant l'addició d'entrades que es trobin fora de les mides inicialment dissenyades, així ho hauríeu de fer amb els encapçalaments de text per assegurar-vos que són prou flexibles per mostrar de manera efectiva fins i tot línies ultra llargues com ara una anterior.
Prova de longituds de text
Mantenint-se al tema del text, també voleu provar diferents longituds de text per al contingut principal de les pàgines . Això inclou text que és molt, molt llarg i molt curt, que pot ser el tema que condonarà molts dissenys de pàgines.
Atès que les pàgines web, per naturalesa, creixen en grandària per donar cabuda a l'alçada del text que contenen, les pàgines amb un munt de text solen escalar-se en alçada segons sigui necessari. A menys que hagueu restringit l'alçada de la pàgina (que no heu de fer si voleu que la vostra pàgina sigui flexible), el text addicional no hauria de ser un problema. Hi ha una mica de text massa petit, i és que molts dissenyadors s'obliden de provar en el seu procés de disseny.
Un petit text pot fer que la pàgina sigui incompleta o fins i tot trencada, així que assegureu-vos d'ampliar el contingut de la pàgina per veure què succeeix en aquestes instàncies i fer els ajustos necessaris al CSS del vostre lloc per gestionar-los.
Zoom de la pàgina de proves
Les persones amb problemes de visió poden estar utilitzant la funció de Page Zoom d'un navegador web per augmentar la mida de la vostra pàgina web. Si algú creu una quantitat significativa, el disseny es podria descompondre. Aquesta és una de les raons per les quals és possible que vulgueu utilitzar EM com a unitat de mesura per a les mides de font del vostre lloc web, així com les vostres consultes de mitjans . Atès que els EM són una unitat relativa de mesura (basada en la mida del text predeterminat d'aquest navegador), són més propicis per a dispositius fluids i flexibles del lloc web.
Proveu el vostre lloc web per fer zoom a la pàgina i no tanqueu només un o dos nivells de zoom. Amplieu el vostre lloc cap amunt i avall per diversos nivells per assegurar-vos que les vostres pàgines reaccionin com es pensa.
No oblideu descarregar velocitat i rendiment
A mesura que prova les implicacions del disseny de les decisions del client, no oblideu també atendre l'impacte que aquestes decisions tenen en el rendiment d'un lloc. Les imatges i el contingut que aquests clients afegiran podrien obstaculitzar la velocitat de descàrrega d'un lloc i destruir seriosament la usabilitat general del lloc. Planifiqui l'impacte d'aquestes addicions i faci la seva part en el procés de desenvolupament per minimitzar aquests efectes.
Si el vostre lloc web s'està construint amb un pressupost de rendiment, compartiu aquesta informació amb els vostres clients i mostreu-los com provar una pàgina web per obtenir mètriques de rendiment. Expliqueu-los la importància de mantenir aquests llindars establerts per a la mida de la pàgina i la velocitat de descàrrega i mostrar-los com les addicions que fan poden afectar el conjunt del lloc. Preneu-vos el temps per entrenar-los com mantenir el lloc funcionant i mirant bé. Sobre el tema de la formació ...
La formació del client és essencial
És important destacar la prova de les imatges, el text i altres elements de la pàgina del vostre lloc i crear estils que representaran casos extrems, però que mai no serà un reemplaçament per a la formació del client. El vostre treball a prova de butxaca d'un lloc hauria de ser, a més del temps que passeu, entrenar als vostres clients com atendre i administrar el lloc de manera efectiva. Al final, un client ben entrenat que entengui les seves responsabilitats i l'impacte de les decisions que facin en un lloc serà inestimable per als vostres esforços per mantenir aquest lloc funcionant i buscant el millor possible.