Diseño web de www.skippertime.com
Diseño web de la tienda de relojes www.skippertime.com
Después de llevar a cabo la optimización y mantenimiento de la página web www.switzerwatch.com era cuestión de tiempo encontrarme con un proyecto de diseño íntegro de un sitio de venta de relojes online. Este vino por parte de www.skippertime.com, una nueva tienda de venta de relojes online que no solo se centraría en una sola marca de relojes sino en las principales marcas de relojes del mercado: Tissot, Certina, Casio, Seiko...
Con la posibilidad de que además se incluyera algún día joyería en el sitio opte por crear una página de inicio con los enlaces a las categorías-marcas principales del sitio, con la descripción de la tienda online y una sección donde se mostraran todos los relojes con enlaces a las diferentes marcas.
La idea era crear el mayor catálogo de relojes online con la mayor información posible de cada uno de los relojes y marcas, que además fuera completamente adaptativa y responsive para cualquier tipo de tamaño de ventana y de dispositivo y que contara con imágenes amplias para poder ver cada uno de los relojes en detalle, haciendo uso de los últimos avances en PHP, HTML5, CSS y javascript.
Tras estudiarme los catálogos de las diferentes marcas de relojes Tissot, Certina, Casio, y Seiko (hasta el momento había trabajado únicamente con relojes de la marca Swatch), el resultado fue diferenciar entre características y funciones, creando campos “fijos” para cada uno de ellos, pero que además admiten una descripción para completar su información, de manera que la búsqueda pudiera realizarse mediante el campo fijo y en la información del reloj apareciera la descripción ampliada en el caso de que la hubiera. Además fui aún más allá y cada una de las características y funciones admiten una descripción mayor para informar a los posibles clientes con una explicación de cada una de ellas y de sus distintas variedades, lo que permite mostrar los relojes según cada una de estas funciones o características haciendo más sencillo el encontrar un reloj de entre todos los modelos de la tienda.
En cuanto al CSS utilice una tipografía de google fonts para el texto, Font Awesome para los distintos iconos, un CSS distinto según los cuatro posibles tamaños: 1250px, 1024px, 650px y por debajo de esta última medida para móviles, etc.
Es la primera página web que consigo diseñar con una optimización según PageSpeed Insights del 100% y según GTmetrix del 99% (dependiendo de la página que se analice). El tiempo de la página tiene una media de carga de unos 3 segundos aproximadamente, aunque al utilizar la indicación “Above The Fold Optimization” el tiempo de carga de la parte visible se encuentra prácticamente por debajo del segundo, el servidor responde más tarde que la entrega de los distintos elementos de la página web.