Inaugurando sitio

February 13, 2017

Anuncios 


Tal vez una de las cosas en las que más estábamos en falta, era el sitio de Cign.IO, y era porque simplemente no lográbamos plasmar una idea sencilla.

Hoy en día, lo más normal es encontrarse con un sitio que tenga una imagen de cabecera, seguidos por un separador que contiene una descripción del sitio o empresa, otro contenedor con 3 ó 4 elementos que identifican las características básicas, algunas imágenes con algún tipo de call-to-action, y un footer con información de contacto.

De hecho, existen tantos sitios que comparten la mismas características, que un desarrollador llamado Jeremy Karbowski hizo un sitio que reune todos esos elementos que nombré anteriormente. Advertencia: El sitio está en inglés y tiene lenguaje ofensivo.

Debido a que la mayoría de los sitios tienen esa disposición, o alguna similar, y están repletos de imágenes, es también muy normal encontrarse con una web que tarda bastante en cargar de forma completa, y cuando una conexión no es del todo buena, se traduce en tiempos de carga altos.

Sumado a todo esto, soy una persona que apunta más a lo simple y minimalista, lo que ayudaba a que no encontrásemos ese punto justo.

Todo esto nos llevó a dar vueltas por un montón de ideas, hasta que finalmente nos decidimos por mostrar nuestro logo, un subtítulo que describiese lo que hacemos, y la información de contacto, nada de los típicos: extensos listados de nuestros clientes, comentarios, imágenes de muestra en un carrusel, un formulario para contacto, mapa de dónde estamos ubicados, etc.

Con esa idea básica, decidimos lograr que nuestro sitio ocupase lo mínimo indispensable, cosa de que los tiempos de carga fuesen lo más bajo posibles.

Framework CSS

Si bien estábamos decididos a hacer que el sitio cargase lo más rápido posible, la idea era que también se viera bien en dispositivos móviles, después de todo, cada día utilizamos más los celulares para acceder a los sitios, y encontrarse con una página en la que está todo mezclado, o se ve como en una PC muchas veces termina poniéndonos de mal humor.

¿Solución? Buscar un framework que fuese lo más pequeño posible y que nos brindara una estructura en la que poder aplicar nuestros estilos más adelante. Uno de los más pequeños que encontramos y que nos daba una base bastante sólida en la que trabajar, era Pure (En inglés, puro), y fue con lo que nos decidimos hacerlo.

Si son como yo, que lo segundo que hacen al entrar a un sitio es abrir la consola y ver qué hay debajo, ya deben haber notado que el logo que está en la parte superior de este blog es un archivo svg en vez de un archivo png, o jpg ¿La razón? Ocupan mucho menos espacio y es posible redimensionarlas sin perder calidad

De esta misma forma, el logo de nuestro sitio (Créditos a Hernán - le debo el link a su sitio) también está hecho en un archivo SVG que ocupa la treinteava parte de un jpg y puede redimensionarse sin perder calidad.

Resultado final

Una vez puestas todas estas herramientas en marcha, y con un par de retoques, nuestro sitio final terminó pesando menos de 20KB, de los cuales 11 son parte de Google Analytics.

¿Cómo se compara esto con otros sitios?

La página principal de Facebook ocupa unos 330KB, Instagram 421KB, Google está cerca de los 500KB (Varía de acuerdo al doodle), Tumblr por encima de los 5MB, Twitter 9MB o más.

¿Qué significa esto?

En conexiones de alta velocidad, sólo será una carga instantánea, en conexiones lentas pues, la carga nunca llegó a superar el segundo.

Palabras finales

Honestamente, nunca pensé que un sitio tan simple pudiese llevar tantas complicaciones antes de poder ver el resultado final, el próximo post o dos, tendrán todos los aspectos técnicos que fuimos viendo a lo largo del camino, y las dificultades que nos encontramos.

¡Hasta la próxima!