Com es veu la teva web CSS?

Dissenyar una web seguint estàndards és cada cop més habitual, qui més qui menys intenta programar sense taules, aplicar CSS i fer una bona web semàntica. Per açò estrenam sub-secció de CSS al bloc.

De fet són molts els llocs web que estàn aprofitant aquesta empenta dels estàndards web i cada dia hi ha més galeries de dissenys web basats en CSS. La potència dels CSS i la seva versatilitat queda demostrada fent una breu volta per csszengarden.com, cssbeauty.com, screenspire.com o la més propera CSS-mania, entre d’altres.

Però no tot són flors i violes. Molts de cops la web dissenyada quan es visualitza amb diferents navegadors web es veu una mica diferent. Què passa?
Senzill, no tots interpreten les CSS de la mateixa manera. Així i tot els navegadors més moderns com Firefox, Opera, Konqueror o Safari (Mac) interpreten les CSS d’una forma bastant homogènea llevat de petits detalls que no alteren massa la representació del disseny web.

No és així però amb Internet Explorer que es troba endarrerit tecnològicament respecte els seus competidors de mercat, donant molts de problemes i mals de caps als desenvolupadors web. De fet ja fa mesos que anuncien i fan proves amb una nova versió, la 7, amb la que pretenen assolir un millor navegador web i encara no l’han llançada al públic.
La sol·lució als problemes amb l’Explorer quan interpreta els CSS són hacks, petites modificacions que fan que amb l’Explorer es vegi com amb altres navegadors. La desgràcia seria no veure aquests falls d’interpretació del navegador abans de publicar la teva web i deixar als teus usuaris, que encara emprin Explorer (per exemple), veient una web desencaixada, descol·locada o incompleta.

Afortunadamet existeixen serveis web que et fan screenshots o pantallades de com seria la web vista en cada un dels navegadors web existents.
Una opció seria instal·lar-te tots els navegadors al teu ordinador i anar fent proves un a un. Però com que no sòl ser el cas, existeixen serveis com browsershots i browsercam que t’ajuden en aquestes feines.

Browser Shots és el meu preferit per què a més de ser gratuït em funciona de meravella.
Pots escollir la ressolució que vols, 800×600px o 1024×768px i a més tens un bon llistat de navegadors disponibles (Linux, Mac i Windows) i escolleixes els que vols veure. En unes hores tens el resultat i la calitat és alta. La única pega és que no has de ser inpacient perquè hi ha dies que la cúa de peticions és llarga.

Browser Cam ofereix dos serveis diferents.: captures de pantalla i accés remot a les seves màquines per fer-t’ho tu mateix. el servei és molt ràpid, casi amb resultats instantanis però és de pagament.

Finalment si sols vols saber com funcionaria la teva web damunt un Safari per Mac pots fer ús de Safari Test. Una aplicació web instantània i gratuïta. Basta introduïr la teva adreça web, escollir la ressolució de pantalla i en uns segons et mostra amb un PNG com queda la teva web damunt un Safari.

Des d’ara pot ser tenim menys excuses per no procurar fer els nostres dissenys compatibles i/o usables amb tots els navegadors web existents, perquè entre d’altres coses i per desgràcia no tots els usuaris coneixen l’existència d’altra programari millor que l’Explorer de Microsoft. Mentre així no sigui, no veig ètic deixar fòra d’un lloc web a un usuari pel fet que empri un programari o un altra.

I si seguiu emprant Explorer com a navegador, féu una prova amb Firefox. Vos captivarà!

Per cert, que se n’ha fet del navegador social Flock?…

Tags Technorati : disseny web, css, screenshots, navegadors, oscarbarber